@design-system/tokens

Design tokens for the design system including colors, typography, spacing, and other foundational design elements.

Installation

npm install @design-system/tokens

Usage

TypeScript/JavaScript

import { colors, typography, spacing, borderRadius } from '@design-system/tokens';

// Use color tokens
console.log(colors.dg[500]); // { h: 160, s: 65, l: 50 }

// Use typography tokens
console.log(typography.fontSize.title1); // { size: '36px', lineHeight: '44px', weight: 700 }

// Use spacing tokens
console.log(spacing[4]); // '1rem'

CSS Variables

Import the CSS file in your project:

@import '@design-system/tokens/css';

This provides CSS custom properties like:

• --ds-gray-500, --ds-dg-500, --ds-red-500 for colors (HSL format)
• --font-sans, --font-serif, --font-mono for font families
• --spacing-4, --spacing-8 for spacing
• --radius-md, --radius-lg for border radius

JSON

import tokens from '@design-system/tokens/json';

Token Structure

Colors

All colors use HSL format with properties { h, s, l }:

• colors.white, colors.black
• colors.gray[50-1000] - Grayscale palette
• colors.dg[50-1000] - Design Green palette
• colors.red[50-900] - Red palette

Typography

typography.fontFamily.sans
typography.fontFamily.serif
typography.fontFamily.mono

typography.fontSize.display1
typography.fontSize.title1
typography.fontSize.body1
typography.fontSize.label1

Spacing

Standard spacing scale from 0 to 24 (in 0.25rem increments).

Border Radius

• sm: 3px
• md: 6px
• lg: 9px
• full: 9999px

License

MIT