--- name: Gauss version: "1.0" slug: gauss tier: premium price: 29 type: Product Launch axis: "6 — Cursor protagonist (magnetic reticle)" theme: dark-product-launch gesture: "The cursor is the instrument — the native pointer is replaced by a dot and a lerped ring that mutates: reticle with corner brackets over the machine, open circle over anything clickable. Four hotspots on the car magnetise the reticle; locking one reveals its HUD spec card. On touch screens the reticle retires and the hotspots become tappable marks." colors: bg: "#0B0F14" panel: "#10161E" cyan: "#22E4F2" xenon: "#E8EDF0" hud: "#5A6B78" fonts: display: "Michroma" body: "Saira" mono: "Share Tech Mono" spacing: s1: "0.5rem" s2: "1rem" s3: "1.5rem" s4: "2.5rem" s5: "4rem" s6: "7rem" radius: "2px" type-scale: hero: "clamp(2.9rem, 9.5vw, 8rem)" section: "clamp(1.35rem, 3.2vw, 2.4rem)" stat: "clamp(2.2rem, 5.4vw, 4.4rem)" body: "1rem / 1.7" mono: "0.62–0.72rem / ls .14–.3em" full-kit: "https://www.stacklift.design/kit/gauss" --- # Gauss — Design System ## §1 Identity Gauss is a dark product-launch kit built on one idea: **the cursor is the protagonist**. The page is a nocturnal showroom — a fictional electric grand tourer, the Vision, stands on stage — and the visitor's pointer becomes the brand's instrument: a cyan dot with a lerped ring that mutates into an inspection reticle over the machine, opens into a circle over anything clickable, and is *magnetised* by four hotspots on the bodywork. The signature gesture is not scrolling; it is **moving the mouse**. The palette is a night HUD: showroom dark `#0B0F14` and panel `#10161E` carry the stage; electric cyan `#22E4F2` is **the only signal** — reticle, hotspots, key figures, primary CTA; xenon white `#E8EDF0` speaks; HUD grey `#5A6B78` labels and rules. The name comes from the unit of magnetic field strength — the force that pulls the reticle to its marks. Typography: Michroma (wide, geometric, instrument-panel) for display; Saira (300/400/600, born for automotive signage) for body; Share Tech Mono for every HUD line, spec and eyebrow. ## §2 The Signature Gesture — The Magnetic Reticle Two fixed elements replace the native cursor (fine pointers only): a **dot** that follows the pointer raw, and a **ring** that follows it lerped at `0.22` per frame. The ring has three states, driven by what sits under the pointer: - **BASE** — 38px circle, cyan hairline. - **RETICLE** — over any `[data-cur="reticle"]` zone (the hero, the inspection stage, gallery cards): the circle squares off into four corner brackets with a crosshair, plus a mono label (`data-curlabel`). - **LINK** — over anything clickable: the ring opens to 50px and fills with cyan at 14%. **The lock.** Every `[data-mag]` element projects a magnetic field: its bounds plus 48px. Each frame the engine finds the nearest field containing the pointer; if it is a hotspot, the ring's target snaps from the pointer to the hotspot's centre, the brackets tighten, and the hotspot's spec card opens (`.poi.is-live`). Buttons flagged `[data-mag-pull]` also lean toward the pointer, capped at 6px. When a modal or the Design System layer is open, only that layer's magnets are active. ```js var rad = Math.max(r.width, r.height)/2 + 48; // the field rx += (tx - rx) * 0.22; // the ring's lerp ``` **The stage answers.** Over the hero — and only there — a faint cyan glow (`.hero-glow`, radial gradient, `mix-blend-mode:screen`) follows the ring across the photograph, like the stage lighting acknowledging the instrument. It is the same gesture amplified, not a second one: it must never be duplicated on other sections. The engine never runs on coarse pointers or under `prefers-reduced-motion` — the native cursor returns, hotspots become tappable marks (click toggles `.is-stick`), and nothing is lost but the theatre. ## §3 Stage Discipline 1. The page is the **stator** — it never translates, parallaxes or flies. The only moving parts are the cursor and what it touches. 2. Cyan is the only accent, and it belongs to the instrument: reticle, hotspots, HUD figures, one primary CTA. Red exists only inside the photography (the tail light). 3. Sections 02 (Performance) and 05 (Charge) are **rest zones**: no reticle zones, no magnets beyond the CTA, plain editorial. 4. Hovers may scale a gallery image 1.025; that is the ceiling. ## §4 HUD Grammar - **Eyebrows** — `NN — SECTION` in Share Tech Mono, cyan, letterspaced .28em. - **HUD strips** — mono key/value pairs (`0–100 3.1 S`), values in xenon, keys in HUD grey. - **Spec cards** (`.spec`) — 238px panels, cyan hairline border, blur backdrop; kicker in cyan mono, one sentence in Saira, a `FIELD NN` footer rule. - **Buttons** (`.btn`) — mono uppercase, cyan hairline; primary fills cyan on hover and is magnetic (`data-mag data-mag-pull`). Ghost variant in HUD grey. Inert links use `.is-soon` (opacity .4, `pointer-events:none`, `aria-disabled`) — never a dead `href="#"`. ## §5 Components - **Cursor engine** — `#cur-dot` + `#cur-ring` (+ `#cur-label`); constants: lerp `0.22`, magnet pad `48px`, pull cap `6px`. - **Inspection stage** — `.inspect-stage` image + absolutely-positioned `.poi` wrappers (`left/top` in %), each holding a `.hotspot` button and its `.spec` card (`.spec--r/--l/--t` placement). - **Stats band** — `.stats`: 4 columns, Michroma figures with cyan unit, hairline rules. - **Gallery** — `.gcard` buttons in a staggered grid (1.15fr/1fr, offset second card, 74% third card); each opens the modal. - **Study modal** — `.modal`: full-screen, prev/next + arrow keys, counter, disabled at the ends, Escape, focus restore, body scroll locked. - **Interior panel** — `.interior-panel`: blurred panel floating on a full-bleed image. - **Reserve form** — underline input + magnetic submit; demo confirmation line. - **Design System overlay** — `.ds`: slide-up panel documenting palette, type, the cursor's states, buttons and tokens. ## §6 Agent Instructions 1. One protagonist only: the cursor. Never add a second spectacle — no parallax, no scroll-driven choreography, no marquee. If a section needs energy, give it a reticle zone or a magnet, not motion of its own. The hero glow belongs to the cursor — never add a glow to any other section. 2. Keep **3–5 hotspots** on the inspection stage; more turns inspection into pinball. New hotspot = one `.poi` with `left/top` in %, a `.hotspot` button (`data-mag`, `data-label`, `aria-label`) and one `.spec` card. The engine picks it up automatically. 3. Respect the rest zones (02, 05). At least one quiet section between two reticle zones. 4. Cyan `#22E4F2` is the only accent. If something must stand out, set it in Michroma, give it a hairline rule, or make it bigger — never reach for a second hue. 5. Michroma is display-only and never lowercase; body never exceeds Saira 600; every label, spec and eyebrow is Share Tech Mono. 6. The custom cursor must stay retired on coarse pointers and under `prefers-reduced-motion`; every hotspot must stay reachable by click/tap and keyboard (they are `