Skip to content

Code draft v0.1.1

The syntax highlighting colors of code, one per category, and the states of marked lines, readable on every surface in every mode.

Code samples, token paths and snippets are set in the mono family (Typography foundation); this foundation colors them. Each syntax category (keyword, variable, function, class and type, string, number, comment) has a semantic color from the Figma library's code colors, global.text.code; the design system adds colors for diffs, invalid code and links, and backgrounds for marked lines, all picked from colors it already has. Everything else in code (plain identifiers, operators, punctuation) keeps the primary on-base text color. A highlighter maps the categories of its grammars to these colors: on the web, a Shiki theme generated from the tokens does it once for every mode, and a style sheet draws the marked lines.

Decisions

From decisions in packages/components/specs/foundations/code.spec.json, newest first. Every active decision is implemented by the spec, the semantic tokens and the components following the foundation.

Color

  • The design system adds, from colors it already has: text colors global.text.code.inserted (light success 700, dark success 300), deleted and invalid (light error 600, dark error 200), changed (light severe 700, dark severe 300) and link (light brand 600, dark brand dark 200), mapped to diffs, invalid code and URLs; line backgrounds global.bg.code.highlighted, inserted, deleted, error and warning, aliasing the subtle brand, success, error, error and warning fills. Markup reuses the syntax categories. Marked lines also carry a marker (bar, +, -, x, !).

    code-additions · 2026-10-02 · v0.1.0

    global.text.code.insertedglobal.text.code.deletedglobal.text.code.changedglobal.text.code.invalidglobal.text.code.linkglobal.bg.code.*

  • Code syntax highlighting has seven semantic colors, the Figma library's code colors global.text.code: keyword (lavender), variable (orchid), function (azure), class and type (amber), string (forest), number (coral) and comment (neutral). Anything else in code keeps the primary on-base text color, global.text.on-base.neutral.primary.

    code-colors · 2026-10-02 · v0.1.0

    global.text.code.*

Platform

  • On the web, code is highlighted with Shiki, through one theme generated from the tokens (web/shiki-theme.json) whose colors are the CSS variables of the code tokens (var(--global-text-code-keyword)…). The same theme serves every mode; the documentation site uses it for every code block.Web

    shiki-theme · 2026-10-02 · v0.1.0

    global.text.code.*

Accessibility

  • Every syntax color reaches 4.5:1 on every surface level and sunken, in every mode. Where the Figma library's step does not, the color takes the nearest step of the same hue that does: light class and type amber 700 (the Figma library 500), string forest 700 (600), number coral 700 (500); dark string forest 400 (500), comment dark-switch base 300 (400). Light mode is then step 700 of every hue and light-switch base 700 for comments; dark mode step 400 and dark-switch base 300.

    code-colors-contrast · 2026-10-02 · v0.1.0

    global.text.code.class-and-typeglobal.text.code.stringglobal.text.code.numberglobal.text.code.comment

    WCAG 1.4.3 Contrast (Minimum) (AA)