Strokes
Strokes play an important role within this illustration style, where they aid in accessibility and help deliver a neutral style.
There are two main stroke weights used. 2 and 3 pixel line weights are used for different size illustrations, and dashed lines for backgrounds.
Dash caps
End caps
Rounded corners
Text
| Color | Name |
|---|---|
#232E33 |
text--secondary |
Interactive
| Color | Name |
|---|---|
#5EAFC5 |
interactive-1 |
Border
| Color | Name |
|---|---|
#AAB2B6 |
border--secondary |
#BCC3C7 |
border--tertiary |
Background
| Color | Name |
|---|---|
#FFFFFF |
background--primary |
#F5F6F7 |
background--secondary |
#E2E5E7 |
background--tertiary |
Interactive
| Color | Name |
|---|---|
#5EAFC5 |
interactive-1 |
#00536A |
interactive-3 |
Border
| Color | Name |
|---|---|
#AAB2B6 |
border--secondary |
#BCC3C7 |
border--tertiary |
Background
| Color | Name |
|---|---|
#FFFFFF |
background--primary |
#F5F6F7 |
background--secondary |
#E2E5E7 |
background--tertiary |
Text
| Color | Name |
|---|---|
#232E33 |
text--secondary |
Selection primary
| Color | Name |
|---|---|
#DFECDD |
selection--primary-0 |
#84B87B |
selection--primary-1 |
#298319 |
selection--primary-2 |
#1F6213 |
selection--primary-3 |
#15420D |
selection--primary-4 |
Interactive
| Color | Name |
|---|---|
#BDDEE7 |
interactive-0 |
#5EAFC5 |
interactive-1 |
#0080A3 |
interactive-2 |
#00536A |
interactive-3 |
#002631 |
interactive-4 |
Border
| Color | Name |
|---|---|
#AAB2B6 |
border--secondary |
#BCC3C7 |
border--tertiary |
Perspective
This illustration style uses a 1-point perspective. Usually there's a flat main object, and surrounding elements that fall under the 1-point grid.
Modals
Typography
If text is necessary, use this typesetting below for legibility and reduction in the amount of type sizes for clearer hierarchy.
- 12 PT bold
- 14 PT bold
- 16 PT bold
- 20 PT bold
- 36 PT regular
