Elanor

Color

Colors for surfaces, content, fills, and status, in light and dark.

Surfaces & content

Surfaces

4 tokens

  • color.background.canvasBrand-specific

    --semantic-color-background-canvas

    Use as the foundational background of a page or application.

    Light
    oklch(93.02% 0.0059 59.65) color.moonstone
    Dark
    oklch(21.04% 0.0108 163.73) color.night

  • color.background.surface

    --semantic-color-background-surface

    Use for standard structural containers such as cards, panels, and content sections.

    Light
    oklch(95.71% 0 0) color.graphite.50
    Dark
    oklch(30.15% 0 0) color.graphite.800

  • color.background.backdrop

    --semantic-color-background-backdrop

    Use behind modal dialogs, drawers, and other blocking overlays to dim underlying content.

    Light and dark
    oklch(17.76% 0 0 / 0.15)

  • color.background.skeleton

    --semantic-color-background-skeleton

    Use for placeholders that stand in for content while it loads, on canvas and surfaces. Do not use for empty or disabled states.

    Light
    oklch(91.41% 0 0) color.graphite.100
    Dark
    oklch(39.29% 0 0) color.graphite.700

Text

3 tokens

  • color.text.primary

    --semantic-color-text-primary

    Use for default body copy and interface labels requiring the strongest standard text emphasis.

    Light
    oklch(17.76% 0 0) color.black
    Dark
    oklch(97.31% 0 0) color.white

  • color.text.secondary

    --semantic-color-text-secondary

    Use for supporting text and metadata that should be less prominent than primary text.

    Light
    oklch(48.15% 0 0) color.graphite.600
    Dark
    oklch(74.2% 0 0) color.graphite.300

  • color.text.link

    --semantic-color-text-link

    Use for interactive text links.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(74.2% 0.077 231.49) color.cerulianBlue.300

Icons

3 tokens

  • color.icon.primary

    --semantic-color-icon-primary

    Use for default interface icons requiring the strongest standard icon emphasis.

    Light
    oklch(17.76% 0 0) color.black
    Dark
    oklch(97.31% 0 0) color.white

  • color.icon.secondary

    --semantic-color-icon-secondary

    Use for supporting icons that should be less prominent than primary icons.

    Light
    oklch(48.15% 0 0) color.graphite.600
    Dark
    oklch(74.2% 0 0) color.graphite.300

  • color.icon.link

    --semantic-color-icon-link

    Use for icons that accompany interactive text links.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(74.2% 0.077 231.49) color.cerulianBlue.300

Borders

2 tokens

  • color.border.primary

    --semantic-color-border-primary

    Use for default boundaries and dividers that require clear visual separation.

    Light
    oklch(56.88% 0 0) color.graphite.500
    Dark
    oklch(65.56% 0 0) color.graphite.400

  • color.border.secondary

    --semantic-color-border-secondary

    Use for subtle decorative boundaries and dividers. Do not use when the boundary is the only visual cue identifying a control.

    Light
    oklch(91.41% 0 0) color.graphite.100
    Dark
    oklch(39.29% 0 0) color.graphite.700

Focus ring

1 token

  • color.focusRing

    --semantic-color-focus-ring

    Use for the default visible keyboard-focus indicator around an interactive element.

    Light
    oklch(56.88% 0.0921 231.49) color.cerulianBlue.500
    Dark
    oklch(65.56% 0.0959 231.49) color.cerulianBlue.400

Fills

Primary

8 tokens

  • color.background.fill.primary

    Use for default high-prominence filled elements such as primary buttons, strong badges, or prominent actions.

  • color.background.fill.primary.neutral

    Use for high-prominence filled elements that require a neutral treatment.

  • color.text.onPrimaryFill

    --semantic-color-text-on-primary-fill

    Use for text placed on primary fills such as prominent filled buttons, chips, or badges.

    Light
    oklch(97.31% 0 0) color.white
    Dark
    oklch(17.76% 0 0) color.black

  • color.icon.onPrimaryFill

    --semantic-color-icon-on-primary-fill

    Use for icons placed on primary fills such as prominent filled buttons, chips, or badges.

    Light
    oklch(97.31% 0 0) color.white
    Dark
    oklch(17.76% 0 0) color.black

Secondary

5 tokens

  • color.background.fill.secondary

    Use for lower-prominence filled elements such as secondary buttons, neutral chips, or subtle selected states.

  • color.text.onSecondaryFill

    --semantic-color-text-on-secondary-fill

    Use for text placed on secondary fills that have lower visual prominence than primary fills.

    Light
    oklch(48.15% 0 0) color.graphite.600
    Dark
    oklch(82.81% 0 0) color.graphite.200

  • color.icon.onSecondaryFill

    --semantic-color-icon-on-secondary-fill

    Use for icons placed on secondary fills that have lower visual prominence than primary fills.

    Light
    oklch(48.15% 0 0) color.graphite.600
    Dark
    oklch(82.81% 0 0) color.graphite.200

Ghost

6 tokens

  • color.background.fill.ghost

    Use when a default bounded element intentionally has no visible fill and should reveal its parent background.

  • color.background.fill.ghost.neutral

    Use when a neutral bounded element intentionally has no visible fill and should reveal its parent background.

Selected

4 tokens

  • color.background.fill.selected

    Use for selected controls and progress indicators that require a distinct accent fill.

  • color.icon.onSelectedFill

    --semantic-color-icon-on-selected-fill

    Use for icons and indicators placed on selected accent fills.

    Light
    oklch(97.31% 0 0) color.white
    Dark
    oklch(17.76% 0 0) color.black

Status

Information

14 tokens

  • color.text.information

    --semantic-color-text-information

    Use for text that communicates neutral information or guidance.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(74.2% 0.077 231.49) color.cerulianBlue.300

  • color.icon.information

    --semantic-color-icon-information

    Use for icons that communicate neutral information or guidance.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(74.2% 0.077 231.49) color.cerulianBlue.300

  • color.border.information

    --semantic-color-border-information

    Use for boundaries around elements that communicate neutral information or guidance.

    Light
    oklch(56.88% 0.0921 231.49) color.cerulianBlue.500
    Dark
    oklch(65.56% 0.0959 231.49) color.cerulianBlue.400

  • color.background.fill.primary.information

    Use for high-prominence filled elements that communicate neutral information or guidance.

  • color.background.fill.secondary.information

    Use for lower-prominence filled elements that communicate neutral information or guidance.

  • color.text.onSecondaryFill.information

    --semantic-color-text-on-secondary-fill-information

    Use for text placed on secondary fills that communicate neutral information or guidance.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(82.81% 0.0407 231.49) color.cerulianBlue.200

  • color.icon.onSecondaryFill.information

    --semantic-color-icon-on-secondary-fill-information

    Use for icons placed on secondary fills that communicate neutral information or guidance.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(82.81% 0.0407 231.49) color.cerulianBlue.200

  • color.background.fill.ghost.information

    Use when an informational bounded element intentionally has no visible fill and should reveal its parent background.

Positive

15 tokens

  • color.text.positive

    --semantic-color-text-positive

    Use for text that communicates success, a favorable outcome, or positive confirmation.

    Light
    oklch(48.15% 0.0826 158.68) color.turquoiseGreen.600
    Dark
    oklch(74.2% 0.0946 158.68) color.turquoiseGreen.300

  • color.icon.positive

    --semantic-color-icon-positive

    Use for icons that communicate success, a favorable outcome, or positive confirmation.

    Light
    oklch(48.15% 0.0826 158.68) color.turquoiseGreen.600
    Dark
    oklch(74.2% 0.0946 158.68) color.turquoiseGreen.300

  • color.border.positive

    --semantic-color-border-positive

    Use for boundaries around elements that communicate success, a favorable outcome, or positive confirmation.

    Light
    oklch(56.88% 0.1026 158.68) color.turquoiseGreen.500
    Dark
    oklch(65.56% 0.1101 158.68) color.turquoiseGreen.400

  • color.focusRing.positive

    --semantic-color-focus-ring-positive

    Use for the visible keyboard-focus indicator around an element in a positive or success state.

    Light
    oklch(56.88% 0.1026 158.68) color.turquoiseGreen.500
    Dark
    oklch(65.56% 0.1101 158.68) color.turquoiseGreen.400

  • color.background.fill.primary.positive

    Use for high-prominence filled elements that trigger or communicate a positive action or outcome.

  • color.background.fill.secondary.positive

    Use for lower-prominence filled elements that communicate success, a favorable outcome, or positive confirmation.

  • color.text.onSecondaryFill.positive

    --semantic-color-text-on-secondary-fill-positive

    Use for text placed on secondary fills that communicate success, a favorable outcome, or positive confirmation.

    Light
    oklch(48.15% 0.0826 158.68) color.turquoiseGreen.600
    Dark
    oklch(82.81% 0.0549 158.68) color.turquoiseGreen.200

  • color.icon.onSecondaryFill.positive

    --semantic-color-icon-on-secondary-fill-positive

    Use for icons placed on secondary fills that communicate success, a favorable outcome, or positive confirmation.

    Light
    oklch(48.15% 0.0826 158.68) color.turquoiseGreen.600
    Dark
    oklch(82.81% 0.0549 158.68) color.turquoiseGreen.200

  • color.background.fill.ghost.positive

    Use when a positive bounded element intentionally has no visible fill and should reveal its parent background.

Negative

15 tokens

  • color.text.negative

    --semantic-color-text-negative

    Use for text that communicates an error, unfavorable outcome, or negative consequence.

    Light
    oklch(48.15% 0.1571 25) color.coralRed.600
    Dark
    oklch(74.2% 0.1087 25) color.coralRed.300

  • color.icon.negative

    --semantic-color-icon-negative

    Use for icons that communicate an error, unfavorable outcome, or negative consequence.

    Light
    oklch(48.15% 0.1571 25) color.coralRed.600
    Dark
    oklch(74.2% 0.1087 25) color.coralRed.300

  • color.border.negative

    --semantic-color-border-negative

    Use for boundaries around elements that communicate an error, unfavorable outcome, or negative consequence.

    Light
    oklch(56.88% 0.2013 25) color.coralRed.500
    Dark
    oklch(65.56% 0.1795 25) color.coralRed.400

  • color.focusRing.negative

    --semantic-color-focus-ring-negative

    Use for the visible keyboard-focus indicator around an element in a negative or error state.

    Light
    oklch(56.88% 0.2013 25) color.coralRed.500
    Dark
    oklch(65.56% 0.1795 25) color.coralRed.400

  • color.background.fill.primary.negative

    Use for high-prominence filled elements that trigger or communicate a negative action or outcome.

  • color.background.fill.secondary.negative

    Use for lower-prominence filled elements that communicate an error, unfavorable outcome, or negative consequence.

  • color.text.onSecondaryFill.negative

    --semantic-color-text-on-secondary-fill-negative

    Use for text placed on secondary fills that communicate an error, unfavorable outcome, or negative consequence.

    Light
    oklch(48.15% 0.1571 25) color.coralRed.600
    Dark
    oklch(82.81% 0.0491 25) color.coralRed.200

  • color.icon.onSecondaryFill.negative

    --semantic-color-icon-on-secondary-fill-negative

    Use for icons placed on secondary fills that communicate an error, unfavorable outcome, or negative consequence.

    Light
    oklch(48.15% 0.1571 25) color.coralRed.600
    Dark
    oklch(82.81% 0.0491 25) color.coralRed.200

  • color.background.fill.ghost.negative

    Use when a negative bounded element intentionally has no visible fill and should reveal its parent background.

Warning

9 tokens

  • color.text.warning

    --semantic-color-text-warning

    Use for text that warns about a potential issue requiring attention.

    Light
    oklch(48.15% 0.0971 82.36) color.creamYellow.600
    Dark
    oklch(74.2% 0.1384 82.36) color.creamYellow.300

  • color.icon.warning

    --semantic-color-icon-warning

    Use for icons that warn about a potential issue requiring attention.

    Light
    oklch(48.15% 0.0971 82.36) color.creamYellow.600
    Dark
    oklch(74.2% 0.1384 82.36) color.creamYellow.300

  • color.border.warning

    --semantic-color-border-warning

    Use for boundaries around elements that warn about a potential issue requiring attention.

    Light
    oklch(56.88% 0.1171 82.36) color.creamYellow.500
    Dark
    oklch(65.56% 0.1325 82.36) color.creamYellow.400

  • color.focusRing.warning

    --semantic-color-focus-ring-warning

    Use for the visible keyboard-focus indicator around an element in a warning state.

    Light
    oklch(56.88% 0.1171 82.36) color.creamYellow.500
    Dark
    oklch(65.56% 0.1325 82.36) color.creamYellow.400

  • color.background.fill.secondary.warning

    Use for lower-prominence filled elements that warn about a potential issue requiring attention.

  • color.text.onSecondaryFill.warning

    --semantic-color-text-on-secondary-fill-warning

    Use for text placed on secondary fills that warn about a potential issue requiring attention.

    Light
    oklch(48.15% 0.0971 82.36) color.creamYellow.600
    Dark
    oklch(82.81% 0.1101 82.36) color.creamYellow.200

  • color.icon.onSecondaryFill.warning

    --semantic-color-icon-on-secondary-fill-warning

    Use for icons placed on secondary fills that warn about a potential issue requiring attention.

    Light
    oklch(48.15% 0.0971 82.36) color.creamYellow.600
    Dark
    oklch(82.81% 0.1101 82.36) color.creamYellow.200

Controls

Checkbox

5 tokens

  • color.background.checkbox

    Use for the checkbox container when it is not selected.

  • color.icon.checkbox.indicator

    --semantic-color-icon-checkbox-indicator

    Use for the visible indicator inside a selected checkbox.

    Light
    oklch(97.31% 0 0) color.white
    Dark
    oklch(17.76% 0 0) color.black

Radio

7 tokens

Switch

3 tokens

  • color.background.switch

    Use for the switch track when it is off.

  • color.background.switch.knob

    --semantic-color-background-switch-knob

    Use for the movable knob inside a switch track.

    Light
    oklch(97.31% 0 0) color.white
    Dark
    oklch(17.76% 0 0) color.black

Slider

7 tokens

Special purpose

Code syntax

9 tokens

  • color.text.code

    --semantic-color-text-code

    Use for plain source code text that no syntax role colors.

    Light
    oklch(39.29% 0 0) color.graphite.700
    Dark
    oklch(82.81% 0 0) color.graphite.200

  • color.text.code.comment

    --semantic-color-text-code-comment

    Use for code comments. Muted relative to plain code text.

    Light
    oklch(48.15% 0 0) color.graphite.600
    Dark
    oklch(74.2% 0 0) color.graphite.300

  • color.text.code.function

    --semantic-color-text-code-function

    Use for function and method names in code.

    Light
    oklch(48.15% 0.0971 82.36) color.creamYellow.600
    Dark
    oklch(74.2% 0.1384 82.36) color.creamYellow.300

  • color.text.code.keyword

    --semantic-color-text-code-keyword

    Use for language keywords and tag names in code.

    Light
    oklch(48.15% 0.075 231.49) color.cerulianBlue.600
    Dark
    oklch(74.2% 0.077 231.49) color.cerulianBlue.300

  • color.text.code.number

    --semantic-color-text-code-number

    Use for numbers and language literals such as true, false, and null in code.

    Light
    oklch(48.15% 0.0826 158.68) color.turquoiseGreen.600
    Dark
    oklch(74.2% 0.0946 158.68) color.turquoiseGreen.300

  • color.text.code.punctuation

    --semantic-color-text-code-punctuation

    Use for code punctuation and operators. Muted relative to plain code text.

    Light
    oklch(48.15% 0 0) color.graphite.600
    Dark
    oklch(74.2% 0 0) color.graphite.300

  • color.text.code.string

    --semantic-color-text-code-string

    Use for strings and regular expressions in code.

    Light
    oklch(48.15% 0.1571 25) color.coralRed.600
    Dark
    oklch(74.2% 0.1087 25) color.coralRed.300

  • color.text.code.type

    --semantic-color-text-code-type

    Use for types, classes, and built-ins in code.

    Light
    oklch(48.15% 0.1519 295) color.amethystViolet.600
    Dark
    oklch(74.2% 0.0875 295) color.amethystViolet.300

  • color.text.code.variable

    --semantic-color-text-code-variable

    Use for variables, parameters, properties, and attribute names in code.

    Light
    oklch(48.15% 0.0664 202.43) color.calamineBlue.600
    Dark
    oklch(74.2% 0.0778 202.43) color.calamineBlue.300

Data visualization

10 tokens

  • color.background.fill.dataViz.100

    --semantic-color-background-fill-data-viz-100

    Use for the first data series in charts and for meter indicators. Do not use to signal status.

    Light and dark
    oklch(57.53% 0.0799 251.64) color.dataViz.100

  • color.background.fill.dataViz.200

    --semantic-color-background-fill-data-viz-200

    Use for the second data series in charts. Do not use to signal status.

    Light and dark
    oklch(72.04% 0.1526 59.43) color.dataViz.200

  • color.background.fill.dataViz.300

    --semantic-color-background-fill-data-viz-300

    Use for the third data series in charts. Do not use to signal status.

    Light and dark
    oklch(61.38% 0.165 19.81) color.dataViz.300

  • color.background.fill.dataViz.400

    --semantic-color-background-fill-data-viz-400

    Use for the fourth data series in charts. Do not use to signal status.

    Light and dark
    oklch(74.44% 0.0602 186.39) color.dataViz.400

  • color.background.fill.dataViz.500

    --semantic-color-background-fill-data-viz-500

    Use for the fifth data series in charts. Do not use to signal status.

    Light and dark
    oklch(64.9% 0.1299 137.59) color.dataViz.500

  • color.background.fill.dataViz.600

    --semantic-color-background-fill-data-viz-600

    Use for the sixth data series in charts. Do not use to signal status.

    Light and dark
    oklch(83.7% 0.1433 93.45) color.dataViz.600

  • color.background.fill.dataViz.700

    --semantic-color-background-fill-data-viz-700

    Use for the seventh data series in charts. Do not use to signal status.

    Light and dark
    oklch(63.98% 0.0791 334.07) color.dataViz.700

  • color.background.fill.dataViz.800

    --semantic-color-background-fill-data-viz-800

    Use for the eighth data series in charts. Do not use to signal status.

    Light and dark
    oklch(78.6% 0.1108 10.75) color.dataViz.800

  • color.background.fill.dataViz.900

    --semantic-color-background-fill-data-viz-900

    Use for the ninth data series in charts. Do not use to signal status.

    Light and dark
    oklch(58.87% 0.0558 52.75) color.dataViz.900

  • color.background.fill.dataViz.1000

    --semantic-color-background-fill-data-viz-1000

    Use for the tenth data series in charts. Do not use to signal status.

    Light and dark
    oklch(76.32% 0.0125 51.27) color.dataViz.1000

Logos

7 tokens

  • color.logo.earendil

    --semantic-color-logo-earendil

    Use for the Earendil symbol.

    Light
    oklch(53.76% 0 0) color.graphite
    Dark
    oklch(97.31% 0 0) color.white

  • color.logo.monochrome

    --semantic-color-logo-monochrome

    Use for every shape of a monochrome logo.

    Light
    oklch(17.76% 0 0) color.black
    Dark
    oklch(97.31% 0 0) color.white

  • color.logo.symbol.1

    --semantic-color-logo-symbol-1

    First product symbol color (blue).

    Light and dark
    oklch(65.23% 0.0938 231.49) color.cerulianBlue

  • color.logo.symbol.2

    --semantic-color-logo-symbol-2

    Second product symbol color (coral).

    Light and dark
    oklch(75.05% 0.1191 25) color.coralRed

  • color.logo.symbol.3

    --semantic-color-logo-symbol-3

    Third product symbol color (yellow).

    Light and dark
    oklch(82.82% 0.1322 82.36) color.creamYellow

  • color.logo.symbol.4

    --semantic-color-logo-symbol-4

    Fourth product symbol color (light blue).

    Light and dark
    oklch(79.95% 0.0732 202.43) color.calamineBlue

  • color.logo.wordmarkBrand-specific

    --semantic-color-logo-wordmark

    Use for logo wordmarks.

    Light
    oklch(17.76% 0 0) color.black
    Dark
    oklch(97.31% 0 0) color.white
↑↓to select↵to openEscto close