Color

    Neutrals carry the brand. Teal black and air white do most of the work, the grey ramp sits between them, and one teal accent marks what is active. Every value here is read from the Design System.

    On this page

    Teal black

    Token
    HEX
    OKLCH
    RGB

    Palette

    The brand primitives above, then the neutral ramp, the accent and the status colors. The semantic tokens that map these to the light and dark themes are in the color tokens file under Downloads.

    Neutrals

    The grey ramp runs from white to black. Grey 500 is for fills only, never a dark surface.

    • white
    • grey-025
    • grey-050
    • grey-100
    • grey-200
    • grey-250
    • grey-300
    • grey-400
    • grey-500
    • black

    Accent

    One hue, used as a spot: the active nav item, a chip, a data bar, the primary action in a product. Surfaces, body text and borders stay neutral. A product sets its own hue in one token and the same spots take it.

    The IM Digital teal accent, --accent-brand
    The same frame with a product's blue accent. Only the spots change.

    Status

    Utility colors for system states, not brand colors. Each has two values: the bright one for dots, fills, borders and icons, never text, and the ink for text.

    • errorInk text
      Bright
      Ink
    • successInk text
      Bright
      Ink
    • warningInk text
      Bright
      Ink
    • infoInk text
      Bright
      Ink

    Downloads

    All downloads