Skip to content
aidsgnaidsgnaidsgn

Color tokens

Color tokens establish a restrained palette for surfaces, text, borders, actions, accents, and status feedback. Primitive colors are authored in perceptual oklch(), which makes lightness and chroma relationships predictable and allows capable displays to use a wider gamut.

Primitive palettes

Section titled “Primitive palettes”

Each chromatic family has a complete 50–950 scale: smaller numbers are lighter and larger numbers are darker. Slate also includes 0 as the absolute-light endpoint. Lightness changes systematically across the scale while chroma peaks around the middle, keeping pale and dark endpoints useful without making them unnaturally vivid.

Palette Intended vocabulary
Slate Neutral text, surfaces, borders, and elevation color.
Blue Primary actions, focus, and informational roles.
Coral Distinctive, non-critical accent emphasis.
Green Positive and success roles.
Amber Caution and warning roles.
Red Critical, error, and destructive roles.

Slate

0
50
100
200
300
400
500
600
700
800
900
950

Blue

50
100
200
300
400
500
600
700
800
900
950

Coral

50
100
200
300
400
500
600
700
800
900
950

Green

50
100
200
300
400
500
600
700
800
900
950

Amber

50
100
200
300
400
500
600
700
800
900
950

Red

50
100
200
300
400
500
600
700
800
900
950

Overlay

scrim

Use semantic color roles

Section titled “Use semantic color roles”

Components use semantic roles such as --aidsgn-color-text-primary, --aidsgn-color-surface-action, and --aidsgn-color-border-default. Primitive variables such as --aidsgn-color-blue-500 are palette ingredients, not component APIs.

{
  "aidsgn": {
    "color": {
      "surface": {
        "action": {
          "$type": "color",
          "$value": "{aidsgn.color.blue.500}"
        }
      }
    }
  }
}

Light and dark themes override semantic colors rather than changing component selectors. Check contrast for every foreground/background pairing, and never rely on color alone for state or meaning. Status colors need supporting text, an icon, or native semantics.

The translucent overlay primitive is exposed as --aidsgn-color-overlay-scrim and aliased by --aidsgn-color-surface-backdrop. It provides visual separation for modal content; native dialog modality provides the actual interaction behavior.