Colors Tokens

Explore the precise CSS variables mapped to this category to build pixel-perfect UIs.

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)

Getting Started

Documentation

Resources

Community

Colors 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