Color tokens

Color tokens (tool ID colors) is the Glyphfield Studio tool that edits the active brand identity's palette and everything derived from it. Changes write to the identity as pending changes, as they do in Typography and Brand identity. Select Save changes in the save notice to keep them, or switch to Brand identity and call identity.save. Every other tool reads the result, including the brand kit, the Component library and the Brand book.

Layout

Palette

The library lists every palette color with its role, HEX value and share of the layout. The bar above it draws the shares in proportion. Add color appends a new color token. Remove color in the inspector deletes a token and every pairing, role override and scale setting that refers to it. Glyphfield tools read the IDs ink, paper, muted and emphasis, so these four can be edited but not removed. The last remaining color cannot be removed either. A new ID must match ^[a-z][a-z0-9-]{0,39}$.

The inspector edits the selected color:

Undo color restores the previous state, up to 40 steps.

Views

OKLCH scales

Each palette color has a scale of eleven steps from 50 to 950. Lightness is spaced evenly in OKLCH between the lightest and darkest step, so neighboring steps look equally far apart. Chroma follows the brand color and tapers toward white and black. Each step is then gamut mapped to sRGB by reducing chroma only. With Keep the exact brand value as a step on, the step nearest the brand color's lightness is the brand HEX value itself, and the Scales view marks it with a dot.

A color reference names a palette color or one of its steps, for example ink or emphasis.300.

Semantic roles

Product surfaces read twelve semantic roles in light and dark mode:

Roles are derived from the palette until you override them. Light mode uses the lighter of ink and paper as the background and the darker as text. Muted text is the quietest step of the darker color that still reaches 4.5:1 on the background. positive, caution and negative use the success, warning and error colors when the palette has them, each moved to its nearest step that reaches 3:1. Without them, positive and caution use the accent and negative uses the text color. Dark mode uses the lighter color as text. Its background is the darker color when that color's OKLCH lightness is 0.3 or less, and otherwise the step of the darker color nearest lightness 0.2. Dark mode moves the accent and status colors to their nearest steps that reach 3:1 on the dark background.

Select a role in the Roles view to override it per mode with a palette color and step. Derive <role> from the palette removes the override. Overrides are stored in the identity's colorSystem.light and colorSystem.dark.

The Roles view checks every text role against its background at 4.5:1, and primary, focus and the status roles at 3:1. The role table shows the pairs that fail.

Contrast and pairings

Select a matrix cell to approve that pair for text. Approved pairs are the identity's colorPairings. A pair at 4.5:1 or more records level AA, a pair from 3:1 to 4.5:1 records AA-large, and a pair below 3:1 cannot be approved. Until you approve a pair, Approved pairings lists the brand's default pairs, and the first change turns them into declared pairings. Each approved pair has an editable usage, its live ratio, a remove button and, when the colors no longer reach the level, Fix. Fix changes the foreground color's HEX value. Contrast metric switches the matrix between WCAG 2 and APCA. WCAG cells show AAA, AA, AA18 (large text only) or a dash. The brand health audit and the Brand book read the same pairings.

APCA Lc uses APCA-W3 0.0.98G-4g. The matrix labels |Lc| of 75 or more as Body, 60 or more as Text, 45 or more as Large and 30 or more as Spot.

Proportion

Proportion is the share of a layout that each color covers. The check passes when the shares total 90–110%, the dominant color covers at least 45% and emphasis covers 20% or less. With Keep the total at 100% on, moving one slider rescales the others. Apply 60 / 30 / 10 sets paper to 60, ink to 30, emphasis to 10 and every other color to 0.

Vision

The Vision view simulates typical vision, protanopia, deuteranopia, tritanopia and achromatopsia with the Machado (2009) model at full severity. It lists the pairs that nearly merge: pairs whose OKLab distance falls below 0.06 under the simulation although they are at least 0.096 apart in typical vision.

Tokens

Copy tokens copies the format chosen in Token format:

The CSS variables, Tailwind and DTCG output come from the same serializers as the brand kit.

Browser API

The Browser API (window.glyphfield.studio) exposes these actions while Color tokens is the active tool:

Changes made through actions are pending identity changes. identity.save is available only while Brand identity is the active tool, so select Save changes to keep changes made here.

Source

File → Edit source code shows version 2:

{
  "version": 2,
  "colors": [{ "id": "ink", "name": "Ink", "role": "Primary type", "hex": "#181818", "opacity": 100, "proportion": 30 }],
  "colorPairings": [{ "foreground": "ink", "background": "paper", "level": "AA", "usage": "Body text" }],
  "colorSystem": { "light": { "primary": "emphasis" }, "dark": { "primary": "emphasis.300" }, "scales": [{ "id": "emphasis", "chroma": 90 }] }
}

colors is the whole palette in order. Scale settings must stay within chroma 0–200, darkest 0–0.5, hueShift −90 to 90 and lightest 0.5–1. Omitting colorPairings or colorSystem keeps the current values and drops references to removed colors. Version 1 sources ({ colors: [{ hex, id, name, opacity, role }] }) still apply. A field missing from a version 1 color keeps the value of the color at the same index. Opacity is a setting of this tool and is not stored in the identity.

Earlier versions of this tool kept edited colors in a separate draft that did not reach the brand. When such a draft exists and differs from the brand, the tool offers Apply earlier edits and Discard.

Keyboard shortcuts

Escape closes the color editor that a tile opened. The shared color control commits the HEX and OKLCH fields on Enter or when the field loses focus.

HTTP

Color tokens has no HTTP route of its own. POST /api/brand/kit renders the CSS, Tailwind and DTCG files from an identity, and POST /api/generate reads identity colors from its identity object.

Limits

• 40 undo steps.
• The four core IDs and the last color cannot be removed.
• Semantic role checks appear here and in brand.md. They are not part of the brand health score.