Home
  • Welcome
  • Box
  • Button
  • Card
  • Divider
  • Logo
  • Stack
  • Tag
  • TextLink
  • Theme
  • Typography

Theme

A collection of core design tokens for the design system.

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

Colors

Our colours are named with semantic meaning in mind.

import { colors } from 'design-system/theme';

.brand

Hex: #fa6d01

.brandSecondary

Hex: #ffffff

.link

Hex: #fa6d01

.linkHover

Hex: #ffffff

.background

Hex: #13181d

.backgroundEmphasis

Hex: #1e242a

.shadow

Hex: #0c0f13

.border

Hex: #353f47

.foregroundEmphasis

Hex: #ffffff

.foreground

Hex: #a0aeba

.decorative.green

Hex: #52e409

.decorative.purple

Hex: #E509E3

.input.background

Hex: #272f37

.input.foreground

Hex: #a0aeba

.input.hover.background

Hex: #353f47

.input.hover.foreground

Hex: #ffffff

.input.active.background

Hex: #1e242a

.input.active.foreground

Hex: #ffffff


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.

import { spacing } from 'design-system/theme';

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.

import { radii } from 'design-system/theme';

none (0)

small (8)

medium (12)

large (16)


breakpoints

import { breakpoints } from 'design-system/theme';

boxShadow

import { boxShadow } from 'design-system/theme';

fontsizes

import { fontsizes } from 'design-system/theme';

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.