- Color
- Typography
- Spacing
- Border
- Shadow
Surface
--color-surface-sunken | grey-500 |
--color-surface-base | grey-900 |
--color-surface-raised | grey-700 |
--color-surface-floating | grey-600 |
--color-surface-overlay | grey-900 |
interactive
--color-interactive-main | lime-300 |
--color-interactive-main-pressed | lime-400 |
--color-interactive-alternative | grey-600 |
--color-interactive-alternative-pressed | grey-500 |
content
--color-content-primary | grey-0 |
--color-content-primary-fixed | grey-0 |
| grey-900 |
--color-content-secondary | grey-60 |
border
--color-border-subtle | grey-60 |
--color-border-visible | grey-100 |
--color-border-strong | grey-500 |
support
--color-support-success | green-300 |
--color-support-alert | red-200 |
font family
--type-font-family | Unbounded |
--type-font-family | Inter |
font weight
--type-font-weight-01 | 900 |
--type-font-weight-02 | 700 |
--type-font-weight-03 | 600 |
--type-font-weight-04 | 400 |
font size
--type-font-size-01 | 10px |
--type-font-size-02 | 13px |
--type-font-size-03 | 16px |
--type-font-size-04 | 20px |
--type-font-size-05 | 25px |
--type-font-size-06 | 31px |
--type-font-size-07 | 39px |
--type-font-size-08 | 49px |
line height
--type-line-height-01 | 15 |
--type-line-height-02 | 18 |
--type-line-height-03 | 19.5 |
--type-line-height-04 | 22.5 |
--type-line-height-05 | 24 |
--type-line-height-06 | 28 |
--type-line-height-07 | 35 |
--type-line-height-08 | 40 |
letter spacing
--type-letter-spacing-01 | 0 |
--type-letter-spacing-02 | 0.3 |
--type-letter-spacing-03 | 0.4 |
--type-letter-spacing-04 | 0.5 |
Text styles
Heading large
| font-family | --type-font-family-01 |
| font-weight | --type-font-weight-02 |
| font-size | --type-font-size-08 |
| line-height | --type-line-height-08 |
| letter-spacing | --type-letter-spacing-04 |
Heading medium
| font-family | --type-font-family-01 |
| font-weight | --type-font-weight-02 |
| font-size | --type-font-size-07 |
| line-height | --type-line-height-07 |
| letter-spacing | --type-letter-spacing-02 |
Heading small
| font-family | --type-font-family-01 |
| font-weight | --type-font-weight-02 |
| font-size | --type-font-size-06 |
| line-height | --type-line-height-06 |
| letter-spacing | --type-letter-spacing-02 |
TITLE
| font-family | --type-font-family-01 |
| font-weight | --type-font-weight-04 |
| font-size | --type-font-size-01 |
| line-height | --type-line-height-01 |
| letter-spacing | --type-letter-spacing-01 |
Body
| font-family | --type-font-family-02 |
| font-weight | --type-font-weight-03 |
| font-size | --type-font-size-04 |
| line-height | --type-line-height-02 |
| letter-spacing | --type-letter-spacing-01 |
Body highlight
| font-family | --type-font-family-02 |
| font-weight | --type-font-weight-04 |
| font-size | --type-font-size-03 |
| line-height | --type-line-height-05 |
| letter-spacing | --type-letter-spacing-01 |
Caption
| font-family | --type-font-family-02 |
| font-weight | --type-font-weight-03 |
| font-size | --type-font-size-03 |
| line-height | --type-line-height-05 |
| letter-spacing | --type-letter-spacing-01 |
BUTTON
| font-family | --type-font-family-02 |
| font-weight | --type-font-weight-04 |
| font-size | --type-font-size-01 |
| line-height | --type-line-height-01 |
| letter-spacing | --type-letter-spacing-01 |
Input
| font-family | --type-font-family-02 |
| font-weight | --type-font-weight-03 |
| font-size | --type-font-size-04 |
| line-height | --type-line-height-02 |
| letter-spacing | --type-letter-spacing-01 |
Input label
| font-family | --type-font-family-02 |
| font-weight | --type-font-weight-04 |
| font-size | --type-font-size-03 |
| line-height | --type-line-height-05 |
| letter-spacing | --type-letter-spacing-01 |
Stack
--spacing-stack-01 | 4px |
--spacing-stack-02 | 8px |
--spacing-stack-03 | 12px |
--spacing-stack-04 | 16px |
--spacing-stack-05 | 24px |
--spacing-stack-06 | 32px |
Inline
--spacing-inline-01 | 4px |
--spacing-inline-02 | 8px |
--spacing-inline-03 | 12px |
--spacing-inline-04 | 16px |
--spacing-inline-05 | 24px |
--spacing-inline-06 | 32px |
Inset
--spacing-inset-01 | 4px |
--spacing-inset-02 | 8px |
--spacing-inset-03 | 12px |
--spacing-inset-04 | 16px |
--spacing-inset-05 | 24px |
--spacing-inset-06 | 32px |
Radius
--border-radius-square | 0px |
--border-radius-rounded-01 | 2px |
--border-radius-rounded-02 | 4px |
--border-radius-rounded-03 | 8px |
--border-radius-rounded-04 | 16px |
--border-radius-circular | 50% |
Width
--border-width-thin | 1px |
--border-width-thick | 2px |
--border-width-thicker | 3px |
Elevation
--shadow-elevation-flat | 0px 0px 0px 0px rgba(26, 26, 26, 0.2) |
--shadow-elevation-raised | 0px 8px 16px -4px rgba(26, 26, 26, 0.22) |
--shadow-elevation-floating | 0px 20px 20px –8px rgba(26, 26, 26, 0.28) |