Design system
GitHub repository
Figma file
Foundations
QR Code
Typography
Oswald Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Oswald Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Oswald Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Oswald Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Oswald Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Oswald Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Title
H1 Title

This is an h1 title

H2 Title

This is an h2 title

H3 Title

This is an H3 title

H4 Title

This is an H3 title

H5 Title
This is an H5 title
H6 Title
This is an H6 title
Emphasis inside a title

An underlined and a highlighted word

H1 Title

This is an h1 title

H2 Title

This is an h2 title

H3 Title

This is an H3 title

H4 Title

This is an H3 title

H5 Title
This is an H5 title
H6 Title
This is an H6 title
Paragraphs
Paragraph XL

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Color
Neutral
.bg-neutral-100
#FAFBFC
.bg-neutral-200
#EFF0F2
.bg-neutral-300
#DCDEE3
.bg-neutral-400
#D6D8E0
.bg-neutral-500
#AEB2BC
.bg-neutral-600
#9499A5
.bg-neutral
#7F8493
.bg-neutral-800
#6B7180
.bg-neutral-900
#595E6A
.bg-neutral-1000
#474B55
.bg-neutral-1100
#363840
.bg-neutral-1200
#24262B
.bg-neutral-1300
#121315
Contrast
.bg-contrast-100
#D4DEED
.bg-contrast-200
#A9BDDB
.bg-contrast-300
#779CD3
.bg-contrast-400
#3C5E90
.bg-contrast-500
#365481
.bg-contrast-600
#2A4265
.bg-contrast
#1B2A41
.bg-contrast-800
#1B2A41
.bg-contrast-900
#0B1A31
.bg-contrast-1000
#071224
.bg-contrast-1100
#020E1E
Secondary
.bg-secondary-100
#F2F4FD
.bg-secondary-200
#D3D8F9
.bg-secondary-300
#B9C0EE
.bg-secondary-400
#939DDF
.bg-secondary-500
#7583E3
.bg-secondary-600
#5F71F5
.bg-secondary
#4156F6
.bg-secondary-800
#3045E3
.bg-secondary-900
#2738BE
.bg-secondary-1000
#14249B
.bg-secondary-1100
#091678
Danger
.bg-danger-100
#F9EEEE
.bg-danger-200
#F2DBDB
.bg-danger-300
#F4D5CB
.bg-danger-400
#FFBFB1
.bg-danger-500
#F39884
.bg-danger-600
#F98369
.bg-danger
#E96D51
.bg-danger-800
#E55A5A
.bg-danger-900
#CC5050
.bg-danger-1000
#B24646
.bg-danger-1100
#993C3C
.bg-danger-1200
#7F3232
Success
.bg-success-100
#DCFFE1
.bg-success-200
#CEFBD5
.bg-success-300
#A2F7AF
.bg-success-400
#94EDA1
.bg-success-500
#7BE78B
.bg-success-600
#69E47B
.bg-success
#66E979
.bg-success-800
#53DC67
.bg-success-900
#46D45B
.bg-success-1000
#42BC54
.bg-success-1100
#45A553
.bg-success-1200
#308B3D
Warning
.bg-warning-100
#FFFBED
.bg-warning-200
#FDF5D8
.bg-warning-300
#FDF0C1
.bg-warning-400
#FAE7A1
.bg-warning-500
#F6DC7C
.bg-warning-600
#EACE69
.bg-warning
#E9C74C
.bg-warning-800
#D48538
.bg-warning-900
#BC7632
.bg-warning-1000
#A5672C
.bg-warning-1100
#8D5825
.bg-warning-1200
#764A1F
Spacing
No. Size REM Pixels
1 0.25 rem 4px
.w-1
2 0.5 rem 8px
.w-2
3 0.75 rem 12px
.w-3
4 1 rem 16px
.w-4
5 1.25 rem 20px
.w-5
6 1.5 rem 24px
.w-6
7 1.75 rem 28px
.w-7
8 2 rem 32px
.w-8
9 2.25 rem 36px
.w-9
10 2.5 rem 40px
.w-10
11 3 rem 48px
.w-12
12 3.5 rem 56px
.w-14
13 4 rem 64px
.w-16
14 5 rem 80px
.w-20
15 6 rem 96px
.w-24
16 8 rem 128px
.w-32
17 12 rem 192px
.w-48
18 16 rem 256px
.w-64
19 20 rem 320px
.w-80
Grid
Column system
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-2/12
w-2/12
w-2/12
w-2/12
w-2/12
w-2/12
w-1/3
w-1/3
w-1/3
w-1/3
w-1/4
w-1/4
w-1/4
w-1/2
w-1/2
w-1/5
w-1/5
w-1/5
w-1/5
w-1/5
Container Queries
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-1/12
w-2/12
w-2/12
w-2/12
w-2/12
w-2/12
w-2/12
w-1/3
w-1/3
w-1/3
w-1/3
w-1/4
w-1/4
w-1/4
w-1/2
w-1/2
w-1/5
w-1/5
w-1/5
w-1/5
w-1/5
Border radius
.squircle-sm
4px
.squircle
8px
.squircle-md
12px
.squircle-lg
16px
.squircle-xl
24px
.rounded-full
50%
Backdrop filter
.backdrop-blur-sm
4px
.backdrop-blur
8px
.backdrop-blur-lg
16px
Shadow
.shadow-xs
.shadow-sm
.shadow
.shadow-lg
.shadow-darkXs
.shadow-darkSm
.shadow-dark
.shadow-darkLg
Iconography
All icons
Base compononents
Button
Contrast
Contrast border
Contrast ghost
Secondary
Secondary border
Secondary ghost
Danger
Danger border
Danger ghost
success
success border
success ghost
Light
Light border
Light ghost
Input Text
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Optional
Helper text
Helper text
Helper text
Helper text
Optional
Helper text
Optional
Helper text
Optional
Helper text
Optional
Helper text
Optional
Optional
Optional
Optional
Helper text
Helper text
Helper text
Helper text
Optional
Helper text
Optional
Helper text
Optional
Helper text
Optional
Helper text
Input Search
Input Number
Select
Input Tag
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
File upload
Switch
Checkbox
Radio
Range Slider
Notifications
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
Chip & Tag
Chip LG
Chip
Chip SM
Chip XS
Chip LG
Chip
Chip SM
Chip XS
Chip LG
Chip
Chip SM
Chip XS
Chip LG
Chip
Chip SM
Chip XS
Chip Border LG
Chip Border
Chip Border SM
Chip Border XS
Chip Border LG
Chip Border
Chip Border SM
Chip Border XS
Chip Border LG
Chip Border
Chip Border SM
Chip Border XS
Chip Border LG
Chip Border
Chip Border SM
Chip Border XS
Chip Ghost LG
Chip Ghost
Chip Ghost SM
Chip Ghost XS
Chip Ghost LG
Chip Ghost
Chip Ghost SM
Chip Ghost XS
Chip Ghost LG
Chip Ghost
Chip Ghost SM
Chip Ghost XS
Chip Ghost LG
Chip Ghost
Chip Ghost SM
Chip Ghost XS
Chip LG
Chip
Chip SM
Chip XS
Chip LG
Chip
Chip SM
Chip XS
Chip LG
Chip
Chip SM
Chip XS
Chip LG
Chip
Chip SM
Chip XS
Chip Border LG
Chip Border
Chip Border SM
Chip Border XS
Chip Border LG
Chip Border
Chip Border SM
Chip Border XS
Chip Ghost LG
Chip Ghost
Chip Ghost SM
Chip Ghost XS
Chip Ghost LG
Chip Ghost
Chip Ghost SM
Chip Ghost XS
Avatar
12
12
LG
BS
SM
XS
LG
BS
SM
XS
LG
12
BS
SM
XS
LG
12
BS
SM
XS
+4
+4
+4
+4
12
12
LG
BS
SM
XS
LG
BS
SM
XS
LG
12
BS
SM
XS
LG
12
BS
SM
XS
+4
+4
+4
+4
Tooltip
Chat
Table
Prebuild components

The page-level blocks — heroes, cards, bands and the footer — live on their own page, so this one stays about the foundations and the base components.

Browse prebuild components