Back to Design System Home

Atlas Design System Tailwind Classes

Complete reference of all design tokens implemented as Tailwind CSS classes for efficient development

Ready for Production
Mobile-First
RTL Support

Base Colors

Foundation colors for consistent design across the platform

Neutral Colors

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

Primary Colors

50
Primary 50
bg-primary-50
100
Primary 100
bg-primary-100
200
Primary 200
bg-primary-200
300
Primary 300
bg-primary-300
400
Primary 400
bg-primary-400
500
Primary 500
bg-primary-500
600
Primary 600
bg-primary-600
700
Primary 700
bg-primary-700
800
Primary 800
bg-primary-800
900
Primary 900
bg-primary-900

Blue Colors

50
Blue 50
bg-blue-50
100
Blue 100
bg-blue-100
200
Blue 200
bg-blue-200
300
Blue 300
bg-blue-300
400
Blue 400
bg-blue-400
500
Blue 500
bg-blue-500
600
Blue 600
bg-blue-600
700
Blue 700
bg-blue-700
800
Blue 800
bg-blue-800
900
Blue 900
bg-blue-900

Green Colors

50
Green 50
bg-green-50
100
Green 100
bg-green-100
200
Green 200
bg-green-200
300
Green 300
bg-green-300
400
Green 400
bg-green-400
500
Green 500
bg-green-500
600
Green 600
bg-green-600
700
Green 700
bg-green-700
800
Green 800
bg-green-800
900
Green 900
bg-green-900

Orange Colors

50
Orange 50
bg-orange-50
100
Orange 100
bg-orange-100
200
Orange 200
bg-orange-200
300
Orange 300
bg-orange-300
400
Orange 400
bg-orange-400
500
Orange 500
bg-orange-500
600
Orange 600
bg-orange-600
700
Orange 700
bg-orange-700
800
Orange 800
bg-orange-800
900
Orange 900
bg-orange-900

Red Colors

50
Red 50
bg-red-50
100
Red 100
bg-red-100
200
Red 200
bg-red-200
300
Red 300
bg-red-300
400
Red 400
bg-red-400
500
Red 500
bg-red-500
600
Red 600
bg-red-600
700
Red 700
bg-red-700
800
Red 800
bg-red-800
900
Red 900
bg-red-900

Yellow Colors

50
Yellow 50
bg-yellow-50
100
Yellow 100
bg-yellow-100
200
Yellow 200
bg-yellow-200
300
Yellow 300
bg-yellow-300
400
Yellow 400
bg-yellow-400
500
Yellow 500
bg-yellow-500
600
Yellow 600
bg-yellow-600
700
Yellow 700
bg-yellow-700
800
Yellow 800
bg-yellow-800
900
Yellow 900
bg-yellow-900

Semantic Colors

Surface Primary
Surface Primary
bg-surface-primary
Surface Secondary
Surface Secondary
bg-surface-secondary
Brand Primary
Surface Brand Primary
bg-surface-brand-primary
Accent
Surface Accent
bg-surface-accent
Negative
Surface Negative
bg-surface-negative
Warning
Surface Warning
bg-surface-warning
Positive
Surface Positive
bg-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

Consistent spacing scale based on 4px grid system

4
spacing-4
8
spacing-8
12
spacing-12
16
spacing-16
20
spacing-20
24
spacing-24
32
spacing-32
40
spacing-40
48
spacing-48
64
spacing-64
80
spacing-80
96
spacing-96

📏 Spacing System

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

Border Radius

Consistent corner radius values for UI elements

4
4
rounded-4
8
8
rounded-8
12
12
rounded-12
16
16
rounded-16
20
20
rounded-20
24
24
rounded-24
Full
Full
rounded-full

Border Width

Consistent border width values for UI elements

None
None
border-none
Half
Half
border-half
1
1
border-1
1.5
1.5
border-1-half
2
2
border-2

Typography

Complete type scale with consistent sizing and weights

Display Large
Class: text-display-large
Size: 3rem, Weight: 600, Line height: 4.5rem
Display Medium
Class: text-display-medium
Size: 2.5rem, Weight: 600, Line height: 3.75rem
Headline Large
Class: text-headline-large
Size: 1.75rem, Weight: 600, Line height: 2.625rem
Title Large
Class: text-title-large
Size: 1.5rem, Weight: 600, Line height: 2.25rem
Body Large - This is a longer text example to demonstrate the body large typography style.
Class: text-body-large
Size: 1.125rem, Weight: 400, Line height: 2rem
Body Medium - This is a longer text example to demonstrate the body medium typography style.
Class: text-body-medium
Size: 1rem, Weight: 400, Line height: 1.75rem
Label Medium
Class: text-label-medium
Size: 1rem, Weight: 500, Line height: 1.75rem
Body Small - This is a longer text example to demonstrate the body small typography style.
Class: text-body-small
Size: 0.875rem, Weight: 400, Line height: 1.5rem

📝 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.

Gradients

Predefined gradient combinations for background effects

Gradient 1-4
Gradient 1-4
bg-gradient-1-4
Gradient 5-6
Gradient 5-6
bg-gradient-5-6
Gradient 7-8
Gradient 7-8
bg-gradient-7-8
Gradient 9-10
Gradient 9-10
bg-gradient-9-10

Gradient Usage Guidelines

Use these predefined gradients for consistent visual effects across the application. Each gradient is carefully crafted to work well with the design system's color palette.

Shadows

Elevation system for depth and hierarchy

1
Shadow 1
shadow-1
2
Shadow 2
shadow-2
3
Shadow 3
shadow-3
4
Shadow 4
shadow-4
5
Shadow 5
shadow-5

Grid System

Mobile-first responsive layout system

Mobile Columns
grid-cols-4
Mobile Gutter
gap-4
Mobile Navigation Columns
grid-cols-5
Mobile Navigation Gutter
gap-2

📱 Mobile-First Grid

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