Design Tokens using System-UI

System UI is an open source organization that houses a Theme Specification.

It's used by many high quality Design Systems like:

And many libraries like:

See starter-react-sui

You are free to structure your System UI in any way you like.

We like to separate them in different packages and document every Design Token family separately.


export const typography = {
  fonts: {
    normal: '-apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
    mono: 'SFMono-Regular, Consolas, Menlo, Courier, monospace',
    serif: 'Times New Roman',
  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
  fontWeights: {
    light: 300,
    normal: 400,
    semibold: 500,
    bold: 600,
  lineHeights: {
    condensedUltra: 1,
    condensed: 1.25,
    default: 1.5,
  letterSpacings: { tight: '-0.03rem', normal: '0.02rem', loose: '0.2rem' },


export const colors = {
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    primaryHover: '#0077ccaa',
    secondary: '#f9f9f9',
    secondaryHover: '#f9f9f9aa',
    onPrimary: '#f9f9f9',
    onSecondary: '#000',
    teal: '#008080',
    transparentTeal: '#00808080',

You can then combine them all into a unique System-UI theme object.


import merge from 'deepmerge';

import { typography } from '~/typography';
import { colors } from '~/colors';
import { space } from '~/space';
import { sizes } from '~/sizes';
import { shadows } from '~/shadows';
import { radii } from '~/radii';
import { border } from '~/border';
import { zIndex } from '~/z-index';

export const theme = merge.all(
  [space, sizes, typography, colors, shadows, radii, border, zIndex],
  { arrayMerge: (t, s) => [...s, ...t] }

The theme object is what System-UI compliant libraries will use.


To import ~/colors directly and not ~/colors/src, you need a ~/colors/index.js with export * from './src';

See starter-react-sui