{"id":"designesy.design-system","version":"0.4.6","status":"public","name":"Designesy design system","public_url":"https://www.designesy.org/contracts/design-system","full_contract_url":"https://www.designesy.org/contracts#design-system-contract","machine_url":"https://www.designesy.org/contracts/design-system.json","updated":"2026-10-12","schema_hints":{"colors":"primitive + semantic color roles","typography":"type rules and stacks","rounded":"radius tokens","spacing":"layout spacing and breakpoints","components":"behavior and states","interaction":"Poise-adopted contact rules","takt":"Takt-adopted interface-feel rules","cadence":"Cadence-adopted typography rules","duration":"duration scale cross-referenced against transitions.dev","motion_standards":"Ten non-negotiable motion standards (§16)","springs":"Spring physics tokens via custom $type: spring","acoustic":"Acoustic cue tokens via custom $type: sound (net-new vs W3C DTCG)","copywriting":"UX copywriting principles from NN/g, Polaris, Carbon, Fluent, HIG, Krehel /better-writing (v0.4.0)","verification_checks":"every engine check by id, category, type, threshold, and weight, from the engine registry"},"provenance":{"implementation":"designesy.org (Next.js App Router)","token_source":"Live site design tokens (:root)","doctrine":"Designesy design doctrine: public surface carries operational values only","motion_references":"Short settle and easing language adapted into --ease-out, --ease-in-out, --ease-drawer. Frequency gate, press scale 0.97, and unseen-details-compound principle cross-referenced against Kowalski /emil-design-eng (Linear, ex-Vercel). Spring physics (damping 1.0, response 0.3 to 0.4) and interruptibility principles cross-referenced against Kowalski /apple-design (Apple WWDC Designing Fluid Interfaces). Anti-over-animation Gate (Frequency, Purpose, Speed, Function) cross-referenced against Kowalski /find-animation-opportunities. Animation authoring: 7-step build sequence, Never Ship table (13 auto-blocks), tool selection hierarchy, and tooltip-instant pattern cross-referenced against Kowalski /animate (the authoring complement to /review-animations).","interaction_audio":"Cuelume v0.2.2; preference owned by Designesy","first_lab":{"name":"Poise","url":"https://www.designesy.org/labs/poise","role":"Source lab for interaction rules adopted in v0.1.1"},"second_lab":{"name":"Takt","url":"https://www.designesy.org/labs/takt","role":"Source lab for interface-feel rules adopted in v0.1.2"},"third_lab":{"name":"Cadence","url":"https://www.designesy.org/labs/cadence","role":"Source lab for typography rules adopted in v0.1.3"},"external_ingests":[{"name":"Amicro","author":"Kiyotaka (@SubhanHQ)","url":"https://amicro.vercel.app","role":"Micro-transitions library: informed Takt stagger and press rules"},{"name":"better-ui skill","author":"Jakub Krehel (@jakubkrehel)","url":"https://github.com/jakubkrehel/skills","role":"13 interface polish principles: source for concentric radii, press scale, image outlines, hit areas","license":"MIT"},{"name":"better-typography skill","author":"Jakub Krehel (@jakubkrehel)","url":"https://github.com/jakubkrehel/skills","role":"18 typography principles: source for font smoothing, scale, leading, tracking, measure, wrapping, numbers, selection","license":"MIT"},{"name":"agent-skills","author":"Addy Osmani (@addyosmani)","url":"https://github.com/addyosmani/agent-skills","role":"Anti-rationalization table pattern + verification checklist methodology: informed Design Review kit rationalization section","license":"MIT"},{"name":"Taste Skill","author":"Leon (@Leonxlnx)","url":"https://github.com/Leonxlnx/taste-skill","role":"Pre-flight checklist methodology: gap audit against our 8-dimension review; Core Web Vitals and button contrast checks adopted","license":"MIT"},{"name":"transitions.dev","author":"Jakub Antalik (@Jakubantalik)","url":"https://transitions.dev","role":"Transition gallery: duration scale cross-referenced; press scale values validated (0.96/0.97 match); easing curves confirmed compatible. A gallery reference rather than a formal standard."},{"name":"detail.design","author":"detail.design","url":"https://detail.design","role":"Copywriting gap source: pattern catalog organizing UI decisions by discipline (Design, Accessibility, Copywriting, Motion, Optimization). The Copywriting discipline gap triggered the v0.4.0 contract section. Patterns are inspiration; the taxonomy structure is the value."},{"name":"NN/g UI Copy Guidelines","author":"Nielsen Norman Group","url":"https://www.nngroup.com/articles/ui-copy/","role":"Button text 2 to 4 words, verb-first, remove articles, ellipsis convention, avoid generic OK/Submit. Error message guidelines: what happened + what to do + what to expect. Source for copywriting checks v38 to v41."},{"name":"Polaris Content Guidelines","author":"Shopify","url":"https://polaris.shopify.com/content/error-messages","role":"Error messages: explain what's wrong + what to do, be specific, don't overapologize, avoid \"invalid\" jargon. Source for error-message copywriting principle."},{"name":"IBM Carbon Writing Style","author":"IBM","url":"https://carbondesignsystem.com/guidelines/content/writing-style/","role":"Sentence case for all UI text, second person (you/your), active voice, no please/thank you, simplest term. Source for sentence-case and voice principles."},{"name":"better-colors skill","author":"Jakub Krehel (@jakubkrehel)","url":"https://github.com/jakubkrehel/skills","role":"OKLCH palette generation, contrast checking, gamut mapping, and theming principles: cross-referenced against contract color tokens. Confirms OKLCH-first approach for wide-gamut color discipline.","license":"MIT"},{"name":"better-accessibility skill","author":"Jakub Krehel (@jakubkrehel)","url":"https://github.com/jakubkrehel/skills","role":"Focus management, keyboard navigation, ARIA patterns, form accessibility, screen-reader semantics, hit area floors, and motion reduction: cross-referenced against contract accessibility rules and WCAG 2.2 AA verification checks.","license":"MIT"},{"name":"better-layout skill","author":"Jakub Krehel (@jakubkrehel)","url":"https://github.com/jakubkrehel/skills","role":"Structure, grouping, alignment, reading order, progressive disclosure, and breakpoint discipline: cross-referenced against contract layout tokens and grid rules.","license":"MIT"},{"name":"better-writing skill","author":"Jakub Krehel (@jakubkrehel)","url":"https://github.com/jakubkrehel/skills","role":"12 UX writing principles: verb-first buttons (source for copywriting check v38), descriptive link text (source for check v40), one capitalization policy with sentence-case default (source for check v41), errors that say how to fix next to where it broke (no blame, no oops, no exclamation marks), empty states that orient and point forward with one clear next action, placeholders as examples not labels, settings that describe the ON state, consistent flow vocabulary (Get Started → Continue → Done), plain words over clever ones, address the reader directly as you. Cross-referenced against contract copywriting checks v38-v41 and NN/g + Polaris error-message sources. Complements better-typography (which owns how text renders; better-writing owns what text says).","license":"MIT"},{"name":"emil-design-eng skill","author":"Emil Kowalski (@emilkowalski)","url":"https://github.com/emilkowalski/skills","role":"Animation philosophy and motion craft: frequency gate (never animate keyboard-initiated or high-frequency actions), custom Bézier over bare ease, origin-aware animations, press scale 0.97, unseen-details-compound principle. Cross-referenced against contract ten_standards and motion rules. Kowalski is on the Web team at Linear (ex-Vercel design team).","license":"MIT"},{"name":"review-animations skill","author":"Emil Kowalski (@emilkowalski)","url":"https://github.com/emilkowalski/skills","role":"Strict animation review rules: correct curve selection, duration bounds, property restriction (transform/opacity/filter only), interruptibility, and reduced-motion mandatory handling. Cross-referenced against contract motion verification and anti-patterns. Complements Krehel /better-ui for the motion-specific dimension.","license":"MIT"},{"name":"apple-design skill","author":"Emil Kowalski (@emilkowalski)","url":"https://github.com/emilkowalski/skills","role":"Apple WWDC design principles distilled for web: spring physics (damping 1.0 critically damped, response 0.3 to 0.4), interruptibility, velocity handoff, momentum projection, rubber-banding, translucent materials, multimodal feedback (causality + harmony + utility), and reduced-motion as gentler feedback not a kill switch. Spring values cross-referenced against contract springs (default damping 1.0, response 0.4). Source: Designing Fluid Interfaces (WWDC 2018) + Principles of Great Design (WWDC 2026).","license":"MIT"},{"name":"find-animation-opportunities skill","author":"Emil Kowalski (@emilkowalski)","url":"https://github.com/emilkowalski/skills","role":"Anti-over-animation discipline: the 4-question Gate (Frequency, Purpose, Speed, Function). Frequency gate: 100+/day or keyboard-initiated = never animate. Purpose must be named: feedback, spatial consistency, state indication, preventing jarring change, explanation, or delight (rare-tier only). Speed budget: press 100 to 160ms, tooltips 125 to 200ms, dropdowns 150 to 250ms, modals 200 to 500ms. Function: decoration on functional data hinders. Cross-referenced against contract ten_standards keyboard-still rule and anti-patterns_caution.","license":"MIT"},{"name":"animate skill","author":"Emil Kowalski (@emilkowalski)","url":"https://github.com/emilkowalski/skills","role":"Animation authoring: the 7-step build sequence (should it animate? → purpose → tool → properties → easing/duration → interruption/exit → reduced-motion/hover gating). Tool selection hierarchy: CSS transition → @starting-style → CSS animation → WAAPI → Motion (cheapest that works). Never Ship table: 13 auto-block items including transition:all, scale(0), ease-in on UI, keyframes on rapidly-triggered elements, Motion x/y/scale shorthands (not hardware-accelerated; use full transform string), ungated :hover motion. Tooltip-instant pattern: once one tooltip is open, neighbors open at 0ms duration. RECIPES.md: 12 ready-to-build component implementations (button press, dropdown, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal, drag-to-dismiss). The authoring complement to review-animations (the checking skill).","license":"MIT"}],"adoption":{"version":"0.1.1","date":"2026-07-12","from_lab":"Poise","field_check":"https://www.designesy.org/review/poise","keyboard_proof":"https://www.designesy.org/review/poise/keyboard","note":"Explicit adoption of Lab One portable rules into contract material"}},"colors":{"ink":{"token":"--ink","value":"#f5f5f7","role":"Primary text / foreground"},"muted":{"token":"--muted","value":"#a0a0a0","role":"Secondary text"},"muted_dim":{"token":"--muted-dim","value":"#7d7d7d","role":"Tertiary / meta text: 5.07:1 on paper and 4.54:1 on raised in dark (on lifted planes the dim tier rides --muted); light #686872, 5.33:1 on paper and 4.68:1 on lifted"},"paper":{"token":"--paper","value":"#010102","role":"Page background"},"surface":{"token":"--surface","value":"#0a0a0c","role":"Card / panel base"},"surface_raised":{"token":"--surface-raised","value":"#121216","role":"Elevated surface"},"surface_lifted":{"token":"--surface-lifted","value":"#16161b","role":"Lifted / hover panel"},"signal":{"token":"--signal","value":"#0A94FF","role":"Brand accent (internal token name; public products avoid this vocabulary)"},"signal_light":{"token":"--signal-light","value":"#36A7FF","role":"Accent hover / focus lift"},"activation":{"token":"--activation","value":"#F56B00","role":"Activated Orange, the exact RGB inverse of --signal: live moments only (a scan running, the live monitor, the activated mark). Selection is blue"},"activation_ink":{"token":"--activation-ink","value":"var(--activation)","role":"Activation used as text: --activation on dark (6.94:1 on paper, 6.00:1 on lifted); on light #B04D00 (5.20:1 on paper, 4.56:1 on lifted). Light --activation itself (#F56B00, 3.01:1 on white) is for fills only"},"signal_access":{"token":"--signal-access","value":"#0A94FF · light: #016ABB","role":"Accessible signal: text, links and focus. Dark is Azure itself (5.75:1 or more on every dark surface); light is Deep Azure #016ABB (4.71 to 5.55:1 on the four light surfaces)"},"signal_text":{"token":"--signal-text","value":"var(--signal-access)","role":"Signal used as text: --signal-access in both themes. --signal itself is a fill; on light it is 3.14:1 on white and never text"},"paper_on_signal":{"token":"--paper-on-signal","value":"#010102","role":"Text on an Azure fill, and only that: ink, 6.65:1 on Azure. White on Azure is 3.14:1 and is not used"},"paper_white":{"token":"--paper-white","value":"#FFFFFF","role":"The constant white, the same in both themes: the dark increase-contrast ink, text on red fills (5.56:1 on #ca2323), shimmer and shine highlights"},"signal_deep":{"token":"--signal-deep","value":"#016ABB","role":"Deep Azure: Azure's own 251° hue, darker. Links, focus and selected states on light surfaces (4.71 to 5.55:1 on all four). Never a button fill"},"signal_teal":{"token":"--signal-teal","value":"#2CEBCA","role":"Gradient end only (Azure to Teal, on black or white). Never a standalone colour, never behind body text, never paired with the activation colour"},"action":{"token":"--action","value":"var(--signal) · light: #0A94FF","role":"Primary action fill: Azure in both themes"},"on_action":{"token":"--on-action","value":"#010102","role":"Primary action label: ink on --action, 6.65:1 in both themes"},"action_pressed":{"token":"--action-pressed","value":"#087ED9","role":"Primary action pressed fill, and the light-theme hover: --on-action on it is 4.96:1"},"ok":{"token":"--ok","value":"#4ade80","role":"Verification status: pass"},"ok_ink":{"token":"--ok-ink","value":"var(--ok)","role":"Pass status used as text: --ok on dark (11.97:1 on paper, 10.35:1 on lifted); on light, --ok mixed 70% toward --ink in oklab (#215f35, 7.38:1 on paper, 6.47:1 on lifted). Light --ok itself (#15803d, 4.26:1 on lifted) is for icons, dots, bars and tints"},"warn":{"token":"--warn","value":"#facc15","role":"Verification status: warn"},"warn_ink":{"token":"--warn-ink","value":"var(--warn)","role":"Warn used as text: --warn on dark (13.62:1 on paper); on light, --warn mixed 70% toward --ink in oklab (#7f5e21, 5.76:1 on paper as painted, 5.06:1 on lifted). Light --warn itself (#b07d04, 3.51:1 on paper) is for icons, dots and tints"},"error":{"token":"--error","value":"#f87171","role":"Verification status: fail"},"error_ink":{"token":"--error-ink","value":"var(--error)","role":"Fail status used as text: --error on dark (7.54:1 on paper, 6.52:1 on lifted); on light, --error mixed 70% toward --ink in oklab (#9e2c29, 7.13:1 on paper, 6.26:1 on lifted). Light --error itself (#dc2626, 4.10:1 on lifted) is for icons, dots, bars and tints"},"grade_a":{"token":"--grade-a","value":"#22c55e","role":"Grade scale A (≥90%): score emblem, constellation, badge. Distinct from --ok (#4ade80, verification status)"},"grade_b":{"token":"--grade-b","value":"#84cc16","role":"Grade scale B (≥80%): lime, score emblem arc"},"grade_c":{"token":"--grade-c","value":"#eab308","role":"Grade scale C (≥70%): yellow, score emblem arc"},"grade_d":{"token":"--grade-d","value":"#FB7185","role":"Grade scale D (≥60%): rose, score emblem arc (light #C9216C). Off orange, which is the brand's activation colour"},"grade_f":{"token":"--grade-f","value":"#ef4444","role":"Grade scale F (<60%): red, score emblem arc"},"grade_a_ink":{"token":"--grade-a-ink","value":"var(--grade-a)","role":"Grade A used as text: --grade-a on dark (9.16:1 on paper, 7.91:1 on lifted); light #147839 (5.38:1 on paper, 4.72:1 on lifted). Light --grade-a itself (#15803d, 4.26:1 on lifted) is for arcs, borders and tints"},"grade_b_ink":{"token":"--grade-b-ink","value":"var(--grade-b)","role":"Grade B used as text: --grade-b on dark (10.56:1 on paper, 9.13:1 on lifted); light #497509 (5.30:1 on paper, 4.65:1 on lifted). Light --grade-b itself (#5D960C, 3.06:1 on lifted) is for arcs, borders and tints"},"grade_c_ink":{"token":"--grade-c-ink","value":"var(--grade-c)","role":"Grade C used as text: --grade-c on dark (10.88:1 on paper, 9.40:1 on lifted); light #896203 (5.33:1 on paper, 4.68:1 on lifted). Light --grade-c itself (#b07d04, 3.08:1 on lifted) is for arcs, borders and tints"},"grade_d_ink":{"token":"--grade-d-ink","value":"var(--grade-d)","role":"Grade D used as text: --grade-d on dark (7.75:1 on paper, 6.70:1 on lifted); light #BE1F67 (5.67:1 on paper, 4.98:1 on lifted, 4.67:1 on its own 12% emblem tint). Light --grade-d itself (#C9216C, 4.55:1 on lifted) is for arcs, borders and tints"},"grade_f_ink":{"token":"--grade-f-ink","value":"var(--grade-f)","role":"Grade F used as text: --grade-f on dark (5.54:1 on paper, 4.79:1 on lifted); light #CD2323 (5.26:1 on paper, 4.62:1 on lifted). Light --grade-f itself (#dc2626, 4.10:1 on lifted) is for arcs, borders and tints"},"grade_b_light":{"token":"--grade-b-light","value":"#a3e635","role":"Lighter lime for grade-B text on dark surfaces (13.84:1 on paper); light value is --grade-b-ink (#497509, 5.30:1 on paper), because light lime #5D960C is 3.48:1"},"grade_d_glow":{"token":"--grade-d-glow","value":"#FB7185","role":"Glow variant for the D-grade emblem and hero proof: the same rose as --grade-d (light #C9216C)"},"signal_pos":{"token":"--signal-pos","value":"#34d399","role":"Emerald for positive signal points in score breakdown"},"live":{"token":"--live","value":"#22c55e","role":"\"is-live\" status dot indicator (same value as --grade-a)"},"error_text":{"token":"--error-text","value":"#fecaca","role":"Light red-200 for error text on dark error surfaces (14.42:1 on paper); light value is --error-ink (#9e2c29, 7.13:1 on paper)"},"amber_notice":{"token":"--amber-notice","value":"#c9a227","role":"Amber for score-drawer remediation heading: contract-restrained (8.62:1 on paper); light value is --warn-ink (#7f5e21, 5.76:1 on paper), because light amber #b07d04 is 3.51:1"},"shimmer_1":{"token":"--shimmer-1","value":"#f1f7ff","role":"Wordmark shimmer gradient stop 1: decorative animation"},"shimmer_2":{"token":"--shimmer-2","value":"#e1effe","role":"Wordmark shimmer gradient stop 2: decorative animation"},"shimmer_3":{"token":"--shimmer-3","value":"#0286e9","role":"Wordmark shimmer gradient stop 3: decorative animation"},"shimmer_4":{"token":"--shimmer-4","value":"#7cbafd","role":"Wordmark shimmer gradient stop 4: decorative animation"},"shimmer_5":{"token":"--shimmer-5","value":"#d3e7fe","role":"Wordmark shimmer gradient stop 5: decorative animation"}},"surfaces_and_lines":{"surface_soft":{"token":"--surface-soft","value":"rgba(255, 255, 255, 0.03)","role":"Soft fill / note background"},"surface_hover":{"token":"--surface-hover","value":"rgba(255, 255, 255, 0.06)","role":"Hover wash"},"line":{"token":"--line","value":"rgba(255, 255, 255, 0.12)","role":"Default border"},"line_strong":{"token":"--line-strong","value":"rgba(255, 255, 255, 0.22)","role":"Emphasized border"},"line_faint":{"token":"--line-faint","value":"rgba(255, 255, 255, 0.06)","role":"Subtle divider"},"signal_dim":{"token":"--signal-dim","value":"rgba(10, 148, 255, 0.14) · light: rgba(10, 148, 255, 0.08)","role":"Accent wash / badge fill"},"surface_gradient":{"token":"--surface-gradient","value":"linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012))","role":"Surface depth wash (card interiors)"},"surface_card_gradient":{"token":"--surface-card-gradient","value":"linear-gradient(135deg, #0d0d11 0%, var(--surface) 100%)","role":"Card interior gradient"},"inner_light":{"token":"--inner-light","value":"inset 0 1px 0 rgba(255,255,255,0.055)","role":"Inner top-edge highlight"},"signal_glow":{"token":"--signal-glow","value":"0 0 60px rgba(54,167,255,0.18), 0 0 24px rgba(54,167,255,0.28)","role":"Accent glow (border and focus only, never a button fill; v22)"},"signal_gradient":{"token":"--signal-gradient","value":"linear-gradient(135deg, #0A94FF 0%, #0A94FF 35%, #2CEBCA 100%)","role":"Signature gradient, Azure to Teal, on black or white grounds only; one per view; never behind body text (borders and focus, never a button fill)"},"field_dot_1":{"token":"--field-dot-1","value":"#0A94FF · light: #4FA9F5","role":"Ambient field dot: primary hue"},"field_dot_2":{"token":"--field-dot-2","value":"#36A7FF · light: #86C3F7","role":"Ambient field dot: secondary hue"},"field_dot_3":{"token":"--field-dot-3","value":"#7CC4FF · light: #B5DAFA","role":"Ambient field dot: tertiary hue (bright variant derived from it)"},"field_alpha":{"token":"--field-alpha","value":"1 · light: 0.45","role":"Ambient-field ink multiplier: the theme lever for field weight; density, motion, and cursor dwell are unaffected"}},"shadows":{"sm":{"token":"--shadow-sm","value":"0 1px 3px rgba(0, 0, 0, 0.4)"},"md":{"token":"--shadow-md","value":"0 8px 30px rgba(0, 0, 0, 0.35)"},"lg":{"token":"--shadow-lg","value":"0 24px 80px rgba(0, 0, 0, 0.5)"}},"materials":{"mat_base":{"token":"--mat-base","value":"var(--paper)","role":"Tier 0: the page plane and the ambient field"},"mat_reading":{"token":"--mat-reading","value":"var(--surface)","role":"Tier 1, opaque reading surface: principle cells, pillars, surface cards, history and state panels"},"mat_instrument":{"token":"--mat-instrument","value":"linear-gradient(180deg, var(--surface-lifted), var(--surface-raised)) · light: linear-gradient(180deg, #ffffff, var(--surface-raised))","role":"Tier 2, opaque instrument body: the score console, the Drift instrument, the health panel, the inspection window"},"mat_float":{"token":"--mat-float","value":"var(--surface-lifted) · light: #ffffff","role":"Tier 3, opaque floating element over static content; also the reduced-transparency fallback for all glass"},"glass_thin":{"token":"--glass-thin","value":"color-mix(in srgb, var(--surface-raised) 80%, transparent) · light: color-mix(in srgb, var(--surface) 84%, transparent)","role":"Thin glass tint, header capsule only. Text on it is --ink only (7.2:1 worst case)"},"glass_regular":{"token":"--glass-regular","value":"color-mix(in srgb, var(--surface-raised) 88%, transparent) · light: color-mix(in srgb, var(--surface) 92%, transparent)","role":"Regular glass tint for every text-bearing glass surface: command slab, palette, drawer, popovers, dock pills, verdict HUD. --muted is allowed on it (5.2:1 worst case)"},"glass_filter_thin":{"token":"--glass-filter-thin","value":"blur(16px) saturate(140%) · light: blur(16px)","role":"Backdrop recipe for thin glass; the light theme drops saturate"},"glass_filter_regular":{"token":"--glass-filter-regular","value":"blur(24px) saturate(140%) · light: blur(24px) · coarse pointer: blur(16px)","role":"Backdrop recipe for regular glass. Blur is capped at 24px (cost scales with radius times area) and steps down on coarse pointers"},"glass_grain":{"token":"--glass-grain","value":"static SVG feTurbulence noise (data URI), used at opacity .035 with mix-blend-mode: overlay","role":"Grain on a glass ::after: kills banding and turns a blur into a material. Glass only, never animated"},"rim":{"token":"--rim","value":"linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.05) 38%, rgb(255 255 255 / 0.03)) · light: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(0 25 51 / 0.08) 40%, rgb(0 25 51 / 0.11))","role":"The 1px top-lit edge on every tier-1+ surface, painted on a masked ::before"},"rim_hot":{"token":"--rim-hot","value":"linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0.08) 38%, rgb(255 255 255 / 0.05)) · light: linear-gradient(180deg, rgb(255 255 255 / 1), rgb(0 25 51 / 0.12) 40%, rgb(0 25 51 / 0.16))","role":"Rim on hover and focus-visible, on a second pre-rendered layer whose opacity crossfades"},"specular":{"token":"--specular","value":"inset 0 1px 0 rgb(255 255 255 / 0.07) · light: inset 0 1px 0 rgb(255 255 255 / 0.9)","role":"Inner top highlight that pairs with --rim"},"elev_1":{"token":"--elev-1","value":"0 1px 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.22) · light: rgb(1 40 76) at 0.06 / 0.05","role":"Elevation 1: reading cards. Every x offset is 0 (one light, straight down)"},"elev_2":{"token":"--elev-2","value":"0 1px 1px rgb(0 0 0 / 0.28), 0 4px 8px -2px rgb(0 0 0 / 0.3), 0 12px 24px -8px rgb(0 0 0 / 0.36) · light: rgb(1 40 76) at 0.06 / 0.07 / 0.09","role":"Elevation 2: instruments and paired panels"},"elev_3":{"token":"--elev-3","value":"0 2px 2px rgb(0 0 0 / 0.26), 0 8px 16px -4px rgb(0 0 0 / 0.32), 0 24px 48px -12px rgb(0 0 0 / 0.42), 0 48px 96px -32px rgb(0 0 0 / 0.55) · light: rgb(1 40 76) at 0.05 / 0.07 / 0.1 / 0.14","role":"Elevation 3: floating controls and objects (command slab, popovers, verdict HUD)"},"elev_4":{"token":"--elev-4","value":"0 2px 4px rgb(0 0 0 / 0.3), 0 16px 32px -8px rgb(0 0 0 / 0.4), 0 40px 80px -16px rgb(0 0 0 / 0.5), 0 80px 140px -40px rgb(0 0 0 / 0.6) · light: rgb(1 40 76) at 0.06 / 0.1 / 0.14 / 0.18","role":"Elevation 4: transient overlays only (find palette, mobile drawer)"},"floor_pool":{"token":"--floor-pool","value":"radial-gradient(closest-side, oklch(0.55 0.2 251 / 0.16), transparent) · light: radial-gradient(closest-side, rgb(1 40 76 / 0.2), transparent)","role":"Floor under a standing object, one per viewport. Luminous in dark mode, where a dark pool cannot be seen; a navy shadow in light mode"},"glow_signal":{"token":"--glow-signal","value":"0 18px 44px -26px var(--signal-light)","role":"Coloured light meaning \"this surface is active\" (focused or running); faded in on a layer, gone at rest"},"glow_contact":{"token":"--glow-contact","value":"radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 0%), color-mix(in srgb, var(--signal-access) 12%, transparent), transparent 62%) · light: 8%","role":"Hover light at the point of contact. A surface re-declares it on itself so its own --spot-x / --spot-y apply"},"mat_t_in":{"token":"--mat-t-in","value":"var(--duration-quick) var(--ease-out)","role":"Material state entry (150ms), under the 200ms reduced-motion opacity allowance"},"mat_t_out":{"token":"--mat-t-out","value":"var(--duration-fast) var(--ease-out)","role":"Material state exit (250ms)"},"instrument_palette":{"lv_glass":{"token":"--lv-glass","value":"var(--mat-instrument)","role":"Deprecated alias of --mat-instrument (no rule paints with it); kept so older references resolve to the opaque instrument body, not the old translucent fill"},"lv_glass_ring":{"token":"--lv-glass-ring","value":"rgba(255, 255, 255, 0.09) · light: rgba(0, 25, 51, 0.09)","role":"Instrument outer ring"},"lv_glass_edge":{"token":"--lv-glass-edge","value":"rgba(255, 255, 255, 0.07) · light: rgba(255, 255, 255, 0.9)","role":"Instrument inner top edge"},"lv_glass_shadow":{"token":"--lv-glass-shadow","value":"0 44px 110px -44px rgba(0, 0, 0, 0.85), 0 14px 36px -16px rgba(0, 0, 0, 0.55) · light: 0 36px 80px -36px rgba(1, 40, 76, 0.28), 0 10px 26px -14px rgba(1, 40, 76, 0.16)","role":"Instrument drop shadow"},"lv_sheen":{"token":"--lv-sheen","value":"rgba(255, 255, 255, 0.3) · light: rgba(255, 255, 255, 0.95)","role":"The single specular sheen line on an instrument"},"lv_well":{"token":"--lv-well","value":"rgba(255, 255, 255, 0.035) · light: rgba(0, 25, 51, 0.035)","role":"Recessed well fill (inputs, tracks)"},"lv_well_line":{"token":"--lv-well-line","value":"rgba(255, 255, 255, 0.1) · light: rgba(0, 25, 51, 0.1)","role":"Recessed well outline"},"lv_pass_a":{"token":"--lv-pass-a","value":"#36A7FF","role":"Pass fill, light stop (both themes)"},"lv_pass_b":{"token":"--lv-pass-b","value":"#0A94FF","role":"Pass fill, deep stop (both themes); ink on the gradient 6.65 to 8.08:1"},"lv_pass_glow":{"token":"--lv-pass-glow","value":"rgba(54, 167, 255, 0.55) · light: rgba(1, 106, 187, 0.22)","role":"Pass glow"},"lv_warn_a":{"token":"--lv-warn-a","value":"#f7c948 · light: #e0a917","role":"Warn fill, light stop"},"lv_warn_b":{"token":"--lv-warn-b","value":"#d79a06 · light: #b07d04","role":"Warn fill, deep stop"},"lv_fail_a":{"token":"--lv-fail-a","value":"#ff7f7f · light: #ef5b5b","role":"Fail fill, light stop"},"lv_fail_b":{"token":"--lv-fail-b","value":"#e0454a · light: #c62828","role":"Fail fill, deep stop"},"lv_hatch":{"token":"--lv-hatch","value":"rgba(255, 255, 255, 0.2) · light: rgba(0, 25, 51, 0.22)","role":"Hatching for skipped or person-checked cells: the drawing convention for a different material"},"lv_head":{"token":"--lv-head","value":"#36A7FF · light: #0A94FF","role":"Inspection highlight: the element outline and tag fill in the inspection demo"},"lv_head_ink":{"token":"--lv-head-ink","value":"#010102","role":"Text on a --lv-head fill: 8.08:1 on the dark head, 6.65:1 on the light head"},"lv_ink_accent":{"token":"--lv-ink-accent","value":"var(--signal-access)","role":"Accent text on an instrument"},"lv_shine":{"token":"--lv-shine","value":"color-mix(in srgb, var(--paper-white) 34%, transparent)","role":"The one specular highlight on lit cells"},"lv_shine_soft":{"token":"--lv-shine-soft","value":"color-mix(in srgb, var(--paper-white) 26%, transparent)","role":"Softer specular highlight on lit cells"}}},"rounded":{"default":{"token":"--radius","value":"6px","role":"Default corner radius"},"sm":{"token":"--radius-sm","value":"4px","role":"Compact controls / nav chips"},"md":{"token":"--radius-md","value":"8px","role":"Intermediate corner radius (a documented 8px tier outside the 4-step public scale)"},"lg":{"token":"--radius-lg","value":"12px","role":"Cards / panels / large surfaces"},"xl":{"token":"--radius-xl","value":"16px","role":"Hero / modal / flagship surfaces"}},"layout":{"max_width":{"token":"--maxw","value":"1080px","role":"Content shell max width"},"max_width_wide":{"token":"--maxw-wide","value":"1180px","role":"Wider shell for hero / section chrome (additive only)"},"max_width_shell":{"token":"--maxw-shell","value":"clamp(var(--maxw-wide), calc(var(--maxw-wide) + (100vw - 1440px) / 2), 1560px)","role":"Shell chrome on very large viewports: exactly --maxw-wide up to a 1440px viewport, then grows at half the viewport rate to 1560px. Header, main and footer share it so their edges agree. Prose never rides it: body copy keeps --maxw and its measure caps (additive only)"},"shell_gutter":{"token":"--shell-gutter","value":"clamp(var(--space-16), 4vw, var(--space-24))","role":"The one outer gutter: page wrappers pad by it and the header pill insets by it, so pill edges equal content edges at every width (16px on a phone, 24px from a 600px viewport)"},"shell_outer":{"token":"--shell-outer","value":"calc(var(--maxw-shell) + 2 * var(--shell-gutter))","role":"max-width of every page wrapper, so its content box equals --maxw-shell equals the header pill"},"grid_gutter":{"token":"--grid-gutter","value":"var(--space-16)","role":"Column gap of the 12-column grid; the same 16px the Four ways and pillar grids use"},"grid_12":{"token":"--grid-12","value":"[full-start] repeat(5, minmax(0, 1fr)) [mirror] repeat(2, minmax(0, 1fr)) [split] repeat(5, minmax(0, 1fr)) [full-end]","role":"The one track list. split is line 8 (the 7|5 seam, the 7-line); mirror is line 6 (the 5|7 seam). Spans switch at @container g12 (width >= 64rem), a literal because custom properties are invalid in query conditions"},"track_split":{"token":"--track-split","value":"calc((100% - 11 * var(--grid-gutter)) * 7 / 12 + 6 * var(--grid-gutter))","role":"First track of a face/side card or title bar: 7 columns and 6 gaps of its own content box, so the side pane divider lands on the 7-line. Its element carries no horizontal padding or border"},"z_index":{"z_content":{"token":"--z-content","value":"1","role":"In-flow content lifted above the page background layers"},"z_sticky":{"token":"--z-sticky","value":"10","role":"Sticky elements inside content"},"z_chrome":{"token":"--z-chrome","value":"100","role":"Site chrome: the header capsule"},"z_popover":{"token":"--z-popover","value":"120","role":"Popovers anchored to chrome (senses panel)"},"z_scrim":{"token":"--z-scrim","value":"150","role":"Dim layer under a drawer or dialog"},"z_drawer":{"token":"--z-drawer","value":"200","role":"Mobile navigation drawer"},"z_modal":{"token":"--z-modal","value":"300","role":"Modal dialogs and the find palette: always above the chrome"},"z_toast":{"token":"--z-toast","value":"400","role":"Transient notices above everything"}},"shell_horizontal":"var(--shell-gutter): clamp(1rem, 4vw, 1.5rem), outside the --maxw-shell content box","section_vertical":"clamp(2.5rem, 5vw, 3.5rem) doctrine · clamp(3.5rem, 8vw, 6.5rem) bands","card_padding":"1 to 1.5rem","grid_gap":"1rem (--grid-gutter), one gutter","control_min_height":"44px buttons, sense toggles and preference switches","breakpoints":{"grids":"@container 64rem (mid tiers 34 to 48rem; 57rem for the inspection demo)","topbar":"720px","single_column":"560px viewport on older blocks; layouts stack on their own container width"},"spacing_scale":{"space_0":{"token":"--space-0","value":"0","role":"Zero spacing"},"space_1":{"token":"--space-1","value":"0.0625rem","role":"1px: hairline borders, micro adjustments"},"space_2":{"token":"--space-2","value":"0.125rem","role":"2px"},"space_3":{"token":"--space-3","value":"0.1875rem","role":"3px"},"space_4":{"token":"--space-4","value":"0.25rem","role":"4px: tight badge/card padding"},"space_5":{"token":"--space-5","value":"0.3125rem","role":"5px"},"space_6":{"token":"--space-6","value":"0.375rem","role":"6px"},"space_7":{"token":"--space-7","value":"0.4375rem","role":"7px: off-grid, badge padding"},"space_8":{"token":"--space-8","value":"0.5rem","role":"8px: default tight gap, small padding"},"space_9":{"token":"--space-9","value":"0.5625rem","role":"9px: off-grid"},"space_10":{"token":"--space-10","value":"0.625rem","role":"10px"},"space_11":{"token":"--space-11","value":"0.6875rem","role":"11px: off-grid"},"space_12":{"token":"--space-12","value":"0.75rem","role":"12px: medium padding, card padding"},"space_13":{"token":"--space-13","value":"0.8125rem","role":"13px: off-grid"},"space_14":{"token":"--space-14","value":"0.875rem","role":"14px"},"space_15":{"token":"--space-15","value":"0.9375rem","role":"15px: off-grid"},"space_16":{"token":"--space-16","value":"1rem","role":"16px: base spacing unit, standard padding"},"space_17":{"token":"--space-17","value":"1.0625rem","role":"17px: off-grid"},"space_18":{"token":"--space-18","value":"1.125rem","role":"18px"},"space_19":{"token":"--space-19","value":"1.1875rem","role":"19px: off-grid"},"space_20":{"token":"--space-20","value":"1.25rem","role":"20px: large padding, section gaps"},"space_21":{"token":"--space-21","value":"1.3125rem","role":"21px: off-grid"},"space_22":{"token":"--space-22","value":"1.375rem","role":"22px"},"space_24":{"token":"--space-24","value":"1.5rem","role":"24px: section padding, large gaps"},"space_28":{"token":"--space-28","value":"1.75rem","role":"28px"},"space_32":{"token":"--space-32","value":"2rem","role":"32px: big section gaps"},"space_35":{"token":"--space-35","value":"2.1875rem","role":"35px: off-grid, layout spacing"},"space_36":{"token":"--space-36","value":"2.25rem","role":"36px"},"space_40":{"token":"--space-40","value":"2.5rem","role":"40px"},"space_44":{"token":"--space-44","value":"2.75rem","role":"44px: off-grid, large section spacing"},"space_48":{"token":"--space-48","value":"3rem","role":"48px: hero spacing, major section breaks"},"space_56":{"token":"--space-56","value":"3.5rem","role":"56px"},"space_64":{"token":"--space-64","value":"4rem","role":"64px: large vertical rhythm"},"space_72":{"token":"--space-72","value":"4.5rem","role":"72px: extra-large vertical rhythm"},"space_88":{"token":"--space-88","value":"5.5rem","role":"88px: major hero spacing"},"space_104":{"token":"--space-104","value":"6.5rem","role":"104px: large hero section padding"},"space_112":{"token":"--space-112","value":"7rem","role":"112px: maximum vertical rhythm"},"space_fine_02":{"token":"--space-fine-02","value":"0.02rem","role":"Fine micro-adjustment (0.32px)"},"space_fine_10":{"token":"--space-fine-10","value":"0.1rem","role":"Fine micro-adjustment (1.6px)"},"space_fine_12":{"token":"--space-fine-12","value":"0.12rem","role":"Fine micro-adjustment (1.92px)"},"space_fine_15":{"token":"--space-fine-15","value":"0.15rem","role":"Fine micro-adjustment (2.4px)"},"space_fine_20":{"token":"--space-fine-20","value":"0.2rem","role":"Fine micro-adjustment (3.2px)"},"space_fine_30":{"token":"--space-fine-30","value":"0.3rem","role":"Fine micro-adjustment (4.8px)"},"space_fine_32":{"token":"--space-fine-32","value":"0.32rem","role":"Fine micro-adjustment (5.12px)"},"space_fine_35":{"token":"--space-fine-35","value":"0.35rem","role":"Fine micro-adjustment (5.6px)"},"space_fine_40":{"token":"--space-fine-40","value":"0.4rem","role":"Fine micro-adjustment (6.4px)"},"space_fine_42":{"token":"--space-fine-42","value":"0.42rem","role":"Fine micro-adjustment (6.72px)"},"space_fine_45":{"token":"--space-fine-45","value":"0.45rem","role":"Fine micro-adjustment (7.2px)"},"space_fine_55":{"token":"--space-fine-55","value":"0.55rem","role":"Fine micro-adjustment (8.8px)"},"space_fine_60":{"token":"--space-fine-60","value":"0.6rem","role":"Fine micro-adjustment (9.6px)"},"space_fine_65":{"token":"--space-fine-65","value":"0.65rem","role":"Fine micro-adjustment (10.4px)"},"space_fine_68":{"token":"--space-fine-68","value":"0.68rem","role":"Fine micro-adjustment (10.88px)"},"space_fine_70":{"token":"--space-fine-70","value":"0.7rem","role":"Fine micro-adjustment (11.2px)"},"space_fine_80":{"token":"--space-fine-80","value":"0.8rem","role":"Fine micro-adjustment (12.8px)"},"space_fine_85":{"token":"--space-fine-85","value":"0.85rem","role":"Fine micro-adjustment (13.6px)"},"space_fine_95":{"token":"--space-fine-95","value":"0.95rem","role":"Fine micro-adjustment (15.2px)"},"space_fine_110":{"token":"--space-fine-110","value":"1.1rem","role":"Fine micro-adjustment (17.6px)"},"space_fine_120":{"token":"--space-fine-120","value":"1.2rem","role":"Fine micro-adjustment (19.2px)"},"space_fine_130":{"token":"--space-fine-130","value":"1.3rem","role":"Fine micro-adjustment (20.8px)"},"space_fine_135":{"token":"--space-fine-135","value":"1.35rem","role":"Fine micro-adjustment (21.6px)"},"space_fine_140":{"token":"--space-fine-140","value":"1.4rem","role":"Fine micro-adjustment (22.4px)"},"space_fine_220":{"token":"--space-fine-220","value":"2.2rem","role":"Fine micro-adjustment (35.2px)"},"space_fine_03":{"token":"--space-fine-03","value":"0.03rem","role":"Fine micro-adjustment (0.48px)"},"space_fine_05":{"token":"--space-fine-05","value":"0.05rem","role":"Fine micro-adjustment (0.8px)"},"space_fine_22":{"token":"--space-fine-22","value":"0.22rem","role":"Fine micro-adjustment (3.52px)"},"space_fine_34":{"token":"--space-fine-34","value":"0.34rem","role":"Fine micro-adjustment (5.44px)"},"space_fine_105":{"token":"--space-fine-105","value":"1.05rem","role":"Fine micro-adjustment (16.8px): clamp min"},"space_fine_115":{"token":"--space-fine-115","value":"1.15rem","role":"Fine micro-adjustment (18.4px)"},"space_fine_160":{"token":"--space-fine-160","value":"1.6rem","role":"Fine micro-adjustment (25.6px)"},"space_fine_28":{"token":"--space-fine-28","value":"0.28rem","role":"Fine micro-adjustment (4.48px): off-grid component gap"},"space_fine_90":{"token":"--space-fine-90","value":"0.9rem","role":"Fine micro-adjustment (14.4px): off-grid component gap"},"space_96":{"token":"--space-96","value":"6rem","role":"96px: large vertical spacing"},"space_144":{"token":"--space-144","value":"9rem","role":"144px: extra-large vertical spacing"}}},"motion":{"duration":{"token":"--duration","value":"0.6s","role":"Primary entrance duration"},"duration_quick":{"token":"--duration-quick","value":"150ms","role":"Close, swap, tooltip (transitions.dev cross-ref)"},"duration_fast":{"token":"--duration-fast","value":"250ms","role":"Open, hover transition, icon swap"},"duration_medium":{"token":"--duration-medium","value":"350ms","role":"Panel close, toast"},"duration_slow":{"token":"--duration-slow","value":"400ms","role":"Panel open, skeleton reveal"},"ease":{"token":"--ease","value":"cubic-bezier(0.22, 0.61, 0.36, 1)","role":"Default ease"},"ease_out":{"token":"--ease-out","value":"cubic-bezier(0.23, 1, 0.32, 1)","role":"Exit / settle"},"ease_in_out":{"token":"--ease-in-out","value":"cubic-bezier(0.77, 0, 0.175, 1)","role":"Symmetric motion"},"ease_drawer":{"token":"--ease-drawer","value":"cubic-bezier(0.32, 0.72, 0, 1)","role":"Drawer / panel slide"},"rules":["Entrance: fadeUp 0.6s --ease-out, rising 12px from scale(0.98), with staggered delays (0.08s steps)","Interactive settle: scale(0.97) at ~160ms --ease-out (Poise · adopted v0.1.1)","Hover is gated: reading-card contact (rim heat, contact light) runs only under (hover: hover) and (pointer: fine), other hover motion under (hover: hover), so touch gets no fake hover (Poise · adopted v0.1.1)","Wordmark mark: opacity breath only (~3.2s --ease-in-out); no blur, glow, or gradient decoration (Poise · adopted v0.1.1)","prefers-reduced-motion: reduce is tiered: travel stops, fades and transitions of 200ms or less stay, motion demos play on request; sound defaults off (Poise · adopted v0.1.1)"],"entrance":{"min_scale":{"value":0.9,"description":"Minimum entrance scale: never animate from scale(0)"},"default_scale":{"value":0.95,"description":"Default entrance scale: scale + opacity, never scale(0)"}},"stagger":{"interval":{"value":"30-80ms","description":"Stagger between sequential items: lower bound 30ms"}},"springs":{"default":{"damping":1,"response":0.4,"description":"Default spring physics for natural motion"},"momentum":{"damping":0.8,"response":0.3,"description":"Momentum spring for continued motion"}},"ten_standards":["Easing is deliberate: use contract cubicBezier tokens instead of bare CSS keywords","Properties are explicit: never transition:all; name exact properties","Entrances have opacity: animate from scale(0.9 to 0.97) + opacity, never scale(0)","Keyboard is still: no motion on keyboard-initiated or 100+/day actions","Layout is not animated: never animate width, height, margin, padding, top, left; use transform and opacity","Touch is gated: :hover motion on touch-visible surfaces requires explicit gating","Duration is bounded: UI animation stays at or below 300ms unless justified","Reduced-motion is handled: every movement animation has a prefers-reduced-motion path","Press is asymmetric: press and release use asymmetric timing","Easing is never ease-in: no ease-in on any UI interaction; deceleration or custom curves only"],"anti_patterns_block":["Using ease-in on any UI interaction","Using transition: all instead of explicit properties","Animating from scale(0) instead of scale(0.9-0.97) + opacity","Animating on keyboard-initiated or 100+/day actions","Animating layout properties: width, height, margin, padding, top, left","Ungated :hover motion on touch-visible surfaces"],"anti_patterns_caution":["UI animation duration exceeding 300ms without stated justification","Using bare CSS easing keywords on deliberate animation","Missing prefers-reduced-motion handling on movement animations","Symmetric enter/exit timing on press-and-release or hold interactions"]},"interaction":{"source_lab":"Poise","adopted_in":"0.1.1","state_tokens":{"hover_fill":{"token":"--hover-fill","value":"var(--surface-hover)","role":"Interactive hover wash"},"press_fill":{"token":"--press-fill","value":"var(--surface-soft)","role":"Press / active fill"},"focus_ring":{"token":"--focus-ring","value":"var(--signal-access)","role":"Keyboard focus indicator color"}},"rules":["Wordmark mark may use opacity breath only; never blur, glow, or gradient decoration","Interactive press settle: scale(0.97) at ~160ms with --ease-out","Sound preference key designesy:sound; Designesy owns preference; audio engine only applies it","Reduced motion disables non-essential animation and defaults sound off","Hover translation only under fine pointer + hover-capable media","Public product names stay human and premium; internal token names may differ","If the response is louder than the action, it fails"],"verification":["https://www.designesy.org/labs/poise","https://www.designesy.org/review/poise","https://www.designesy.org/review/poise/keyboard"]},"takt":{"source_lab":"Takt","adopted_in":"0.1.2","rules":["Concentric border radius: outerRadius = innerRadius + padding on every nested pair","Press scale 0.96 on cells and buttons and 0.985 on cards and rows, never below 0.95","Image outlines: 1px at 0.1 opacity, pure black in light mode, pure white in dark mode (never tinted neutrals)","Minimum hit area: 44px for touch, 40px for desktop (extend with pseudo-element when needed)","Stagger enter animations: ~80 to 100ms per semantic chunk; skip animation on page load","Soften exits: small fixed translateY, softer than enter (no full-height collapse)","Never use transition: all (every transition names its specific properties)","Spare will-change: only transform, opacity, or filter (only when a stutter was observed)"],"verified_against":"Live CSS audit (47,680 bytes): all transitions, scales, will-change, radii, outlines parsed","verification":["https://www.designesy.org/labs/takt","https://www.designesy.org/review/takt"],"unverified":["Image outline rule: no image surfaces on designesy.org yet","Mobile hit area 44px unverified; desktop 40px confirmed"]},"cadence":{"source_lab":"Cadence","adopted_in":"0.1.3","rules":["Font smoothing on root: -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale","Rem-based scale: every text size is a rem multiple of the 16px root (never px)","Line-height by role: headings 1.05 to 1.1, body 1.5 to 1.6, display 1 (never a single global line-height)","Tracking by size: negative for headings (-0.02 to -0.04em), positive for labels (0.03 to 0.18em), zero for body","Cap the measure: body text 520 to 580px max, layout shell 1080px (text wider than 75ch loses readers)","Wrap deliberately: text-wrap: balance on headings, text-wrap: pretty on body","Tabular numbers: font-variant-numeric: tabular-nums for all data, stats, and numerical tables","Selection: ::selection styled with a token color (never default browser blue)","user-select: none on UI chrome (buttons, labels, meta); body text stays selectable","16px input floor on mobile: inputs never below 16px to avoid iOS auto-zoom","Three faces, no decorative display fonts: Fraunces for headlines, Schibsted Grotesk for interface and reading, Atkinson Hyperlegible Mono for data (amended from the v0.1.3 system-stack rule; the mono face changed in v0.4.5)"],"verified_against":"Live CSS audit (48,755 bytes): font smoothing, line-heights, letter-spacing, text-wrap, tabular-nums, ::selection, user-select, rem scale, font-synthesis, text-underline-position, text-decoration-skip-ink, logical inline properties all parsed","verification":["https://www.designesy.org/labs/cadence","https://www.designesy.org/review/cadence"],"unverified":["Block-axis logical properties (margin-block-start/end) not yet migrated; only inline-axis (margin-inline, padding-inline) is done","border-left decorative accents not yet migrated to border-inline-start; the visual regression risk needs testing","inset left/right positioning not yet migrated to inset-inline; absolute positioning needs case-by-case review"]},"typography":{"font_stacks":{"sans":{"token":"--sans","value":"var(--font-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif","role":"Primary UI and body stack: Schibsted Grotesk, self-hosted at build time via next/font (--font-sans). A newsroom-commissioned grotesque drawn for sustained reading, chosen to share Fraunces's editorial register. Replaced Geist 2026-09-16 (anti-slop rule S1 flags geist as an overused family). System fonts cover fallback."},"serif":{"token":"--serif","value":"var(--font-display), 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif","role":"Editorial serif for headlines, the cue for trust and authority. Fraunces, self-hosted at build time via next/font (--font-display), with opsz + SOFT + WONK axes."},"display":{"token":"--display","value":"var(--serif)","role":"Display/headline face: Fraunces (aliased to --serif). Hybrid system: serif headlines + sans UI."},"mono":{"token":"--mono","value":"var(--font-mono), ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace","role":"Mono stack for labels, URLs, timestamps, score units, check IDs and token names: Atkinson Hyperlegible Mono, self-hosted at build time via next/font (--font-mono). The Braille Institute's low-vision face (SIL OFL 1.1): every confusable pair (0/O, 1/l/I, 5/S, 8/B) is drawn distinct, which is what a host, a check ID or a score needs, since none can be guessed from context. Replaced Geist Mono in v0.4.5 (2026-10-12). Its advance is 0.632em (Geist Mono 0.6em), so tight mono surfaces were re-fitted for the 5.3% wider run."}},"body":"16px / 1.55, Schibsted Grotesk (system sans fallback for other scripts)","headings":"Fraunces Variable, weight 700, line-height 1.08, letter-spacing -0.02em","hero_wordmark":"clamp(3.2rem, 9vw, 5.5rem), weight 800, tracking -0.04em","eyebrows":"--text-label (0.8rem), weight 600, uppercase, letter-spacing 0.18em, muted-dim","lede":"1.1 to 1.5rem, weight 500, ink: one clear claim","supporting_note":"--text-body (1rem), muted, max-width ~520 to 580px","rule":"Hybrid system: Fraunces serif for headlines (authority), Schibsted Grotesk for interface and reading (precision), Atkinson Hyperlegible Mono for data (systems). Three faces and no more; no single-sans: the 2026 anti-pattern.","scale":{"rule":"Major Third (x1.25) on a 16px root, no two adjacent steps closer than 25%: each step is 1.25 times the one below, 1.25^n rem rounded to three decimals. Text sizes come from these six tokens; below --text-lead, hierarchy comes from weight and colour, not more sizes. --text-label is the floor for all text, mono uppercase included. Display titles keep their fluid clamp() sizes. A fixed-size graphic whose words also reach assistive technology (the live badge, the role=\"img\" instrument drawings) is exempt from the floor.","label":{"token":"--text-label","value":"0.8rem","role":"Labels, meta, captions and mono uppercase (12.8px, tracked 0.06 to 0.08em). The floor: no text is smaller."},"body":{"token":"--text-body","value":"1rem","role":"Reading and interface text (16px), and the floor for reading text."},"lead":{"token":"--text-lead","value":"1.25rem","role":"Lead paragraphs, card titles and secondary readouts (20px)."},"h3":{"token":"--text-h3","value":"1.563rem","role":"Third-level headings (25px)."},"h2":{"token":"--text-h2","value":"1.953rem","role":"Second-level headings (31.25px)."},"h1":{"token":"--text-h1","value":"2.441rem","role":"The in-content h1 floor (39px). Page titles use the display clamp, Fraunces 700."}},"cadence_adopted":"v0.1.3: font smoothing on root, rem-based scale, line-height by role, tracking by size, measure cap, text-wrap balance+pretty, tabular numbers, ::selection with --signal, user-select on UI chrome, 16px input floor","font_synthesis":"none set on :root: prevents fake browser weights (fixed 2026-07-15)","text_underline_position":"from-font set on :root: aligns underlines to font metrics (fixed 2026-07-15)","text_decoration_skip_ink":"auto set on :root: skips descenders for readability (fixed 2026-07-15)"},"acoustic":{"adopted_in":"0.3.0","engine":"Cuelume v0.2.2 (MIT)","preference_key":"designesy:sound","reduced_motion_proxy":true,"token_type":"Custom $type: sound via $extensions.designesy; net-new relative to W3C DTCG 2025.10","cues":[{"token":"--cue:brand","cue":"sparkle","role":"Brand wordmark contact"},{"token":"--cue:nav","cue":"tick","role":"Navigation and wayfinding"},{"token":"--cue:invite","cue":"chime","role":"Primary invitation / machine surfaces"},{"token":"--cue:action","cue":"press","role":"Pointer-down on actionable surfaces"},{"token":"--cue:resolve","cue":"release","role":"Pointer-up default resolve"},{"token":"--cue:complete","cue":"success","role":"High-value resolve"},{"token":"--cue:reveal","cue":"bloom","role":"Content / experiment reveal"},{"token":"--cue:list","cue":"whisper","role":"Dense list / surface scan"},{"token":"--cue:switch","cue":"toggle","role":"State toggle"},{"token":"--cue:contact","cue":"droplet","role":"Contact / outbound mail"}],"mapping_rules":["Brand marks earn sparkle: hero wordmark, topbar logo, footer mark","One primary cue family per role: do not randomize per page","Hover sounds are fine-pointer only; touch maps hover cue to single tap","No ambient audio: Cuelume is interaction-only","No focus sounds: sounds fire on pointer and click, never on focus","Every cue must trace to the acoustic token document"]},"semantic":{"surface_roles":"paper = page void · surface = default panel · surface-raised = hover/emphasis · surface-soft = quiet note · surface-hover = interactive wash","line_roles":"line = default structure · line-strong = active/emphasis · line-faint = quiet subdivision","accent_roles":"signal = brand action and wordmark mark · signal-light = hover/focus · signal-dim = badge/wash · activation = reserved highlight · signal-glow/signal-gradient = border/focus effects only (never button fill)","status_roles":"ok = pass · warn = warn · error = fail","state_roles":"hover-fill = interactive hover wash · press-fill = press/active fill · focus-ring = keyboard focus indicator","type_roles":"ink = primary claim · muted = supporting body · muted-dim = eyebrows, meta, footers","local_scope_aliases":{"fg":{"token":"--fg","value":"var(--signal-access)","role":"Local-scope alias for search-match highlight text in cmdk (alias of --signal-access)","added_in":"0.4.0-drift-2026-08-12"},"text":{"token":"--text","value":"var(--ink)","role":"Local-scope alias for default body text where callers expected a separate name (alias of --ink)","added_in":"0.4.0-drift-2026-08-12"},"ink_soft":{"token":"--ink-soft","value":"var(--muted-dim)","role":"Local-scope alias for dimmed ink used in tertiary meta (hero proof caveat): alias of --muted-dim","added_in":"0.4.0-drift-2026-08-12"},"surface_2":{"token":"--surface-2","value":"var(--surface-raised)","role":"Local-scope alias for intermediate surface tier (tab-active state): alias of --surface-raised","added_in":"0.4.0-drift-2026-08-12"},"motion_short":{"token":"--motion-short","value":"var(--duration-quick)","role":"Local-scope alias for quick micro-motion duration (150ms): alias of --duration-quick","added_in":"0.4.0-drift-2026-08-12"},"ease_quiet":{"token":"--ease-quiet","value":"cubic-bezier(0.4, 0, 0.2, 1)","role":"Local-scope alias for softer ease used in muted-motion transitions (Material Design standard curve)","added_in":"0.4.0-drift-2026-08-12"}}},"copywriting":{"adopted_in":"0.4.0","source_signal":"detail.design Copywriting discipline gap + NN/g, Polaris, IBM Carbon, Microsoft Fluent, Apple HIG, Atlassian research","principles":["Button copy is a verb phrase (or a recognized single-word command), never a bare noun: \"Save changes\" not \"Changes\", \"Delete file\" not \"File\"","Button text is ≤ 4 words; articles (a/an/the) removed for scannability","Generic confirmation labels (OK, Submit, Continue, Yes/No) are rejected for confirmation dialogs: the label must state the action","Commands that open a further-input dialog end with an ellipsis (…); immediate commands do not","Error messages state what happened, what to do, and what to expect next, beyond a bare \"An error occurred\"","Error messages use plain language: no jargon, no exposed error codes, no blame words (invalid, illegal, incorrect)","Error messages don't overapologize and don't introduce \"we/us\" unless the system caused the error","Empty states offer a clear next action (a button or link with a verb) alongside the message","Link text describes the destination; never bare \"click here / learn more / read more / here\"","All UI text uses sentence case, never title case or ALL CAPS (except eyebrows, per the typography contract)","No trailing period on buttons, labels, radio/checkbox text, tab text; periods only on full sentences (tooltips, error bodies, dialog bodies)","Active voice, except when the system is the subject of an error","Second person (you/your) for user-facing copy; \"I/me\" never used for the app's voice; \"we\" only when the system is the actor","No \"please / thank you\" in standard UI, except when the user is genuinely inconvenienced","Voice is constant; tone adapts to the user's emotional state: error tone is economical and direct, never humorous","Don't blame the user: error messages describe the problem and the fix, never the user's mistake"],"verification":["v38: Button text is a verb phrase or recognized command (not a bare noun)","v39: No trailing period on button text, labels, or tab text","v40: Link text is descriptive (not bare \"click here\", \"learn more\", \"here\")","v41: No ALL CAPS UI text (except eyebrow labels per typography contract)"],"governance":["Error message completeness (what happened + what to do + what to expect): human review using NN/g 12-guideline rubric","Empty-state next-action presence: human review if no automated DOM check","Voice and tone consistency: human review against Mailchimp-style voice-and-tone guide","Consistency map: one canonical label per action across the product (no \"Sign in\" vs \"Log in\")"],"tooling":["Vale (errata-ai/vale): YAML-rule prose linter; ships Microsoft Writing Style Guide + Google Developer Docs Style Guide implementations","textlint: pluggable rule engine for custom checks (button verb phrase, label ≤ 4 words, no trailing period)","alex: inclusive/insensitive-language linter for the blame-words subset"]},"components":[{"name":"Primary button","states":"default signal fill · hover signal-light · active scale(0.97) · focus-visible 2px signal-light"},{"name":"Ghost button","states":"transparent + line-strong · hover surface-hover · active scale(0.97)"},{"name":"Nav link","states":"muted · hover ink + surface-hover · sticky topbar blur when scrolled"},{"name":"Card / pillar","states":"reading material (--mat-reading) + top-lit rim + elev-1 · fine-pointer hover heats the rim and adds contact light, no lift · active scale(0.99)"},{"name":"Sound toggle","states":"switch with a visible Sound label and an On/Off state word · aria-pressed sync · Cuelume setEnabled(true|false)"},{"name":"Definition block","states":"reading material + top-lit rim + elev-1 · a copyable one heats its rim and draws a 3px signal edge on hover, focus or copy · label 12px uppercase muted"}],"accessibility":["html lang=\"en\"; meaningful page titles via metadata template","Focus-visible: a 2px solid outline on every control, --signal-light at a 3px offset over a --signal-dim halo by default; cards and dense lists tune the offset, and reading cards draw it in --signal-access","Sound control is named by its visible label and exposes aria-pressed","Decorative glyphs use aria-hidden where text is already labeled","Prefer semantic landmarks: sticky header, main, footer","Do not rely on color alone for state","Respect prefers-reduced-motion, tiered: travel stops, opacity fades and transitions of 200ms or less stay, and a motion demo plays on request","Scroll padding-top 4.5rem (72px) for sticky topbar anchors"],"anti_patterns":["Glowing blobs, random gradients, or sparkle decoration","Hard-coded hex in components when a role token exists","Using --activation as general decoration","Publishing taste language without operational rules","Multiple simultaneous accent colors competing with --signal","Touch targets under ~32px","Animation that cannot be reduced","Public product names that sound like research demos or AI jargon","Button text that is a bare noun without a verb (\"Settings\" alone for a destructive action)","Generic error messages (\"An error occurred\", \"Something went wrong\") with no remediation","Link text that is \"click here\", \"learn more\", \"read more\", or \"here\" without destination context","ALL CAPS body text or button text (except eyebrow labels per typography contract)"],"implementation":["Single live token source of truth: no secondary theme framework","Server-rendered by default; client only for sound, bind, and preference controls","metadataBase is https://www.designesy.org (apex redirects); public label is Designesy","Interaction audio via Cuelume with middle-click guard","Sitemap and robots follow standard site conventions","Production deploys from the main branch","Drift rule: every new public UI change cites a contract token or open tension"],"verification":["Token values match the live site :root foundation","Routes render without horizontal overflow at 375px, 720px, 860px, 1080px+","Primary interactive elements show focus-visible rings","Sound toggle flips aria-pressed and applies the audio preference","prefers-reduced-motion disables entrance and wordmark breath","Contrast remains readable for ink, muted, and accent on paper","No public surface displays internal control-plane naming","Poise interaction rules match live /labs/poise and contract.interaction","Poise keyboard-path verification remains published and current","Takt interface-feel rules match live CSS and contract.takt","No transition:all in the live stylesheet","will-change restricted to transform and opacity only","Press scale 0.96 on cells, 0.985 on cards/rows, both above the 0.95 floor","Cadence typography rules match live CSS and contract.cadence","Font smoothing: antialiased + grayscale on :root confirmed","Rem-based scale: all text sizes in rem, root at 16px confirmed","Line-height by role: headings 1.08, body 1.55 confirmed","text-wrap: balance + pretty both present in live CSS","tabular-nums: 8 instances across the live CSS","::selection styled with var(--signal) instead of the browser default","Core Web Vitals plausible: LCP < 2.5s, INP < 200ms, CLS < 0.1 (Taste Skill pre-flight)","Primary button text passes WCAG AA 4.5:1 contrast against --signal fill (Taste Skill pre-flight)","Duration tokens --duration-quick through --duration-slow present in :root (transitions.dev cross-ref)","Button text is a verb phrase or recognized command, never a bare noun (copywriting v38)","No trailing period on button text, labels, or tab text (copywriting v39)","Link text is descriptive, never bare \"click here\", \"learn more\", \"here\" (copywriting v40)","No ALL CAPS UI text except eyebrow labels (copywriting v41)"],"verification_checks":{"count":45,"scored":42,"manual":3,"engine_version":"1.5.0","endpoint":"https://www.designesy.org/api/score","category_weights":{"cadence":18,"accessibility":15,"semantic":12,"motion":10,"tokens":9,"takt":8,"poise":7,"identity":6,"interaction":6,"performance":6,"responsive":3,"security":5,"spec":4,"copywriting":8},"checks":[{"id":"v01","item":"Token values match live site :root foundation","category":"tokens","type":"auto","threshold":"--paper token declared in :root","pass":"--paper resolves to a value","fail":"--paper not declared in :root","warn":"n/a","ceiling":null,"weight":4.5},{"id":"v29","item":"Token architecture: primitive → semantic → component layers","category":"tokens","type":"auto","threshold":"3-layer token stack (primitive → semantic → component)","pass":"token values reference var(--...) in a layered architecture","fail":"flat token set (no primitive→semantic layering)","warn":"partial layering detected","ceiling":null,"weight":4.5},{"id":"v42","item":"Semantic color vocabulary: tokens named by role rather than hue","category":"semantic","type":"auto","threshold":"≥60% role-named color tokens with ≥3 distinct roles; var() aliases followed, and hue-named primitives that role tokens alias are the palette layer, not counted","pass":"color tokens named by role (ink/paper/surface/danger/success…)","fail":"n/a (WARN only)","warn":"color vocabulary leans on hue names (blue-500, slate-900…)","ceiling":null,"weight":6},{"id":"v43","item":"Semantic status colors: ok/warn/error/info state roles present","category":"semantic","type":"auto","threshold":"3+ of 4 status color families (ok, warn, error, info); var() aliases followed","pass":"status states expressed as semantic color roles","fail":"n/a (WARN only)","warn":"missing status color families","ceiling":null,"weight":6},{"id":"v02","item":"Routes render without horizontal overflow at 375px, 720px, 860px, 1080px+","category":"responsive","type":"manual","threshold":"no overflow-x at 375px, 720px, 860px, 1080px+","pass":"no horizontal overflow at any breakpoint","fail":"content overflows horizontally","warn":"n/a","ceiling":70,"weight":0},{"id":"v03","item":"Primary interactive elements show focus-visible rings","category":"interaction","type":"auto","threshold":":focus-visible declared in CSS","pass":":focus-visible rules present","fail":"no :focus-visible rules","warn":"n/a","ceiling":null,"weight":6},{"id":"v04","item":"Sound toggle flips aria-pressed and applies the audio preference","category":"poise","type":"manual","threshold":"aria-pressed toggles + data-audio attribute applied","pass":"toggle flips aria-pressed and applies audio state","fail":"no sound toggle or toggle not wired","warn":"n/a","ceiling":null,"weight":0},{"id":"v08","item":"Poise interaction rules match live /labs/poise and contract.interaction","category":"poise","type":"auto","threshold":"poise interaction CSS rules present (no hover-only reveals, no disabled nav buttons)","pass":"static poise rules verified (interaction-feel half requires browser)","fail":"n/a (WARN only)","warn":"missing poise interaction rules","ceiling":null,"weight":3.5},{"id":"v09","item":"Poise keyboard-path verification remains published and current","category":"poise","type":"auto","threshold":":focus-visible with visible style, focus ring, tabindex, aria attributes","pass":"keyboard affordances present in CSS+HTML","fail":"focus stripped without replacement","warn":"partial keyboard affordances","ceiling":null,"weight":3.5},{"id":"v10","item":"Takt interface-feel rules match live CSS and contract.takt","category":"takt","type":"auto","threshold":"takt feel rules present in CSS","pass":"takt rules verified in CSS","fail":"n/a (WARN only)","warn":"missing takt feel rules","ceiling":null,"weight":4},{"id":"v05","item":"prefers-reduced-motion disables entrance and wordmark breath","category":"motion","type":"auto","threshold":"@media (prefers-reduced-motion) declared","pass":"prefers-reduced-motion media query present","fail":"n/a (WARN only)","warn":"missing prefers-reduced-motion media query","ceiling":null,"weight":2},{"id":"v11","item":"No transition:all in the live stylesheet","category":"motion","type":"auto","threshold":"no transition:all in CSS","pass":"no transition:all found","fail":"transition:all found","warn":"n/a","ceiling":null,"weight":2},{"id":"v12","item":"will-change restricted to transform and opacity only","category":"motion","type":"auto","threshold":"will-change only on transform/opacity","pass":"will-change restricted cleanly","fail":"n/a (WARN only)","warn":"will-change on non-transform/opacity property","ceiling":null,"weight":2},{"id":"v23","item":"Duration tokens --duration-quick through --duration-slow present in :root","category":"motion","type":"auto","threshold":"5 duration tokens (--duration-quick through --duration-slow)","pass":"all 5 duration tokens present","fail":"fewer than 3/5 duration tokens","warn":"3-4/5 present","ceiling":null,"weight":2},{"id":"v45","item":"Pausing motion keeps content visible","category":"motion","type":"auto","threshold":"under a pause that holds every element (animation-play-state: paused on *), each one-shot entrance whose first keyframe is opacity 0 ends or is removed","pass":"every entrance that starts invisible ends or is removed under the pause","fail":"an entrance that starts at opacity 0 is held invisible under the pause","warn":"an override exists, but its selector or scope does not clearly match the entrance","ceiling":null,"weight":2},{"id":"v13","item":"Press scale 0.96 on cells, 0.985 on cards/rows (both above the 0.95 floor)","category":"takt","type":"auto","threshold":"scale() < 1 in :active context, value ≥ 0.95","pass":"press-scale(s) found at 0.95+","fail":"scale below 0.95 in :active context","warn":"no press-scale found or only scale(0) initial states","ceiling":null,"weight":4},{"id":"v14","item":"Cadence typography rules match live CSS and contract.cadence","category":"cadence","type":"auto","threshold":"contract cadence rules present in CSS","pass":"all Cadence rules present","fail":"n/a (WARN only)","warn":"missing cadence rules","ceiling":null,"weight":1.385},{"id":"v15","item":"Font smoothing: antialiased + grayscale on :root confirmed","category":"cadence","type":"auto","threshold":"-webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale","pass":"both smoothing properties present on :root","fail":"n/a (WARN only)","warn":"missing one or both smoothing properties","ceiling":null,"weight":1.385},{"id":"v16","item":"Rem-based scale: all text sizes in rem, root at 16px confirmed","category":"cadence","type":"auto","threshold":"root font-size ≥ 16px, text in rem","pass":"root ≥ 16px and rem-based sizing","fail":"root < 16px","warn":"root ≥ 16px but some px sizing","ceiling":70,"weight":1.385},{"id":"v17","item":"Line-height by role: headings 1.08, body 1.55 confirmed","category":"cadence","type":"auto","threshold":"headings ~1.08, body ~1.55","pass":"both heading and body line-heights match","fail":"n/a (WARN only)","warn":"missing or mismatched line-heights","ceiling":null,"weight":1.385},{"id":"v18","item":"text-wrap: balance + pretty both present in live CSS","category":"cadence","type":"auto","threshold":"text-wrap: balance AND text-wrap: pretty","pass":"both text-wrap values present","fail":"n/a (WARN only)","warn":"missing one text-wrap value","ceiling":null,"weight":1.385},{"id":"v19","item":"tabular-nums: 8 instances across the live CSS","category":"cadence","type":"auto","threshold":"8+ font-variant-numeric: tabular-nums instances","pass":"8+ instances found","fail":"n/a (WARN only)","warn":"fewer than 8 instances","ceiling":null,"weight":1.385},{"id":"v20","item":"::selection styled with var(--signal) instead of the browser default","category":"cadence","type":"auto","threshold":"::selection with custom color or var(--signal)","pass":"::selection uses --signal or custom color","fail":"n/a (WARN only)","warn":"no ::selection or no color set","ceiling":null,"weight":1.385},{"id":"v26","item":"Font family count ≤3 (body + heading + mono)","category":"cadence","type":"auto","threshold":"≤3 unique non-generic font families","pass":"≤3 font families","fail":">3 font families","warn":"n/a","ceiling":null,"weight":1.385},{"id":"v46","item":"Type sizes come from the scale","category":"cadence","type":"auto","threshold":"every static rem/px font-size within 2.5% of a step of the scale read from the :root type tokens (token values plus their median ratio), and no size, including a fluid clamp() lower bound, under the smallest type token; fluid clamp()/min()/max() with a viewport or container unit accepted as written","pass":"static sizes sit on the scale and nothing falls under its floor","fail":"n/a (WARN only)","warn":"a static size between steps, or a size under the smallest type token","ceiling":null,"weight":1.385},{"id":"v28","item":"Reading width 45-75ch on prose containers","category":"cadence","type":"auto","threshold":"max-width 45-75ch on prose elements","pass":"reading width within 45-75ch","fail":"n/a (WARN only)","warn":"reading width outside 45-75ch","ceiling":null,"weight":1.385},{"id":"x01","item":"font-synthesis: none set (Cadence resolved tension)","category":"cadence","type":"auto","threshold":"font-synthesis: none","pass":"font-synthesis: none declared","fail":"n/a (WARN only)","warn":"font-synthesis missing or not none","ceiling":null,"weight":1.385},{"id":"x02","item":"text-underline-position: from-font set (Cadence resolved tension)","category":"cadence","type":"auto","threshold":"text-underline-position: from-font","pass":"from-font set","fail":"n/a (WARN only)","warn":"not set","ceiling":null,"weight":1.385},{"id":"x03","item":"text-decoration-skip-ink: auto set","category":"cadence","type":"auto","threshold":"text-decoration-skip-ink: auto","pass":"auto set","fail":"n/a (WARN only)","warn":"not set","ceiling":null,"weight":1.385},{"id":"v21","item":"Core Web Vitals plausible: LCP < 2.5s, INP < 200ms, CLS < 0.1","category":"performance","type":"manual","threshold":"LCP < 2.5s, INP < 200ms, CLS < 0.1","pass":"all three Core Web Vitals in range","fail":"any CWV outside threshold","warn":"n/a","ceiling":null,"weight":0},{"id":"v06","item":"Contrast remains readable for ink, muted, and accent on paper (WCAG 2.1 + APCA)","category":"accessibility","type":"auto","threshold":"WCAG AA 4.5:1 (body), 3:1 (large text); APCA Lc 75 body min, Lc 90 body preferred, Lc 60 non-body content","pass":"all tokens ≥ 4.5:1 against --paper","fail":"any token below 3:1","warn":"token below 4.5:1 but above 3:1","ceiling":65,"weight":2.143},{"id":"v22","item":"Primary button text passes WCAG AA contrast against --signal fill","category":"accessibility","type":"auto","threshold":"WCAG AA 4.5:1 for button text on --signal","pass":"≥ 4.5:1 against --signal","fail":"below 3:1","warn":"3:1-4.5:1 (large-text pass, body fail)","ceiling":70,"weight":2.143},{"id":"v24","item":"Touch targets ≥44px on interactive elements (WCAG 2.5.5 Enhanced)","category":"accessibility","type":"auto","threshold":"44px minimum on interactive elements (SC 2.5.5 Target Size Enhanced, AAA; 2.5.8 Minimum AA is 24px, and the engine enforces the stricter 44px bar)","pass":"touch targets ≥ 44px","fail":"touch targets below 44px","warn":"n/a","ceiling":75,"weight":2.143},{"id":"v25","item":"Heading hierarchy: single h1, no skipped levels","category":"accessibility","type":"auto","threshold":"1 h1, no skipped heading levels","pass":"single h1, no gaps","fail":"multiple h1s or skipped levels","warn":"n/a","ceiling":75,"weight":2.143},{"id":"v27","item":"Input font-size ≥16px (prevents iOS Safari auto-zoom)","category":"accessibility","type":"auto","threshold":"input font-size ≥ 16px","pass":"inputs ≥ 16px","fail":"inputs < 16px","warn":"n/a","ceiling":null,"weight":2.143},{"id":"v35","item":"Forced-colors readiness: @media (forced-colors: active) block present","category":"accessibility","type":"auto","threshold":"@media (forced-colors: active) + forced-color-adjust","pass":"forced-colors media query present","fail":"n/a (WARN only)","warn":"no forced-colors media query","ceiling":null,"weight":2.143},{"id":"v44","item":"Status colors used as text meet contrast in every declared theme","category":"accessibility","type":"auto","threshold":"WCAG AA 4.5:1 (3:1 at 24px, or 18.66px bold) for every status color used as text, and 3:1 for a graphic (an svg, icon or glyph, a progress bar, a color named for an icon, a currentColor fill; WCAG 1.4.11), in every declared theme, on the surface the sheet attests; disabled states exempt (WCAG 1.4.3)","pass":"every status-color text use clears its threshold in every theme","fail":"a color named as a status (ok, warn, error, info, grade) that has a hue (Oklch chroma 0.06 or more) is under its threshold in a theme, on an attested surface","warn":"a hue counted only because the sheet also paints it as a mark is under its threshold; neutral text (white or grey) under a status name is under its threshold; a surface the sheet cannot attest (an ancestor in a hover, active, focus, expanded or open state that paints no declared fill); a background that cannot be resolved; or alpha-reduced status text that clears only at full alpha","ceiling":65,"weight":2.143},{"id":"v07","item":"Semantic HTML foundation: single h1, title, meta description, landmark","category":"identity","type":"auto","threshold":"h1, title, meta description, landmark element","pass":"all semantic signals present","fail":"3+ missing signals","warn":"1-2 missing","ceiling":null,"weight":3},{"id":"v34","item":"AI-Disclosure Readiness (EU AI Act Art 50, effective 2026-08-02)","category":"identity","type":"auto","threshold":"disclosure at first AI interaction where an AI chat surface is present (EU AI Act Art. 50(1) is a duty on the provider of the AI system)","pass":"no AI surface, or a disclosure present","fail":"a positively identified AI chat surface (a chatbot container, an AI input, a chatbot, AI-widget or Dialogflow script) with no disclosure","warn":"a possible AI surface to review (a live-chat vendor, a generic chat container or assistant script, page text about AI) with no disclosure","ceiling":null,"weight":3},{"id":"v36","item":"Unicode Security: no UTS #39 confusable characters in token names or CSS identifiers","category":"security","type":"auto","threshold":"no confusable Unicode in CSS identifiers","pass":"no confusables detected","fail":"confusable characters found","warn":"n/a","ceiling":null,"weight":5},{"id":"v38","item":"Button text is a verb phrase or recognized command (not a bare noun)","category":"copywriting","type":"auto","threshold":"buttons start with a verb or recognized command","pass":"all buttons start with verb/command","fail":"n/a (WARN only)","warn":"bare noun button text","ceiling":null,"weight":2},{"id":"v39","item":"No trailing period on button text, labels, or tab text","category":"copywriting","type":"auto","threshold":"no trailing \".\" on buttons, labels, tabs","pass":"no trailing periods","fail":"n/a (WARN only)","warn":"trailing period found","ceiling":null,"weight":2},{"id":"v40","item":"Link text is descriptive (not bare \"click here\", \"learn more\", \"here\")","category":"copywriting","type":"auto","threshold":"descriptive link text","pass":"all links descriptive","fail":"n/a (WARN only)","warn":"generic link text found","ceiling":null,"weight":2},{"id":"v41","item":"No ALL CAPS UI text except eyebrow labels","category":"copywriting","type":"auto","threshold":"no ALL CAPS outside eyebrow labels","pass":"no ALL CAPS outside eyebrows","fail":"n/a (WARN only)","warn":"ALL CAPS in UI text","ceiling":null,"weight":2},{"id":"v37","item":"DESIGN.md spec-layer validation (DESIGN.md format lint)","category":"spec","type":"auto","threshold":"DESIGN.md present and valid per @google/design.md linter","pass":"DESIGN.md present and valid","fail":"DESIGN.md missing or invalid","warn":"DESIGN.md present but lint warnings","ceiling":null,"weight":4}]},"open_tensions":["Light theme is partly contracted: materials, field and instrument tokens carry light values, the color roles do not; the dark technical foundation is provisional","--activation exists but has limited public surface usage","Four ways cards keep their flat line borders, no elevation and their hover tilt; whether they take the rim, --elev-3 and a floor pool is still open","Two score controls (the action button and the engine tile) still rise 1px on hover, outside the no-lift rule","The row and check-cell arrows nudge under (hover: hover) alone, without the fine-pointer gate Poise asks for","Human contract page and machine export remain dual sources until a single generator owns both","Keyboard-path verification packets cover Poise only; other public routes have none yet","Inline-axis logical properties (margin-inline, padding-inline) applied; block-axis and border-inline remain physical (Cadence partial migration)","Block-axis logical properties (margin-block-start/end) not yet migrated; only inline-axis is done","border-left decorative accents not yet migrated to border-inline-start; the visual regression risk needs testing"],"adoption_history":[{"version":"0.1.0","date":"2026-07-12","summary":"First public design system contract: tokens, motion, components, verification"},{"version":"0.1.1","date":"2026-07-12","summary":"Adopted Lab One · Poise interaction rules: wordmark breath, press settle, sound preference, reduced motion, hover media, naming discipline","from_lab":"Poise","evidence":["https://www.designesy.org/labs/poise","https://www.designesy.org/review/poise","https://www.designesy.org/review/poise/keyboard"]},{"version":"0.1.2","date":"2026-07-13","summary":"Adopted Lab Two · Takt interface-feel rules: concentric radii, press scale (0.96/0.985), image outlines, hit area floor, stagger rhythm, no transition:all, spare will-change. Rules compiled from external design intelligence (Amicro, Krehel /better-ui, /better-accessibility for hit area floors) and verified on live CSS.","from_lab":"Takt","evidence":["https://www.designesy.org/labs/takt","https://www.designesy.org/review/takt"]},{"version":"0.1.3","date":"2026-07-13","summary":"Adopted Lab Three · Cadence typography rules: font smoothing on root, rem-based scale, line-height by role, tracking by size, measure cap, text-wrap balance+pretty, tabular numbers, ::selection with --signal, user-select on UI chrome, 16px input floor. Rules compiled from external typography intelligence (Krehel /better-typography, /better-layout for reading order and measure) and verified on live CSS. Three open tensions documented: font-synthesis, logical properties, underline-from-font.","from_lab":"Cadence","evidence":["https://www.designesy.org/labs/cadence","https://www.designesy.org/review/cadence"]},{"version":"0.1.4","date":"2026-07-13","summary":"Adopted duration scale (transitions.dev cross-ref), Core Web Vitals + button contrast verification (Taste Skill gap audit), anti-rationalization methodology (agent-skills pattern). Duration tokens --duration-quick (150ms) through --duration-slow (400ms) added to :root. Three external ingests added to provenance: agent-skills (Osmani), Taste Skill (Leon), transitions.dev (Antalik). No lab source: this is a direct contract refinement from external source ingests.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/contracts/skill"]},{"version":"0.3.0","date":"2026-07-15","summary":"Reconciled with on-disk core contract v0.4.0. Spring physics tokens added (default + momentum). Full acoustic cue enumeration added (19 cues via custom $type: sound). Ten Non-Negotiable Motion Standards added as §16. Motion anti-patterns formalized (6 block-on-sight + 4 caution). Entrance scale tokens added (min 0.9, default 0.95). Stagger interval token added (30ms lower bound). font-synthesis: none and text-underline-position: from-font confirmed fixed and removed from open tensions. W3C DTCG 2025.10 token format alignment documented.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/contracts#design-system-contract"]},{"version":"0.4.0","date":"2026-07-30","summary":"Added copywriting section from detail.design gap source + NN/g, Polaris, IBM Carbon, Microsoft Fluent, Apple HIG, Atlassian research. 16 principles across button text, error messages, empty states, link text, general microcopy, and voice & tone. 4 codifiable principles become verification checks (v38 to v41): button verb phrase, no trailing period on buttons, descriptive link text, no ALL CAPS. 12 non-codifiable principles are governance. Tooling: Vale, textlint, alex. detail.design added to provenance as gap-signal source. 4 anti-patterns added (bare-noun buttons, generic errors, bare link text, ALL CAPS). Copywriting category weight: 8.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.nngroup.com/articles/ui-copy/","https://polaris.shopify.com/content/error-messages","https://carbondesignsystem.com/guidelines/content/writing-style/","https://learn.microsoft.com/en-us/windows/apps/design/style/writing-style","https://detail.design"]},{"version":"0.4.1","date":"2026-09-28","summary":"Editorial revision. The contract text follows the public-copy rules: a colon or parentheses in place of em dashes, the positive claim in place of rhetorical negation pivots, and number ranges written with \"to\". No rule, value, token or check changed. The sibling contracts took the same pass and keep their versions.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/changelog"]},{"version":"0.4.2","date":"2026-10-04","summary":"Alignment pass. One shell edge at every width so the header, the wrappers and the footer share the content edges; a 12-column grid with a named 7|5 seam for the instrument and page layouts; the material, elevation and floor recipes as tokens instead of per-component values; the accessibility tint tokens and the `--signal-text` text-safe role the WCAG 2.2 AA pass required; and the reduced-motion tiering reworded to state what it now does (movement stops, fades and short transitions stay). Adds public tokens; removes no check.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/contracts/a11y.json","https://www.designesy.org/changelog"]},{"version":"0.4.3","date":"2026-10-09","summary":"Text-contrast pass. A rendered sweep of every public page in both themes found 230 text elements under WCAG AA in the light theme and 11 in the dark, nearly all a colour meant for marks used as text. Every status, grade and activation hue now has a text token, --<hue>-ink: equal to the hue in the dark theme and mixed toward --ink in oklab in the light theme (--warn-ink, --ok-ink, --error-ink, --grade-a-ink to --grade-f-ink, --activation-ink), each at least 4.5:1 on paper, surface, raised and lifted. Light --muted-dim moves from #70707a to #686872. Hues stay for dots, bars, borders and tints. No check, weight or verdict changed.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/changelog"]},{"version":"0.4.4","date":"2026-10-11","summary":"Identity v1 colour system. Azure #0A94FF replaces #0133cb as --signal; light text, links, focus and selected states take Deep Azure #016ABB (--signal-access, --signal-deep); text on an Azure fill is ink #010102 (--paper-on-signal, 6.65:1); --paper-white #FFFFFF is the constant white for the increase-contrast ink, text on red fills and highlights. Activated Orange #F56B00 replaces #fecc34 (light text #B04D00). New tokens: --signal-deep, --signal-teal, --action, --on-action, --action-pressed, --paper-white. Grade D moves to rose (#FB7185 dark, #C9216C light; light text #BE1F67); the light grade text tokens are measured values, each at least 4.6:1 on paper, surface, raised and lifted. The instrument pass gradient and inspection head move to the Azure family. Shimmer stops, glows and light navy shadows move to Azure's 251 degree hue. No check, weight or verdict changed.","evidence":["https://www.designesy.org/contracts/design-system.json"]},{"version":"0.4.5","date":"2026-10-12","summary":"Type pass. Atkinson Hyperlegible Mono, the Braille Institute's low-vision face (SIL OFL 1.1), replaces Geist Mono as the mono face (--font-mono) for labels, URLs, timestamps, score units and code: every confusable pair (0/O, 1/l/I, 5/S, 8/B) is drawn distinct. Its advance is 0.632em against 0.6em, so tight mono surfaces were re-fitted. The type scale enters :root and the contract as six tokens on a Major Third (x1.25) over a 16px root, no two adjacent steps closer than 25%: --text-label 0.8rem (the floor for all text, mono uppercase included), --text-body 1rem, --text-lead 1.25rem, --text-h3 1.563rem, --text-h2 1.953rem, --text-h1 2.441rem. The eyebrow and supporting-note entries now name the label and body steps the site already sets. No check, weight or verdict changed.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/brand"]},{"version":"0.4.6","date":"2026-10-13","summary":"Verification check v46, type sizes come from the scale (engine 1.4.0). v16 asks for rem but cannot tell a rem on the type scale from one between steps; v46 reads the scale from the page's own :root type tokens (their values plus their median ratio) and judges every static rem or px font-size against it: off the scale when it sits more than 2.5% from every step, under the floor when it is smaller than the smallest type token. Deliberate fluid type, a clamp(), min() or max() that moves with a viewport or container unit, is accepted as written, and only its lower bound is held to the floor. WARN only. The registry grows from 44 to 45 checks, 42 of them scored. No weight or existing verdict changed.","evidence":["https://www.designesy.org/contracts/design-system.json","https://www.designesy.org/methodology"]}],"promotion_candidates":{"from_lab":null,"target_version":null,"status":"none","rules":[],"note":"No open promotion candidates. Poise rules adopted in v0.1.1. Takt rules adopted in v0.1.2. Cadence rules adopted in v0.1.3."}}