Nova Design Tokens

A collection of design tokens for the Nova Design System, including colors, typography, spacing, and radius values.

Installation

npm install nova-design-tokens

Usage

You can import the tokens in your CSS file:

@import 'nova-design-tokens';

Or in your JavaScript/TypeScript file if you're using a bundler that supports CSS imports:

import 'nova-design-tokens';

Available Tokens

Colors

The color tokens are organized into several categories:

• Core Colors (Midnight Black, Morning Fog, Nova Rage, Lilac Haze)
• Semantic Colors
• Action Colors (Primary, Secondary, Tertiary, Alternate)
• Input Colors
• Typography Colors
• Icon Colors
• Background Colors

Example usage:

.my-element {
  background-color: var(--nova-rage-600);
  color: var(--type-primary);
}

Typography

Typography tokens for font sizes, weights, and line heights.

Example usage:

.my-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

Spacing

Consistent spacing values for margins, padding, and layout.

Example usage:

.my-container {
  padding: var(--spacing-4);
  gap: var(--spacing-2);
}

Border Radius

Border radius tokens for consistent corner rounding.

Example usage:

.my-card {
  border-radius: var(--radius-md);
}

License

MIT