Guides

  • Welcome
  • Design Tokens

Design Tokens

Edit on GitHub

A collection of core design tokens for the design system.

  • Colors
  • Spacing
  • Radii
  • breakpoints
  • boxShadow
  • fontsizes
  • fontFamilies

The best way to consume these tokens is through utility props, like the ones in Box. Otherwise you can make use of the useTheme hook.

Colors

Our colours are named with semantic meaning in mind.

const { colors } = useTheme();

.global.brand

#fa6d01

.global.border

#353f47

.global.shadow

#0c0f13

.text.default

#a0aeba

.text.emphasis

#ffffff

.text.link

#fa6d01

.text.linkHover

#ffffff

.background.default

#13181d

.background.emphasis

#1e242a

.background.hover

#272f37

.input.background

#272f37

.input.backgroundHover

#353f47

.input.backgroundActive

#1e242a

.input.foreground

#a0aeba

.input.foregroundHover

#ffffff

.input.foregroundActive

#ffffff

.decorative.green

#52e409

.decorative.purple

#E509E3

.decorative.blue

#089aef


Spacing

Tokens used for consistent margin or padding between elements.

The best way to consume these tokens is through

<Box />
and other layout components, though they can be imported if needed.

const { spacing } = useTheme();

none (0)

xsmall (4)

small (8)

medium (12)

large (16)

xlarge (24)

xxlarge (32)

xxxlarge (40)


Radii

Tokens used for border radius.

Radii can be used through utility props in

<Box />
component.

const { radii } = useTheme();

none (0)

small (3)

medium (6)

large (12)

circle (99)


breakpoints

const { breakpoints } = useTheme();
TokenWidthNotes
sm640for Mobile
md768for Tablet
lg1024for Desktop
xl1280for wide screen

boxShadow

const { boxShadow } = useTheme();

fontsizes

const { fontsizes } = useTheme();

fontFamilies

We use two font family groups across the site.

  • heading
  • body

The best way to consume these tokens is through

<Text />
and
<Heading />
components.


  • Home
  • About
  • Blog
  • Design System
© Copyright 2021 Nathan Simpson. Made in Sydney Australia.