/* ═══════════════════════════════════════════════════════════════════════════ SONO XR — DESIGN SYSTEM v1 · TOKENS Phase 1 (2026-08-04). These values are canonical. Nothing in the product states a colour, a duration, an easing curve or a radius literally — it names one of these. THE GOVERNING IDEA The interface is the darkened room. The space is the only lit thing in it. Test for any decision: does this make the space more present, or the interface more present? If the latter, it does not ship. Load this FIRST, before every other stylesheet. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* GROUND — warm near-black. Never #000. Steps are +3–6% luminance. */ --ground-00: #0B0A09; /* base — the room */ --ground-01: #121110; /* raised surface */ --ground-02: #1A1917; /* sheet / panel */ --ground-03: #232120; /* max elevation — sparingly */ /* INK — exactly three tiers. Never #FFF. */ --ink-primary: #EDE8E0; --ink-secondary: rgba(237, 232, 224, 0.62); --ink-tertiary: rgba(237, 232, 224, 0.38); /* ACCENT — one, low chroma, STATE ONLY. Never decoration. At most one element per screen state wears it. */ --accent: #B08D57; /* TYPE — families are variables so licensed faces drop in later as a one-line change. Licences are not purchased yet; these fall back to system faces on purpose. Never substitute Inter, Poppins, Space Grotesk, Geist or Montserrat — every one is a documented template signal. */ --font-screen: 'ABC Diatype', 'Suisse Int\'l', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Signifier', 'Tobias', Georgia, 'Times New Roman', serif; /* MOTION */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1); --dur-press: 140ms; --dur-tooltip: 180ms; --dur-sheet: 320ms; --dur-chrome: 300ms; /* SPACE — 8pt grid, 4pt half-steps */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --radius: 2px; /* the only radius in the product */ } /* ═══ TYPE SCALE ═══════════════════════════════════════════════════════════ Six roles. display-xl and display use clamp() so they scale down on mobile without breaking the ratio — the tracking and leading are locked, so the proportions hold at every width. `slate` is the ONLY uppercase role in the entire product. ═════════════════════════════════════════════════════════════════════════ */ .t-display-xl { font-family: var(--font-display); font-size: clamp(2.5rem, 6.2vw, 5.5rem); /* → 88px */ font-weight: 300; letter-spacing: -0.03em; line-height: 0.92; } .t-display { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3.5rem); /* → 56px */ font-weight: 300; letter-spacing: -0.025em; line-height: 0.95; } .t-title { font-family: var(--font-screen); font-size: 1.75rem; /* 28px */ font-weight: 400; letter-spacing: -0.015em; line-height: 1.10; } .t-body { font-family: var(--font-screen); font-size: 1rem; /* 16px */ font-weight: 400; letter-spacing: 0; line-height: 1.55; } .t-caption { font-family: var(--font-screen); font-size: 0.8125rem; /* 13px */ font-weight: 400; letter-spacing: 0; line-height: 1.40; } .t-slate { font-family: var(--font-screen); font-size: 0.6875rem; /* 11px */ font-weight: 500; letter-spacing: 0.15em; line-height: 1.20; text-transform: uppercase; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ═══════════════════════════════════════════════════════════════════════════ AMENDMENT 1 — MATERIAL (2026-08-06, the HUB port) WHY THIS EXISTS. Phase 1 removed the neon and Michael's verdict was "too boring and flat, lost all the energy." The diagnosis was not that the accent was too quiet — it was that nothing replaced the neon. A flat fill on a flat ground has no energy to lose. The resolution agreed in that thread: energy comes from DEPTH, MATERIALITY, LIGHT and MOTION — and from the content itself — never from the interface's own colour. These tokens are that resolution made buildable. They are what visionOS actually does: a lit top edge, occlusion below, real blur behind. The governing test above is unchanged. Material makes the interface RECEDE (it reads as glass over the room); colour would make it advance. ═════════════════════════════════════════════════════════════════════════ */ :root { /* GLASS — a surface that is lit from above, not a grey fill. */ --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 46%, rgba(255, 255, 255, 0.012) 100%); /* EDGE — the single most load-bearing trick. A 1px lit top edge and a 1px occluded bottom edge is what separates "panel" from "rectangle". */ --edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.42); /* LIFT — three stacked shadows: contact, mid, ambient. One shadow reads as a drop shadow; three read as an object in a room. */ --lift: 0 2px 6px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.44), 0 34px 80px rgba(0, 0, 0, 0.34); --blur-panel: blur(26px) saturate(1.35); /* ACCENT DERIVATIVES — still ONE accent. These are the same hue at two lower intensities so the accent can behave like LIGHT (a glow, a rim) rather than paint. Derived, never hand-picked, so re-theming one value re-themes all three. Per-client themes override --accent alone. */ --accent-dim: color-mix(in srgb, var(--accent) 16%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 34%, transparent); /* RADIUS — AMENDS the "--radius: 2px is the only radius" rule above. 2px stays correct for controls, chips, thumbnails and inputs: it reads as machined. It is WRONG for a large floating glass panel, where a hard corner reads as a browser dialog rather than an object. Two radii, each with a stated job. Do not add a third. */ --radius-panel: 14px; /* the HUB, the guide cards — floating glass only */ --radius-control: 10px; /* controls INSIDE a panel */ } /* ═══════════════════════════════════════════════════════════════════════════ AMENDMENT 2 — THE CATEGORY PALETTE (2026-08-06) WHY THIS DOES NOT BREAK THE ONE-ACCENT RULE. --accent is still the only colour that means STATE: selected, live, on. These are something else — they are a LEGEND. Each hue identifies a kind of content, the way a series colour identifies a series in a chart. That is data, not decoration, and it is the one job a single accent genuinely cannot do. Michael asked twice for the colour and motion of the earlier build back (2026-08-06: "I like some color/motion with menus and AUDIO HUB version better"). Phase 1 read flat partly because it stripped this too — with one ink for every label, ten media types looked like one undifferentiated list. THE DISCIPLINE THAT KEEPS IT FROM GOING NEON: 1. These appear ONLY on category chips, kickers and small marks — never as a fill, a border on a large surface, or a glow. 2. They never touch the media itself. The thumbnail is still the brightest thing on screen. 3. They are muted at ~62% of full chroma on purpose. Read as ink, not neon. ═════════════════════════════════════════════════════════════════════════ */ :root { --cat-overview: #6FBFA8; /* teal — the way back */ --cat-photos: #E0879F; /* rose */ --cat-videos: #D9705E; /* red */ --cat-aerial: #D9A441; /* amber */ --cat-tours: #55B9C9; /* cyan */ --cat-360: #6E92D6; /* blue */ --cat-splats: #A283D9; /* violet */ --cat-models: #8290C9; /* indigo */ --cat-plans: #8C99A6; /* steel */ --cat-area: #86B36B; /* green */ --cat-docs: #6FBF8A; /* mint */ --cat-graphics: #C58BC0; /* orchid — infographics, data viz, motion */ }