Internal reference for the HelixScale v2 design system — tokens, layout primitives, and components. This page is a build artifact of the ongoing foundation rebuild, distinct from the frozen v1.0 spec document.
17 variables in the HS / Color Webflow collection. Every color on every page references one of these — no raw hex values.
Inter for everything human, JetBrains Mono for data and code. 13 type roles, 3 weights (300 display-only, 400 default, 500 labels/buttons). Never 600+.
Title — 22, card and pricing heads
Lead — 21, hero subhead and section intros
Body Large — 18, emphasis body copy
Body — 16, the default paragraph size everywhere on the site
Body Small — 15, dense body copy and table cells
Label — 13, nav / links / buttons per the C4 ruling use Body (16) instead — label is reserved for small UI chrome
Caption — eyebrow kicker
Micro — status chips and badges
mono-sm — access/accounts/target-account — paths, data labels, code
One 4px-based scale drives all padding, margin, and gap. 15 steps, space-1 (4px) to space-36 (144px, desktop section rhythm).
2 / 4 / 8 / 12 / 999. Confirmed canon over Brand OS's superseded ‘3px max’ rule (C1).
layout-container (max 1280, responsive gutter 48→40→32→20), layout-grid-3 (3→2→1), layout-grid-2 (2→1). Resize the browser to see the downshifts.
container.gutter (48→40→32→20) and section-rhythm (144→112→80→64) are NOT bound to a single mode-switching Webflow Variable. Webflow's breakpoint-linked Variable Mode creation returned a persistent Multiplayer Server conflict on this site as of 2026-08-06 — confirmed as a platform-side issue, not an MCP or request error (it worked 3 times, then failed consistently across three different collections including a brand-new one).
Workaround in place: gutter uses 4 discrete Size variables (gutter-desktop/tablet/mobile-l/mobile-p) bound directly per breakpoint on layout-container. section-rhythm reuses the existing space-36/28/20/16 variables, bound directly per breakpoint on u-pad-section and every section-* class. Both are fully token-traceable and fully responsive today — just not consolidated under one mode-switching variable.
Migrate back to Variable Modes once Webflow fixes the API: (1) create one gutter variable in HS / Container with Tablet/Mobile-L/Mobile-P modes, set to 40/32/20, delete the 4 gutter-* variables, repoint layout-container's 3 breakpoint overrides to the new modes. (2) create one space-section variable in HS / Spacing with the same 3 modes, set to 112/80/64, repoint every section-* and u-pad-section breakpoint override to it. Neither migration changes any rendered value — purely a variable-architecture cleanup.
component-navbar / button-primary. Focus with Tab to see the two-tone navy focus ring (A3 ruling). Hover shifts to orange-active; the resting background is orange-hover, not orange, per the A1 contrast fix (white text = 4.63:1).
Both rebuilt as clean, isolated HelixScale v2 components — verified structurally correct (only nav/footer content, no page sections, no legacy leakage) but not embedded live on this page: inserting a component instance directly onto a page failed via this API for both Button and Navbar/Footer alike, a real platform limitation, not something specific to these two. Open Navbar or Footer directly in the Designer's component list to see them full-width. Neither has been placed on any live page — the current published Navbar and Footer are untouched.