Layout tokens
Layout tokens define page-level constraints that keep the content frame predictable across the brand and main sites.
grid-max | --grid-max | 72rem | 72rem | dimension | primitive | Maximum width for the main content grid. |
gutter | --gutter | clamp(0.625rem, 0.1033rem + 2.6087vw, 2.125rem) | clamp(0.625rem, 0.1033rem + 2.6087vw, 2.125rem) | dimension | scale | Fluid page gutter that keeps content away from viewport edges. |
border.accent-width | --border-accent-width | 0.22rem | 0.22rem | dimension | semantic | Accent rule width for callout-style component markers. |
radius.none | --radius-none | 0 | 0 | dimension | scale | Square corner for data-dense and editorial structures. |
radius.sm | --radius-sm | 0.125rem | 0.125rem | dimension | scale | Small rounding for compact controls and images. |
radius.md | --radius-md | 0.375rem | 0.375rem | dimension | scale | Default rounding for code and contained surfaces. |
radius.lg | --radius-lg | 0.5rem | 0.5rem | dimension | scale | Large rounding for elevated panels and cards. |
radius.full | --radius-full | 9999px | 9999px | dimension | scale | Fully rounded shape for status dots and circular controls. |
shadow.panel | --shadow-panel | 0 1px 2px rgb(0 0 0 / 0.08) | 0 1px 2px rgb(0 0 0 / 0.08) | shadow | semantic | Quiet elevation for panels, cards, and contained navigation. |
shadow.overlay | --shadow-overlay | 0 12px 28px rgb(0 0 0 / 0.16) | 0 12px 28px rgb(0 0 0 / 0.16) | shadow | semantic | Stronger elevation for temporary overlays and enlarged previews. |
duration.fast | --duration-fast | 150ms | 150ms | duration | semantic | Fast feedback duration for opacity and small state changes. |
duration.standard | --duration-standard | 200ms | 200ms | duration | semantic | Default duration for transform and overlay transitions. |
easing.standard | --easing-standard | cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1) | cubicBezier | semantic | Default decelerating motion curve for interface transitions. |
breakpoint.compact | --breakpoint-compact | 40rem | 40rem | dimension | semantic | Breakpoint where compact layouts gain a second content column. |
breakpoint.navigation | --breakpoint-navigation | 48rem | 48rem | dimension | semantic | Breakpoint where the full header navigation replaces the menu button. |
breakpoint.wide | --breakpoint-wide | 64rem | 64rem | dimension | semantic | Breakpoint for wider navigation and multi-column reference layouts. |
component.theme-toggle.size | --component-theme-toggle-size | 2rem | 2rem | dimension | component | Square control size for the shared theme toggle. |
component.theme-toggle.icon-size | --component-theme-toggle-icon-size | 1rem | 1rem | dimension | component | Icon size inside the shared theme toggle. |
diagram.canvas | --diagram-canvas | {color.paper} | #f8f8f5 | color | component | Canvas background for diagrams across supported authoring tools. |
diagram.node | --diagram-node | {color.paper} | #f8f8f5 | color | component | Default diagram node surface. |
diagram.node-ink | --diagram-node-ink | {color.ink} | #101010 | color | component | Default diagram node label colour. |
diagram.node-line | --diagram-node-line | {color.line} | #d7d7d2 | color | component | Default diagram node border and connector colour. |
component.announcement.padding | --component-announcement-padding | {space.xs} | clamp(0.7969rem, 0.7643rem + 0.163vw, 0.8906rem) | dimension | component | Vertical breathing room inside the site-wide announcement banner. |
diagram.accent | --diagram-accent | {color.accent} | #e6461a | color | component | Diagram emphasis and active-flow colour. |
component.avatar.recommendation-size | --component-avatar-recommendation-size | 4rem | 4rem | dimension | component | Avatar diameter in a recommendation attribution. |
diagram.radius | --diagram-radius | {radius.md} | 0.375rem | dimension | component | Default rounding for diagram nodes and grouped regions. |
diagram.shadow | --diagram-shadow | {shadow.panel} | 0 1px 2px rgb(0 0 0 / 0.08) | shadow | component | Default elevation for diagram nodes in canvas-based tools. |
diagram.padding | --diagram-padding | {space.s} | clamp(1.0625rem, 1.019rem + 0.2174vw, 1.1875rem) | dimension | component | Interior spacing for diagram nodes and callouts. |
diagram.label-size | --diagram-label-size | {type.label} | 0.68rem | dimension | component | Compact uppercase label size for diagram metadata. |
component.back-to-top.inset | --component-back-to-top-inset | {space.s} | clamp(1.0625rem, 1.019rem + 0.2174vw, 1.1875rem) | dimension | component | Viewport inset for the fixed back-to-top link. |
component.back-to-top.padding-block | --component-back-to-top-padding-block | {space.2xs} | clamp(0.5313rem, 0.5095rem + 0.1087vw, 0.5938rem) | dimension | component | Vertical padding inside the back-to-top link. |
component.back-to-top.padding-inline | --component-back-to-top-padding-inline | {space.xs} | clamp(0.7969rem, 0.7643rem + 0.163vw, 0.8906rem) | dimension | component | Horizontal padding inside the back-to-top link. |