Colors

Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.

  • BG

    var(--color-bg)

  • BG Alt

    var(--color-bg-alt)

  • Text

    var(--color-text)

  • Grey X-Dark

    var(--color-grey-x-dark)

  • Grey Dark

    var(--color-grey-dark)

  • Grey

    var(--color-grey)

  • Grey Light

    var(--color-grey-light)

  • Grey X-Light

    var(--color-grey-x-light)

  • Primary Dark

    var(--color-primary-dark)

  • Primary

    var(--color-primary)

  • Primary Light

    var(--color-primary-light)

  • Secondary Dark

    var(--color-secondary-dark)

  • Secondary

    var(--color-secondary)

  • Secondary Light

    var(--color-secondary-light)

  • Alert

    var(--color-alert)

  • Info

    var(--color-info)

  • Success

    var(--color-success)

  • Warning

    var(--color-warning)

  • Code

    var(--color-code)

  • Focus

    var(--color-focus)

Fonts

Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks

  • Base

    System fonts for body copy and globally set text.

    Font Families: Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif

    var(--font-base)

  • Serif

    Expressive sections, like quotes

    Font Families: Georgia,sans-serif

    var(--font-serif)

  • Code

    Code blocks

    Font Families: Lucida Console,Monaco,monospace

    var(--font-code)

Spacing

Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.

2XS

8px to 10px

var(--space-2xs)

XS

12px to 15px

var(--space-xs)

S

16px to 20px

var(--space-s)

M

32px to 40px

var(--space-m)

L

48px to 60px

var(--space-l)

XL

80px to 100px

var(--space-xl)

2XL

128px to 160px

var(--space-2xl)

3XL

208px to 260px

var(--space-3xl)

XS - S

12px to 20px

var(--space-xs-s)

S - M

16px to 40px

var(--space-s-m)

M - L

32px to 60px

var(--space-m-l)

L - XL

48px to 100px

var(--space-l-xl)

L - 2XL

48px to 160px

var(--space-l-2xl)

XL - 2XL

80px to 160px

var(--space-xl-2xl)

2XL - 3XL

128px to 260px

var(--space-2xl-3xl)

Text Sizes

A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context. For example, for web, the should be converted to REM units (pixelSize / baseSize)

Step n2

11px to 13px

var(--size-step-n2)

Step n2

Step n1

13px to 16px

var(--size-step-n1)

Step n1

Step 0

16px to 20px

var(--size-step-0)

Step 0

Step 1

19px to 28px

var(--size-step-1)

Step 1

Step 2

23px to 40px

var(--size-step-2)

Step 2

Step 3

28px to 57px

var(--size-step-3)

Step 3

Step 4

33px to 80px

var(--size-step-4)

Step 4

Step 5

40px to 113px

var(--size-step-5)

Step 5

Step 6

48px to 159px

var(--size-step-6)

Step 6