CorrelAid Design Tokens

Design tokens for CorrelAid, built with Style Dictionary.

Installation

npm install @correlaid/design-tokens

Usage

CSS

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

.button {
  background-color: var(--color-primary-800);
  padding: var(--space-4);
  border-radius: var(--radius-base);
}

SCSS

@import '@correlaid/design-tokens/scss';

.button {
  background-color: $color-primary-800;
  padding: $space-4;
  border-radius: $radius-base;
}

JavaScript/TypeScript

import tokens from '@correlaid/design-tokens';

const Button = styled.button`
  background-color: ${tokens.color.primary['800']};
  padding: ${tokens.space['4']};
  border-radius: ${tokens.radius.base};
`;

JSON

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

Available Tokens

Colors

• Primary: 50-900 scale
• Gray: 50-900 scale
• Green: extra-light, light, base, dark
• Lab Colors: blue (light, medium, dark), pink (medium, light), muted
• Semantic: success, warning, error, info
• Base: white, black, black-light, black-muted

Typography

• Font Families: main (Roboto), accent (Inter), mono
• Font Sizes: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl
• Font Weights: light, normal, medium, semibold, bold, black, heavy
• Line Heights: tight, normal, relaxed, loose

Spacing

• Scale: 1-20 (based on 4px/8px system)

Border Radius

• Sizes: sm, base, md, lg, xl, 2xl, full

Shadows

• Levels: sm, base, md, lg, xl, 2xl

Gradients

• lr: Left to right gradient
• rl: Right to left gradient

Development

Build tokens

npm run build

Clean build directory

npm run clean

Token Structure

Tokens are defined in JSON files following the W3C Design Token Format in the tokens/ directory:

• color.json - Color palette
• typography.json - Typography settings
• spacing.json - Spacing scale
• border.json - Border radius values
• shadow.json - Shadow definitions
• gradient.json - Gradient definitions

Publish

Will be publisht on push to main