Skip to content

Work / Trunk / Wiki / Surfaces

colors

Surfacecanonicalverified 2026-10-21

SURFACE.WEB.STYLES-COLORS.COLORS

Summary

Styles › Colors: the product's colours by shade, one row per hue family, light to dark.

Raw wireframe

  • .context/designs/web/styles-colors/colors.html
  • .context/designs/web/styles-colors/colors-empty.html — empty

Why it is drawn this way

The panel is the groups: Icons, Images, Colors, Fonts, Typography, Spacing, Radius, Shadows, Motion. Each opens its own page; nothing scrolls on forever.

Complete · Delta sits at the left of the canvas toolbar. Delta opens colors-delta.

Compact, names only (owner, 2026-10-19). Each shade is a small swatch with the names of the tokens that have it. Its value and shade number are in the inspector and on hover, not written under every swatch; a row wraps instead of scrolling sideways.

Every group takes the whole column (owner, 2026-10-19). No fixed-width wrapper; colour families sit side by side as the width allows. Clicking a colour opens it to copy as code — colors-use.

Actions sit at the top of the canvas: New colour, Import a system, Export.

One shell. The rail is Journey, Pages, Components, Styles, then Analysis. The top bar has View · Edit. The canvas toolbar has the tools, zoom, viewport, state and Preview, in that order.

Search, and the toolbar (2026-10-18 · Figma). The panel has a search box above the groups. View · Edit is in the bottom toolbar.

Related

Sources

  • .context/designs/web/styles-colors/colors.html
  • .context/designs/web/styles-colors/colors-empty.html — empty
  • 2026-10-18-editor-redesign