Skip to content

Tokens

Every semantic token with its value in both themes, a sample drawn with it and a button to copy its name.

This page reads the tokens from @contour-ui/tokens/docs.json, which the token build writes along with tokens.css, so it lists what the stylesheet declares, with the value of each token in each theme. The button next to a variable copies it; Styling with tokens explains how to use them.

Colors

The color roles, grouped as their names are, each group in both themes side by side. Under a value is the palette color it refers to. Text roles show their contrast on the backgrounds they are meant for, as WCAG 2 computes it, and the least ratio the token tests allow in both themes: 7:1 for fg-default, 4.5:1 for the other text roles, and only 3:1 for fg-subtle. So fg-subtle is for units and tick labels, not for text that people read, which needs 4.5:1. Disabled text has no target.

Background

Dark theme

  • --ct-color-bg-canvas
    oklch(0.165 0.008 255)--ct-base-color-neutral-975

    Plugin window background, the lowest layer.

  • --ct-color-bg-surface
    oklch(0.21 0.008 255)--ct-base-color-neutral-950

    Panels and sections placed on the canvas.

  • --ct-color-bg-raised
    oklch(0.28 0.008 255)--ct-base-color-neutral-900

    Menus, popovers, tooltips.

  • --ct-color-bg-inset
    oklch(0.165 0.008 255)--ct-base-color-neutral-975

    Recessed wells: knob and slider tracks, meter backgrounds, displays.

  • --ct-color-bg-hover
    oklch(0.37 0.008 255)--ct-base-color-neutral-800

Light theme

  • --ct-color-bg-canvas
    oklch(0.97 0.008 255)--ct-base-color-neutral-50

    Plugin window background, the lowest layer.

  • --ct-color-bg-surface
    oklch(1 0 0)--ct-base-color-neutral-0

    Panels and sections placed on the canvas.

  • --ct-color-bg-raised
    oklch(1 0 0)--ct-base-color-neutral-0

    Menus, popovers, tooltips.

  • --ct-color-bg-inset
    oklch(0.93 0.008 255)--ct-base-color-neutral-100

    Recessed wells: knob and slider tracks, meter backgrounds, displays.

  • --ct-color-bg-hover
    oklch(0.93 0.008 255)--ct-base-color-neutral-100

Foreground

Dark theme

  • --ct-color-fg-default
    oklch(0.97 0.008 255)--ct-base-color-neutral-50

    Contrast, target 7:1

    • 17.6:1 on bg-canvas · AAA
    • 16.2:1 on bg-surface · AAA
    • 13.3:1 on bg-raised · AAA
  • --ct-color-fg-muted
    oklch(0.79 0.008 255)--ct-base-color-neutral-300

    Contrast, target 4.5:1

    • 9.1:1 on bg-surface · AAA
    • 7.5:1 on bg-raised · AAA
  • --ct-color-fg-subtle
    oklch(0.7 0.008 255)--ct-base-color-neutral-400

    Units, tick labels, secondary metadata.

    Contrast, target 3:1

    • 6.6:1 on bg-surface · AA
    • 7.2:1 on bg-inset · AAA
  • --ct-color-fg-disabled
    oklch(0.54 0.008 255)--ct-base-color-neutral-600

    Contrast, no target: disabled text

    • 3.5:1 on bg-surface · AA large text

Light theme

  • --ct-color-fg-default
    oklch(0.21 0.008 255)--ct-base-color-neutral-950

    Contrast, target 7:1

    • 16.2:1 on bg-canvas · AAA
    • 17.7:1 on bg-surface · AAA
    • 17.7:1 on bg-raised · AAA
  • --ct-color-fg-muted
    oklch(0.46 0.008 255)--ct-base-color-neutral-700

    Contrast, target 4.5:1

    • 7.1:1 on bg-surface · AAA
    • 7.1:1 on bg-raised · AAA
  • --ct-color-fg-subtle
    oklch(0.54 0.008 255)--ct-base-color-neutral-600

    Units, tick labels, secondary metadata.

    Contrast, target 3:1

    • 5.0:1 on bg-surface · AA
    • 4.1:1 on bg-inset · AA large text
  • --ct-color-fg-disabled
    oklch(0.79 0.008 255)--ct-base-color-neutral-300

    Contrast, no target: disabled text

    • 1.9:1 on bg-surface · fails

Border

Dark theme

  • --ct-color-border-subtle
    oklch(0.28 0.008 255)--ct-base-color-neutral-900
  • --ct-color-border-default
    oklch(0.37 0.008 255)--ct-base-color-neutral-800
  • --ct-color-border-strong
    oklch(0.54 0.008 255)--ct-base-color-neutral-600
  • --ct-color-border-focus
    oklch(0.699 0.16 254.527)--ct-base-color-blue-400

Light theme

  • --ct-color-border-subtle
    oklch(0.93 0.008 255)--ct-base-color-neutral-100
  • --ct-color-border-default
    oklch(0.87 0.008 255)--ct-base-color-neutral-200
  • --ct-color-border-strong
    oklch(0.62 0.008 255)--ct-base-color-neutral-500
  • --ct-color-border-focus
    oklch(0.54 0.164 255)--ct-base-color-blue-600

Accent

Dark theme

  • --ct-color-accent-fill
    oklch(0.699 0.16 254.527)--ct-base-color-blue-400
  • --ct-color-accent-fill-hover
    oklch(0.784 0.113 250.654)--ct-base-color-blue-300
  • --ct-color-accent-on-fill
    oklch(0.165 0.008 255)--ct-base-color-neutral-975

    Text and icons placed on accent.fill.

    Contrast, target 4.5:1

    • 7.1:1 on accent-fill · AAA
  • --ct-color-accent-fg
    oklch(0.784 0.113 250.654)--ct-base-color-blue-300

    Contrast, target 4.5:1

    • 7.4:1 on accent-bg · AAA
    • 9.0:1 on bg-surface · AAA
  • --ct-color-accent-bg
    oklch(0.28 0.059 255)--ct-base-color-blue-900
  • --ct-color-accent-border
    oklch(0.54 0.164 255)--ct-base-color-blue-600

Light theme

  • --ct-color-accent-fill
    oklch(0.54 0.164 255)--ct-base-color-blue-600
  • --ct-color-accent-fill-hover
    oklch(0.46 0.145 255)--ct-base-color-blue-700
  • --ct-color-accent-on-fill
    oklch(1 0 0)--ct-base-color-neutral-0

    Text and icons placed on accent.fill.

    Contrast, target 4.5:1

    • 5.1:1 on accent-fill · AA
  • --ct-color-accent-fg
    oklch(0.46 0.145 255)--ct-base-color-blue-700

    Contrast, target 4.5:1

    • 6.5:1 on accent-bg · AA
    • 7.2:1 on bg-surface · AAA
  • --ct-color-accent-bg
    oklch(0.966 0.02 227.18)--ct-base-color-blue-50
  • --ct-color-accent-border
    oklch(0.784 0.113 250.654)--ct-base-color-blue-300

Danger

Dark theme

  • --ct-color-danger-fill
    oklch(0.7 0.183 25)--ct-base-color-red-400
  • --ct-color-danger-fill-hover
    oklch(0.775 0.131 25.158)--ct-base-color-red-300
  • --ct-color-danger-on-fill
    oklch(0.165 0.008 255)--ct-base-color-neutral-975

    Contrast, target 4.5:1

    • 6.6:1 on danger-fill · AA
  • --ct-color-danger-fg
    oklch(0.775 0.131 25.158)--ct-base-color-red-300

    Contrast, target 4.5:1

    • 6.9:1 on danger-bg · AA
    • 8.2:1 on bg-surface · AAA
  • --ct-color-danger-bg
    oklch(0.28 0.065 25)--ct-base-color-red-900
  • --ct-color-danger-border
    oklch(0.54 0.183 25)--ct-base-color-red-600

Light theme

  • --ct-color-danger-fill
    oklch(0.54 0.183 25)--ct-base-color-red-600
  • --ct-color-danger-fill-hover
    oklch(0.46 0.162 25)--ct-base-color-red-700
  • --ct-color-danger-on-fill
    oklch(1 0 0)--ct-base-color-neutral-0

    Contrast, target 4.5:1

    • 5.5:1 on danger-fill · AA
  • --ct-color-danger-fg
    oklch(0.46 0.162 25)--ct-base-color-red-700

    Contrast, target 4.5:1

    • 6.8:1 on danger-bg · AA
    • 7.7:1 on bg-surface · AAA
  • --ct-color-danger-bg
    oklch(0.958 0.02 30.283)--ct-base-color-red-50
  • --ct-color-danger-border
    oklch(0.775 0.131 25.158)--ct-base-color-red-300

Success

Dark theme

  • --ct-color-success-fill
    oklch(0.7 0.154 150)--ct-base-color-green-400
  • --ct-color-success-fill-hover
    oklch(0.79 0.134 150)--ct-base-color-green-300
  • --ct-color-success-on-fill
    oklch(0.165 0.008 255)--ct-base-color-neutral-975

    Contrast, target 4.5:1

    • 7.6:1 on success-fill · AAA
  • --ct-color-success-fg
    oklch(0.79 0.134 150)--ct-base-color-green-300

    Contrast, target 4.5:1

    • 7.7:1 on success-bg · AAA
    • 9.6:1 on bg-surface · AAA
  • --ct-color-success-bg
    oklch(0.28 0.055 150)--ct-base-color-green-900
  • --ct-color-success-border
    oklch(0.542 0.151 149.29)--ct-base-color-green-600

Light theme

  • --ct-color-success-fill
    oklch(0.542 0.151 149.29)--ct-base-color-green-600
  • --ct-color-success-fill-hover
    oklch(0.463 0.132 148.496)--ct-base-color-green-700
  • --ct-color-success-on-fill
    oklch(1 0 0)--ct-base-color-neutral-0

    Contrast, target 4.5:1

    • 4.6:1 on success-fill · AA
  • --ct-color-success-fg
    oklch(0.463 0.132 148.496)--ct-base-color-green-700

    Contrast, target 4.5:1

    • 6.1:1 on success-bg · AA
    • 6.6:1 on bg-surface · AA
  • --ct-color-success-bg
    oklch(0.97 0.048 150.015)--ct-base-color-green-50
  • --ct-color-success-border
    oklch(0.79 0.134 150)--ct-base-color-green-300

Warning

Dark theme

  • --ct-color-warning-fill
    oklch(0.701 0.144 82.937)--ct-base-color-yellow-400
  • --ct-color-warning-fill-hover
    oklch(0.79 0.134 85)--ct-base-color-yellow-300
  • --ct-color-warning-on-fill
    oklch(0.165 0.008 255)--ct-base-color-neutral-975

    Contrast, target 4.5:1

    • 7.1:1 on warning-fill · AAA
  • --ct-color-warning-fg
    oklch(0.79 0.134 85)--ct-base-color-yellow-300

    Contrast, target 4.5:1

    • 7.5:1 on warning-bg · AAA
    • 9.0:1 on bg-surface · AAA
  • --ct-color-warning-bg
    oklch(0.28 0.055 85)--ct-base-color-yellow-900
  • --ct-color-warning-border
    oklch(0.542 0.112 80.284)--ct-base-color-yellow-600

Light theme

  • --ct-color-warning-fill
    oklch(0.542 0.112 80.284)--ct-base-color-yellow-600
  • --ct-color-warning-fill-hover
    oklch(0.462 0.095 79.45)--ct-base-color-yellow-700
  • --ct-color-warning-on-fill
    oklch(1 0 0)--ct-base-color-neutral-0

    Contrast, target 4.5:1

    • 5.0:1 on warning-fill · AA
  • --ct-color-warning-fg
    oklch(0.462 0.095 79.45)--ct-base-color-yellow-700

    Contrast, target 4.5:1

    • 6.4:1 on warning-bg · AA
    • 7.1:1 on bg-surface · AAA
  • --ct-color-warning-bg
    oklch(0.966 0.046 91.726)--ct-base-color-yellow-50
  • --ct-color-warning-border
    oklch(0.79 0.134 85)--ct-base-color-yellow-300

Overlay

Dark theme

  • --ct-color-overlay-scrim
    oklch(0.165 0.008 255 / 0.6)

    Translucent backdrop behind dialogs and drawers.

Light theme

  • --ct-color-overlay-scrim
    oklch(0.165 0.008 255 / 0.4)

    Translucent backdrop behind dialogs and drawers.

Syntax colors

The colors of highlighted code, named after the variables of Shiki's css-variables theme. They are meant for bg-inset, the background of code blocks, at 4.5:1 or more.

Dark theme

  • --ct-color-syntax-constant
    MAX_GAIN 0.71 true
    oklch(0.789 0.141 55.189)--ct-base-color-orange-300

    Numbers, language constants, constant and object names, CSS properties.

    Contrast, target 4.5:1

    • 9.5:1 on bg-inset · AAA
  • --ct-color-syntax-string
    add @contour-ui/react
    oklch(0.79 0.134 85)--ct-base-color-yellow-300

    Unquoted strings: shell arguments, Markdown code.

    Contrast, target 4.5:1

    • 9.8:1 on bg-inset · AAA
  • --ct-color-syntax-comment
    // Follow the system theme
    oklch(0.7 0.008 255)--ct-base-color-neutral-400

    Comments.

    Contrast, target 4.5:1

    • 7.2:1 on bg-inset · AAA
  • --ct-color-syntax-keyword
    export const return
    oklch(0.786 0.13 301.931)--ct-base-color-violet-300

    Keywords and storage modifiers, JSON keys.

    Contrast, target 4.5:1

    • 9.4:1 on bg-inset · AAA
  • --ct-color-syntax-parameter
    theme event
    oklch(0.775 0.131 25.158)--ct-base-color-red-300

    Function parameters.

    Contrast, target 4.5:1

    • 8.9:1 on bg-inset · AAA
  • --ct-color-syntax-function
    useTheme() Button
    oklch(0.784 0.113 250.654)--ct-base-color-blue-300

    Functions, types and classes, JSX and HTML attributes.

    Contrast, target 4.5:1

    • 9.8:1 on bg-inset · AAA
  • --ct-color-syntax-string-expression
    'dark' /px$/
    oklch(0.79 0.134 150)--ct-base-color-green-300

    Quoted and template strings, regular expressions, tag names.

    Contrast, target 4.5:1

    • 10.4:1 on bg-inset · AAA
  • --ct-color-syntax-punctuation
    { } ( ) , ;
    oklch(0.79 0.008 255)--ct-base-color-neutral-300

    Separators and argument punctuation.

    Contrast, target 4.5:1

    • 9.9:1 on bg-inset · AAA
  • --ct-color-syntax-link
    https://example.com
    oklch(0.79 0.1 205)--ct-base-color-cyan-300

    Links in Markdown.

    Contrast, target 4.5:1

    • 10.3:1 on bg-inset · AAA

Light theme

  • --ct-color-syntax-constant
    MAX_GAIN 0.71 true
    oklch(0.462 0.126 47.441)--ct-base-color-orange-700

    Numbers, language constants, constant and object names, CSS properties.

    Contrast, target 4.5:1

    • 6.0:1 on bg-inset · AA
  • --ct-color-syntax-string
    add @contour-ui/react
    oklch(0.462 0.095 79.45)--ct-base-color-yellow-700

    Unquoted strings: shell arguments, Markdown code.

    Contrast, target 4.5:1

    • 5.8:1 on bg-inset · AA
  • --ct-color-syntax-comment
    // Follow the system theme
    oklch(0.46 0.008 255)--ct-base-color-neutral-700

    Comments.

    Contrast, target 4.5:1

    • 5.7:1 on bg-inset · AA
  • --ct-color-syntax-keyword
    export const return
    oklch(0.46 0.145 300)--ct-base-color-violet-700

    Keywords and storage modifiers, JSON keys.

    Contrast, target 4.5:1

    • 6.2:1 on bg-inset · AA
  • --ct-color-syntax-parameter
    theme event
    oklch(0.46 0.162 25)--ct-base-color-red-700

    Function parameters.

    Contrast, target 4.5:1

    • 6.3:1 on bg-inset · AA
  • --ct-color-syntax-function
    useTheme() Button
    oklch(0.46 0.145 255)--ct-base-color-blue-700

    Functions, types and classes, JSX and HTML attributes.

    Contrast, target 4.5:1

    • 5.8:1 on bg-inset · AA
  • --ct-color-syntax-string-expression
    'dark' /px$/
    oklch(0.463 0.132 148.496)--ct-base-color-green-700

    Quoted and template strings, regular expressions, tag names.

    Contrast, target 4.5:1

    • 5.3:1 on bg-inset · AA
  • --ct-color-syntax-punctuation
    { } ( ) , ;
    oklch(0.37 0.008 255)--ct-base-color-neutral-800

    Separators and argument punctuation.

    Contrast, target 4.5:1

    • 8.4:1 on bg-inset · AAA
  • --ct-color-syntax-link
    https://example.com
    oklch(0.469 0.08 207.756)--ct-base-color-cyan-700

    Links in Markdown.

    Contrast, target 4.5:1

    • 5.3:1 on bg-inset · AA

Typography

Each text style is a font shorthand, --ct-text-<style>: pair it with --ct-text-<style>-letter-spacing, which the shorthand cannot hold. The styles come in three sets: dense ones for plugin UIs, long-form ones for docs pages, and a few for site pages such as a home page.

Plugin UI

  • --ct-text-heading

    Gain −6.0 dB at 1.20 kHz

    Size
    14px
    Line height
    1.2
    Weight
    600
    Letter spacing
    0px
    Family
    IBM Plex Sans
  • --ct-text-body

    Gain −6.0 dB at 1.20 kHz

    Size
    13px
    Line height
    1.4
    Weight
    400
    Letter spacing
    0px
    Family
    IBM Plex Sans
  • --ct-text-label

    Gain −6.0 dB at 1.20 kHz

    Size
    11px
    Line height
    1.2
    Weight
    500
    Letter spacing
    0.5px
    Family
    IBM Plex Sans

    Control labels: Gain, Freq, Q.

  • --ct-text-label-lg

    Gain −6.0 dB at 1.20 kHz

    Size
    13px
    Line height
    1.2
    Weight
    500
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Labels of lg controls, such as lg buttons. Body-sized, so without the letter spacing that small labels need.

  • --ct-text-value

    Gain −6.0 dB at 1.20 kHz

    Size
    12px
    Line height
    1.2
    Weight
    400
    Letter spacing
    0px
    Family
    JetBrains Mono

    Numeric readouts: -6.0 dB, 1.2 kHz. Monospace so digits do not shift while the value changes.

  • --ct-text-caption

    Gain −6.0 dB at 1.20 kHz

    Size
    10px
    Line height
    1.2
    Weight
    400
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Units, tick marks, scale labels.

Docs pages

  • --ct-text-display

    Gain −6.0 dB at 1.20 kHz

    Size
    30px
    Line height
    1.2
    Weight
    600
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Page title of long-form pages such as docs (h1).

  • --ct-text-title

    Gain −6.0 dB at 1.20 kHz

    Size
    24px
    Line height
    1.2
    Weight
    600
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Section heading of long-form pages (h2).

  • --ct-text-subtitle

    Gain −6.0 dB at 1.20 kHz

    Size
    18px
    Line height
    1.2
    Weight
    600
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Subsection heading of long-form pages (h3).

  • --ct-text-prose

    Gain −6.0 dB at 1.20 kHz

    Size
    15px
    Line height
    1.6
    Weight
    400
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Long-form reading: docs paragraphs and lists.

  • --ct-text-code

    Gain −6.0 dB at 1.20 kHz

    Size
    13px
    Line height
    1.4
    Weight
    400
    Letter spacing
    0px
    Family
    JetBrains Mono

    Code in running text and in code blocks. Same line height as body, so inline code never spreads its lines.

Site pages

  • --ct-text-hero

    Gain −6.0 dB at 1.20 kHz

    Size
    60px
    Line height
    1.05
    Weight
    600
    Letter spacing
    -1px
    Family
    IBM Plex Sans

    Hero title of a site page such as a home page (h1): larger than display, with tighter lines and letter spacing.

  • --ct-text-lead

    Gain −6.0 dB at 1.20 kHz

    Size
    16px
    Line height
    1.6
    Weight
    400
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Lead paragraph under a hero title.

  • --ct-text-nav

    Gain −6.0 dB at 1.20 kHz

    Size
    15px
    Line height
    1.2
    Weight
    500
    Letter spacing
    0px
    Family
    IBM Plex Sans

    Navigation links in a site header.

Space and size

Space

Padding inside controls and panels, and the gaps between them.

TokenSampleValue
--ct-space-control-inset

Horizontal padding inside sm and md buttons, inputs, selects.

6px--ct-base-space-6
--ct-space-control-inset-lg

Horizontal padding inside lg buttons, inputs, selects.

12px--ct-base-space-12
--ct-space-control-gap

Gap between icon and label in sm and md controls, or between a control and its value readout.

4px--ct-base-space-4
--ct-space-control-gap-lg

Gap between icon and label in lg controls.

6px--ct-base-space-6
--ct-space-group-gap

Gap between controls inside one group.

8px--ct-base-space-8
--ct-space-section-gap

Gap between panels or sections.

16px--ct-base-space-16
--ct-space-panel-inset

Padding inside a panel.

12px--ct-base-space-12

Size

The heights of controls, the same for every kind of control of a size, and the sizes of icons.

TokenSampleValue
--ct-size-control-sm
20px--ct-base-space-20
--ct-size-control-md
24px--ct-base-space-24
--ct-size-control-lg
32px--ct-base-space-32
--ct-size-icon-sm

Icons next to label text, and in small icon buttons.

12px--ct-base-space-12
--ct-size-icon-md

Standalone icons: medium icon buttons, alert indicators.

16px--ct-base-space-16
--ct-size-icon-lg

Icons in large icon buttons.

20px--ct-base-space-20

Overlay sizes

How wide dialogs and popovers grow, and how far drawers reach in. The samples are drawn at a quarter of the size.

TokenSample (1:4)Value
--ct-size-dialog-sm

Greatest width of a small dialog: questions, alert dialogs.

400px--ct-base-size-400
--ct-size-dialog-md

Greatest width of a medium dialog, the default: forms, search.

560px--ct-base-size-560
--ct-size-dialog-lg

Greatest width of a large dialog: longer content.

800px--ct-base-size-800
--ct-size-drawer-sm

Reach of a small drawer, the default: its width from a side, its greatest height from the top or the bottom.

320px--ct-base-size-320
--ct-size-drawer-md

Reach of a medium drawer: its width from a side, its greatest height from the top or the bottom.

448px--ct-base-size-448
--ct-size-drawer-lg

Reach of a large drawer: its width from a side, its greatest height from the top or the bottom.

640px--ct-base-size-640
--ct-size-popover

Greatest width of a popover, or the width of its trigger when that is wider.

320px--ct-base-size-320

Radius and border width

Radius

TokenSampleValue
--ct-radius-control
4px--ct-base-radius-4
--ct-radius-panel
8px--ct-base-radius-8
--ct-radius-round
9999px--ct-base-radius-full

Border width

TokenSampleValue
--ct-border-width-default
1px--ct-base-border-width-1
--ct-border-width-focus
2px--ct-base-border-width-2

Shadows

A box-shadow list, stronger in the dark theme. A shadow is decoration: whatever casts it also has a border and a raised background, as these cards do.

Dark theme

  • --ct-shadow-raised

    Popovers, menus, listboxes.

    0px 1px 2px 0px oklch(0 0 0 / 0.3)0px 4px 12px -2px oklch(0 0 0 / 0.4)
  • --ct-shadow-overlay

    Dialogs and drawers.

    0px 2px 4px 0px oklch(0 0 0 / 0.3)0px 16px 40px -8px oklch(0 0 0 / 0.5)

Light theme

  • --ct-shadow-raised

    Popovers, menus, listboxes.

    0px 1px 2px 0px oklch(0 0 0 / 0.06)0px 4px 12px -2px oklch(0 0 0 / 0.12)
  • --ct-shadow-overlay

    Dialogs and drawers.

    0px 2px 4px 0px oklch(0 0 0 / 0.06)0px 16px 40px -8px oklch(0 0 0 / 0.18)

Layers

Plain numbers for z-index: the stacking order of what floats above the page.

TokenValue
--ct-layer-sticky

Sticky headers and toolbars, above page content.

100
--ct-layer-overlay

Popovers, dialogs and drawers, above sticky elements.

1000

Motion

A duration, an easing and a delay, for transition: <property> var(--ct-motion-<name>). Hover a row, or move the focus to its copy button, and the dot crosses its track with that transition; the curve beside it is the easing. Under reduced motion, the dot only changes color.

TokenDemoValue
--ct-motion-feedback

Hover, press, toggle state. Never used for value changes driven by drag or automation — those render immediately.

80ms cubic-bezier(0, 0, 0.2, 1) 0ms
--ct-motion-enter

Menus and popovers appearing.

150ms cubic-bezier(0.2, 0, 0, 1) 0ms
--ct-motion-exit

Menus, popovers and dialogs closing: shorter than enter, accelerating away.

100ms cubic-bezier(0.4, 0, 1, 1) 0ms

Base palette

The raw colors behind the roles, --ct-base-color-<hue>-<stop>, for tuning the roles. They are not part of the API and change without notice: use the roles above.