Background colour
Two background layers: chrome (top bars, side menus) sits on --background; product content regions sit on --canvas — a muted warm cream in light mode, deep navy-black in dark — with white cards floating on top.
The canvas token
Light mode uses the muted cream; dark mode keeps the existing deep canvas. Cards always use --card, so the stack stays readable in both themes.
Card on canvas
Surfaces float on the canvas; the elevation ramp does the separating.
Light · --canvas #F4F3EC
Muted warm cream (brand cream family) with the optional grain texture.
Card on canvas
Surfaces float on the canvas; the elevation ramp does the separating.
Dark · --canvas #061114
The existing dark canvas — cards elevate to navy --card.
The live token on this site currently resolves to var(--canvas) — flip the theme toggle to see it switch.
Where each layer is used
Pick by role, not by taste — the layering is what makes dense portal screens scannable.
| Token | Use |
|---|---|
--background | Chrome: top bars, side menus, popover-free shells. The docs site you are reading stays on this layer. |
--canvas | Product content regions — the scrollable working area of portal screens. Cards and tables float on it. |
--card | Every elevated surface on the canvas: cards, tables, panels, dialogs. |
--muted | Small inset wells inside cards (code blocks, table toolbars) — never whole pages. |
The texture
An optional fine noise grain for the light canvas — an inline SVG turbulence tile at 4% opacity. It is decoration only: computed text colours are untouched, so contrast maths (muted text 5.40:1, links 4.98:1 on the cream) still hold.
.page-canvas {
background-color: var(--canvas);
/* Fine SVG noise grain at 4% opacity — texture without touching
computed text colours, so AA contrast is unaffected. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' \
baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E\
%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
background-size: 160px 160px;
}- Apply to the content region only — never to chrome, cards or text containers.
- Skip the texture in dark mode: grain reads as noise on deep surfaces.
- If a brand motif is wanted instead of generic grain, use the official asset from the brand guideline — do not draw one.
Colour
The complete token inventory — semantic tokens, never raw hex. Every pairing passes WCAG 2.2 AA in both light and dark; flip the theme toggle and watch the semantic groups follow.
Typography
Inter across the interface, Material Symbols Rounded for icons. Set size and weight from the scale below — never ad hoc.