Colors

Twenty's color system mirrors Radix Colors: 30 scales × 12 steps with solid and transparent variants. All values are CSS variables that flip between Light and Dark automatically. Toggle the theme in the sidebar.

Semantic tokens

background.primary--t-background-primary

background.secondary--t-background-secondary

background.tertiary--t-background-tertiary

background.quaternary--t-background-quaternary

background.invertedPrimary--t-background-inverted-primary

background.danger--t-background-danger

border.color.strong--t-border-color-strong

border.color.medium--t-border-color-medium

border.color.light--t-border-color-light

border.color.blue--t-border-color-blue

border.color.danger--t-border-color-danger

font.color.primary--t-font-color-primary

font.color.secondary--t-font-color-secondary

font.color.tertiary--t-font-color-tertiary

font.color.inverted--t-font-color-inverted

font.color.danger--t-font-color-danger

accent.primary--t-accent-primary

accent.accent4--t-accent-accent4

accent.accent11--t-accent-accent11

Color scales · 30 × 12 steps

gray

mauve

slate

sage

olive

sand

tomato

red

ruby

crimson

pink

plum

purple

violet

iris

cyan

turquoise

sky

blue

jade

green

grass

mint

lime

bronze

gold

brown

orange

amber

yellow