Colors

Color system built from Cynosure Lutronic brand scales and semantic text/surface tokens.

CSS Tokens SASS Tokens Style Dictionary Component Types

Primary

Colors that are used most frequently across all pages and components.

Null

Primary 100

Primary 200

Primary 300

Primary 400

Primary 500

Primary 600

Primary 700

Primary 800

Primary 900

Primary 1000

Neutral

Colors that are used most frequently across all pages and components.

Null

Neutral 100

Neutral 200

Neutral 300

Neutral 400

Neutral 500

Neutral 600

Neutral 700

Neutral 800

Neutral 900

Neutral 1000

Light-gray

Colors that are used most frequently across all pages and components.

Null

Light Gray 100

Light Gray 200

Light Gray 300

Light Gray 400

Light Gray 500

Text

Colors that are used most frequently across all pages and components.

Null

Primary

Secondary

Muted

Tertiary

Accent

Inverse

Background

Colors that are used most frequently across all pages and components.

Null

Primary

Secondary

Tertiary

Subtle

Error

Base

Colors that are used most frequently across all pages and components.

Warm White

White

Black

On This Page

Swatches below are the live color tokens. For how to apply them in Tailwind (semantic text/surfaces, alphas, CTAs), see Color guidelines.