/* ========================================================================= LightHouse Foundry — UI Design Model · TOKEN LAYER (single source of truth) Brand: WORKING PIN "Warm Editorial Trust" (Direction 1) — **NOT RATIFIED** ------------------------------------------------------------------------- The brand pin is byte-identical to the direction it was drawn from: every pinned colour and both typefaces are untouched. What this layer adds is the half the pin is SILENT about — elevation, border role, surface tint, radius nesting, and press/hover motion — plus one logo fixture. Those additions are marked [S1]–[S6] and each one states its own rule in place. ------------------------------------------------------------------------- Every value a component or screen uses comes from this file. A hardcoded value anywhere else is a defect (U1 binding rule). PINNED values are marked [PIN] — they come from the WORKING brand pin and may not be changed here without re-pinning. *** THE PIN IS NOT RATIFIED, corrected 2026-08-28 (s05@keith-lampe). *** RULED 2026-09-08 (UIH-014): Warm Editorial Trust IS the brand, across all moments and all screens — [PIN] values are ruled from this date. The note below records the earlier over-claim honestly and is kept as written. This header previously read "the ratified brand pin". No such ruling exists: the s14 brand-audition review has been OPEN since 2026-08-14, the founder-ruling queue carries no brand ruling, and the venture's ui-design-model.md records no pin. The founder's own s16 sequencing note put that review behind the UI-design avatar experiment with the words "it informs, never decides" — and this token layer came out of that experiment, where "pinned" meant FIXED FOR THIS EXPERIMENT. The word "ratified" travelled with it into the PLATFORM library, where every downstream build would have inherited the claim. What this changes: nothing about the values, which are a faithful copy of Direction 1. What it changes is what a reader may conclude from them. [PIN] here means "do not drift from the direction this was drawn from", NOT "the founder chose this". Awaiting a founder ruling on the s14 review. Values marked [DERIVED] are neutrals/shades built from the pinned set. Values marked [PROPOSAL] are decisions the upstream models do not make; each carries its own rationale inline and is awaiting a founder ruling. ========================================================================= */ /* --------------------------------------------------------------------------- CONFORMANCE DECLARATION (platform law DS1, design-system-spec — 2026-09-03) The raw tier: brand MATERIAL a component never references directly, because this system names a ROLE for each (--sem-*, --font-coach, --font-instrument). Read mechanically by design-system-conformance/verify_roles.py. @raw --verdigris --verdigris-press --brass --brass-deep --slate (The type ROLES are --font-prose and --font-data — role-named, platform-safe. The venture-flavoured aliases --font-coach / --font-instrument remain as aliases a venture surface may read; a PLATFORM contract may not cite them — component-contract check C7. Corrected 2026-09-03 evening after C7 caught 'coach' inside a contract's tokensUsed.) @data --fill (@data: a value that is DATA, supplied by markup at render — P-05's meter reading.) --------------------------------------------------------------------------- */ :root { /* --------------------------------------------------------------------- 1. COLOR — ground and ink --------------------------------------------------------------------- */ --paper: #FBF7EF; /* [PIN] warm paper — page ground */ --card: #FFFEFA; /* [DERIVED] raised sheet, one step lighter */ --surface-inset: #F7F0E4; /* [DERIVED · S3] a well cut INTO a raised sheet. Derived as paper's mirror of card: card is paper +04/+07/+0B, so inset is paper −04/−07/−0B. One half-step down, the same size as the step up. MEASURED CEILING — this surface costs about 6% of contrast headroom, and TWO tokens that clear their bar on paper do NOT clear it here: --ink-quiet 4.26:1 (needs 4.5) FAILS --brass 2.85:1 (needs 3.0) FAILS Neither is used on an inset surface today. Do not be the one who starts. Safe here: --ink 13.75 · --ink-soft 6.40 · --verdigris 6.41 · --slate 4.85 · --brass-deep 4.66 · --edge 3.26 (1.4.11) */ --ink: #20242B; /* [PIN] warm blue-black — primary text */ --ink-soft: #525761; /* [DERIVED] secondary prose · 6.79:1 paper */ --ink-quiet: #6E727B; /* [DERIVED] placeholders + disabled text · 4.78:1 on card, 4.51:1 on paper — meets AA even though disabled text is exempt */ /* Accents */ --verdigris: #2E5F58; /* [PIN] primary accent · 6.79:1 on paper */ --verdigris-press: #24504A; /* [DERIVED] hover / pressed */ --brass: #B8863B; /* [PIN] secondary accent · 3.02:1 — LARGE TEXT AND GRAPHICS ONLY, never body copy */ --brass-deep: #8F6322; /* [PIN P-02 — ruled with the direction, UIH-014 2026-09-08] brass at body size · 4.94:1 on paper, 5.23:1 on card */ --slate: #5B6B78; /* [PIN] the evidence-capped state. NEVER a failure color (M4 two-channel law)*/ /* Rules and edges — FOUR jobs, four tokens. [S2 · THE BORDER RULE] ------------------------------------------------------------------- ONE SENTENCE: a line's weight is set by what it separates, never by which component drew it. R1 --rule divides regions INSIDE one surface, and bounds a surface that is itself nested inside another R2 --rule-strong bounds a STATIC top-level surface R3 --edge bounds an INTERACTIVE surface — anything with a hover or press state. 3.46:1, so the boundary alone satisfies WCAG 1.4.11 R4 --ink the RECORD's ruled line — the ledger's head underline, the checks rule, the verdict line, the checkpoint panel. Instrument voice only; never a surface boundary Two stated corollaries: · A DISABLED control is no longer interactive. Its boundary drops from R3 to R2 — the line stops promising a response. · A STATE ENCODING is not a boundary. The dashed slate of an open check, the dashed band of the expectation range, the accent bar on a notice: these are carried by their semantic token and are exempt from R1–R4. */ --rule: #E7DFCE; /* [DERIVED] R1 · separator / nested bound */ --rule-strong: #D8CDB4; /* [DERIVED] R2 · static surface boundary */ --edge: #8C8477; /* [PIN P-03 — ruled with the direction, UIH-014 2026-09-08] R3 · boundary of an INTERACTIVE surface · 3.46:1 (1.4.11) */ /* State tints — always paired with a word and a shape, never alone */ --tint-positive: #EAF1EC; /* [DERIVED] verdigris wash — proven */ --tint-info: #E9EDF0; /* [DERIVED] slate wash — not yet proven */ --tint-neutral: #F3EEE0; /* [DERIVED] brass wash — the Coach's aside */ --tint-quiet: #EFE9DA; /* [DERIVED] unfilled meter track */ /* --------------------------------------------------------------------- 2. COLOR SEMANTICS — meaning-carrying assignments (U4) Each is an ALIAS. Components reference the semantic, never the raw hue, so the meaning survives a re-skin and the audit stays readable. --------------------------------------------------------------------- */ --sem-proven: var(--verdigris); /* evidence met; score earned */ --sem-unproven: var(--slate); /* capped, open, not yet scored — honest absence, NOT failure */ --sem-target: var(--brass); /* the shape to beat; the bar */ --sem-target-text: var(--brass-deep); /* same meaning at body size */ --sem-attention: var(--brass-deep); /* [PROPOSAL P-04] genuine error / "this needs you". The pinned system has no danger hue and we did not invent one — errors are carried by structure + word */ --sem-neutral: var(--ink-soft); /* informational, no valence */ --sem-accent: var(--verdigris); /* [ROLE, named 2026-09-03 · P-09] the EDITORIAL accent — the Coach's italic aside, an eyebrow, a figure: emphasis that is neither an action nor a meaning. Named because five components wore the raw hue for it and no role said what they meant */ --sem-focus: var(--verdigris); /* focus ring */ /* SURFACE DEPTH — the tint ladder. [S3 · THE NESTING RULE, tint half] ------------------------------------------------------------------- ONE SENTENCE: a surface's tint states its DEPTH, not its component. +1 --surface-raised lifted off the page — pairs with --e1/--e2 0 --surface-page the ground everything sits on −1 --surface-inset a well cut into a raised surface A surface nested inside another never repeats its parent's tint; it steps one rung DOWN. Layered elevation plus a half-step of tint is the documented analogue to glass: lifted, material, legible, no tell. Exempt: SEMANTIC tints (--tint-positive / --tint-info / --tint-neutral / --tint-quiet). Those carry meaning, and meaning outranks depth. The Coach's aside is warm because it is the Coach's aside, at any depth. */ --surface-page: var(--paper); --surface-raised: var(--card); /* --surface-inset is a literal, declared in §1 with its derivation. */ /* --------------------------------------------------------------------- 3. TYPE — two voices [PIN] Newsreader = the Coach's serif voice: display and body. Spline Sans Mono = the Judge's instrument voice: scores, evidence states, timestamps, cost figures ONLY. Mono is for VALUES, never for chrome. No uppercase-mono labels. --------------------------------------------------------------------- */ --font-prose: "Newsreader", Georgia, "Times New Roman", serif; --font-data: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Modular scale, ratio 1.2, anchored at --fs-base (18px). One scale for both faces; mono normally sits one step below its serif neighbour because it reads optically larger. */ --fs-xs: 12.5px; --fs-sm: 15px; --fs-base: 18px; --fs-md: 21.5px; --fs-lg: 26px; --fs-xl: 31px; --fs-2xl: 37px; --fs-3xl: 45px; --fs-4xl: 54px; --fs-5xl: 64px; --lh-tight: 1.14; /* --fs-3xl and above */ --lh-snug: 1.28; /* --fs-xl / --fs-2xl */ --lh-normal: 1.45; /* --fs-md / --fs-lg */ --lh-body: 1.6; /* --fs-base and below — serif needs the air */ --lh-data: 1.35; /* mono values */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --track-display: -0.012em; /* large serif only; never letterspace lowercase serif at body size */ --track-data: 0.01em; --measure: 66ch; /* 60–75 character body measure */ /* --------------------------------------------------------------------- 4. SPACE — 4px base --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sheet-max: 1180px; /* in-product sheet */ --page-max: 1120px; /* marketing page */ --gutter: 32px; /* --------------------------------------------------------------------- 5. RADIUS [S4 · THE NESTING RULE, radius half] --------------------------------------------------------------------- ONE SENTENCE, three clauses: 1. A surface's BASE rung follows its scale — --r-lg page-scale surfaces: cards, the ledger, the prompt box, notices, the empty state --r-md control-scale surfaces: inputs, small readouts, wells --r-sm data-scale marks: stamps, cap tags, expectation bands --r-xs hairline data marks: pips, the expectation needle --r-pill CTAs and chips — a category convention, exempt from the ladder because a pill is a shape, not a depth 2. A surface INSET inside another steps ONE rung down, floored at --r-sm. (--r-lg parent → --r-md child.) 3. A surface FLUSH to its parent's edge takes NO radius of its own; the parent clips it (overflow: hidden). A child that re-declares its parent's radius while flush is the tell we are removing. --------------------------------------------------------------------- */ --r-xs: 2px; /* [S4] hairline data marks — was a hardcoded 2px in system.css (.pip, .expect__mark): a U1 defect */ --r-sm: 4px; /* state chips, evidence stamps */ --r-md: 8px; /* inputs, small panels, wells nested in an --r-lg card */ --r-lg: 12px; /* cards, the ledger, the prompt box */ --r-pill: 999px; /* primary + secondary CTAs (category convention) */ /* --------------------------------------------------------------------- 6. ELEVATION — an institution of record is mostly flat [S1] --------------------------------------------------------------------- A layered ramp, not a stacked pair. Three properties hold across every rung, and they are the whole of the craft here: · ONE LIGHT SOURCE, directly overhead. Every x-offset is 0. A warm paper record is lit from above, not from a fashionable top-left. · OFFSET AND BLUR RISE TOGETHER, roughly doubling per layer (blur ≈ offset × 1.27), with the negative spread growing so the far layers narrow instead of smearing. · HUE TINTED TOWARD --ink, never neutral grey. --shadow-color IS --ink expressed in HSL so alpha can vary per layer: #20242B = hsl(218 15% 15%). A grey shadow on warm paper reads as dirt. SAME INK, MORE LAYERS. Alpha per layer is held constant within a rung and chosen so the accumulated opacity at the contact edge lands near where the prior ramp already sat — e2 ≈ 0.14 (was ≈ 0.11), e3 ≈ 0.20 (was ≈ 0.16). Only --e1 gains materially (≈ 0.09, was 0.04), because at 0.04/2px a "resting" surface was not resting on anything. The pass buys softness by spreading the ink down a gradient, not by adding it. THE RULE: a surface at rest sits one rung; on hover or focus it steps ONE rung up (--e1 → --e2, --e2 → --e3) and never further. --------------------------------------------------------------------- */ --shadow-color: 218 15% 15%; /* [DERIVED] --ink in HSL channels */ --e0: none; /* resting — a sheet in contact with the page. Travel 6.5px. */ --e1: 0 0.3px 0.4px hsl(var(--shadow-color) / 0.019), 0 0.8px 1px -0.2px hsl(var(--shadow-color) / 0.019), 0 1.7px 2.1px -0.4px hsl(var(--shadow-color) / 0.019), 0 3.4px 4.3px -0.7px hsl(var(--shadow-color) / 0.019), 0 6.5px 8.2px -0.9px hsl(var(--shadow-color) / 0.019); /* lifted — the ledger, the prompt box, an interactive card on hover. Travel 14px. */ --e2: 0 0.4px 0.5px hsl(var(--shadow-color) / 0.030), 0 1.2px 1.5px -0.3px hsl(var(--shadow-color) / 0.030), 0 2.7px 3.4px -0.6px hsl(var(--shadow-color) / 0.030), 0 6px 7.6px -0.9px hsl(var(--shadow-color) / 0.030), 0 14px 17.7px -1.2px hsl(var(--shadow-color) / 0.030); /* attending — the one rung reserved for a surface the founder is ACTING on right now: the prompt box under focus. Travel 22px. */ --e3: 0 0.5px 0.6px hsl(var(--shadow-color) / 0.037), 0 1.3px 1.6px -0.3px hsl(var(--shadow-color) / 0.037), 0 2.7px 3.4px -0.6px hsl(var(--shadow-color) / 0.037), 0 5.2px 6.6px -0.9px hsl(var(--shadow-color) / 0.037), 0 10px 12.7px -1.2px hsl(var(--shadow-color) / 0.037), 0 22px 27.9px -1.5px hsl(var(--shadow-color) / 0.037); /* --------------------------------------------------------------------- 7. MOTION — three bands, three jobs. Continuity · Status · Causality. Anything else is decoration, and on a candour surface decoration reads as salesmanship. --------------------------------------------------------------------- */ --dur-instant: 120ms; /* causality: hover, focus, press */ --dur-transition: 280ms; /* continuity: a thing appeared or moved */ --dur-entrance: 360ms; /* continuity: a large surface arriving */ --dur-ambient: 1900ms; /* status: indeterminate work, looping only */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* [S5] DISTANCE-SCALED, ASYMMETRIC. ------------------------------------------------------------------- Two rules, both stated so a component never picks a number: 1. DISTANCE SETS DURATION. A change that travels no distance (colour, border) is faster than one that travels real pixels (elevation, lift). Contact is the fastest thing on the page, because a press that lags feels broken rather than gentle. 2. ENTER AND EXIT ARE NOT THE SAME LENGTH. The pointer arriving is an event and gets a fast, decelerating response; the pointer leaving is a decay and gets a longer, gentler one. In CSS this is expressed by putting the EXIT duration on the resting rule and the ENTER duration inside :hover / :focus-within. */ --dur-press: 90ms; /* contact. no travel, must not lag */ --dur-hover: 140ms; /* colour + border in. no travel */ --dur-lift: 220ms; /* elevation + lift in. real distance */ --dur-settle: 320ms; /* everything OUT. the decay */ --ease-exit: cubic-bezier(0.35, 0, 0.6, 1); /* no overshoot on the way back; a record settles */ --press-scale: 0.97; /* [S5] the one press transform in the system */ --lift-y: -1px; /* [S5] how far an interactive card rises */ /* --------------------------------------------------------------------- 8. FOCUS + HIT TARGET --------------------------------------------------------------------- */ --focus-width: 2px; --focus-offset: 3px; --hit-min: 44px; /* every interactive element, every breakpoint */ /* --------------------------------------------------------------------- 9. ICON — 24x24 grid, 1.5 stroke, currentColor (Onshore + Heroicons) --------------------------------------------------------------------- */ --icon-stroke: 1.5; --icon-sm: 16px; /* inline with body text, baseline-aligned */ --icon-md: 20px; /* standalone beside a heading */ /* --------------------------------------------------------------------- 10. THE MARK [S6 — FIXTURE, NOT A BRAND RULING] --------------------------------------------------------------------- A founder-selected mark fixture (2026-08-24), explicitly "may swap out later". Ruling B2b owes a fresh brand exercise before any identity work, so this carries NO ratification weight — it exists so the wiring below can be stated and checked, not to settle an identity. The mark file itself is NOT in this repo; only its token contract is. AI-GENERATED. provenance.json records ai_generated: true, and the EU AI Act Art. 50 disclosure obligation has applied since 2026-08-02. The disclosure travels with the mark onto any founder-facing surface. The mark is drawn against these five variables with hex fallbacks, so mapping them here is the whole of the wiring — it recolours from the token layer with no re-export. It must be INLINED to do so: an external cannot inherit a custom property from its host. SIZE FLOOR: 32px, and that is MEASURED, not preferred. Rendered at true device pixels and inspected at 8x nearest-neighbour, the gear teeth — the entire "foundry" half of the concept — do not resolve below 32px. At 24px the mark reads as a bow tie. The set-level provenance record scores 16px survival as PASS; for THIS mark that claim does not hold. Believe the measurement, not the set-level score. --------------------------------------------------------------------- */ --mark-ink: var(--ink); --mark-brass: var(--brass); --mark-verdigris: var(--verdigris); --mark-paper: var(--paper); --mark-slate: var(--slate); --mark-size: 32px; } /* ###### BEGIN LOCAL ADDITION — LHFI-prod#389 ###### */ /* ========================================================================= [LOCAL ADDITION — NOT YET UPSTREAM] THE COCKPIT LEAN — the geometry of S-05's two side rails. [UIH-021] ------------------------------------------------------------------------- RATIFIED 2026-09-15 (Keith Lampe + Dan Nixon jointly on LHFI-prod#275): both side rails lean toward the conversation from ONE shared vanishing point — the perspective set ONCE on the stage, the rotateY on each pane element itself, never on a wrapper. The angle and the camera are TOKENS (U1); no component states either as a literal. THE RE-VENDOR CONTRACT. These two declarations and the --tilt line in the [S5] block below are a LOCAL ADDITION: upstream warm-editorial-trust (Foundry-design-OS @ PlatformAssetLibrary/designsystems/warm-editorial- trust/) carries no --tilt, so this file is no longer byte-identical to it and `verify_vendor_drift.py` will say so. The owed upstream change is a design-OS PR by the design-system seat; until it lands, whoever re-vendors must re-apply everything between the BEGIN and END markers — and the --tilt line inside the reduced-motion block, which deliberately sits there rather than here so it stands beside its two siblings. See PROVENANCE.md. Nothing else in this file is touched by LHFI-prod#389. ========================================================================= */ :root { --tilt: 20deg; /* [PIN] the lean of each side rail toward the conversation. FIXED by ruling — there is no control and no preference (LHFI-prod#275 Q1 (a)). 20° is the design-system seat's value at the co-stamp; the reference build renders 10°. The seat re-tunes it propose-first, and the camera below is written so that a re-tune needs no re-measurement. Nulled under reduced motion in the [S5] block below. */ /* [DERIVED] from --tilt. The camera distance, and every part of it earns its place: · TIED TO THE VIEWPORT, because a fixed distance is the bug the reference build had to fix: the projected excursion of a leaning pane grows with its distance from the vanishing point, so a fixed camera holds at 1280 and runs the rails past the window edges at 2560. · max(100vw, 100vh), not 100vw, because the excursion has a VERTICAL half too — the near edge's corners spread above and below the stage, and that half scales with the window's HEIGHT. Taking the larger of the two dimensions bounds both halves with one value. · THROUGH sin(--tilt), because that is what makes the excursion budget independent of the angle. The near edge's travel in z is (paneWidth / 2) · sin(tilt); carrying sin(tilt) in the camera cancels it, so the projected excursion stays a fixed share of the stage at whatever angle the seat re-tunes to. · THE SCALAR 6 sets that share. The vertical rise converges to paneWidth / (4 × 6) ≈ 18.3px for the widest pane — inside the 24px of corner room the cockpit's stage carries above and below. MEASURED in Chromium at nine window shapes (1280×800 · 1280×1024 · 1280×1440 · 1280×2000 · 1440×900 · 1512×982 · 1920×1080 · 2560×1440 · 3440×1440): horizontal clearance to the window edge 27.2–34.2px with no overflow at any of them, vertical clearance 6.7–20px. sin() in calc() is the same browser floor the app's styling engine already requires (Chrome 111 / Safari 16.4). */ --tilt-perspective: calc(max(100vw, 100vh) * sin(var(--tilt)) * 6); } /* ###### END LOCAL ADDITION — LHFI-prod#389 ###### */ /* ========================================================================= [S5] REDUCED MOTION — the token half of the switch. ------------------------------------------------------------------------- The two S5 transforms are nulled HERE, at their source, rather than being chased component-by-component with !important further down the cascade. A press that snaps instantly to scale(0.97) is still motion: the duration is what a duration override removes, and the displacement is what it does not. Setting the scale to 1 and the lift to 0 removes the displacement, so there is nothing left to animate and nothing left to see. system.css keeps the behavioural half — animations that must stop, and the one ambient beam that HOLDS rather than stopping. ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --press-scale: 1; --lift-y: 0px; /* ###### BEGIN LOCAL ADDITION — LHFI-prod#389 ###### */ /* UIH-021 acceptance condition (i) — a leaning pane is a perspective, and perspective is motion the moment anything scrolls inside it. Nulled HERE, at the token, not chased per component: the pane rules stay byte-identical in every state. This declaration must stay AFTER the :root that sets 20° — both are :root, so the later one wins. Local, like the block above; see PROVENANCE.md. */ --tilt: 0deg; /* ###### END LOCAL ADDITION — LHFI-prod#389 ###### */ } } /* closes @media — FIXED 2026-09-03 (s11@keith-lampe): the eleven declarations that follow were inside this media block with no selector, so every browser dropped them. Found by the first consumer of --sem-action (styles/dreamy). No value changed. */ :root { /* --------------------------------------------------------------------- ACTION — the interactive accent [A1/B1, 2026-08-25] Added because twelve component contracts could not name the colour of a link, a quiet control or a chosen card without reaching past the semantic layer for a raw brand hue. The seam that most needs to survive a re-skin was the one seam that did not have a role. --sem-on-action is the pair, and it is not optional: a component that hardcodes a surface as its text colour has silently assumed a DARK accent, and breaks with no warning the first time a light-accent system mounts. --------------------------------------------------------------------- */ --sem-action: var(--verdigris); /* links, quiet controls, chosen */ --sem-action-hover: var(--verdigris-press); --sem-action-press: var(--verdigris-press); --sem-on-action: var(--card); /* ink ON an action ground */ /* --------------------------------------------------------------------- SURFACE SIZES [C1, 2026-08-25] THIRD appearance of this gap: manifesto-scroll P-G1 (figure height), the ui-direction delta (--stage-h), and the twelve wireframes. Three independent sightings is the evidence; each was solving it locally and they were drifting. Derived from the space scale so they stay in the same rhythm rather than becoming a second, competing scale. --------------------------------------------------------------------- */ --fig-sm: calc(var(--sp-11) * 1.75); --fig-md: calc(var(--sp-11) * 2.75); --fig-lg: calc(var(--sp-11) * 3.5); --measure-narrow: calc(var(--measure) - 20ch); --measure-aside: calc(var(--measure) - 14ch); --measure-wide: calc(var(--measure) + 12ch); /* The state-encoding bar. A hairline rule down an edge, carrying state as SHAPE so meaning never rests on colour alone. Was a bare literal in three components before it had a name. */ --bar-w: calc(var(--sp-1) - 1px); /* --------------------------------------------------------------------- CAROUSEL — [PROPOSAL P-12, 2026-09-03; re-shaped the same night to the founder's clarified ask] a STACK: folder-tabbed cards hinged at their bottom edge, tilted back toward a vanishing point on the horizon above, each card behind smaller and higher, the front card flat. Reference: the Framer "Stack Flow Carousel" (paid, WebGL — not adopted; the geometry is forty lines of CSS 3D). Six tokens; a style re-points them and the whole treatment changes with zero markup change. --------------------------------------------------------------------- */ --carousel-h: calc(var(--sp-11) * 6); /* the stage */ --carousel-depth: calc(var(--sp-11) * 12); /* camera distance (perspective) */ --carousel-tilt: 42deg; /* [P-12] cards lean back this much */ --carousel-step: calc(var(--sp-11) * 1.05); /* each card behind rises by this */ --carousel-fall: calc(var(--sp-11) * 0.7); /* each card behind falls back by this (z) */ --carousel-recede: 58%; /* the LAST visible card's opacity */ --carousel-radius: calc(var(--sp-11) * 4.5); /* the drum's radius — a little over the card height, so a neighbour's near edge stays behind the front card */ } /* ========================================================================= VENTURE ALIASES [D1, 2026-08-25] The platform layer names roles; a venture may keep its own vocabulary. The old names were PERSONA names — a portable kit cannot ship one product's cast list, and --tint-warm is a misnomer the moment a cool system mounts. Aliases are one-directional: the platform name is the definition, the venture name points at it. Delete this block and the platform still works. ========================================================================= */ :root { --font-coach: var(--font-prose); --font-instrument: var(--font-data); --tint-warm: var(--tint-neutral); --tint-met: var(--tint-positive); --tint-open: var(--tint-info); --tint-track: var(--tint-quiet); }