Design System
Color tokens, typography scale, and component foundations.
Colors
Primary
DEFAULT#0081C3
surface#E6F2F9
border#99CDE7
hover#00679C
pressed#00344E
Secondary
DEFAULT#009A87
surface#E5F5F3
border#CCEBE9
hover#007B6C
pressed#005C51
Neutral
white#FFFFFF
surface#F9F9F9
line#E7E7E7
body-3#9C9C9D
body-2#6D6E6E
body-1#3F3F40
main#101112
Color Palette
blue
| Color | Shade | Hex |
|---|---|---|
| 5 | #E6F2F9 | |
| 10 | #CCE6F3 | |
| 20 | #99CDE7 | |
| 30 | #66B3DB | |
| 40 | #339ACF | |
| 50 | #0081C3 | |
| 60 | #00679C | |
| 70 | #004D75 | |
| 80 | #00344E | |
| 90 | #001A27 | |
| 95 | #000D14 |
green
| Color | Shade | Hex |
|---|---|---|
| 5 | #E5F5F3 | |
| 10 | #CCEBE9 | |
| 20 | #99D7CF | |
| 30 | #66C2B7 | |
| 40 | #33AE9F | |
| 50 | #009A87 | |
| 60 | #007B6C | |
| 70 | #005C51 | |
| 80 | #003E36 | |
| 90 | #001F1B | |
| 95 | #000F0E |
Typography
Typeface
Plus Jakarta Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 (@#$%^&*)
Type Scale Desktop
Aa
Display
RegularSemiBoldBold
Display / Large / 64
64
64 | 120%
Webarq Block
Display / Medium / 56
56
56 | 120%
Webarq Block
Aa
Title
RegularSemiBoldBold
Headline / H2 / 48
48
48 | 120%
Webarq Block
Headline / H3 / 40
40
40 | 130%
Webarq Block
Headline / H4 / 32
32
32 | 130%
Webarq Block
Aa
Subtitle
RegularSemiBoldBold
Subtitle / H5 / 24
24
24 | 140%
Webarq Block
Subtitle / H6 / 20
20
20 | 160%
Webarq Block
Aa
Body
RegularSemiBoldBold
Body / Paragraph / 16
16
16 | 180%
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Body / Large / 16
16
16 | 180%
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Body / Medium / 14
14
14 | 160%
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Body / Small / 12
12
12 | 160%
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Body / Overline / 12
12
12 | 100%
Webarq Block
Aa
Label
RegularSemiBoldBold
Label / Large / 16
16
16 | 24
Webarq Block
Label / Medium / 14
14
14 | 20
Webarq Block
Label / Small / 12
12
12 | 16
Webarq Block