CIEE Design System | Foundations

Typography

Inter

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*()

Font size: 56px / 3.5rem | Line height: 120%

Heading 1

Font size: 48px / 3rem | Line height: 120%

Heading 2

Font size: 40px / 2.5rem | Line height: 120%

Heading 3

Font size: 32px / 2rem | Line height: 130%

Heading 4

Font size: 24px / 1.5rem | Line height: 140%

Heading 5

Font size: 20px / 1.25rem | Line height: 140%

Heading 6

Texts

Text large extra bold

Text medium extra bold

Text regular extra bold

Text small extra bold

Text tiny extra bold

Text large bold

Text medium bold

Text regular bold

Text small bold

Text tiny bold

Text large semi bold

Text medium semi bold

Text regular semi bold

Text small semi bold

Text tiny semi bold

Text large Medium

Text medium medium

Text regular medium

Text small medium

Text tiny medium

Text large Normal

Text medium normal

Text regular normal

Text small normal

Text tiny normal

Text large Light

Text medium Light

Text regular Light

Text small Light

Text tiny Light

Colors

Primary 900
#4C1D95

Primary 50
#F5F3FF

Primary 100
#EDE9FE

Primary 200
#DDD6FE

Primary 300
#C4B5FD

Primary 400
#A78BFA

Primary 500
#8B5CF6

Primary 600
#7C3AED

Primary 700
#6D28D9

Primary 800
#5B21B6

Primary 900
#4C1D95

Primary 500
#F97316

Secondary 50
#FFF7ED

Secondary 100
#FFEDD5

Secondary 200
#FED7AA

Secondary 300
#FDBA74

Secondary 400
#FB923C

Secondary 500
#F97316

Secondary 600
#EA580C

Secondary 700
#C2410C

Secondary 800
#9A3412

Secondary 900
#7C2D12

Blue Gray 900
#0F172A

White
#FFFFFF

Blue Gray 50
#F8FAFC

Blue Gray 100
#F1F5F9

Blue Gray 200
#E2E8F0

Blue Gray 300
#CBD5E1

Blue Gray 400
#94A3B8

Blue Gray 500
#64748B

Blue Gray 600
#475569

Blue Gray 700
#334155

Blue Gray 800
#1E293B