/* ============================================================ ui-core.css — the UI (WEB) medium engine (2.0) ------------------------------------------------------------ NOTE ON THE HEADER: deck-core.css and doc-core.css name the house in their first line. This file deliberately does not. A medium engine that cannot reference a brand should not name one either, and `grep -i ` over this file returning nothing is a cheap, mechanical check that the boundary held. ------------------------------------------------------------ The third medium. deck-core.css owns a fixed 1920x1080 stage and doc-core.css a fixed 1190x1684 page: both are canvases, both are print thinking. This one is not a canvas at all. It is fluid, it has breakpoints, and — a first for this system — it has interactive states. Nothing in the deck or document engines has ever had to answer "what does this look like under the cursor, and what does it look like when a keyboard lands on it". Sections 4 and 5 are that new ground. Transcribed from the Master UI file, page "COMPONENTS & ASSETS": eight atomic components, each built in Figma as a matrix of Brand x State x Mode. The Brand axis is not implemented here — that is what the brand packs are for, and the whole point of the token contract is that this file cannot tell Group from Forge. The State and Mode axes ARE implemented, as CSS states and as modifier classes respectively. The engine consumes ONLY the token contract in tokens.css. No brand name, no asset path, no hex colour appears below. Brand differences arrive through --c-*, --font-*, --tr-* and the two radius tokens in §1. ── THE MODE AXIS ──────────────────────────────────────────── Mode is the axis the design system had no model for. Read off the Figma matrices, it is a reassignment of INK first and PLATE second — not a single "dark mode" switch: Default plate = Background Base ink = Primary 100 the accent appears only on hover/active Alternative plate = Background Base, unchanged ink = Accent Color Only the ink moves. The component is already wearing the accent at rest, so its hover has nowhere accent-ward to go — and in Figma it instead lifts the plate to Background Highlight. Alternative and Default are therefore the same two appearances in the opposite order: Default rests on the plate and hovers to accent, Alternative rests on accent and hovers to the bright plate. Newsletter SignIn is the clearest case; compare its two Mode rows. Inverted plate = Primary 100 (the ink becomes the ground) ink = the INVERTED ink ramp, 100/60/20 BOTH move, and the plate stops coming from the background tokens altogether: an inverted component's resting fill in Figma is Inverted Primary 20 — a translucent tint of its own new ink — floating on the ink ground. So Inverted is not "Default on a dark slide". It is a second, self-contained ramp. The inverted ink is white for Group, Studios and Forge and a near-black green for Partners. That is a per-brand value, so it is a CONTRACT token — --c-ink-inverse, set by each brand pack from its Inverted Primary — and this engine only reads it. It defaults to --c-bg-core, which is near-white on a light-ground brand and dark on a dark-ground one, so a brand pack that has not declared it still inverts sensibly rather than breaking. Knockout ink on an accent plate (§4) uses --c-bg-core directly for the same light-ground/dark-ground reason. ── HOW THE MODE CLASSES WORK ──────────────────────────────── deck-core's .slide--dark reassigns --c-ink in the same rule that reads it (`background: var(--c-ink); --c-ink: var(--c-bg-base)`). Custom properties are substituted with the value declared on the element itself, so that background resolves to the NEW ink and the rule paints bone rather than black. Verified in Chromium. This engine keeps the same idea — a modifier class on a container that reassigns the plate/ink tokens for everything inside — but routes it through a private --ui-* indirection layer (§2) so the reassignment can never read itself. Components consume --ui-ink and --ui-plate, never --c-ink and --c-bg-base directly. Sections: 1. Web token group (type / space / radius / breakpoints) 2. The Mode axis (.ui-mode--*) 3. Page shell + grid (+3.1 vertical rhythm, 3.2 base elements) 4. Shared interaction: focus, hover, motion 5. The eight atomic components (+5.9 cards) 6. Composed components: navbar, footer 7. Print Component inventory (Figma node -> class): Buttons 15312:6876 -> .ui-btn Tags 40004583:75980 -> .ui-tag Links 40004583:77527 -> .ui-link Pills 40004583:76086 -> .ui-pill Search Bar 40004583:77691 -> .ui-search Form 40004583:77238 -> .ui-field Newsletter SignIn 40004583:76215 -> .ui-signup Active Page Number 40004583:77634 -> .ui-pager Spec + budgets: reference/UI-COMPONENTS.md ============================================================ */ /* ============================================================ 1. WEB TOKEN GROUP ------------------------------------------------------------ These are the real web values from the style guide, typed in rather than re-derived from the deck scale. The deck (--fs-*) and document (--fsd-*) scales are separate and unrelated: a deck body is 23px because it is read across a room, a web body is 14px because it is read at arm's length. Never map one onto the other. ============================================================ */ :root { /* --- Display type, three sizes x three viewports ---------- Every display size steps down twice, and the step is steep: H1 loses 62px between desktop and tablet. That is deliberate — 128px is a hero size that simply does not fit an 834pt frame with 20pt margins. Line-height is 100% at every size, unlike the deck's 0.95, because web display type is set in shorter measures and the tighter leading collided. Tracking comes from the brand (--tr-display): -6% for the Concrette brands, -2% for Forge's grotesque. */ --fsw-h1-d: 128px; --fsw-h1-t: 70px; --fsw-h1-m: 48px; --fsw-h2-d: 64px; --fsw-h2-t: 48px; --fsw-h2-m: 36px; --fsw-h3-d: 46px; --fsw-h3-t: 40px; --fsw-h3-m: 32px; /* Live display sizes. Reassigned by the breakpoints in §3; mobile-first, so the mobile value is the default. */ --fsw-h1: var(--fsw-h1-m); --fsw-h2: var(--fsw-h2-m); --fsw-h3: var(--fsw-h3-m); /* --- The General block ------------------------------------ Shared across every viewport and DOES NOT SCALE. H4 down to Tagline are the same px on a phone and on a 1440 desktop. That is what makes the display sizes read as display: the small end of the scale holds still while the top moves. */ --fsw-h4: 20px; --lhw-h4: 1.2; --fsw-h5: 16px; --lhw-h5: 1.2; --fsw-body: 14px; --lhw-body: 1.3; --fsw-button: 14px; --lhw-button: 1.3; --fsw-tagline: 14px; --lhw-tagline: 1.3; --lhw-display: 1; /* 100% at every display size */ /* Body weights. Light is the running-text weight. ⚠ The style guide specifies Body Bold at weight 700. We do not licence 700 — the GT Standard L licence covers Light (300) and Medium (500) only, with no Semibold either. So --fww-body-bold is 500, the heaviest real face we hold. Do not "fix" this to 700: _house.css sets `font-synthesis: none`, so a 700 request would fall back to 500 anyway, and asking for a weight we do not own is how the trial-font problem happened the first time. */ --fww-body: 300; --fww-body-bold: 500; /* --- Spacing scale --------------------------------------- The web scale is its own thing: it starts finer than the deck's 40px module (a 5px step exists here and nowhere else) and runs much further up. XXS and XS are control-interior spacing; S upward is layout. */ --s-w-xxs: 5px; --s-w-xs: 10px; --s-w-s: 20px; --s-w-m: 40px; --s-w-l: 60px; --s-w-xl: 120px; --s-w-xxl: 240px; --s-w-xxxl: 320px; /* --- Flow rhythm (see §3.1) -------------------------------- Two values, both taken off the spacing scale rather than invented: the shell's own top and bottom padding, and the gap that opens before a display heading. Mobile-first, so these are the small-frame values and the 640px query raises them. PROVISIONAL. The Master UI's section padding is a property of the page SECTIONS, which are not transcribed yet — when they land, these two should be re-derived from what the sections actually use rather than left as a reasonable guess. They are on-scale, which is the part that matters for now. */ /* MEASURED, no longer provisional for the phone. The mobile section frames (e.g. 40004588:5091, 373 wide) draw 80px of block padding, not the 60 that was reasoned here first. 80 is not on the web spacing scale — XS 10, S 20, M 40, L 60, XL 120 — so it is two M rather than a new step, the same way the desktop 80 is expressed. The tablet and desktop values are still the earlier reasoning. */ --ui-pad-block: calc(var(--s-w-m) * 2); /* 80px, drawn */ --ui-flow-section: var(--s-w-l); /* 60px */ /* Descender clearance for a cap-trimmed display heading. See the .ui-h1 rule in §3.2 for the measurements. A brand whose display face drops further than 0.22em should raise this. */ --ui-display-descender: 0.22em; /* --- Radius ---------------------------------------------- Two web radii, and they are a real brand differentiator — the one place the square deck/document system bends. Group and Partners are near-straight at 4px for both. Studios and Forge round hard: 20px on components, 30px on buttons, which on a 34px control is a full pill. --radius-component and --radius-button are declared in the CONTRACT (tokens.css) and set by each brand pack from the token source. This engine only consumes them — it does not re-declare them, because a medium engine that re-declared a contract token would silently outrank a brand that had not been regenerated. */ /* --- Grid ------------------------------------------------ Straight off the Figma grids. Note the margin collapse: desktop reserves 170px of margin, tablet only 20px. The content column is therefore WIDER in absolute terms on desktop but the page is far more inset — the layout is not a smooth scale, it is three separate grids. Mobile drops the gutter to 10 but raises the margin to 30, the reverse of tablet. */ --grid-cols-d: 12; --grid-gutter-d: 20px; --grid-margin-d: 170px; --grid-cols-t: 9; --grid-gutter-t: 20px; --grid-margin-t: 20px; --grid-cols-m: 9; --grid-gutter-m: 10px; --grid-margin-m: 30px; /* Live grid values, mobile-first. */ --grid-cols: var(--grid-cols-m); --grid-gutter: var(--grid-gutter-m); --grid-margin: var(--grid-margin-m); /* Reference frame widths, for max-width clamps only. Not breakpoints — see the note in §3. */ --frame-d: 1440px; --frame-t: 834px; --frame-m: 393px; /* --- Control metrics ------------------------------------- Every interactive control in the Figma set is 34px tall with 15px of inline padding, measured off the symbols: a button is 64x34 with its text at x=15, a tag 89x34, a form field 265x34, a collapsed search 34x34. One height for the whole kit, which is what lets a button sit in a form row without any per-component nudging. 15px is XS + XXS. It is not a scale step of its own; do not add one. And 34px is a deliberately tight target — see the touch-target note in §4. */ --ui-control-h: 34px; --ui-control-px: calc(var(--s-w-xs) + var(--s-w-xxs)); /* The pager dot, measured at 14x14 on a 19px pitch (a 5px XXS gap). Its own token because 14px is not a spacing step and must not become one — it is a glyph size, like a cap height, not a distance. */ --ui-dot: 14px; /* Control borders are the FINE weight. --rule-w (2px) is reserved for structural line work — table rules, arch arcs. On a 34px control a 2px stroke is 6% of the height and the outline states start shouting over the filled ones, which is exactly the hierarchy tokens.css set out to protect. */ --ui-border-w: var(--rule-w-fine); } /* ============================================================ 2. THE MODE AXIS ------------------------------------------------------------ A private indirection layer, and the three modifier classes that reassign it. Put .ui-mode--* on any container — a section, a footer, a single component — and everything inside re-skins. They nest: an .ui-mode--inverted footer can hold an .ui-mode--alternative signup block. Components below read ONLY these --ui-* names. That is what makes the reassignment safe: --ui-plate is declared FROM --c-ink inside .ui-mode--inverted, and because no rule reassigns --c-ink itself, the substitution cannot feed back into its own definition the way .slide--dark's does. ============================================================ */ :root { /* The inverted ink ramp, 100/60/20. Three steps, not four — the web ink ramp has no 10% step, and the inverted ramp skips 40% as well. Straight off the contract's --c-ink-inverse, which each brand sets from its Inverted Primary: white on the light-ground brands, deep green on the dark-ground one. It falls back to --c-bg-core when a brand has not declared it, which is why this engine can be pointed at a brand pack that predates the token. */ --ui-ink-inv: var(--c-ink-inverse); --ui-ink-inv-60: var(--c-ink-inverse-1); --ui-ink-inv-20: var(--c-ink-inverse-3); /* A 40% step the Figma inverted ramp does not have. It exists only as the inverted LIFTED plate: at 100% the lifted plate would be solid inverted ink, which is the same colour as inverted ink, so a filled+active control came out white-on-white (caught in the proof render). 40% is the strongest tint that still leaves the ink readable on top of it. */ --ui-ink-inv-40: color-mix(in srgb, var(--c-ink-inverse) 40%, transparent); /* Mode = Default. The web ink ramp is 100/60/40/20 — note it stops at 20 and has no 10% step, unlike the print ramp in tokens.css which runs 60/40/20/10. --c-ink-4 is a print tint; nothing in this engine uses it. --ui-ground is the page; --ui-plate is what a control sits on top of it in. Three plate names, one job each — and note that NO component below ever names a --c-bg-* token directly. They all go through these two, which is the only reason Inverted works: reassign the pair and every component follows. ⚠ DEPARTURE FROM THE FIGMA FILL, on purpose. The Figma components fill their resting plate with Background BASE. Taken literally that is invisible: Base is also the page ground, so a button on a real page would be bone-on-bone with no edge. It reads in Figma only because the artboards sit on Figma's own dark grey canvas, which is not a brand colour and not a page. tokens.css is explicit that Base is the ground and that cards now sit LIGHTER than the ground, so the resting plate here is Core (one step forward) and the lifted plate is Highlight. That preserves the two-step relationship the Figma draws while keeping it visible on an actual page. */ --ui-ground: var(--c-bg-base); --ui-plate: var(--c-bg-core); --ui-plate-up: var(--c-bg-high); /* the "lifted" plate: hover, active */ --ui-ink: var(--c-ink); --ui-ink-60: var(--c-ink-1); --ui-ink-40: var(--c-ink-2); --ui-ink-20: var(--c-ink-3); /* The COPY ink. On the WEBSITE this is the ink — Colors/Primary, including on the brand whose Primary is a saturated orange, which is checked and not assumed: node 40004583:68583 (the CONTENT section, Forge) sets its H2 in Primary 100 and its body in Primary 60, with no Black ramp on the node at all. The brand's text IS its colour, and that is the design. The token still exists because there is exactly ONE place the file departs from that: the FOOTER binds its links to Colors/Black 60 rather than to Primary 60. §6.2 reassigns these three there and nowhere else, so the departure lives where the file puts it instead of leaking across the engine. An earlier pass had this pointing at --c-ink-body engine-wide. That was wrong — it turned a Forge page black except for its headings. Reverted 13 Aug on Lasse's correction, and confirmed against the node above. */ --ui-ink-copy: var(--c-ink); --ui-ink-copy-60: var(--c-ink-1); --ui-ink-copy-20: var(--c-ink-3); /* Ink that has to read ON the accent plate — a hovered button's label, a signup arrow. This cannot be a fixed white: three brands take a saturated mid-tone accent that wants light ink, and Partners takes a bone accent that wants dark ink. --c-bg-core is light on the first three and dark on the fourth, so it is the correct token for "whatever reads on the accent" without the engine knowing which brand is loaded. ⚠ Contrast is genuinely thin on a pale accent — see the legibility note in UI-COMPONENTS.md. */ --ui-ink-on-accent: var(--c-bg-core); /* The "filled/selected" plate — a hovered button, an active pill, a hovered signup submit. Normally the accent, which is the whole point of an accent. ⚠ It is a token and not a literal var(--c-accent) because of what the proof render caught in Inverted mode. Forge and Partners both bind accent TO ink (they are monochrome brands), and Inverted makes the ink the GROUND — so on those two brands an accent fill is exactly the colour of the surface behind it and the control vanished completely. The Figma matrices cannot show this: their inverted rows are drawn on Figma's own neutral grey canvas, not on the brand's ink. Inverted therefore reassigns this to the solid inverted ink (below), which is guaranteed to contrast with the inverted ground on all four brands. The brand still reads — it just reads in the label rather than the plate. */ --ui-fill-active: var(--c-accent); } /* Mode = Default, stated explicitly so a container can be reset back out of another mode. */ .ui-mode--default { --ui-ground: var(--c-bg-base); --ui-plate: var(--c-bg-core); --ui-plate-up: var(--c-bg-high); --ui-ink: var(--c-ink); --ui-ink-60: var(--c-ink-1); --ui-ink-40: var(--c-ink-2); --ui-ink-20: var(--c-ink-3); --ui-ink-copy: var(--c-ink); --ui-ink-copy-60: var(--c-ink-1); --ui-ink-copy-20: var(--c-ink-3); --ui-ink-on-accent: var(--c-bg-core); --ui-fill-active: var(--c-accent); background: var(--ui-ground); color: var(--ui-ink); } /* Mode = Alternative. Ink only: the plate does not move, the ink becomes the accent. Because the component already wears the accent at rest, its hover lifts the PLATE instead (§5), which is the exact inverse of Default's behaviour. */ .ui-mode--alternative { --ui-ink: var(--c-accent); --ui-ink-60: var(--c-accent-60); --ui-ink-40: var(--c-accent-40); --ui-ink-20: var(--c-accent-20); /* Copy follows the ink here. Alternative exists to put the accent on the type, so exempting running text would defeat it — which is also why Alternative is a wrong choice for a text-heavy region on the pale-accent brands. §6.2 says so for the footer. */ --ui-ink-copy: var(--c-accent); --ui-ink-copy-60: var(--c-accent-60); --ui-ink-copy-20: var(--c-accent-20); background: var(--ui-ground); color: var(--ui-ink); } /* Mode = Inverted. Both axes move. The ground becomes the brand ink; the ink becomes the inverted ramp; and the resting plate for a component is the 20% inverted tint — a translucent wash of its own ink — rather than a background token, which is why --ui-plate points at --ui-ink-inv-20 and not at a --c-bg-*. That translucency is load-bearing: it lets an inverted control sit on a photograph or a coloured section and still read. */ .ui-mode--inverted { --ui-ground: var(--c-ink); --ui-plate: var(--ui-ink-inv-20); --ui-plate-up: var(--ui-ink-inv-40); --ui-ink: var(--ui-ink-inv); --ui-ink-60: var(--ui-ink-inv-60); --ui-ink-40: var(--ui-ink-inv-60); --ui-ink-20: var(--ui-ink-inv-20); /* No second ramp needed: Inverted Primary is already a neutral (white, or the deep green on the dark-ground brand), so the reason --ui-ink-copy exists does not apply here. */ --ui-ink-copy: var(--ui-ink-inv); --ui-ink-copy-60: var(--ui-ink-inv-60); --ui-ink-copy-20: var(--ui-ink-inv-20); --ui-fill-active: var(--ui-ink-inv); --ui-ink-on-accent: var(--c-ink); background: var(--ui-ground); color: var(--ui-ink); } /* ============================================================ 3. PAGE SHELL + GRID ------------------------------------------------------------ ⚠ THE BREAKPOINTS BELOW WERE CHOSEN HERE, NOT READ FROM FIGMA. The file defines three frames — 1440 / 834 / 393 — and no min-width breakpoints at all. Frame widths are not breakpoints: switching to the desktop grid at exactly 1440px would leave every laptop between 834 and 1440 on the tablet grid, and the 170px desktop margin would be absurd at 1000px anyway. So: tablet grid from 640px, desktop grid from 1120px. 640 is above every phone in the frame set and below every tablet; 1120 is where 12 columns plus a proportionally reduced margin stops feeling cramped. The desktop margin is clamped rather than fixed at 170px for the same reason. Revisit these with design — they are an implementation judgement. ============================================================ */ .ui-page { box-sizing: border-box; width: 100%; margin: 0; padding-inline: var(--grid-margin); /* --ui-ground, not --c-bg-base. .ui-page and .ui-mode--* land on the same element with the same specificity, and .ui-page is declared later, so a literal --c-bg-base here silently beat .ui-mode--inverted's dark ground and the whole inverted section rendered bone. Going through the indirection layer makes the two classes order-independent. */ background: var(--ui-ground); color: var(--ui-ink); font-family: var(--font-sans); font-weight: var(--fww-body); font-size: var(--fsw-body); line-height: var(--lhw-body); letter-spacing: var(--tr-body); padding-block: var(--ui-pad-block); } /* ------------------------------------------------------------ 3.1 VERTICAL RHYTHM ------------------------------------------------------------ The deck and document engines do not need this section and that is exactly why it has to exist here. In those media every block is absolutely positioned against a fixed canvas, so `margin: 0` on a heading is correct — the layout owns the spacing and a stray margin would fight it. This medium is FLOW. Take the same `margin: 0` into a flow context and the first thing anyone builds has its H1 lying on top of its body copy, its display type clipped off the top of the viewport, and no rhythm at all. That is not a hypothetical: it is what the template did before this section was written. So the engine owns vertical rhythm too, through one owl selector per flow container. Rules: · The gap between two stacked blocks is --ui-flow (M/40px). · A display heading gets a much bigger gap ABOVE it (XL on desktop, stepping down with the viewport) because a section break is a bigger idea than a paragraph break. · The block immediately AFTER a heading gets a small gap (S), because it belongs to that heading. Distance says "these two things are one thing". · Nothing gets a margin from being first or last; the shell's own padding-block does that, so a section can sit flush against the one above it. Applies to the DIRECT CHILDREN of a flow container, and the only automatic flow container is the page shell itself. Anything else opts in with `.ui-flow`. That opt-in is not fussiness, it is a bug fix. An earlier version also treated every `.ui-grid` cell as a flow container, via `.ui-grid > * > * + *`. Put a component directly in a cell — `
`, which is the obvious thing to write — and the cell IS the component, so the rule reached straight into its internals and shoved the card's text block 40px off its media well. Found in a card render. The general lesson, and it applies to every section below: a descendant selector in a medium engine will eventually land inside a component someone else wrote. Keep the reach to one level and make the container say so. ------------------------------------------------------------ */ .ui-page, .ui-flow { --ui-flow: var(--s-w-m); } .ui-page > * + *, .ui-flow > * + * { margin-top: var(--ui-flow); } /* Big air before a display heading — a new idea starting. */ .ui-page > * + .ui-h1, .ui-page > * + .ui-h2, .ui-page > * + .ui-h3, .ui-flow > * + .ui-h1, .ui-flow > * + .ui-h2, .ui-flow > * + .ui-h3 { margin-top: var(--ui-flow-section); } /* …and very little after one, because what follows belongs to it. */ .ui-page > .ui-h1 + *, .ui-page > .ui-h2 + *, .ui-page > .ui-h3 + *, .ui-page > .ui-h4 + *, .ui-page > .ui-h5 + *, .ui-flow > .ui-h1 + *, .ui-flow > .ui-h2 + *, .ui-flow > .ui-h3 + *, .ui-flow > .ui-h4 + *, .ui-flow > .ui-h5 + * { margin-top: var(--s-w-s); } /* A tagline sits under the thing it describes, closer still. */ .ui-page > * + .ui-tagline, .ui-flow > * + .ui-tagline { margin-top: var(--s-w-xs); } /* ------------------------------------------------------------ 3.2 BASE ELEMENTS INSIDE A UI PAGE ------------------------------------------------------------ tokens.css styles the bare elements — `p`, `h1`, `h2`, `h3` — at the DECK scale, because that is the medium it was written for: 23px body, 166px display. An element selector beats inheritance, so a plain `

` inside a card renders at 23px on a page whose body size is 14. Found when a footer's newsletter block came out 52px too tall. So the medium reclaims its own base elements. Note the `:where()` on BOTH halves: it zeroes the specificity of the whole selector, so this reset always loses to `.ui-body`, `.ui-h1` and to anything an author writes. A plain `.ui-page p` would be (0,1,1) and would have silently out-specified every `.ui-h*` class in this file — the same load-order trap that bit the navbar's logo. ------------------------------------------------------------ */ :where(.ui-page, .ui-flow) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, address, th, td, caption, label, legend) { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; } /* The grid itself. 9 columns on small frames, 12 on desktop, with the gutter as the column gap. Children opt into a span with --span; the default is the full width. */ .ui-grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--s-w-m); } /* Mobile: every cell is full width, and --span is ignored. The phone grid in the Figma source is NINE columns, not four — a drawing convention, not a layout anyone builds two columns on. Honouring --span:4 there gives a 138px column, which stacks a two-pill row into two lines and reads as a bug. So --span only takes effect from the tablet breakpoint up, and the author writes desktop spans without having to think about the phone. */ .ui-grid > * { grid-column: 1 / -1; } @media (min-width: 640px) { :root { --grid-cols: var(--grid-cols-t); --grid-gutter: var(--grid-gutter-t); --grid-margin: var(--grid-margin-t); --fsw-h1: var(--fsw-h1-t); --fsw-h2: var(--fsw-h2-t); --fsw-h3: var(--fsw-h3-t); /* One step up the scale, 80 -> 120. There is no third step at desktop: the type gets much bigger between tablet and desktop but the air around a section does not need to. */ --ui-pad-block: var(--s-w-xl); --ui-flow-section: var(--s-w-xl); } .ui-grid > * { grid-column: span var(--span, var(--grid-cols)); } } @media (min-width: 1120px) { :root { --grid-cols: var(--grid-cols-d); --grid-gutter: var(--grid-gutter-d); /* 170px is the 1440 frame margin — 11.8% of the frame. Below 1440 that would eat the content column, so it scales and only reaches its full value at the design width. */ --grid-margin: clamp(var(--s-w-m), 11.8vw, var(--grid-margin-d)); --fsw-h1: var(--fsw-h1-d); --fsw-h2: var(--fsw-h2-d); --fsw-h3: var(--fsw-h3-d); } } /* --- Web display type ------------------------------------- Same recipe as the deck: brand display face, brand display tracking, cap-trimmed. Only the sizes and the 100% leading differ. Cap-trim matters more here than in print because a web heading usually sits directly above a control or a rule, and the untrimmed 0.15em of leading above the cap line reads as a spacing bug. */ .ui-h1, .ui-h2, .ui-h3 { font-family: var(--font-display); /* The contract's display weight, not a literal 400 — see the note on the same property in tokens.css. The web source is explicit for the brand this matters to: its Desktop/H2 style is the display face at Light 300, and asking for 400 rendered the Medium instead. */ font-weight: var(--fw-display); line-height: var(--lhw-display); letter-spacing: var(--tr-display); color: var(--ui-ink); /* Not margin: 0. text-box: trim-both cap alphabetic trims the box to the cap line and the baseline, which is what makes a measured Figma y-coordinate type straight in — but descenders then hang OUTSIDE the box and land on whatever follows. Measured in Chromium at 128px: Concrette drops 0.211em below the trimmed box and GT Standard 0.180em (both faces share a 0.703em cap height, which is why they substitute for each other so cleanly). 0.22em clears the deeper of the two. In em, so it scales with the heading, and as margin-BOTTOM so the em resolves against the heading's own size rather than the 14px body text below it. It collapses with the flow gap in §3.1 and the larger wins. The descender is CLEARANCE, not spacing — it only gets the next block back to where an untrimmed box would have started. The flow gap is added on top of it, or the body copy sits on the descenders with a pixel to spare and looks like a mistake. */ margin: 0 0 calc(var(--ui-display-descender) + var(--s-w-s)); text-wrap: balance; text-box: trim-both cap alphabetic; } .ui-h1 { font-size: var(--fsw-h1); } .ui-h2 { font-size: var(--fsw-h2); } .ui-h3 { font-size: var(--fsw-h3); } /* H4 and H5 are the General block, not display: they are set in the body face and they do not scale. H4 is a card or block heading, H5 the smallest heading in the system. Weight 300, not 500. An earlier pass made them bold on the assumption that a heading must be heavier than its body; the `General/H4` and `General/H5` variables are both GT Standard L **Light 300**, checked live on a card node, and the token source records the same. These headings are distinguished by SIZE alone — 20px and 16px against a 14px body — which is what makes a card title sit quietly instead of shouting. Use `.ui-body--bold` when you actually want weight. */ .ui-h4, .ui-h5 { font-family: var(--font-sans); font-weight: var(--fww-body); letter-spacing: var(--tr-body); color: var(--ui-ink-copy); margin: 0; } .ui-h4 { font-size: var(--fsw-h4); line-height: var(--lhw-h4); } .ui-h5 { font-size: var(--fsw-h5); line-height: var(--lhw-h5); } .ui-body { font-family: var(--font-sans); font-weight: var(--fww-body); font-size: var(--fsw-body); line-height: var(--lhw-body); letter-spacing: var(--tr-body); color: var(--ui-ink-copy); margin: 0; text-wrap: pretty; } /* Body Bold — weight 500, see the licence note in §1. */ .ui-body--bold { font-weight: var(--fww-body-bold); } .ui-body--dim { color: var(--ui-ink-copy-60); } /* Tagline — same metrics as body, but it is a role, not a size: the line under a logo, over a section, beside a figure. Dimmed by default because it is always secondary to something. */ .ui-tagline { font-family: var(--font-sans); font-weight: var(--fww-body); font-size: var(--fsw-tagline); line-height: var(--lhw-tagline); letter-spacing: var(--tr-body); color: var(--ui-ink-copy-60); margin: 0; } /* ============================================================ 4. SHARED INTERACTION: FOCUS, HOVER, MOTION ------------------------------------------------------------ New ground. Print has no hover and no focus, so nothing in deck-core or doc-core establishes a house treatment for either and there was no precedent to follow. ============================================================ */ /* --- The focus ring --------------------------------------- :focus-visible only. :focus would ring a mouse click too, and on a system this quiet a permanent ring after every click looks broken. The ring is three layers, and it has to be, because "use the accent" is not by itself safe on four brands. Group's accent is a mid blue and Forge's a hot orange — both fine as a ring on bone. Studios' accent is a pale amber, which against a bone plate is barely a boundary at all, and Partners' accent is bone itself, which on a bone plate is invisible. So: 1. a 2px gap in the current PLATE, separating ring from control so the ring never merges with a filled edge; 2. the 3px accent ring proper; 3. a 20%-ink halo OUTSIDE it, which gives the ring a defined outer edge on every brand. Ink is the one colour the contract guarantees contrasts with the plate — that is what ink means — so layer 3 is what makes a pale-accent ring legible rather than decorative. Result: on Group and Forge you read the accent, on Studios and Partners you read the accent plus its ink boundary. Same ring, no brand-specific code. */ .ui-btn:focus-visible, .ui-tag:focus-visible, .ui-link:focus-visible, .ui-pill:focus-visible, .ui-search:focus-visible, .ui-search__input:focus-visible, .ui-search__toggle:focus-visible, .ui-field__control:focus-visible, .ui-signup__input:focus-visible, .ui-signup__submit:focus-visible, .ui-pager__item:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ui-plate), 0 0 0 6px var(--ui-ink-20); } /* Remove the inner ring where a wrapper already carries one, so a focused search input does not draw two concentric rings. */ .ui-search:focus-within .ui-search__input:focus-visible { outline: none; box-shadow: none; } /* --- Hit area --------------------------------------------- 34px is the Figma control height and it is below the 44px comfortable touch target. Rather than break the measured geometry, controls keep their 34px box and grow an invisible pseudo-element to 44px on pointer-coarse devices. The visual spec is preserved; the thumb target is not. */ @media (pointer: coarse) { .ui-btn, .ui-tag, .ui-pill, .ui-search__toggle, .ui-signup__submit, .ui-pager__item { position: relative; } .ui-btn::after, .ui-tag::after, .ui-pill::after, .ui-search__toggle::after, .ui-signup__submit::after, .ui-pager__item::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); min-height: 44px; } } /* --- Motion ------------------------------------------------ One duration and one easing for the whole kit, from the contract. State changes are colour changes, so --dur-fast is right: anything slower on a hover reads as lag. Reduced motion kills the transition entirely rather than shortening it — a colour crossfade has no motion to reduce, so the honest response is to cut it. */ .ui-btn, .ui-tag, .ui-link, .ui-pill, .ui-search, .ui-search__toggle, .ui-search__input, .ui-field__control, .ui-signup, .ui-signup__input, .ui-signup__submit, .ui-pager__item { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } @media (prefers-reduced-motion: reduce) { .ui-btn, .ui-tag, .ui-link, .ui-pill, .ui-search, .ui-search__toggle, .ui-search__input, .ui-field__control, .ui-signup, .ui-signup__input, .ui-signup__submit, .ui-pager__item { transition: none; } /* The search bar's width animation is real motion, not a crossfade, so it is the one thing that must actually stop. */ .ui-search { transition: none; } } /* ============================================================ 5. THE EIGHT COMPONENTS ------------------------------------------------------------ A shared control base first. Every one of the eight is built on the same 34px box with 15px inline padding and the Button type role, which is why they can be mixed in a row without alignment work. ============================================================ */ .ui-btn, .ui-tag, .ui-pill, .ui-field__control, .ui-signup__input, .ui-search__input { box-sizing: border-box; min-height: var(--ui-control-h); padding-block: 0; padding-inline: var(--ui-control-px); font-family: var(--font-sans); font-weight: var(--fww-body); font-size: var(--fsw-button); line-height: var(--lhw-button); letter-spacing: var(--tr-body); border: var(--ui-border-w) solid transparent; appearance: none; -webkit-appearance: none; } /* ------------------------------------------------------------ 5.1 BUTTONS (Figma 15312:6876) ------------------------------------------------------------ Axes: Brand x State(Default, Hover) x Mode(Default, Alternative, Inverted). 64x34 at the "Login" label — the width is content-driven, 64px is just what five characters plus 2x15px padding comes to. Default mode: rests on the plate in full ink, hovers to a solid accent fill with knockout ink. Alternative: rests on the plate in ACCENT ink, hovers by lifting the plate to Highlight and keeping the accent ink — the accent never fills, it only ever colours the label. Inverted: rests on the translucent inverted tint, hovers to the same solid accent fill as Default. The button is the only component in the set that uses --radius-button; everything else uses --radius-component. On Studios and Forge that is 30px against a 34px box, i.e. a pill, which is what the Figma shows. ------------------------------------------------------------ */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-w-xxs); background: var(--ui-plate); color: var(--ui-ink); border-radius: var(--radius-button); border-color: transparent; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; } /* State = Hover. :hover and :focus-visible are NOT combined here — the focus ring is the focus affordance, and firing the hover fill on focus as well would make a keyboard user think they had already activated the thing. */ .ui-btn:hover, .ui-btn[data-state="hover"] { background: var(--ui-fill-active); color: var(--ui-ink-on-accent); } /* Alternative: the hover lifts the plate rather than filling with accent, because the ink is already accent. */ .ui-mode--alternative .ui-btn:hover, .ui-mode--alternative .ui-btn[data-state="hover"] { background: var(--ui-plate-up); color: var(--ui-ink); } /* Outline button. Not a Mode and not a State — it is how Forge's Default/Default button is drawn in Figma, and because Forge's ink IS its accent the generic rule below reproduces it exactly. Exposed as a modifier so the other three brands can reach the same shape deliberately rather than by accident. */ .ui-btn--outline { background: transparent; border-color: var(--ui-ink); color: var(--ui-ink); } .ui-btn--outline:hover, .ui-btn--outline[data-state="hover"] { background: var(--ui-fill-active); border-color: var(--ui-fill-active); color: var(--ui-ink-on-accent); } .ui-btn:disabled, .ui-btn[aria-disabled="true"] { background: transparent; border-color: var(--ui-ink-20); color: var(--ui-ink-40); cursor: not-allowed; } /* ------------------------------------------------------------ 5.2 TAGS (Figma 40004583:75980) ------------------------------------------------------------ Axes: Brand x State(Inactive, Active) x Filled(No, Yes) x Mode(Default, Alternative). 89x34 at "Category". Note there is no Inverted mode for tags in the file. Filled is a second axis, not a state: it decides whether the tag carries a plate at all. Filled=No is an outline chip, Filled=Yes a solid one. Both then read Inactive (dimmed) or Active (full). Filled=No Inactive: transparent, 20% ink border, 60% ink Active: transparent, full ink border, full ink Filled=Yes Inactive: Core plate, no border, 60% ink Active: Highlight plate, no border, full ink Alternative Inactive: Highlight plate, 60% accent ink Active: solid accent plate, knockout ink A tag is a filter control, so Active is a persistent selected state set in markup (aria-pressed), not a hover. Hover is a separate, lighter signal. ------------------------------------------------------------ */ .ui-tag { display: inline-flex; align-items: center; gap: var(--s-w-xxs); background: transparent; color: var(--ui-ink-60); border-color: var(--ui-ink-20); border-radius: var(--radius-component); cursor: pointer; white-space: nowrap; } .ui-tag:hover { color: var(--ui-ink); border-color: var(--ui-ink-60); } /* State = Active. */ .ui-tag[aria-pressed="true"], .ui-tag--active { color: var(--ui-ink); border-color: var(--ui-ink); } /* Filled = Yes. The plate replaces the border: a solid chip with a hairline as well reads as two shapes at this size. */ .ui-tag--filled { background: var(--ui-plate); border-color: transparent; } .ui-tag--filled:hover { border-color: transparent; } .ui-tag--filled[aria-pressed="true"], .ui-tag--filled.ui-tag--active { background: var(--ui-plate-up); border-color: transparent; } /* Alternative mode. Rests on the bright plate, and Active fills with the accent — the one place a tag takes a colour plate. */ .ui-mode--alternative .ui-tag { background: var(--ui-plate-up); border-color: transparent; color: var(--c-accent-60); } .ui-mode--alternative .ui-tag[aria-pressed="true"], .ui-mode--alternative .ui-tag--active { background: var(--ui-fill-active); color: var(--ui-ink-on-accent); } /* ------------------------------------------------------------ 5.3 LINKS (Figma 40004583:77527) ------------------------------------------------------------ Axes: Icon(yes, no, only) x State(Default, Active). No Brand and no Mode axis in the file — a link is ink and nothing else, so it re-skins through --ui-ink for free. State is a two-step ink change and nothing more: Default sits at 60% ink, Active at 100%. There is NO underline anywhere in the Figma set, and no accent — the emphasis device is opacity. That is a deliberate departure from _house.css's .bf-prose a, which underlines and accents links in DOCUMENTS. Body-copy links stay underlined for accessibility; these are navigation links, where position and the icon carry the affordance. Icon=yes puts a chevron AFTER the label (a disclosure); the Pills component puts the same chevron BEFORE it. Icon=only is the bare arrow, and it needs an accessible name. ------------------------------------------------------------ */ .ui-link { display: inline-flex; align-items: center; gap: var(--s-w-xxs); font-family: var(--font-sans); font-weight: var(--fww-body); font-size: var(--fsw-button); line-height: var(--lhw-button); letter-spacing: var(--tr-body); color: var(--ui-ink-copy-60); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; } .ui-link:hover, .ui-link[aria-current], .ui-link--active { color: var(--ui-ink-copy); } /* Icon = only. Square hit box so a bare arrow is still clickable at a sensible size. */ .ui-link--icon-only { justify-content: center; min-width: calc(var(--fsw-button) * 1.5); } /* The chevron rotates when its disclosure is open. This is the engine's only real motion, hence the reduced-motion guard. */ .ui-link__icon { flex: none; transition: transform var(--dur-fast) var(--ease); } .ui-link[aria-expanded="true"] .ui-link__icon { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .ui-link__icon { transition: none; } } /* ------------------------------------------------------------ 5.4 PILLS (Figma 40004583:76086) ------------------------------------------------------------ Axes: Brand x Icon(Yes, No) x State(Inactive, Active). No Mode axis. Same 34px box as a tag, but a pill is a NAVIGATION or filter-group member rather than a metadata chip, and its Active state is the loud one in the whole kit: a solid accent plate with knockout ink. Inactive rests on the Base plate at 60% ink — one step quieter than a button, which rests at full ink. That difference is the whole point: a row of pills should read as one object with one member selected, not as six competing buttons. The chevron, when present, LEADS the label. Compare Links, where it trails. Not an inconsistency to normalise: a leading chevron reads as "this pill opens a menu", a trailing one as "this link expands in place". ------------------------------------------------------------ */ .ui-pill { display: inline-flex; align-items: center; gap: var(--s-w-xxs); background: var(--ui-plate); color: var(--ui-ink-60); border-color: transparent; border-radius: var(--radius-component); cursor: pointer; text-decoration: none; white-space: nowrap; } .ui-pill:hover { color: var(--ui-ink); } .ui-pill[aria-pressed="true"], .ui-pill[aria-current], .ui-pill--active { background: var(--ui-fill-active); color: var(--ui-ink-on-accent); } /* Outline pill — the Forge shape again, exposed for the same reason as .ui-btn--outline. */ .ui-pill--outline { background: transparent; border-color: var(--ui-ink-20); } .ui-pill--outline:hover { border-color: var(--ui-ink-60); } .ui-pill--outline[aria-pressed="true"], .ui-pill--outline[aria-current], .ui-pill--outline.ui-pill--active { border-color: var(--c-accent); } .ui-pill__icon { flex: none; } /* A row of pills. The gap is XS, not the grid gutter: pills are one control that happens to have members, so they sit closer together than two independent blocks would. */ .ui-pill-group { display: flex; flex-wrap: wrap; gap: var(--s-w-xs); } /* The generic control row, for a handful of INDEPENDENT controls side by side — two buttons, a button and a link, a set of tags. S, one step wider than .ui-pill-group, because these are separate objects and the gap is what says so. Wraps; every control in the kit is 34px tall, so a wrapped row stays on a rhythm. Use .ui-field-row for form fields (it takes the grid gutter and splits 50/50) and .ui-pill-group for a single-select set. */ .ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-w-s); } /* ------------------------------------------------------------ 5.5 SEARCH BAR (Figma 40004583:77691) ------------------------------------------------------------ Axes: Brand x State(Inactive, Active). The most interactive thing in the set and the one that genuinely could not exist in the print engines: Inactive is a 34x34 icon-only square, Active is an 89x34 field with the icon and a live input. The State axis is a WIDTH change, not a colour change. Both states are outline-only on all four brands — the one component in the kit with no filled variant at all. Radius is --radius-component, so it is a rounded square on Group and Partners and a full circle on Studios and Forge when collapsed, which is exactly what the Figma shows. Expansion is driven by :focus-within, so it works from the keyboard with no JS. 89px is the Figma width; it is a resting width, not a maximum — set --ui-search-w for a real search field. Collapse-on-blur means a typed query disappears from view, so a real implementation should pin it open once the input has content. ------------------------------------------------------------ */ .ui-search { --ui-search-w: 89px; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--s-w-xxs); width: var(--ui-control-h); min-height: var(--ui-control-h); padding-inline: var(--s-w-xxs); background: transparent; border: var(--ui-border-w) solid var(--ui-ink-20); border-radius: var(--radius-component); color: var(--ui-ink-60); overflow: hidden; transition: width var(--dur-base) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* State = Active. */ .ui-search:focus-within, .ui-search--active, .ui-search[data-state="active"] { width: var(--ui-search-w); padding-inline: var(--ui-control-px); border-color: var(--ui-ink); color: var(--ui-ink); } /* The collapsed state is a button; the expanded state is a field. Same element, so the toggle keeps its 24px icon box and simply stops being the only thing in the box. */ .ui-search__toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--s-w-s); height: var(--s-w-s); padding: 0; background: none; border: 0; color: inherit; cursor: pointer; } .ui-search__input { flex: 1 1 auto; min-width: 0; min-height: 0; padding-inline: 0; background: none; border: 0; color: var(--ui-ink); opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .ui-search:focus-within .ui-search__input, .ui-search--active .ui-search__input, .ui-search[data-state="active"] .ui-search__input { opacity: 1; } .ui-search__input::placeholder { color: var(--ui-ink-40); opacity: 1; } @media (prefers-reduced-motion: reduce) { .ui-search__input { transition: none; } } /* ------------------------------------------------------------ 5.6 FORM (Figma 40004583:77238) ------------------------------------------------------------ Axes: Type(Default, Selection) x State(Inactive, Active) x Brand. 265x34 in the file, but that is the Figma frame width — a field in use is full-width in its column, which is how the .ui-field wrapper is written. Outline-only in every state and on every brand: a form field never takes a plate. The State axis is a two-step border and ink change, the same two steps as Links — Inactive: 20% ink border, 40% ink placeholder Active: full ink border, full ink value Active is :focus, not :hover. A field under the cursor has not been entered, and lighting up its border as if it had is the single most common form-UI error. Type=Selection is the same box with a trailing chevron. The native select arrow is suppressed and the chevron supplied as a child element so it takes --ui-ink like every other icon; a native arrow cannot be re-coloured reliably. ------------------------------------------------------------ */ .ui-field { display: block; width: 100%; } .ui-field__label { display: block; margin-bottom: var(--s-w-xxs); font-family: var(--font-sans); font-weight: var(--fww-body-bold); font-size: var(--fsw-h5); line-height: var(--lhw-h5); color: var(--ui-ink-copy); } .ui-field__control { display: block; width: 100%; background: transparent; border-color: var(--ui-ink-20); border-radius: var(--radius-component); color: var(--ui-ink-copy); } .ui-field__control::placeholder { color: var(--ui-ink-40); opacity: 1; } .ui-field__control:hover { border-color: var(--ui-ink-40); } .ui-field__control:focus { border-color: var(--ui-ink-copy); outline: none; } /* An input is inline-ish by default and a textarea is not, so the textarea needs the padding back on the block axis. */ .ui-field__control--area { padding-block: var(--s-w-xs); min-height: calc(var(--ui-control-h) * 3); line-height: var(--lhw-body); resize: vertical; } /* Type = Selection. */ .ui-field--select { position: relative; } .ui-field--select .ui-field__control { padding-inline-end: calc(var(--ui-control-px) + var(--s-w-s)); cursor: pointer; } .ui-field__chevron { position: absolute; right: var(--ui-control-px); bottom: calc((var(--ui-control-h) - var(--s-w-s)) / 2); width: var(--s-w-s); height: var(--s-w-s); color: var(--ui-ink-60); pointer-events: none; } .ui-field--select .ui-field__control:focus ~ .ui-field__chevron { color: var(--ui-ink); } /* Field rows. The gutter is the gap, so a form row lines up with the page grid without being a grid itself. */ .ui-field-row { display: flex; flex-wrap: wrap; gap: var(--grid-gutter); } /* One field per line on a phone, two from the tablet breakpoint up. Same reasoning as the grid spans: a 160px field with a label above it and a placeholder inside it is not a field, it is a gesture. */ .ui-field-row > .ui-field { flex: 1 1 100%; } @media (min-width: 640px) { .ui-field-row > .ui-field { flex: 1 1 calc(50% - var(--grid-gutter)); } } /* ------------------------------------------------------------ 5.7 NEWSLETTER SIGNIN (Figma 40004583:76215) ------------------------------------------------------------ Axes: Brand x State(Default, Filled, Hover) x Mode(Default, Alternative). 265x34 total: a 232px field butted against a 34x34 submit button, sharing one border. This is the component that decides what Mode means, because it is the only one whose two modes are visibly the same two appearances in opposite order: Default mode resting submit = Base plate, ink arrow hover = accent plate, knockout Alternative mode resting submit = accent plate, knockout hover = Highlight plate, accent Read those four cells and the Alternative axis stops being mysterious: it is Default's hover promoted to the resting state, with the resting appearance demoted to hover. The three States are input content, not interaction: Default is an empty field showing a placeholder, Filled has a value, Hover is the submit button under the cursor. Filled needs no CSS — a field with a value simply shows it — so it is documented but not styled, and only Hover is a real rule. The submit button inherits --radius-component on its outer corners only, so on Studios and Forge it reads as the rounded end-cap of the bar rather than a pill floating inside it. That is the whole reason this is one bordered wrapper containing two borderless children instead of two adjacent controls. ------------------------------------------------------------ */ .ui-signup { box-sizing: border-box; display: flex; align-items: stretch; width: 100%; max-width: 265px; min-height: var(--ui-control-h); background: transparent; border: var(--ui-border-w) solid var(--ui-ink-20); border-radius: var(--radius-component); overflow: hidden; } .ui-signup:focus-within { border-color: var(--ui-ink); } .ui-signup__input { flex: 1 1 auto; min-width: 0; background: none; border: 0; color: var(--ui-ink); border-radius: 0; } .ui-signup__input::placeholder { color: var(--ui-ink-40); opacity: 1; } .ui-signup__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ui-control-h); padding: 0; background: var(--ui-plate); border: 0; color: var(--ui-ink); cursor: pointer; } .ui-signup__submit:hover, .ui-signup__submit[data-state="hover"] { background: var(--ui-fill-active); color: var(--ui-ink-on-accent); } /* Alternative mode: resting and hover swap, exactly as above. */ .ui-mode--alternative .ui-signup__submit { background: var(--ui-fill-active); color: var(--ui-ink-on-accent); } .ui-mode--alternative .ui-signup__submit:hover, .ui-mode--alternative .ui-signup__submit[data-state="hover"] { background: var(--ui-plate-up); color: var(--ui-ink); } .ui-signup__icon { flex: none; } /* ------------------------------------------------------------ 5.8 ACTIVE PAGE NUMBER (Figma 40004583:77634) ------------------------------------------------------------ Axes: State(1, 2, 3) x Numbers(No, Yes). No Brand and no Mode axis — it is pure ink, so it re-skins for free. Two forms of the same control, and the file ships both at exactly 52x14: three 14px dots on a 19px pitch (a 5px gap, the XXS step), or three numerals in the same 52px. Numbers=No is a carousel indicator, Numbers=Yes a pager. State is which of the three is current, and the treatment is the ink ramp again: current at 100%, the rest at 60%. The dot form fills the current dot and outlines the others — a filled dot and a ring are distinguishable at 14px, whereas two rings at different opacities are not, which is why the dot form does not simply reuse the numeral form's opacity step. 14px is far below any sane hit target, hence the coarse-pointer rule in §4. Mark up as a nav with aria-current on the current item; the dots need accessible names because a filled circle is not a page number. ------------------------------------------------------------ */ .ui-pager { display: inline-flex; align-items: center; gap: var(--s-w-xxs); } .ui-pager__item { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--s-w-xs); padding: 0; background: none; border: 0; font-family: var(--font-sans); font-weight: var(--fww-body); font-size: var(--fsw-button); line-height: var(--lhw-button); letter-spacing: var(--tr-body); color: var(--ui-ink-60); cursor: pointer; text-decoration: none; font-variant-numeric: tabular-nums; } .ui-pager__item:hover { color: var(--ui-ink); } .ui-pager__item[aria-current], .ui-pager__item--active { color: var(--ui-ink); } /* Numbers = No. The dot form. */ .ui-pager--dots .ui-pager__item { width: var(--ui-dot); height: var(--ui-dot); min-width: 0; flex: none; border: var(--ui-border-w) solid var(--ui-ink-60); border-radius: var(--radius-pill); font-size: 0; line-height: 0; } .ui-pager--dots .ui-pager__item:hover { border-color: var(--ui-ink); } .ui-pager--dots .ui-pager__item[aria-current], .ui-pager--dots .ui-pager__item--active { background: var(--ui-ink); border-color: var(--ui-ink); } /* ------------------------------------------------------------ 5.9 CARDS (Figma 15324:4332 — set A 40004510:9721, set B "Colorful" 40004510:15316) ------------------------------------------------------------ The first COMPOSITE in this engine. Everything in 5.1–5.8 is a single 34px control; a card is a container that holds three of the atoms already built above (a Tag, a Link, and the H4/Body type roles) on a plate of its own. So most of this section is not new painting — it is a plate, a media well, and one rule about where the atoms sit. Axes: Brand x Card(Image, Icon, Text) x State(Default, Hover). ⚠ There is NO Mode axis in the file — same as Links, Pills, Search, Form and Pager (see divergence 6). Cards still re-skin under .ui-mode--* because everything below reads --ui-*, but that behaviour is an extrapolation, not a transcription. Drawn sizes: Image and Icon are 353x377, Text is 353x300. 353 is not an arbitrary width — it is exactly FOUR desktop columns (4 x 73.33 + 3 x 20 = 353.3), which is why a card row is written as .ui-grid with --span:4 and needs no grid of its own. See the content budget in UI-COMPONENTS.md. ── THE PLATE STACK ────────────────────────────────────────── This is the component that finally uses all three background plates at once, and it uses them as DEPTH, exactly as tokens.css describes it (plates get lighter as they come forward): card Background Highlight → --ui-plate-up frontmost well Background Core → --ui-plate recessed tag Background Base → --ui-ground punched back to page level Note what that means for the resting state: a card ALREADY sits on the brightest plate. There is nowhere further forward for it to go, which is why the Hover state in the file does not lift the card — see the State note below. It also means the card is the one component that does NOT need divergence 2's Base→Core correction: Highlight is already a visible step off the page ground on all four brands. ⚠ The well is the weak link, and it is a TOKEN problem rather than an engine one. Two of the four brands set Background Core and Background Highlight to the SAME value, so on those two an empty well is invisible against the card. The Figma works around it per brand — the two affected cells fill the well with Background Base at 40% and at 50% opacity respectively, two hand-tuned alphas that no token expresses. This engine cannot see brands, so it takes the plate the other two cells use (Core) and accepts that an EMPTY well does not read on the collapsed pair. A well in production holds a photograph or an illustration, which is the whole reason it exists, so the cost is confined to a placeholder. The fix belongs in the token source: give every brand three distinct plates. ── STATE ──────────────────────────────────────────────────── Hover is far quieter than anything in 5.1–5.8, and it is quiet on purpose. Read across the Default/Hover rows of set A and exactly ONE thing moves: the Tag goes from its Base plate with a 60% ink label to a solid accent plate with knockout ink. The card plate, its border, the title, the body and the arrow are pixel-identical between the two states — verified layer by layer on the Image and Icon cells, not inferred. That reads as a deliberate consequence of the plate stack: the card cannot lift, so the accent has to appear somewhere, and the tag is the one element on the card that already had a plate to swap. It is a weak affordance for a whole-card link and it is worth a design conversation, but it is what the file says, so it is what this does. ── COLORFUL (set B) ───────────────────────────────────────── Set B is NOT a fourth card type. Its Default cells are byte-for-byte the Text card's Default cells (compare 40004510:15317 with 40004510:9848 — same plate, same radius, same 150px/20px text padding, same outline tag, only the tag label differs). The whole of "Colorful" lives in the Hover state, and there it does the one thing set A refuses to do: it fills the ENTIRE card with the accent and switches the card to knockout ink. Title 100%, body 60%, tag inverted to a knockout plate with an accent label. So: Colorful is a second, louder HOVER for the Text card, not a new shape. That is why it is a modifier here and not a type. Set B exists for two of the four brands only, and the file does not say why. What can be said from the tokens: on a brand whose accent is bound to its ink an accent-filled card carries no colour at all — it is just an inverted card — so Colorful degenerates there, which accounts for one of the two absences. The other absence tracks the same brand split as the radius pair: the two brands that round hard get it, the two that stay near-square do not, and tokens.css is explicit that in this family "accent is a signal, not a decoration". A whole card of accent is decoration. This engine cannot enforce a per-brand restriction — .ui-card--colorful is brand-neutral CSS and will render on anything — so if that restriction is real it has to live in the brand packs or in validate.mjs. ------------------------------------------------------------ */ /* The card. All nine private tokens are declared here rather than in §2 because they are card-local: nothing outside this section reads them, and keeping them off :root means the section can be lifted out whole. Reading --ui-card-plate in the same block that declares it is the pattern the file header warns about, and here it is the benign direction — this rule wants the value it just declared. Every REASSIGNMENT below (hover, --colorful) is on a different selector and is consumed by a DESCENDANT, which is the same trick §2 uses to keep the Mode classes from reading themselves. */ .ui-card { /* 5px card padding. XXS is the only step this fine, and it exists on web precisely for this kind of inset frame: the card is a mount, the well is the mounted thing. */ --ui-card-pad: var(--s-w-xxs); /* 300px = XXL + L. The drawn Text-card height, and the floor for all three types in the file. */ --ui-card-min-h: calc(var(--s-w-xxl) + var(--s-w-l)); --ui-card-plate: var(--ui-plate-up); --ui-card-well: var(--ui-plate); --ui-card-edge: var(--ui-ink-20); /* The copy ink, not the plain ink. A card is a title, a paragraph and a chip — running text on a plate — so it belongs on the same ramp as every other body region. On three brands the two tokens are identical; on the fourth this is 2.77:1 → 15.00:1 for the title and 1.96:1 → 5.15:1 for the body. See §2 and divergence 14. */ --ui-card-ink: var(--ui-ink-copy); --ui-card-ink-dim: var(--ui-ink-copy-60); --ui-card-tag-plate: var(--ui-ground); --ui-card-tag-ink: var(--ui-ink-60); box-sizing: border-box; position: relative; /* containing block for the tag */ display: flex; flex-direction: column; align-items: flex-start; /* justify-end plus the min-height IS the Text card's layout. The file also puts 150px of top padding on the text container, which is redundant: with content bottom-aligned inside a 300px box the title cap lands at 193px from the top either way (measured both ways, they agree exactly). Dropping the 150px means a card with a long title grows downward instead of carrying 150px of dead air, which is the right behaviour in a flow medium. */ justify-content: flex-end; width: 100%; min-height: var(--ui-card-min-h); padding: var(--ui-card-pad); background: var(--ui-card-plate); color: var(--ui-card-ink); /* --radius-button, NOT --radius-component. The token source names this value "Buttons/Cards Radius" and the file proves it: the near-square brands draw the card at 4px, where the two radii are equal and tell you nothing, but the rounded brands draw it at 30px — the BUTTON value, not the 20px component value. §5.1's claim that the button is the only component using --radius-button is now out of date. */ border: var(--ui-border-w) solid var(--ui-card-edge); border-radius: var(--radius-button); /* Every card in the file is a whole-card link, so the card is normally an : text-decoration kills the underline the anchor would otherwise put through the title, and the cursor is stated so a card built on a

or an
with a scripted activation behaves like the anchor version. A card that is genuinely not interactive should not use this class. */ text-decoration: none; cursor: pointer; } /* ⚠ §3.1's owl selector reaches TWO levels down — `.ui-grid > * > * + *` — so any component dropped straight into a grid cell gets 40px of margin between its own children. §3.1 says component internals are never touched; that is true of .ui-page and .ui-flow but not of .ui-grid. A card in a grid cell had its text block shoved 40px off its media well until this reset went in. Same specificity as §3.1's rule (one class plus universals), so it wins on source order alone — which is fine inside ui-core.css and fine as a fragment loaded after it. .ui-signup has the same exposure and no reset. */ .ui-card > * + * { margin-top: 0; } /* --- Mode = Inverted --------------------------------------- EXTRAPOLATION, flagged as one. There is no Mode axis for cards in the file, so nothing here is transcribed — but the naive version (let the three plate names fall where §2 puts them) was wrong in the render, twice over, and both faults are worth recording because they are properties of translucent plates rather than of cards: 1. The inverted plates are TINTS, not colours, so a well painted in --ui-plate (20%) sitting inside a card painted in --ui-plate-up (40%) composites to 52% and comes out LIGHTER than the card it is recessed into. The depth order inverts. 2. A card resting on the 40% plate is the brightest surface in the mode, and on a brand whose ink is a saturated mid-tone that is where the inverted ink stops reading: the title measured 2.14:1 on 40% and 2.71:1 on 20%. §2 is explicit that an inverted component's RESTING fill is the 20% tint; the card was the one component not using it. So inverted mode reassigns the stack down one step and sends the well to the opaque inverted ground — a window punched back to page level, which is what Background Base means in the other two modes anyway. Depth order and §2's resting-plate rule are both preserved. The contrast is still a brand exception on one brand, and a worse one than the already-declared web/inverted-section failure. 3. The tag was the third fault and it is the reason for the hairline. Promoting it to the 40% plate (the obvious answer, since 40% reads against both a 20% card and an opaque well) composited to 52% and left its 60%-ink label at 2.36:1 on three brands and 1.45:1 on the fourth. So the tag KEEPS the opaque ground it uses in the other two modes, where the same label measures 5-6:1 — and because that makes it the same colour as the well it sits on, it takes a 20%-ink hairline to draw its edge. That is an invention, stated as one; §5.2 already owns a border slot on the tag, so it costs one declaration and buys a legible label. */ .ui-mode--inverted .ui-card { --ui-card-plate: var(--ui-plate); --ui-card-well: var(--ui-ground); } .ui-mode--inverted .ui-card .ui-card__tag { border-color: var(--ui-ink-20); } /* --- The media well --------------------------------------- 343 x 245 in the file, on both the Image and the Icon card — the same well, differently filled. Expressed as an aspect ratio rather than a fixed 245px height because this is a fluid medium and a card in a narrow column would otherwise letterbox its image. 343/245 is exactly 7/5, and at the drawn card width it computes to 244px against the file's 245. The inner radius is derived, not measured: outer radius minus the 5px mount. The file hand-sets 2px on the near-square brands (where the derivation gives 0) and 26px on the rounded ones (where it gives 25) — a 1-2px difference, which is the price of one rule instead of two magic numbers. */ .ui-card__media { position: relative; box-sizing: border-box; display: block; width: 100%; aspect-ratio: 7 / 5; flex: none; background: var(--ui-card-well); border-radius: max(0px, calc(var(--radius-button) - var(--ui-card-pad))); overflow: hidden; } /* Card = Image. The image bleeds to the well's edges and is cropped, never letterboxed: the well's ratio is the designed ratio and the photograph gives way, not the layout. The markup supplies the file; nothing here names one. */ .ui-card__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; /* No radius of its own — overflow:hidden on the well already clips it, and a second radius would double the corner. */ } /* Card = Icon. The same well, padded by M and with the glyph sat on the FLOOR of it rather than centred — 40 + 165 + 40 = 245, which is how the icon well comes out the same height as the image well. The glyph is a per-brand isometric illustration asset (it carries accent, plate and ink inside the SVG), so it is supplied by the markup and only boxed here. */ .ui-card--icon .ui-card__media { display: flex; align-items: flex-end; justify-content: center; padding: var(--s-w-m); } .ui-card__glyph { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; } /* Card = Text. No declarations, and that is the finding rather than an omission: min-height + justify-end above already reproduce the drawn 300px text card exactly, so the modifier carries nothing. It stays in the API because the markup should still state which of the three types it is, and because it is where a future divergence between the text card and the other two has to land. */ /* --- The text block --------------------------------------- S padding, S gap. The only thing worth noting is that the file's paddings are measured to CAP and BASELINE, not to the em box: every text node in every cell is cap-trimmed. Without the trim on the two type roles below the block reads about 4px taller at each end and the 20px gap opens to 23px. */ .ui-card__text { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--s-w-s); width: 100%; padding: var(--s-w-s); } /* Title row: the H4 takes the space, the arrow is pinned right. min-height is the control height because in the file this row IS a 34px Link sitting beside the title, and dropping the Link for a bare icon must not change the row's height. */ .ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-w-xs); width: 100%; min-height: var(--ui-control-h); } /* Title. Wears .ui-h4 in the markup, so family / size / leading come from §3.2 and only the colour and the flex behaviour are set here. ⚠ WEIGHT DISCREPANCY, reported not patched. The Figma style bound to every card title is General/H4, and its definition in the file is the body face at weight 300 (Light). §3.2's .ui-h4 is --fww-body-bold, i.e. 500. Card titles therefore render one step heavier here than in the file. Forking the weight inside a component would leave the engine in two minds about what H4 is, so the role is left alone and the discrepancy is written down instead — it needs settling in §3.2 or in the style guide, not here. */ .ui-card__title { display: block; flex: 1 1 auto; min-width: 0; color: var(--ui-card-ink); overflow-wrap: break-word; text-box: trim-both cap alphabetic; } /* Body. Wears .ui-body; 60% ink, which is the Body role's --dim step. A card body is always secondary to its title. */ .ui-card__body { color: var(--ui-card-ink-dim); text-box: trim-both cap alphabetic; } /* The arrow. This is the Links component at Icon=only, and the file draws it at FULL ink rather than Links' resting 60% — the exported glyph is solid Primary 100 in every cell — so it reads as an Active link, matching the title beside it rather than sitting a step behind it. It keeps that component's 34px box even though the glyph is ~15px, which is why it is a wrapper span in the markup and not the itself: measured flush, a bare icon put its glyph 26px from the card's right edge against the file's 34.5px, because the file's 34px Link box carries ~9.5px of optical padding around the glyph. Reproducing the box reproduces the alignment and needs no magic number. ⚠ A span, not an : the card is already the link. */ .ui-card__arrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ui-control-h); height: var(--ui-control-h); color: var(--ui-card-ink); } /* --- The tag --------------------------------------------- In the file this is an instance of the Tags component, so the markup wears .ui-tag .ui-tag--filled and this rule only moves it and re-plates it. Two-class selector on purpose: `.ui-mode--alternative .ui-tag` in §5.2 is also (0,2,0), and a single-class selector here would lose the plate to it and the tag would vanish into the card in Alternative mode. ⚠ Must be a , not a