Skip to main content

Tokens · Token families

Color

Every colour a component may use, named by its job, with its value in light, dark and high contrast side by side.

Files: src/semantic.css

Pick a token by its job, not by its colour. The name stays the same in every mode; the value changes.

  • Surfaces for backgrounds, text for words, lines for borders and dividers.
  • Brand for links and the main action; the fill tokens behind white text.
  • Status for success, warning, danger and information, and nothing else.
  • Sidebar, inputs and code syntax for those components only.
  • Charts for the series, the empty bar and the grid of a chart, and nothing else.

Each token shows its job, then its value in light, dark and high contrast, side by side. One click on a name selects all of it, ready to copy. In Figma the same names are variables: see Tokens in Figma.

All 63 semantic tokens, in 10 groups

Surfaces (8)

  • --luz-surface-page The page background. Light #fbf8f2 Dark #1c1712 High contrast #fff
  • --luz-surface Cards, dialogs and fields: the same face as the page. Light #fffdf9 Dark #241e18 High contrast #fff
  • --luz-surface-hover A row or a control under the pointer. Light #f4ede0 Dark #2e261f High contrast #f9fafc
  • --luz-surface-pressed A control while it is pressed. Light #ebe0cc Dark #3a3028 High contrast #e9eef4
  • --luz-surface-muted Code blocks and wells, one step from the page. Light #fbf8f2 Dark #1c1712 High contrast #f9fafc
  • --luz-surface-strong Table headers, tags, tooltips and toasts, two steps from the page. Light #efe6d6 Dark #3a3028 High contrast #e9eef4
  • --luz-scrim Dims the page behind a dialog or the drawer. Light rgba(13, 14, 17, 0.6) Dark rgba(0, 0, 0, 0.7) High contrast rgba(13, 14, 17, 0.6)
  • --luz-surface-media Behind a video. The same in every mode. Light #000 Dark #000 High contrast #000

Text (5)

  • --luz-text-primary Body text, headings and icons. Light #231c16 Dark #f3ece1 High contrast #000
  • --luz-text-secondary Labels, hints and captions. Light #6b5a48 Dark #b8a690 High contrast #0d0e11
  • --luz-text-muted Placeholders and separators. Light #7a6a58 Dark #a08f7a High contrast #434951
  • --luz-text-disabled Disabled controls: 3:1, LUZ's own floor. Light #8f8172 Dark #877a69 High contrast #646b73
  • --luz-text-on-fill Text on a solid fill: primary and danger buttons, badges. Light #fff Dark #fff High contrast #fff

Lines (3)

  • --luz-divider Decorative lines between content. No minimum. Light #e3d4b8 Dark #43382d High contrast #434951
  • --luz-outline Borders that identify a control: 3:1. Light #807366 Dark #7d7062 High contrast #000
  • --luz-focus-ring The focus outline: 3:1 on every surface. Light #2365a6 Dark #6fb1ec High contrast #000

Brand (7)

  • --luz-brand-primary Links, outline and ghost buttons, the current tab. Light #2365a6 Dark #6fb1ec High contrast #00256c
  • --luz-brand-hover A link under the pointer. Light #1b5089 Dark #9ccaf2 High contrast #000d4e
  • --luz-brand-active A link while it is pressed. Light #143d69 Dark #c8e1f8 High contrast #020831
  • --luz-brand-subtle A light brand tint: avatars, a hovered outline button. Light #e3eef9 Dark rgba(32, 143, 255, 0.14) High contrast #f6fbff
  • --luz-brand-fill The fill behind white text: primary button, badge, checked box. Light #2365a6 Dark #2172c1 High contrast #00256c
  • --luz-brand-fill-hover The primary button under the pointer. Light #1b5089 Dark #18548f High contrast #000d4e
  • --luz-brand-fill-active The primary button while it is pressed. Light #143d69 Dark #134577 High contrast #020831
  • --luz-sidebar-bg The sidebar panel. Light #2a211a Dark #14100c High contrast #000
  • --luz-sidebar-text Sidebar links. Light #e3d5bf Dark #cbbba5 High contrast #ced5dd
  • --luz-sidebar-text-hover A sidebar link under the pointer, the brand name, the focus ring. Light #fff Dark #fff High contrast #fff
  • --luz-sidebar-hover Behind a sidebar link under the pointer. Light #3a2f25 Dark #241e18 High contrast #16191e
  • --luz-sidebar-active-bg Behind the current sidebar link. Light #9cc8ee Dark #8cc4f5 High contrast #fff
  • --luz-sidebar-active-text The current sidebar link. Light #1a140f Dark #14100c High contrast #000
  • --luz-sidebar-border Lines between the parts of the sidebar. Decorative. Light #3d3127 Dark #2e261f High contrast #282d34
  • --luz-sidebar-label Section labels and the version. Light #b9a78f Dark #a8977f High contrast #889099
  • --luz-sidebar-logo-bg Behind the logo. Light #9cc8ee Dark #8cc4f5 High contrast #fff

Status (10)

  • --luz-color-success Success text and borders. Light #177734 Dark #89edb8 High contrast #105224
  • --luz-color-success-bg The success tint behind alerts and tags. Light #eefff5 Dark rgba(82, 207, 146, 0.12) High contrast #eefff5
  • --luz-color-danger Error text and the border of an invalid field. Light #ca1c25 Dark #ffc3c1 High contrast #8d131a
  • --luz-color-danger-bg The danger tint. Light #fff8f8 Dark rgba(239, 79, 81, 0.12) High contrast #fff8f8
  • --luz-color-danger-fill The danger button and badge, behind white text. Light #ca1c25 Dark #c31a26 High contrast #8d131a
  • --luz-color-warning Warning text. Light #7c4d00 Dark #ffcd51 High contrast #5a4300
  • --luz-color-warning-accent The start border of a warning alert. Decorative. Light #ffcd51 Dark #ffedb7 High contrast #e2a928
  • --luz-color-warning-bg The warning tint. Light #fffae8 Dark rgba(255, 205, 81, 0.12) High contrast #fffae8
  • --luz-color-info Information text. Light #004299 Dark #b3d9ff High contrast #00256c
  • --luz-color-info-bg The information tint. Light #f6fbff Dark rgba(119, 185, 255, 0.12) High contrast #f6fbff

Inputs (2)

  • --luz-input-bg Inside a field. Light #fffdf9 Dark #241e18 High contrast #fff
  • --luz-input-border The edge of a field: 3:1 on every surface. Light #8b7d6f Dark #877a69 High contrast #000

Extended (5)

  • --luz-color-teal Category text (teal tag). Never a status. Light #00736f Dark #62c9b5 High contrast #00504d
  • --luz-color-teal-bg The teal tint. Light #effefa Dark rgba(98, 201, 181, 0.12) High contrast #effefa
  • --luz-color-purple Category text (purple tag). Never a status. Light #803ae9 Dark #f3e8ff High contrast #5828a1
  • --luz-color-purple-bg The purple tint. Light #fcf9ff Dark rgba(202, 154, 255, 0.12) High contrast #fcf9ff
  • --luz-color-code Inline code. Light #803ae9 Dark #ca9aff High contrast #5828a1

Code syntax (6)

The colours of pre.luz-code-block, measured on --luz-surface-muted: 4.5:1 or more, 7:1 or more in high contrast. See the syntax specimen.

  • --luz-code-comment Comments, also in italics. Light #646b73 Dark #adb5bd High contrast #434951
  • --luz-code-keyword Keywords, also in bold. Light #231c16 Dark #f3ece1 High contrast #000
  • --luz-code-name Tags, selectors, functions and commands. Light #004299 Dark #b3d9ff High contrast #00256c
  • --luz-code-property Attributes, properties, flags and variables. Light #853bca Dark #ca9aff High contrast #610ca0
  • --luz-code-string Strings. Light #005733 Dark #52cf92 High contrast #005733
  • --luz-code-literal Numbers, colours and entities. Light #7c4d00 Dark #e2a928 High contrast #553000

Charts (8)

The series of a chart, in the order a chart uses them, then the empty part of a bar and the grid. Each series is 3:1 or more on every surface (4.5:1 or more in high contrast) and looks different from the others in hue and in lightness, also with protanopia or deuteranopia. None is red, green or yellow, which keep their meaning. Color is never the only sign: a chart keeps its figures as text.

  • --luz-chart-1 The first series of a chart: the brand blue. Light #2365a6 Dark #6fb1ec High contrast #00256c
  • --luz-chart-2 The second series: teal. Light #00736f Dark #62c9b5 High contrast #00504d
  • --luz-chart-3 The third series: purple. Light #5a248a Dark #dbbeeb High contrast #550b9d
  • --luz-chart-4 The fourth series: berry. Light #7f004e Dark #e8709f High contrast #9e2e81
  • --luz-chart-5 The fifth series: periwinkle. Light #6079c4 Dark #6784e5 High contrast #4459b8
  • --luz-chart-6 The sixth series: stone. Light #867f7a Dark #9a8c78 High contrast #342516
  • --luz-chart-track The empty part of a bar, under its fill. Light #d2c3a9 Dark #54483c High contrast #adb5bd
  • --luz-chart-grid The grid lines behind a chart. Decorative. Light #dccdb3 Dark #4a3e33 High contrast #889099

Last updated · Edit this page · Report a problem