All Design Tokens

A complete showcase of all variables, sizes, and colors that power the Atomix design system.

244

Total Tokens

brand

4 tokens

Primary

Primary brand color used for main actions and emphasis

buttonslinksfocus states

var(--atomix-primary)

Secondary

Secondary color for supporting elements

secondary buttonsborderssubtle text

var(--atomix-secondary)

Light

Light color variant

light backgroundssubtle elements

var(--atomix-light)

Dark

Dark color variant

dark backgroundshigh contrast elements

var(--atomix-dark)

semantic

4 tokens

Success

Success state color for positive feedback

success messagesvalid statespositive indicators

var(--atomix-success)

Info

Info state color for informational feedback

info messagesinformational statesinfo indicators

var(--atomix-info)

Warning

Warning state color for cautionary feedback

warning messagescaution statesattention indicators

var(--atomix-warning)

Error

Error state color for negative feedback

error messagesinvalid statesdestructive actions

var(--atomix-error)

neutral

10 tokens

Gray 1

Lightest gray for backgrounds and subtle elements

page backgroundscard backgroundssubtle borders

var(--atomix-gray-1)

Gray 2

Very light gray for secondary backgrounds

secondary backgroundssubtle dividers

var(--atomix-gray-2)

Gray 3

Light gray for borders and dividers

bordersdividerssubtle separators

var(--atomix-gray-3)

Gray 4

Medium-light gray for disabled states

disabled elementsplaceholder text

var(--atomix-gray-4)

Gray 5

Medium gray for secondary text

secondary texthelper text

var(--atomix-gray-5)

Gray 6

Medium-dark gray for tertiary text

tertiary textsubtle labels

var(--atomix-gray-6)

Gray 7

Dark gray for secondary headings

secondary headingsemphasis

var(--atomix-gray-7)

Gray 8

Very dark gray for primary text

primary textbody content

var(--atomix-gray-8)

Gray 9

Nearly black for high contrast text

headingshigh contrast text

var(--atomix-gray-9)

Gray 10

Darkest gray for maximum contrast

maximum contrastdark mode text

var(--atomix-gray-10)

primary-scale

10 tokens

Primary 1

Lightest primary color for subtle backgrounds

subtle primary backgroundslight accents

var(--atomix-primary-1)

Primary 2

Very light primary color

light primary backgrounds

var(--atomix-primary-2)

Primary 3

Light primary color

light primary elements

var(--atomix-primary-3)

Primary 4

Medium-light primary color

medium-light primary elements

var(--atomix-primary-4)

Primary 5

Medium primary color

medium primary elements

var(--atomix-primary-5)

Primary 6

Base primary color (main brand color)

primary buttonsbrand elementsmain actions

var(--atomix-primary-6)

Primary 7

Medium-dark primary color

hover statesactive states

var(--atomix-primary-7)

Primary 8

Dark primary color

pressed statesdark variants

var(--atomix-primary-8)

Primary 9

Very dark primary color

deep accentsdark themes

var(--atomix-primary-9)

Primary 10

Darkest primary color

maximum contrastdeepest accents

var(--atomix-primary-10)

red-scale

10 tokens

Red 1

Lightest red for subtle backgrounds

error backgroundssubtle error states

var(--atomix-red-1)

Red 2

Very light red

light error backgrounds

var(--atomix-red-2)

Red 3

Light red

light error elements

var(--atomix-red-3)

Red 4

Medium-light red

medium-light error elements

var(--atomix-red-4)

Red 5

Medium red

medium error elements

var(--atomix-red-5)

Red 6

Base red color

error buttonserror elementsdestructive actions

var(--atomix-red-6)

Red 7

Medium-dark red

hover statesactive error states

var(--atomix-red-7)

Red 8

Dark red

pressed statesdark error variants

var(--atomix-red-8)

Red 9

Very dark red

deep error accentsdark themes

var(--atomix-red-9)

Red 10

Darkest red

maximum contrastdeepest error accents

var(--atomix-red-10)

green-scale

10 tokens

Green 1

Lightest green for subtle backgrounds

success backgroundssubtle success states

var(--atomix-green-1)

Green 2

Very light green

light success backgrounds

var(--atomix-green-2)

Green 3

Light green

light success elements

var(--atomix-green-3)

Green 4

Medium-light green

medium-light success elements

var(--atomix-green-4)

Green 5

Medium green

medium success elements

var(--atomix-green-5)

Green 6

Base green color

success buttonssuccess elementspositive actions

var(--atomix-green-6)

Green 7

Medium-dark green

hover statesactive success states

var(--atomix-green-7)

Green 8

Dark green

pressed statesdark success variants

var(--atomix-green-8)

Green 9

Very dark green

deep success accentsdark themes

var(--atomix-green-9)

Green 10

Darkest green

maximum contrastdeepest success accents

var(--atomix-green-10)

blue-scale

10 tokens

Blue 1

Lightest blue for subtle backgrounds

info backgroundssubtle info states

var(--atomix-blue-1)

Blue 2

Very light blue

light info backgrounds

var(--atomix-blue-2)

Blue 3

Light blue

light info elements

var(--atomix-blue-3)

Blue 4

Medium-light blue

medium-light info elements

var(--atomix-blue-4)

Blue 5

Medium blue

medium info elements

var(--atomix-blue-5)

Blue 6

Base blue color

info buttonsinfo elementsinformational actions

var(--atomix-blue-6)

Blue 7

Medium-dark blue

hover statesactive info states

var(--atomix-blue-7)

Blue 8

Dark blue

pressed statesdark info variants

var(--atomix-blue-8)

Blue 9

Very dark blue

deep info accentsdark themes

var(--atomix-blue-9)

Blue 10

Darkest blue

maximum contrastdeepest info accents

var(--atomix-blue-10)

yellow-scale

10 tokens

Yellow 1

Lightest yellow for subtle backgrounds

warning backgroundssubtle warning states

var(--atomix-yellow-1)

Yellow 2

Very light yellow

light warning backgrounds

var(--atomix-yellow-2)

Yellow 3

Light yellow

light warning elements

var(--atomix-yellow-3)

Yellow 4

Medium-light yellow

medium-light warning elements

var(--atomix-yellow-4)

Yellow 5

Medium yellow

medium warning elements

var(--atomix-yellow-5)

Yellow 6

Base yellow color

warning buttonswarning elementscaution actions

var(--atomix-yellow-6)

Yellow 7

Medium-dark yellow

hover statesactive warning states

var(--atomix-yellow-7)

Yellow 8

Dark yellow

pressed statesdark warning variants

var(--atomix-yellow-8)

Yellow 9

Very dark yellow

deep warning accentsdark themes

var(--atomix-yellow-9)

Yellow 10

Darkest yellow

maximum contrastdeepest warning accents

var(--atomix-yellow-10)

text

17 tokens

Primary Text Emphasis

Primary text color for main content

headingsprimary textbody content

var(--atomix-primary-text-emphasis)

Secondary Text Emphasis

Secondary text color for supporting content

secondary textdescriptions

var(--atomix-secondary-text-emphasis)

Tertiary Text Emphasis

Tertiary text color for subtle content

helper textcaptionsmetadata

var(--atomix-tertiary-text-emphasis)

Disabled Text Emphasis

Text color for disabled elements

disabled buttonsinactive text

var(--atomix-disabled-text-emphasis)

Invert Text Emphasis

Inverted text color for dark backgrounds

dark backgroundsinverted text

var(--atomix-invert-text-emphasis)

Brand Text Emphasis

Brand color for text emphasis

brand linksbrand text

var(--atomix-brand-text-emphasis)

Error Text Emphasis

Error color for text

error messagesinvalid text

var(--atomix-error-text-emphasis)

Success Text Emphasis

Success color for text

success messagesvalid text

var(--atomix-success-text-emphasis)

Warning Text Emphasis

Warning color for text

warning messagescaution text

var(--atomix-warning-text-emphasis)

Info Text Emphasis

Info color for text

info messagesinformational text

var(--atomix-info-text-emphasis)

Light Text Emphasis

Light color for text

light textsubtle text

var(--atomix-light-text-emphasis)

Dark Text Emphasis

Dark color for text

dark texthigh contrast text

var(--atomix-dark-text-emphasis)

Body Color

Base body text color

body textdefault text

var(--atomix-body-color)

Heading Color

Base heading text color

headingstitles

var(--atomix-heading-color)

Link Color

Base link color

linksanchors

var(--atomix-link-color)

Link Hover Color

Link hover color

link hover states

var(--atomix-link-hover-color)

Link Decoration

Link text decoration

link styling

var(--atomix-link-decoration)

background

13 tokens

Primary Background Subtle

Primary background color

page backgroundscard backgrounds

var(--atomix-primary-bg-subtle)

Secondary Background Subtle

Secondary background color

secondary sectionsalternating rows

var(--atomix-secondary-bg-subtle)

Tertiary Background Subtle

Tertiary background color

subtle backgroundsdividers

var(--atomix-tertiary-bg-subtle)

Invert Background Subtle

Inverted background color

dark sectionsinverted backgrounds

var(--atomix-invert-bg-subtle)

Brand Background Subtle

Brand background color

brand sectionshighlighted areas

var(--atomix-brand-bg-subtle)

Error Background Subtle

Error background color

error statesinvalid sections

var(--atomix-error-bg-subtle)

Success Background Subtle

Success background color

success statesvalid sections

var(--atomix-success-bg-subtle)

Warning Background Subtle

Warning background color

warning statescaution sections

var(--atomix-warning-bg-subtle)

Info Background Subtle

Info background color

info statesinformational sections

var(--atomix-info-bg-subtle)

Light Background Subtle

Light background color

light sectionssubtle backgrounds

var(--atomix-light-bg-subtle)

Dark Background Subtle

Dark background color

dark sectionsdark mode backgrounds

var(--atomix-dark-bg-subtle)

Body Background

Base body background color

page backgrounddefault background

var(--atomix-body-bg)

Highlight Background

Text highlight background color

text highlightsmark elements

var(--atomix-highlight-bg)

border

13 tokens

Primary Border Subtle

Primary border color

default bordersstandard borders

var(--atomix-primary-border-subtle)

Secondary Border Subtle

Secondary border color

secondary bordersdark borders

var(--atomix-secondary-border-subtle)

Success Border Subtle

Success border color

success statesvalid borders

var(--atomix-success-border-subtle)

Error Border Subtle

Error border color

error statesinvalid borders

var(--atomix-error-border-subtle)

Warning Border Subtle

Warning border color

warning statescaution borders

var(--atomix-warning-border-subtle)

Info Border Subtle

Info border color

info statesinformational borders

var(--atomix-info-border-subtle)

Brand Border Subtle

Brand border color

brand elementsprimary borders

var(--atomix-brand-border-subtle)

Light Border Subtle

Light border color

light borderssubtle borders

var(--atomix-light-border-subtle)

Dark Border Subtle

Dark border color

dark bordershigh contrast borders

var(--atomix-dark-border-subtle)

Border Width

Default border width

default bordersstandard borders

var(--atomix-border-width)

Border Style

Default border style

default bordersstandard borders

var(--atomix-border-style)

Border Color

Default border color

default bordersstandard borders

var(--atomix-border-color)

Border Color Translucent

Translucent border color

translucent borderssubtle borders

var(--atomix-border-color-translucent)

hover

8 tokens

Primary Hover

Primary color for hover states

primary button hoverlink hover

var(--atomix-primary-hover)

Secondary Hover

Secondary color for hover states

secondary button hover

var(--atomix-secondary-hover)

Light Hover

Light color for hover states

light button hover

var(--atomix-light-hover)

Dark Hover

Dark color for hover states

dark button hover

var(--atomix-dark-hover)

Error Hover

Error color for hover states

error button hoverdestructive hover

var(--atomix-error-hover)

Success Hover

Success color for hover states

success button hover

var(--atomix-success-hover)

Warning Hover

Warning color for hover states

warning button hover

var(--atomix-warning-hover)

Info Hover

Info color for hover states

info button hover

var(--atomix-info-hover)

gradient

9 tokens

Primary Gradient

Primary brand gradient

hero sectionsbrand backgrounds

var(--atomix-primary-gradient)

Secondary Gradient

Secondary gradient

subtle backgroundssecondary sections

var(--atomix-secondary-gradient)

Light Gradient

Light gradient

light backgroundssubtle sections

var(--atomix-light-gradient)

Dark Gradient

Dark gradient

dark backgroundsdark sections

var(--atomix-dark-gradient)

Success Gradient

Success gradient

success sectionspositive feedback

var(--atomix-success-gradient)

Info Gradient

Info gradient

info sectionsinformational areas

var(--atomix-info-gradient)

Warning Gradient

Warning gradient

warning sectionscaution areas

var(--atomix-warning-gradient)

Error Gradient

Error gradient

error sectionsalert areas

var(--atomix-error-gradient)

Gradient

Default gradient

default backgroundsgeneral sections

var(--atomix-gradient)

Spacing

Consistent spacing scale based on rem units

36 tokens

Spacing 0

No spacing

reset marginsno gaps

var(--atomix-spacing-0)

Spacing 1

Extra small spacing (4px)

icon gapstight paddingfine adjustments

var(--atomix-spacing-1)

Spacing PX 6

Pixel-based spacing (6px)

precise spacingfine adjustments

var(--atomix-spacing-px-6)

Spacing 2

Small spacing (8px)

button paddingform field gapscompact layouts

var(--atomix-spacing-2)

Spacing PX 10

Pixel-based spacing (10px)

precise spacingfine adjustments

var(--atomix-spacing-px-10)

Spacing 3

Medium-small spacing (12px)

compact paddingsmall gaps

var(--atomix-spacing-3)

Spacing PX 14

Pixel-based spacing (14px)

precise spacingfine adjustments

var(--atomix-spacing-px-14)

Spacing 4

Medium spacing (16px)

default paddingstandard marginscontent spacing

var(--atomix-spacing-4)

Spacing 5

Medium-large spacing (20px)

generous paddingmedium margins

var(--atomix-spacing-5)

Spacing PX 22

Pixel-based spacing (22px)

precise spacingfine adjustments

var(--atomix-spacing-px-22)

Spacing 6

Large spacing (24px)

section paddingcard spacinggenerous margins

var(--atomix-spacing-6)

Spacing 7

Extra large spacing (28px)

large paddinggenerous margins

var(--atomix-spacing-7)

Spacing PX 30

Pixel-based spacing (30px)

precise spacingfine adjustments

var(--atomix-spacing-px-30)

Spacing 8

Extra large spacing (32px)

page sectionsmajor componentshero spacing

var(--atomix-spacing-8)

Spacing 9

Double extra large spacing (36px)

large sectionsmajor separations

var(--atomix-spacing-9)

Spacing 10

Triple extra large spacing (40px)

very large sectionsmajor separations

var(--atomix-spacing-10)

Spacing 11

Quadruple extra large spacing (44px)

maximum spacinghero sections

var(--atomix-spacing-11)

Spacing 12

Quintuple extra large spacing (48px)

maximum spacinghero sections

var(--atomix-spacing-12)

Spacing 14

Extra large spacing (56px)

very large sectionsmajor separations

var(--atomix-spacing-14)

Spacing 16

Extra large spacing (64px)

very large sectionsmajor separations

var(--atomix-spacing-16)

Spacing 20

Extra large spacing (80px)

very large sectionsmajor separations

var(--atomix-spacing-20)

Spacing 24

Extra large spacing (96px)

very large sectionsmajor separations

var(--atomix-spacing-24)

Spacing 28

Extra large spacing (112px)

very large sectionsmajor separations

var(--atomix-spacing-28)

Spacing 32

Extra large spacing (128px)

very large sectionsmajor separations

var(--atomix-spacing-32)

Spacing 36

Extra large spacing (144px)

very large sectionsmajor separations

var(--atomix-spacing-36)

Spacing 40

Extra large spacing (160px)

very large sectionsmajor separations

var(--atomix-spacing-40)

Spacing 44

Extra large spacing (176px)

very large sectionsmajor separations

var(--atomix-spacing-44)

Spacing 48

Extra large spacing (192px)

very large sectionsmajor separations

var(--atomix-spacing-48)

Spacing 52

Extra large spacing (208px)

very large sectionsmajor separations

var(--atomix-spacing-52)

Spacing 56

Extra large spacing (224px)

very large sectionsmajor separations

var(--atomix-spacing-56)

Spacing 60

Extra large spacing (240px)

very large sectionsmajor separations

var(--atomix-spacing-60)

Spacing 64

Extra large spacing (256px)

very large sectionsmajor separations

var(--atomix-spacing-64)

Spacing 72

Extra large spacing (288px)

very large sectionsmajor separations

var(--atomix-spacing-72)

Spacing 80

Extra large spacing (320px)

very large sectionsmajor separations

var(--atomix-spacing-80)

Spacing 90

Extra large spacing (360px)

very large sectionsmajor separations

var(--atomix-spacing-90)

Spacing 200

Extra large spacing (800px)

very large sectionsmajor separations

var(--atomix-spacing-200)

font-family

3 tokens

The quick brown fox

Font Sans Serif

Primary sans-serif font family

body textUI elementsgeneral content

var(--atomix-font-sans-serif)

Aa

The quick brown fox

Font Monospace

Monospace font for code and technical content

code blockstechnical textdata display

var(--atomix-font-monospace)

The quick brown fox

Body Font Family

Font family for body text

body textparagraphs

Display size for large headings

hero headingslarge display text

var(--atomix-display-1)

font-weight

8 tokens

var(--atomix-body-font-weight)

Body Font Weight

Base font weight

body textnormal weight

var(--atomix-body-font-weight)

var(--atomix-font-weight-light)

Font Weight Light

Light font weight

light textsubtle emphasis

var(--atomix-font-weight-light)

var(--atomix-font-weight-normal)

Font Weight Normal

Normal font weight

body textnormal emphasis

var(--atomix-font-weight-normal)

var(--atomix-font-weight-medium)

Font Weight Medium

Medium font weight

medium emphasissubheadings

var(--atomix-font-weight-medium)

var(--atomix-font-weight-semibold)

Font Weight Semibold

Semibold font weight

headingsstrong emphasis

var(--atomix-font-weight-semibold)

var(--atomix-font-weight-bold)

Font Weight Bold

Bold font weight

bold headingsmaximum emphasis

var(--atomix-font-weight-bold)

var(--atomix-font-weight-heavy)

Font Weight Heavy

Heavy font weight

heavy headingsstrong emphasis

var(--atomix-font-weight-heavy)

var(--atomix-font-weight-black)

Font Weight Black

Black font weight

black headingsmaximum emphasis

var(--atomix-font-weight-black)

line-height

4 tokens

Body Line Height

Base line height

body textdefault line height

var(--atomix-body-line-height)

Line Height Base

Base line height

body textdefault line height

var(--atomix-line-height-base)

Line Height SM

Small line height

compact texttight spacing

var(--atomix-line-height-sm)

Line Height LG

Large line height

comfortable readingrelaxed spacing

Letter spacing for H6 headings

H6 headingssmall titles

var(--atomix-letter-spacing-h6)

Border Radius

Consistent border radius scale for rounded corners

9 tokens

Border Radius SM

Small border radius for subtle rounding

form fieldssubtle roundingsmall elements

var(--atomix-border-radius-sm)

Border Radius

Default border radius for standard rounding

buttonscardsstandard elements

var(--atomix-border-radius)

Border Radius LG

Large border radius for generous rounding

large buttonsprominent cardsgenerous rounding

var(--atomix-border-radius-lg)

Border Radius XL

Extra large border radius for significant rounding

hero elementssignificant roundingmodern look

var(--atomix-border-radius-xl)

Border Radius XXL

Extra extra large border radius

large cardsprominent elements

var(--atomix-border-radius-xxl)

Border Radius 2XL

Double extra large border radius (alias for XXL)

large cardsprominent elements

var(--atomix-border-radius-2xl)

Border Radius 3XL

Triple extra large border radius

very large elementshero sections

var(--atomix-border-radius-3xl)

Border Radius 4XL

Quadruple extra large border radius

maximum roundinglarge hero elements

var(--atomix-border-radius-4xl)

Border Radius Pill

Full border radius for circular/pill elements

avatarsbadgescircular buttonspills

var(--atomix-border-radius-pill)

shadow

6 tokens

Box Shadow

Default shadow for standard elevation

buttonsdropdownsstandard elevation

var(--atomix-box-shadow)

Box Shadow XS

Extra small shadow for minimal elevation

subtle elevationminimal depth

var(--atomix-box-shadow-xs)

Box Shadow SM

Small shadow for subtle elevation

cardsform fieldssubtle elevation

var(--atomix-box-shadow-sm)

Box Shadow LG

Large shadow for prominent elevation

modalspopoversprominent elements

var(--atomix-box-shadow-lg)

Box Shadow XL

Extra large shadow for high elevation

overlaysfloating elementshigh elevation

var(--atomix-box-shadow-xl)

Box Shadow Inset

Inset shadow for pressed/depressed states

pressed buttonsinput fieldsinset elements

Z-index for drawer elements

drawerssidebarshighest layer

var(--atomix-z-drawer)

breakpoint

6 tokens

var(--atomix-breakpoint-xs)

Breakpoint XS

Extra small breakpoint (mobile)

mobile devicessmall screens

var(--atomix-breakpoint-xs)

var(--atomix-breakpoint-sm)

Breakpoint SM

Small breakpoint (large mobile)

large mobile devicessmall tablets

var(--atomix-breakpoint-sm)

var(--atomix-breakpoint-md)

Breakpoint MD

Medium breakpoint (tablet)

tabletssmall laptops

var(--atomix-breakpoint-md)

var(--atomix-breakpoint-lg)

Breakpoint LG

Large breakpoint (desktop)

desktopslarge tablets

var(--atomix-breakpoint-lg)

var(--atomix-breakpoint-xl)

Breakpoint XL

Extra large breakpoint (large desktop)

large desktopswide screens

var(--atomix-breakpoint-xl)

var(--atomix-breakpoint-xxl)

Breakpoint XXL

Extra extra large breakpoint (ultra wide)

ultra wide screenslarge displays

var(--atomix-breakpoint-xxl)

transition

12 tokens

Transition Duration Fast

Fast transition duration

quick animationshover effects

var(--atomix-transition-duration-fast)

Transition Duration Base

Base transition duration

standard animationsdefault transitions

var(--atomix-transition-duration-base)

Transition Duration Slow

Slow transition duration

slow animationssmooth transitions

var(--atomix-transition-duration-slow)

Transition Duration Slower

Slower transition duration

very slow animationsextended transitions

var(--atomix-transition-duration-slower)

Easing Base

Base easing function

standard animationsdefault easing

var(--atomix-easing-base)

Easing Ease In Out

Ease in-out easing function

smooth animationsease in-out transitions

var(--atomix-easing-ease-in-out)

Easing Ease Out

Ease out easing function

ease out animationssmooth endings

var(--atomix-easing-ease-out)

Easing Ease In

Ease in easing function

ease in animationssmooth starts

var(--atomix-easing-ease-in)

Easing Ease Linear

Linear easing function

linear animationsconstant speed

var(--atomix-easing-ease-linear)

Transition Fast

Fast transition shorthand

quick transitionshover effects

var(--atomix-transition-fast)

Transition Base

Base transition shorthand

standard transitionsdefault animations

var(--atomix-transition-base)

Transition Slow

Slow transition shorthand

slow transitionssmooth animations

var(--atomix-transition-slow)

Getting Started

Documentation

Resources

Community

All Design Tokens

brand

Primary

Secondary

Light

Dark

semantic

Success

Info

Warning

Error

neutral

Gray 1

Gray 2

Gray 3

Gray 4

Gray 5

Gray 6

Gray 7

Gray 8

Gray 9

Gray 10

primary-scale

Primary 1

Primary 2

Primary 3

Primary 4

Primary 5

Primary 6

Primary 7

Primary 8

Primary 9

Primary 10

red-scale

Red 1

Red 2

Red 3

Red 4

Red 5

Red 6

Red 7

Red 8

Red 9

Red 10

green-scale

Green 1

Green 2

Green 3

Green 4

Green 5

Green 6

Green 7

Green 8

Green 9

Green 10

blue-scale

Blue 1

Blue 2

Blue 3

Blue 4

Blue 5

Blue 6

Blue 7

Blue 8

Blue 9

Blue 10

yellow-scale

Yellow 1

Yellow 2

Yellow 3

Yellow 4

Yellow 5

Yellow 6

Yellow 7

Yellow 8

Yellow 9