← Back to Design System Home

Design Tokens Showcase

Complete reference of all design tokens available in the Atlas Design System

Base Colors

Neutral Colors

50
Neutral 50
var(--neutral-50)
100
Neutral 100
var(--neutral-100)
200
Neutral 200
var(--neutral-200)
300
Neutral 300
var(--neutral-300)
400
Neutral 400
var(--neutral-400)
500
Neutral 500
var(--neutral-500)
600
Neutral 600
var(--neutral-600)
700
Neutral 700
var(--neutral-700)
800
Neutral 800
var(--neutral-800)
900
Neutral 900
var(--neutral-900)
Black
Neutral Black
var(--neutral-black)
White
Neutral White
var(--neutral-white)

Primary Colors

50
Primary 50
var(--primary-50)
100
Primary 100
var(--primary-100)
200
Primary 200
var(--primary-200)
300
Primary 300
var(--primary-300)
400
Primary 400
var(--primary-400)
500
Primary 500
var(--primary-500)
600
Primary 600
var(--primary-600)
700
Primary 700
var(--primary-700)
800
Primary 800
var(--primary-800)
900
Primary 900
var(--primary-900)

Semantic Colors

Surface Primary
Surface Primary
var(--surface-primary)
Surface Secondary
Surface Secondary
var(--surface-secondary)
Brand Primary
Surface Brand Primary
var(--surface-brand-primary)
Accent
Surface Accent
var(--surface-accent)
Negative
Surface Negative
var(--surface-negative)
Warning
Surface Warning
var(--surface-warning)
Positive
Surface Positive
var(--surface-positive)

💡 Color Usage Guidelines

Use semantic colors for consistent messaging across the application. Primary colors are for brand elements, while semantic colors provide clear meaning for different states and actions.

Spacing

4
var(--spacing-4)
8
var(--spacing-8)
12
var(--spacing-12)
16
var(--spacing-16)
20
var(--spacing-20)
24
var(--spacing-24)
32
var(--spacing-32)
40
var(--spacing-40)
48
var(--spacing-48)
64
var(--spacing-64)

📏 Spacing System

All spacing values are based on a 4px grid system and use rem units for accessibility. Use these tokens consistently for margins, padding, and gaps throughout your components.

Border Radius

4
4
var(--radius-4)
8
8
var(--radius-8)
12
12
var(--radius-12)
16
16
var(--radius-16)
20
20
var(--radius-20)
24
24
var(--radius-24)
Full
Full
var(--radius-full)

Typography

Display Large
Size: var(--text-style-display-large-size-rem)
Weight: var(--text-style-display-large-weight)
Line Height: var(--text-style-display-large-line-height-rem)
Display Medium
Size: var(--text-style-display-medium-size-rem)
Weight: var(--text-style-display-medium-weight)
Line Height: var(--text-style-display-medium-line-height-rem)
Headline Large
Size: var(--text-style-headline-large-size-rem)
Weight: var(--text-style-headline-large-weight)
Line Height: var(--text-style-headline-large-line-height-rem)
Title Large
Size: var(--text-style-title-large-size-rem)
Weight: var(--text-style-title-large-weight)
Line Height: var(--text-style-title-large-line-height-rem)
Body Large
Size: var(--text-style-body-large-size-rem)
Weight: var(--text-style-body-large-weight)
Line Height: var(--text-style-body-large-line-height-rem)
Body Medium
Size: var(--text-style-body-medium-size-rem)
Weight: var(--text-style-body-medium-weight)
Line Height: var(--text-style-body-medium-line-height-rem)
Label Medium
Size: var(--text-style-label-medium-size-rem)
Weight: var(--text-style-label-medium-weight)
Line Height: var(--text-style-label-medium-line-height-rem)
Body Small
Size: var(--text-style-body-small-size-rem)
Weight: var(--text-style-body-small-weight)
Line Height: var(--text-style-body-small-line-height-rem)

📝 Typography Scale

The typography system includes Display, Headline, Title, Label, and Body styles. Each style has consistent sizing, weight, and line-height values optimized for readability and hierarchy.

Shadows

1
Elevation 1
var(--elevation-1)
2
Elevation 2
var(--elevation-2)
3
Elevation 3
var(--elevation-3)
4
Elevation 4
var(--elevation-4)
5
Elevation 5
var(--elevation-5)

Gradient Showcase

🎨 Gradient Applications

Explore various ways to use the design system's gradient tokens for creating beautiful and engaging user interfaces.

Gradient Badges

Warm Badge Golden Badge Cool Badge Nature Badge

Grid System

Mobile Columns
var(--mobile-columns)
Mobile Gutter
var(--mobile-gutter-rem)
Mobile Navigation Columns
var(--mobile-navigation-columns)
Mobile Navigation Gutter
var(--mobile-navigation-gutter-rem)

📱 Mobile-First Grid

The grid system is designed for mobile-first development with responsive breakpoints. Use these tokens for consistent layout spacing across different screen sizes.