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, such as:

And many libraries like:

See starter-react-sui ▶

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

We recommend to separate them in different packages and document each Design Token family separately.

~/typography/src/index.js

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' },
};

~/colors/src/index.js

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 in a unique System-UI theme object.

~/all/src/index.js

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.

TIP

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

See starter-react-sui ▶