Colors

Every colour token in Outkast, grouped by what it does, with the variable to use.

Ground

A white page and one soft grey for panels.

  • background

    var(--color-background)

    The page and text on the black button

  • muted

    var(--color-muted)

    The footer card, quote panels and the muted button

Ink

Near-black for type, one grey for everything that supports it.

  • foreground

    var(--color-foreground)

    Headings, strong text and link chevrons

  • muted-foreground

    var(--color-muted-foreground)

    Subtitles, captions and meta lines

Actions

The button pairs. No accent colour: the photography brings the colour.

  • primary

    var(--color-primary)

    The primary button

  • primary-foreground

    var(--color-primary-foreground)

    Text on the primary button

  • accent

    var(--color-accent)

    A spare mid grey for the accent button

  • accent-foreground

    var(--color-accent-foreground)

    Text on the accent button

Lines

Kept for form fields and focus, never for dividers.

  • border

    var(--color-border)

    Form fields

  • ring

    var(--color-ring)

    Focus outlines