Design Guidelines
| Style name | Font | Weight | font-weight | Size (in REM) | Letter spacing (in rem) | Line Height | Size (in Pt) | Letter spacing |
|---|---|---|---|---|---|---|---|---|
| Headline 1 | Work Sans | SemiBold | 600 | 2.5 | 0.00 | 130% | 40 | 0% |
| Headline 2 | Work Sans | SemiBold | 600 | 2.25 | 0.00 | 120% | 36 | 0% |
| Headline 3 | Work Sans | Medium | 500 | 2 | 0.00 | 120% | 32 | 0% |
| Headline 4 | Work Sans | SemiBold | 600 | 1.75 | 0.00 | 120% | 28 | 0% |
| Headline 5 | Work Sans | Medium | 500 | 1.625 | 0.00 | 120% | 26 | 0% |
| Headline 6 | Work Sans | Medium | 500 | 1.5 | 0.00 | 120% | 24 | 0% |
| Subheader 1 | Work Sans | SemiBold | 600 | 1.5 | -0.04 | 125% | 24 | -4% |
| Subheader 2 | Work Sans | Medium | 500 | 1.5 | -0.04 | 125% | 24 | -4% |
| Subheader 3 | Work Sans | Regular | 400 | 1.375 | -0.04 | 130% | 22 | -4% |
| Button text | Work Sans | SemiBold | 600 | 1.25 | 0.02 | 130% | 20 | 2% |
| Code sample | Roboto Mono | Medium | 500 | 1 | 0.00 | 140% | 16 | 0% |
| Overline | Work Sans | Bold | 700 | 1.125 | 0.22 | 120% | 18 | 22% |
| Body 1 | Archivo | Regular | 400 | 1.125 | 0.00 | 140% | 18 | 0% |
| Body 1 Italic | Archivo | Italic | 400 | 1.125 | 0.00 | 140% | 18 | 0% |
| Body 1 Bold | Archivo | SemiBold | 600 | 1.125 | 0.00 | 140% | 18 | 0% |
| Body 2 | Archivo | Regular | 400 | 1 | 0.00 | 135% | 16 | 0% |
| Body 2 Italic | Archivo | Italic | 400 | 1 | 0.00 | 135% | 16 | 0% |
| Caption | Archivo | Italic | 400 | 0.875 | 0.00 | 140% | 14 | 0% |
| Style name | Font | Weight | font-weight | Size (in REM) | Letter spacing (in rem) | Line Height | Size (in Pt) | Letter spacing |
|---|---|---|---|---|---|---|---|---|
| Headline 1 | Work Sans | SemiBold | 600 | 2 | 0.00 | 130% | 32 | 0% |
| Headline 2 | Work Sans | SemiBold | 600 | 1.75 | 0.00 | 120% | 28 | 0% |
| Headline 3 | Work Sans | Medium | 500 | 1.5 | 0.00 | 140% | 24 | 0% |
| Headline 4 | Work Sans | SemiBold | 600 | 1.5 | 0.00 | 120% | 24 | 0% |
| Headline 5 | Work Sans | Medium | 500 | 1.5 | 0.00 | 120% | 24 | 0% |
| Headline 6 | Work Sans | Medium | 500 | 1.375 | 0.00 | 120% | 22 | 0% |
| Subheader 1 | Work Sans | SemiBold | 600 | 1.5 | -0.04 | 140% | 24 | -4% |
| Subheader 2 | Work Sans | Medium | 500 | 1.5 | -0.04 | 140% | 24 | -4% |
| Subheader 3 | Work Sans | Regular | 400 | 1.25 | -0.04 | 140% | 20 | -4% |
| Button text | Work Sans | SemiBold | 600 | 1.25 | 0.04 | 130% | 20 | 4% |
| Code sample | Roboto Mono | Medium | 500 | 0.875 | 0.00 | 140% | 14 | 0% |
| Overline | Work Sans | Bold | 700 | 0.75 | 0.22 | 120% | 12 | 22% |
| Body 1 | Archivo | Regular | 400 | 1 | 0.00 | 150% | 16 | 0% |
| Body 1 Italic | Archivo | Italic | 400 | 1 | 0.00 | 150% | 16 | 0% |
| Body 1 Bold | Archivo | SemiBold | 600 | 1 | 0.00 | 150% | 16 | 0% |
| Caption | Archivo | Italic | 400 | 0.75 | 0.00 | 140% | 12 | 0% |
| Purpose | Color Name | Variant Name | Value | Preview |
|---|---|---|---|---|
| Generic | Blue | Pale | #E4F4FF | |
| Generic | Blue | Light | #8BC7DC | |
| Generic | Blue | Primary | #127DB3 | |
| Generic | Blue | Dark | #153E67 | |
| Generic | Pale Pink | Pale | #FFE2F5 | |
| Generic | Pink | Primary | #FCC1E3 | |
| Generic | Pink | Dark | #4F0C28 | |
| Generic | Blue Shadow | Primary | #0B2568 | |
| Generic | Card Background | Primary | #EFF7FC | |
| Generic | Card Background | Dark Theme | #173655 | |
| Generic | Dark Theme Background | Primary | #0B2540 |
| Purpose | Color Name | Variant Name | Value | Opacity |
|---|---|---|---|---|
| Text | Black | High–impact | #000000 | 87% opacity |
| Text | Black | Mid–impact | #000000 | 64% opacity |
| Text | Black | Low–impact | #000000 | 58% opacity |
| Text | Pale Blue | High–impact | #E4F4FF | 87% opacity |
| Text | Pale Blue | Low–impact | #E4F4FF | 64% opacity |
| Text | Pale Pink | High–impact | #FFE2F5 | 80% opacity |
| Text | Pale Pink | Low–impact | #FFE2F5 | 56% opacity |
| Purpose | Color Name | Variant Name | Value | Preview |
|---|---|---|---|---|
| Avatar Borders | Red | Light Theme | #F05454 | |
| Avatar Borders | Red | Dark Theme | #FE8585 | |
| Avatar Borders | Pink | Light Theme | #FD21A0 | |
| Avatar Borders | Pink | Dark Theme | #FCC1E3 | |
| Avatar Borders | Yellow | Light Theme | #FADA35 | |
| Avatar Borders | Yellow | Dark Theme | #FBEA8F | |
| Avatar Borders | Teal | Light Theme | #0AA36C | |
| Avatar Borders | Teal | Dark Theme | #82DFCA | |
| Avatar Borders | Blue | Light Theme | #268EED | |
| Avatar Borders | Blue | Dark Theme | #AFD9EA | |
| Avatar Borders | Orange | Light Theme | #E66015 | |
| Avatar Borders | Orange | Dark Theme | #F4A97E | |
| Avatar Borders | Green | Light Theme | #0DA001 | |
| Avatar Borders | Green | Dark Theme | #ADF49B | |
| Avatar Borders | Purple | Light Theme | #8539EB | |
| Avatar Borders | Purple | Dark Theme | #D294EF |