Colors

Semantic Colors

Primary
0
1
2
3
4
5
6
7
8
9
10
Secondary
0
1
2
3
4
5
6
7
8
9
10
Tertiary
0
1
2
3
4
5
6
7
8
9
10
Success
0
1
2
3
4
5
6
7
8
9
10
Warning
0
1
2
3
4
5
6
7
8
9
10
Danger
0
1
2
3
4
5
6
7
8
9
10
Info
0
1
2
3
4
5
6
7
8
9
10
Semantic Levels
Primary
lighter
light
default
dark
darker
Secondary
lighter
light
default
dark
darker
Tertiary
lighter
light
default
dark
darker
Success
lighter
light
default
dark
darker
Warning
lighter
light
default
dark
darker
Danger
lighter
light
default
dark
darker
Info
lighter
light
default
dark
darker

Common HUE Colors

Red
0
1
2
3
4
5
6
7
8
9
10
Orange
0
1
2
3
4
5
6
7
8
9
10
Yellow
0
1
2
3
4
5
6
7
8
9
10
Green
0
1
2
3
4
5
6
7
8
9
10
Teal
0
1
2
3
4
5
6
7
8
9
10
Cyan
0
1
2
3
4
5
6
7
8
9
10
Blue
0
1
2
3
4
5
6
7
8
9
10
Indigo
0
1
2
3
4
5
6
7
8
9
10
Purple
0
1
2
3
4
5
6
7
8
9
10
Pink
0
1
2
3
4
5
6
7
8
9
10

Other Palettes

Default Palette
0
1
2
3
4
5
6
7
8
9
10
Neutral Palette
0
1
2
3
4
5
6
7
8
9
10

Color Utility Classes

Surface & Body Text

bg-surface-*

bg-surface-overlay
bg-surface-raised
bg-surface
bg-surface-sunken
bg-surface-sunkener

text-body-*

text-body text-body-subtle text-body-muted text-body-strong

bg-{semantic} — Named Levels

Primary
bg-primary-lighter
bg-primary-light
bg-primary
bg-primary-dark
bg-primary-darker
Secondary
bg-secondary-lighter
bg-secondary-light
bg-secondary
bg-secondary-dark
bg-secondary-darker
Tertiary
bg-tertiary-lighter
bg-tertiary-light
bg-tertiary
bg-tertiary-dark
bg-tertiary-darker
Success
bg-success-lighter
bg-success-light
bg-success
bg-success-dark
bg-success-darker
Warning
bg-warning-lighter
bg-warning-light
bg-warning
bg-warning-dark
bg-warning-darker
Danger
bg-danger-lighter
bg-danger-light
bg-danger
bg-danger-dark
bg-danger-darker
Info
bg-info-lighter
bg-info-light
bg-info
bg-info-dark
bg-info-darker
Neutral
bg-neutral-lighter
bg-neutral-light
bg-neutral
bg-neutral-dark
bg-neutral-darker

text-{semantic} — Named Levels

Primary
text-primary-lighter text-primary-light text-primary text-primary-dark text-primary-darker
Secondary
text-secondary-lighter text-secondary-light text-secondary text-secondary-dark text-secondary-darker
Tertiary
text-tertiary-lighter text-tertiary-light text-tertiary text-tertiary-dark text-tertiary-darker
Success
text-success-lighter text-success-light text-success text-success-dark text-success-darker
Warning
text-warning-lighter text-warning-light text-warning text-warning-dark text-warning-darker
Danger
text-danger-lighter text-danger-light text-danger text-danger-dark text-danger-darker
Info
text-info-lighter text-info-light text-info text-info-dark text-info-darker
Neutral
text-neutral-lighter text-neutral-light text-neutral text-neutral-dark text-neutral-darker

bg-{hue} — Named Levels

Red
lighter
light
default
dark
darker
Orange
lighter
light
default
dark
darker
Yellow
lighter
light
default
dark
darker
Lime
lighter
light
default
dark
darker
Green
lighter
light
default
dark
darker
Teal
lighter
light
default
dark
darker
Cyan
lighter
light
default
dark
darker
Blue
lighter
light
default
dark
darker
Indigo
lighter
light
default
dark
darker
Violet
lighter
light
default
dark
darker
Purple
lighter
light
default
dark
darker
Pink
lighter
light
default
dark
darker

bg-{color}-{n} / bg-{color}-gray-{n} / text-{color}-{n} — Numeric Levels (primary)

bg-primary-{n}
bg-primary-0
bg-primary-1
bg-primary-2
bg-primary-3
bg-primary-4
bg-primary-5
bg-primary-6
bg-primary-7
bg-primary-8
bg-primary-9
bg-primary-10
bg-primary-gray-{n}
bg-primary-gray-0
bg-primary-gray-1
bg-primary-gray-2
bg-primary-gray-3
bg-primary-gray-4
bg-primary-gray-5
bg-primary-gray-6
bg-primary-gray-7
bg-primary-gray-8
bg-primary-gray-9
bg-primary-gray-10
text-primary-{n}
text-primary-0
text-primary-1
text-primary-2
text-primary-3
text-primary-4
text-primary-5
text-primary-6
text-primary-7
text-primary-8
text-primary-9
text-primary-10
text-primary-gray-{n}
text-primary-gray-0
text-primary-gray-1
text-primary-gray-2
text-primary-gray-3
text-primary-gray-4
text-primary-gray-5
text-primary-gray-6
text-primary-gray-7
text-primary-gray-8
text-primary-gray-9
text-primary-gray-10
text-primary-accent-{n}
text-primary-accent-0
text-primary-accent-1
text-primary-accent-2
text-primary-accent-3
text-primary-accent-4
text-primary-accent-5
text-primary-accent-6
text-primary-accent-7
text-primary-accent-8
text-primary-accent-9
text-primary-accent-10