Brand Guidelines & Visual Identity

December 2025

Contents

Download Assets

02

Color Palette — Primary

Our core color system built around neutral tones and signature lilac accent.

Neutral

White

#FFFFFF

Lightest

#EBEFF8

Lighter

#C8CEDA

Light

#A5ACBA

Neutral

#82899A

Dark

#5F6678

Darker

#3C4354

Darkest

#1B1F29

Lilac — Brand Primary

Lightest

#F4F2FF

Lighter

#E9E5FF

Light

#B3A6FF

Lilac

#9381FF

Dark

#7567CC

Darker

#413872

Darkest

#2C264C

Human Program — Brand Kit 3 / 7

02

Color Palette — Secondary

Extended palette for UI states, feedback, and visual variety.

Orange

Lightest

#FFF6ED

Lighter

#FFDDB8

Light

#FFC278

Orange

#FFA53A

Dark

#D4851E

Darker

#9C5F10

Darkest

#5C3709

Pink

Lightest

#FFE8E8

Lighter

#FCCFCF

Light

#FFB3B3

Pink

#FF8686

Dark

#B44C4A

Darker

#5C2726

Darkest

#4A2323

Blue

Lightest

#F1FBFF

Lighter

#E4F7FF

Light

#A0E3FF

Blue

#78D7FF

Dark

#60ACCC

Darker

#296E90

Darkest

#1B3F5A

Green

Lightest

#FAFFEB

Lighter

#ECFAAB

Light

#D6F268

Green

#C0E832

Dark

#9FC426

Darker

#749119

Darkest

#455710

Human Program — Brand Kit 4 / 7

03

Typography

Outfit is our primary typeface — modern, geometric, and highly legible across all sizes.

Download Outfit Font
Style Sample Desktop Mobile
Heading 1 Aa 72px 40px
Heading 2 Aa 52px 36px
Heading 3 Aa 44px 32px
Heading 4 Aa 36px 24px
Heading 5 Aa 28px 20px
Heading 6 Aa 22px 18px
Text Large The quick brown fox jumps 22px 18px
Text Medium The quick brown fox jumps over the lazy dog 18px 16px
Text Regular The quick brown fox jumps over the lazy dog 16px 16px
Text Small The quick brown fox jumps over the lazy dog 14px 14px
Text Tiny The quick brown fox jumps over the lazy dog 12px 12px
Human Program — Brand Kit 5 / 7

04

Spacing & Sizing

Consistent spacing tokens for layout and component design. Values shown as Desktop / Mobile.

Containers

Small 768px
Medium 1024px
Large 1280px

Max Widths

XXSmall 320px
XSmall 400px
Small 480px
Medium 560px
Large 768px
XLarge 1024px
XXLarge 1280px

Section Padding

Small
48px 32px
Medium
80px 48px
Large
112px 64px

Page Padding

Global
64px 20px
Global Full
45px 0px
Human Program — Brand Kit 6 / 7

05

UI Styles

Border radius and stroke specifications for consistent component styling.

Border Radius

None0px

X-Small5px

Small12px

Medium24px

Large50px

Round999px

Strokes

Border1px

Divider2px

White Opacity Scale

5%
10%
15%
20%
30%
40%
50%
60%

Neutral Darkest Opacity Scale

5%
10%
15%
20%
30%
40%
50%
60%
Human Program — Brand Kit 7 / 8

06

App Brand Guidelines

Visual guidelines for the Human Program mobile and desktop applications in dark and light themes.

Download Assets

Splash Screens

Splash Icon

Dark Splash

Neutral Darkest background with color icon.

Splash Icon

Brand Splash

Lilac brand background with white icon.

Profile Screen

Profile
A
4
Topics
learned
1
Days
in a row
8.9
Hours
spent
2288
Token
balance
Knowledge Score
0.06%
Take Comprehensive Exam
Course
Universal School - Essentials
Mastered 0.1% Known 0.1%
Take Placement Exam
Personal Information
Study Timeline

Dark Theme Profile

User profile with dark background and brand color cards.

Profile
A
4
Topics
learned
1
Days
in a row
8.9
Hours
spent
2288
Token
balance
Knowledge Score
0.06%
Take Comprehensive Exam
Course
Universal School - Essentials
Mastered 0.1% Known 0.1%
Take Placement Exam
Personal Information
Study Timeline
Topics learned
✓ 2025/10/01
Counting
✓ 2025/10/01
Numbers

Light Theme Profile

User profile with light background and brand color cards.

Human Program — Brand Kit 8 / 8