diff --git a/design-systems/airtable/components.html b/design-systems/airtable/components.html new file mode 100644 index 000000000..27e31c4fa --- /dev/null +++ b/design-systems/airtable/components.html @@ -0,0 +1,489 @@ + + + + + + Airtable — reference components + + + + + +
+
+
+
+

Reference fixture · airtable

+

+ Build the apps your team needs — without writing code. +

+

+ Turn any workflow into a custom app. Airtable connects your data, + your processes, and your people in a single workspace that scales + from a side project to enterprise-wide. +

+
+ + Start building free + + + Watch the demo +
+

+ Trusted by 500,000+ organizations · No credit card required +

+
+ +
+
+ +
+
+

One workspace, every workflow

+

+ Bring data, automations, and interfaces together. +

+

+ Configure once, deploy everywhere. Every base, app, and automation + stays in sync — across teams, devices, and stakeholders. +

+
+
+
+ +

Flexible bases

+

+ Spreadsheets meet databases. Color-code records, link tables, + and surface the views each teammate actually needs. +

+ Explore bases → +
+
+ +

Automations that run themselves

+

+ Trigger on a status change, a form submit, or a scheduled hour. + Connect Slack, Gmail, and 50+ apps without writing a line of code. +

+ See automations → +
+
+ +

Interfaces for every role

+

+ Wrap any base in a tailored interface — dashboards for execs, + forms for contractors, kanbans for project leads. One source of truth. +

+ Build an interface → +
+
+
+ +
+
+
+

Get started in 90 seconds

+

Spin up your first base.

+

+ Drop in your work email and we'll send a starter base template, + the API quick-start, and a 14-day Pro trial — no credit card needed. +

+
    +
  • + + Unlimited bases on the free plan +
    • +
  • + + Native integrations with Slack, Gmail, Jira +
    • +
  • + + SOC 2 Type II, HIPAA-ready on Enterprise +
    • +
+
+
+
+ + +

We'll send the starter base and API keys to this address.

+
+
+ + +

Helps us recommend the right plan and templates.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/airtable/tokens.css b/design-systems/airtable/tokens.css new file mode 100644 index 000000000..73cc73862 --- /dev/null +++ b/design-systems/airtable/tokens.css @@ -0,0 +1,261 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/airtable/tokens.css + * + * Structured token bindings for "Design System Inspired by Airtable" — + * the spreadsheet-database hybrid that talks to enterprise without + * shouting. A white canvas with deep-navy text, Airtable Blue as the + * single chromatic accent, Haas Swiss-precision typography, and a + * signature blue-tinted multi-layer shadow that makes cards feel + * built into the page rather than dropped onto it. + * + * Brand-specific schema decisions (each one bends a schema convention + * to match Airtable's voice rather than the cross-brand default): + * + * 1. `--accent` is Airtable Blue (#1b61c9), not deep navy. Deep + * navy is already `--fg`; the brand expresses primary CTAs by + * using `--accent` as the button background and reserves + * navy-on-white for headlines and body. `--accent-hover` binds + * to the documented "Mid Blue" #254fad rather than a generic + * color-mix darken — Airtable explicitly differentiates the + * hover tier as a discrete brand tone, not a calculated shade. + * + * 2. `--fg` is `#181d26` (Deep Navy), not `#000000`. The faint + * blue undertone at the top of the neutral ramp is part of the + * brand — pure black would clash with Airtable Blue and make + * the page read as harsh against the white canvas. `--fg-2` + * drops to `#333333` (documented Dark Gray) for body + * description; `--muted` binds to the documented Weak Text + * `rgba(4, 14, 32, 0.69)` so cross-brand `var(--muted)` calls + * land on Airtable's actual semitransparent navy tier instead + * of a flat gray. + * + * 3. `--surface-warm` aliases to `--surface` because Airtable has + * no warm tier — the canvas is white and the lifted surface is + * the documented `#f8fafc` light-surface, both cool. Adding a + * warm sibling would invent a tone the brand does not use. + * + * 4. `--elev-raised` is the full multi-layer Airtable shadow stack + * reproduced VERBATIM from DESIGN.md §6: a 1px dark hairline, a + * 2px ambient, a 3px blue-tinted (rgba(45,127,249,0.28)) + * "Airtable glow" at 1px y-offset, and a 0.5px inner ring. The + * blue tint is the brand signature — it makes cards feel + * authored by the same hand as the Airtable Blue CTAs, instead + * of a generic gray-shadow drop. Never drop the third layer + * when overriding this token. + * + * 5. Radius scale binds 12 / 16 / 24 / 9999 (sm / md / lg / pill) + * per DESIGN.md §5. Buttons sit at 12px (documented), cards at + * 16px, large feature containers at 24px. The 2px "sharp" + * cookie-consent radius is component-specific and inlined + * where needed, not promoted to the schema. The 32px "large" + * radius is also section-specific; binding it to `--radius-lg` + * would over-round the typical card surface. + * + * 6. `--leading-body` is 1.35 (DESIGN.md body 18px / 24px), not + * the schema-conventional 1.5. Airtable runs body copy at a + * slightly tighter rhythm so dense product UI (table rows, + * record cards) does not feel sparse. `--leading-tight` is 1.2 + * for headings, matching the documented 1.15–1.25 band. + * + * 7. `--tracking-display` is `0` (normal), not negative. DESIGN.md + * §3 explicitly lists display headings as `letter-spacing: + * normal` and body text as POSITIVE tracking (0.08–0.28px). + * The Haas family is engineered for positive tracking; mapping + * display to a negative em would fight the typeface. Body-tier + * positive tracking is applied at the component level (button, + * caption) since `--tracking-display` only covers display sizes. + * + * 8. `--success` is `#006400` (documented `--theme_success-text`), + * a darker forest green than the schema's #16a34a. Airtable's + * semantic green is intentionally deeper so it reads as a + * "confirmed / saved" tone against the white canvas rather + * than a vibrant alert. + * + * 9. Section rhythm is 96 / 64 / 48 (desktop / tablet / phone). + * DESIGN.md does not pin section padding numerically but the + * site's airy enterprise voice asks for generous vertical + * space — this matches the documented 8px-base spacing scale + * (96 = 12 × 8) without inventing a new tier. Container caps + * at 1200px, consistent with Airtable's documented + * 425–1664px responsive band centered on a desktop sweet spot. + * + * Source contracts: + * - Standard token names: design-systems/_schema/tokens.schema.ts + * - A2 fallback parity: design-systems/_schema/defaults.css + * - Lint enforcement: apps/daemon/src/lint-artifact.ts + * + * Keep this file additive: never invent token names not also + * documented in DESIGN.md or the schema. The Haas family does not + * need a CDN reference here — the font stack lists OS fallbacks + * (`-apple-system, system-ui, Segoe UI, Roboto`) per DESIGN.md §3 + * so artifacts render acceptably even when Haas is not loaded. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * White canvas, white lifted card. Airtable explicitly does not + * vary background between sections — depth comes from the + * blue-tinted shadow stack, not from tinting one surface against + * another. `--surface-warm` aliases to surface because the brand + * has no warm tier (DESIGN.md §2 lists only cool neutrals). */ + --bg: #ffffff; /* primary canvas */ + --surface: #ffffff; /* card / lifted container */ + --surface-warm: var(--surface); /* alias — Airtable has no warm tier */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Deep Navy → Dark Gray → Weak Text (semitransparent navy) → + * tertiary alias. The four-tier ramp matches DESIGN.md §2 + §6 + * exactly: `#181d26` headings, `#333333` body, the documented + * `rgba(4, 14, 32, 0.69)` weak tier for captions, and `--meta` + * aliasing to muted because Airtable does not differentiate a + * fourth tertiary tone. */ + --fg: #181d26; /* Deep Navy — primary text */ + --fg-2: #333333; /* Dark Gray — secondary text / body */ + --muted: rgba(4, 14, 32, 0.69); /* Weak Text — captions, meta */ + --meta: var(--muted); /* alias — no distinct tertiary tier */ + + /* ─── Border ────────────────────────────────────────────────────── + * `#e0e2e6` is the documented card-border tone from DESIGN.md §4. + * `--border-soft` drops to a lighter `#eef0f3` for inner row + * separators (table rows, list dividers) that must not visually + * compete with the outer card edge. */ + --border: #e0e2e6; /* card / input edge */ + --border-soft: #eef0f3; /* inner row separator */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Airtable Blue — the single chromatic accent across the brand. + * Used for primary CTAs, links, focus rings, and active-state + * highlights. Hard cap of ≤2 visible uses per screen (lint + * enforced); decorative blue is forbidden because the brand reads + * the accent as "this is the action". + * + * `--accent-hover` binds to the documented "Mid Blue" #254fad + * rather than a generic color-mix darken — Airtable explicitly + * differentiates the hover tier as a discrete brand tone. */ + --accent: #1b61c9; /* Airtable Blue — CTA, links */ + --accent-on: #ffffff; /* white label on blue */ + --accent-hover: #254fad; /* Mid Blue — documented hover tone */ + --accent-active: color-mix(in oklab, var(--accent), black 14%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * `--success` is the documented `--theme_success-text` (#006400), + * a deeper forest green than the schema's #16a34a — Airtable's + * green reads as "confirmed / saved" against white, not as a + * vivid alert. Warn / danger inherit schema defaults because the + * brand has no defined yellow / red. */ + --success: #006400; /* documented Success Green */ + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Haas (display + Groot Disp variant) is Airtable's proprietary + * Swiss family. The OS fallbacks `-apple-system, system-ui, + * Segoe UI, Roboto` are documented in DESIGN.md §3 and ensure + * artifacts render legibly when Haas is not loaded. The Groot + * Disp variant carries display headings; Haas regular carries + * body and UI. */ + --font-display: "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; + --font-body: Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — derived from DESIGN.md §3 hierarchy. The scale + * tops out at 48px (display hero); Airtable reads as "sophisticated + * simplicity" because hierarchy comes from weight + tracking + * variation within the Haas family, not from inflated px counts. */ + --text-xs: 12px; /* metadata, tags */ + --text-sm: 14px; /* caption, small UI */ + --text-base: 16px; /* body medium, button */ + --text-lg: 20px; /* feature copy */ + --text-xl: 24px; /* card title */ + --text-2xl: 32px; /* sub-heading */ + --text-3xl: 40px; /* section heading */ + --text-4xl: 48px; /* display hero */ + + /* `--leading-body` is 1.35 (DESIGN.md body 18px / 24px), not 1.5. + * Dense product UI (table rows, record cards) needs the tighter + * rhythm so rows do not feel sparse. `--leading-tight` is 1.2 + * for headings, matching the documented 1.15–1.25 band. + * `--tracking-display` is `0` because DESIGN.md §3 explicitly + * lists display headings as `letter-spacing: normal`; positive + * body tracking (0.08–0.28px) is applied per-component. */ + --leading-body: 1.35; + --leading-tight: 1.2; + --tracking-display: 0; + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit per DESIGN.md §5 (1–48px range). The 4/8/12/16/ + * 20/24/32/48 tier covers structural rhythm; finer sub-tier + * increments (1–3px micro-padding inside chips and badges) are + * inlined per-component because they are too granular for the + * shared schema. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* Section rhythm — Airtable's enterprise voice asks for generous + * vertical space between marketing sections without going gallery- + * empty. 96 desktop / 64 tablet / 48 phone matches the 8px base + * (96 = 12 × 8) and stays within the documented responsive band. */ + --section-y-desktop: 96px; + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * DESIGN.md §5 radius scale: 2 / 12 / 16 / 24 / 32 / 50%. We bind + * the four schema tiers to: 12 (button/input, documented), 16 + * (card, documented), 24 (large feature container, documented), + * 9999 (pill). The 2px "sharp" cookie-consent radius is + * component-specific and inlined where it appears; the 32px + * section radius would over-round typical surfaces and is + * intentionally not bound here. */ + --radius-sm: 12px; /* buttons, inputs, chips */ + --radius-md: 16px; /* cards, modals */ + --radius-lg: 24px; /* featured containers */ + --radius-pill: 9999px; /* badges, avatars */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Airtable's signature: blue-tinted multi-layer shadow that makes + * cards feel authored by the same hand as the Airtable Blue CTAs. + * Four layers reproduced verbatim from DESIGN.md §6: + * 1px dark hairline (defines the edge) + * 2px ambient (soft surround) + * 3px blue glow @ 1y (the Airtable signature — never drop) + * 0.5px inset ring (subtle inner highlight) */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: + 0 0 1px rgba(0, 0, 0, 0.32), + 0 0 2px rgba(0, 0, 0, 0.08), + 0 1px 3px rgba(45, 127, 249, 0.28), + inset 0 0 0 0.5px rgba(0, 0, 0, 0.06); + + /* ─── Focus ring ────────────────────────────────────────────────── + * 3px Airtable-Blue alpha glow — keyboard focus reads as + * "actionable" without competing with the saturated CTA fill. + * Matches schema default formula so cross-brand focus styles + * remain visually consistent. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard durations + curve. Airtable's product UI uses motion + * to confirm direct manipulation (cell edits, drag-and-drop), + * not to choreograph entrances — 150/200ms feels responsive + * without dragging. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1200px max content width — sits in the middle of Airtable's + * documented 425–1664px responsive band. Gutters narrow on + * mobile to preserve line length on dense marketing copy. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/bmw/components.html b/design-systems/bmw/components.html new file mode 100644 index 000000000..b9567c72a --- /dev/null +++ b/design-systems/bmw/components.html @@ -0,0 +1,551 @@ + + + + + + BMW — reference components + + + + + + +
+
+
+
+

Reference fixture · bmw

+

Sheer driving pleasure.

+

+ The Ultimate Driving Machine, rendered as a design system. + White-and-dark showroom rhythm, BMW Blue for the moments that + matter, and every corner cut sharp at exactly ninety degrees. +

+
+ + View tokens + + + Read the spec +
+
+ +
+
+
+ + +
+
+
+

Engineering principles

+

Precision is a discipline, not a finish.

+

+ Every token below maps to a deliberate BMW decision — sharp + corners, weight extremes, and a single chromatic move. +

+
+
+
+ 01 +

Zero radius, everywhere.

+

+ --radius-sm, --radius-md, --radius-lg and --radius-pill all + resolve to 0. Sharp rectangles are the BMW identity; rounded + corners would soften the engineering posture. +

+ + Inspect radius + + +
+
+ 02 +

Weight 300 meets weight 900.

+

+ BMWTypeNextLatin Light whispers at 60px display; weight 900 + shouts in uppercase navigation. The 300↔900 tension is the + signature typographic gesture — nothing lives in between. +

+ + Read the rule + + +
+
+ 03 +

BMW Blue, sparingly applied.

+

+ #1c69d4 lights up only what is interactive — buttons, links, + focus rings. The rest of the page stays in pure white, near + black, and the cinematic dark of the hero band. +

+ + Inspect accent + + +
+
+
+
+ + +
+
+
+
+

Configurator

+

Book a test drive.

+

+ Inputs in the BMW system carry the same rules as everything + else — sharp 0-radius corners, hairline borders, and a focus + ring drawn in BMW Focus Blue (#0653b6). +

+ + + Dealer network online + +
+
+
+ + +
+
+ + +

Your local dealer will reply within one business day.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/bmw/tokens.css b/design-systems/bmw/tokens.css new file mode 100644 index 000000000..a3f317831 --- /dev/null +++ b/design-systems/bmw/tokens.css @@ -0,0 +1,179 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/bmw/tokens.css + * + * Structured token bindings for "Design System Inspired by BMW". + * German automotive precision: white-and-dark cinematic rhythm, + * BMW Blue as singular interactive accent, zero border-radius, + * BMWTypeNextLatin Light at 60px uppercase as the signature gesture. + * + * Key brand decisions encoded here: + * - Pure White (#ffffff) canvas + cinematic dark hero sections + * - BMW Blue (#1c69d4) — singular accent, used only for interactive elements + * - BMW Focus Blue (#0653b6) — the documented darker tone, bound to + * --accent-hover and reused inside --focus-ring + * - Zero border-radius EVERYWHERE — including --radius-pill (DESIGN.md §5) + * - BMWTypeNextLatin Light (300) for uppercase display — whispered authority + * - Weight extremes only (300, 400, 700, 900) — never 500–600 + * - Tight line-heights throughout (body 1.15, display 1.30) + * - No shadows — depth comes from dark/light section contrast + * + * Contract sources: + * - Standard token names: design-systems/_schema/tokens.schema.ts + * - A2 fallback values: design-systems/_schema/defaults.css + * - Brand source of truth: design-systems/bmw/DESIGN.md + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Pure white is the BMW canvas. Content sections are flat white; the + * dramatic depth in BMW pages comes from alternating with full-bleed + * dark photography bands, NOT from an internal surface ladder. We + * bind --surface to a near-white (#f5f5f5) for cards/inputs that need + * the faintest separation from page background without competing + * with the showroom rhythm. --surface-warm aliases — BMW has no + * warm tier; the identity is cool industrial. */ + --bg: #ffffff; + --surface: #f5f5f5; + --surface-warm: var(--surface); + + /* ─── Foreground ────────────────────────────────────────────────── + * Near Black (#262626) is slightly warmer than pure #000 — gives the + * body reading texture BMW favors on white. Meta Gray (#757575) is + * BMW's own documented `--site-context-metainfo-color`. Silver + * (#bbbbbb) marks the most restrained tier (footer links, dividers). + * --fg-2 aliases to --fg — BMW jumps from primary to meta with no + * intermediate secondary-heading tier (the leap is part of the + * stark voice). */ + --fg: #262626; + --fg-2: var(--fg); + --muted: #757575; + --meta: #bbbbbb; + + /* ─── Border ────────────────────────────────────────────────────── + * Subtle gray hairlines on light surfaces. BMW pages have minimal + * borders — depth and definition are carried by photography and + * dark/light contrast, not edge-work. --border-soft aliases — no + * inner-row separator distinction is needed. */ + --border: #e0e0e0; + --border-soft: var(--border); + + /* ─── Accent ────────────────────────────────────────────────────── + * BMW Blue (#1c69d4) — the system's only persistent chromatic move + * (DESIGN.md §2: `--site-context-highlight-color`). Used exclusively + * for interactive elements (CTAs, links, focus signals). Never as a + * background fill or decorative element. + * + * --accent-hover binds to BMW Focus Blue (#0653b6) — the documented + * `--site-context-focus-color` — so primary buttons darken to the + * brand-canonical "pressed" tone on hover rather than mixing toward + * black. --accent-active darkens further with the schema formula. */ + --accent: #1c69d4; + --accent-on: #ffffff; + --accent-hover: #0653b6; + --accent-active: color-mix(in oklab, var(--accent), black 18%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * BMW DESIGN.md documents no brand-specific semantic palette — the + * page relies on automotive photography and BMW Blue for signal. + * Schema defaults preserved; should occupy <5% of any surface. */ + --success: #16a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * BMWTypeNextLatin Light (weight 300) for display, BMWTypeNextLatin + * for body. Fallback chain from DESIGN.md §3 — includes Japanese + * fonts (Hiragino, Meiryo) reflecting BMW's global market presence. + * Single typeface family at extreme weights (300 vs 900) is the + * signature typographic tension. */ + --font-display: "BMWTypeNextLatin Light", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; + --font-body: BMWTypeNextLatin, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3. 60px display is the defining BMW + * gesture (uppercase, weight 300). 18px navigation tier sits + * between body baseline (16) and section heading (32) — it's the + * weight 900 nav-emphasis size that creates the 300↔900 contrast. */ + --text-xs: 12px; + --text-sm: 14px; + --text-base: 16px; + --text-lg: 18px; + --text-xl: 24px; + --text-2xl: 32px; + --text-3xl: 44px; + --text-4xl: 60px; + + /* Leading inverts the usual web convention here: body is tighter + * (1.15) than display (1.30). DESIGN.md §3 — "Tight everything, + * German engineering"; no line in the system breathes loose. */ + --leading-body: 1.15; + --leading-tight: 1.30; + --tracking-display: 0; + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit. DESIGN.md §5 documents the full BMW scale (1, 5, 8, + * 10, 12, 15, 16, 20, 24, 30, 32, 40, 45, 56, 60); mapped to the + * schema's 4-8-12-16-20-24-32-48 tier where each tier aligns. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* ─── Section rhythm ────────────────────────────────────────────── + * Showroom pacing — generous vertical envelope so each content band + * feels spotlit between dark hero sections. Sized above the schema + * default of 80px to honor BMW's premium breathing room. */ + --section-y-desktop: 96px; + --section-y-tablet: 64px; + --section-y-phone: 40px; + + /* ─── Radius ────────────────────────────────────────────────────── + * ZERO border-radius — non-negotiable BMW identity. DESIGN.md §5: + * "BMW uses sharp corners exclusively — every element is a precise + * rectangle. This is the most angular design system analyzed." + * --radius-pill is also bound to 0 to honor the rule literally; + * components needing circular dots use `border-radius: 50%` inline + * at the call site rather than borrow the (square) pill token. */ + --radius-sm: 0; + --radius-md: 0; + --radius-lg: 0; + --radius-pill: 0; + + /* ─── Elevation ─────────────────────────────────────────────────── + * No shadows. DESIGN.md §6 — "BMW uses virtually no shadows. Depth + * is created entirely through the contrast between dark photographic + * sections and white content sections." --elev-raised collapses to + * `none`; --elev-ring stays available for input outlines and dense + * configurator surfaces where hairline containment is still useful. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: none; + + /* ─── Focus ring ────────────────────────────────────────────────── + * Sharp 2px solid ring at BMW Focus Blue (--accent-hover = #0653b6). + * No transparency, no glow — engineered precision instead of the + * schema's soft accent-tinted halo. */ + --focus-ring: 0 0 0 2px var(--accent-hover); + + /* ─── Motion ────────────────────────────────────────────────────── + * Brisk, deliberate transitions. BMW's motion expresses precision, + * not personality; schema defaults match the voice unchanged. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1440px content max — fits BMW's wide-format layouts and the + * "Large Desktop 1280–1440" breakpoint from DESIGN.md §8. Full-bleed + * automotive photography extends beyond this; the container + * constrains text columns only. Gutters step generously + * (32 → 24 → 16) to keep the showroom margin even at mobile. */ + --container-max: 1440px; + --container-gutter-desktop: 32px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/nike/components.html b/design-systems/nike/components.html new file mode 100644 index 000000000..d4ab65fc7 --- /dev/null +++ b/design-systems/nike/components.html @@ -0,0 +1,512 @@ + + + + + + Nike — reference components + + + + + +
+ Free shipping for members. Join us. +
+ +
+
+
+
+
+ +

Reference fixture · nike

+
+

Just keep going.

+

+ Built for the ones who don't quit. From dawn miles to sold-out + stadiums, every stitch earns its place — and every pixel of + this page is here to sell sport, nothing else. +

+
+ + Shop new arrivals + + + Read the spec +
+
+ +
+
+ +
+
+

What this fixture exercises

+

Restraint as an athletic discipline.

+
+
+
+

Monochrome on purpose

+

+ --bg (#ffffff) → --surface (#f5f5f5) → --fg (#111111). + The UI carries no color so product photography can. Red, green, + blue are reserved for semantic moments only. +

+ Inspect tokens → +
+
+

Display type that punches

+

+ Nike Futura ND at 96px / 0.90 line-height, uppercase, tightened + tracking. A typographic shockwave reserved exclusively for the + hero — never below 24px. +

+ Read the rule → +
+
+

Pills, no shadows

+

+ --radius-pill is bound to 30px (the literal Nike value, not + 9999). --elev-raised collapses onto --elev-ring because the + brand refuses card shadows outright. +

+ Inspect radius → +
+
+
+ +
+
+
+

Become a member

+

Free shipping. First access. No nonsense.

+

+ Members hear about drops first, get free shipping on every order, + and unlock the Nike Run Club / Training Club apps. One account, + every sport. +

+
+
+
+ + +

We'll send membership perks. No marketing noise.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/nike/tokens.css b/design-systems/nike/tokens.css new file mode 100644 index 000000000..7fc4dec6d --- /dev/null +++ b/design-systems/nike/tokens.css @@ -0,0 +1,304 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/nike/tokens.css + * + * Structured token bindings for "Design System Inspired by Nike" — + * the kinetic retail cathedral. A monochromatic UI (black/white/grey + * only) so that athletic photography and product color carry the + * emotional weight, with massive uppercase Nike Futura ND display + * typography that punches through hero imagery like a typographic + * shockwave. This file is the *machine-readable* form of the values + * described in `DESIGN.md`. Agents paste the `:root { … }` block + * verbatim into the first ` + + +
+ + +
+
+
+

Reference fixture · pinterest

+

Find the next thing you love.

+

+ A warm-canvas token system distilled from Pinterest's 2026 brand — + Pin Sans across the entire hierarchy, olive/sand neutrals that + feel handcrafted, and Pinterest Red used once per screen as the + only confident accent. The masonry below uses the same + :root + block agents paste into every artifact. +

+
+ + Explore tokens + + + Read the brand + +
+
+ + + 56 tokens passing schema + + + Press ⌘ K to jump to the token grep. + +
+
+ + +
+
+ +
+
+

What the fixture exercises

+

Three pins, one Pinterest Red, no cool grays.

+

+ Every visible value resolves through + var(--*). + The masonry offsets, the warm card surface, the 16px button radius, + the plum-tinted whisper shadow on hover — all driven by the same + paste block above. +

+
+ +
+
+
+ + Warmth as a system +
+
+

Olive & sand neutrals

+

+ Surface, border, and meta colors all lean warm. The page never + feels clinical — even the disabled state carries an olive + undertone. +

+
+ + Inspect the neutrals +
+
+
+ +
+
+ + Pin Sans, end to end +
+
+

One font, twelve to seventy

+

+ Pin Sans handles every label — 12px caption, 16px body, 70px + hero. No secondary display family, no monospace beyond + ⌘ hints. +

+
+ + Read the rule +
+
+
+ +
+
+ + Generous geometry +
+
+

12, 16, 28 — never pill on text

+

+ Buttons land at 16px, pin cards at 28px, chips at 12px. Pinterest's + soft geometry sits between sharp and pill — friendly, never + corporate. +

+
+ + Inspect the radii +
+
+
+
+
+ +
+
+
+

Form components

+

Save ideas to your private board.

+

+ Inputs sit on the white canvas with a 1px Warm Silver edge and + the brand's 16px button radius. Focus rings switch to Focus Blue + so they survive both the warm secondary surface and the red CTA — + an accent-tinted ring would vanish into Pinterest Red. +

+

+ Full reference at tokens.css · + brand at DESIGN.md. +

+
+ +
+
+ + +

+ We’ll send a single weekly idea digest — never more. +

+
+
+ + +
+
+ + +
+
+ + + Private board + + No one sees this but you. +
+
+
+
+
+ + diff --git a/design-systems/pinterest/tokens.css b/design-systems/pinterest/tokens.css new file mode 100644 index 000000000..7497e5cc5 --- /dev/null +++ b/design-systems/pinterest/tokens.css @@ -0,0 +1,262 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/pinterest/tokens.css + * + * Structured token bindings for "Design System Inspired by Pinterest". + * Warm visual-discovery canvas: olive/sand neutrals, signature Pinterest + * Red (#e60023) as the singular bold accent, Pin Sans across the entire + * type hierarchy, generous 12–28px radii, and minimal shadow because + * the photography is the elevation. + * + * This file pre-compiles the values described in `DESIGN.md` into the + * schema shared with every OD design system. Agents should paste the + * `:root { … }` block verbatim into the first ` + + +
+
+
+
+

Reference fixture · playstation

+

Play has no limits.

+

+ From masthead to footer, PlayStation moves like a console powering on — + quiet-weight SST headlines lead the eye, and every primary button + scales 1.2× into PlayStation Cyan on hover. +

+
+ PS5 + PS4 + PSVR2 +
+
+ + Enter the system + + + Read the spec +
+
+ +
+
+ +
+
+

What this fixture exercises

+

Three surfaces. One vertical channel.

+
+
+
+

Quiet-authority headlines

+

+ SST weight 300 from 22 to 54px — the typographic + signature that lets product photography lead while + the chrome stays restrained. +

+ Inspect tokens → +
+
+

Cyan power-on hover

+

+ Hover any primary button: fill snaps to PlayStation + Cyan, a 2px white border appears, a blue ring blooms, + and the button scales 1.2× — all in 180ms. +

+ Read the rule → +
+
+

Eleven-radius system

+

+ 3px on inputs, 12px on covers, 24px on hero cards, + 999px on pill CTAs. Square corners are forbidden — + every surface lands on a declared tier. +

+ Inspect radius → +
+
+
+ +
+
+
+

Form components

+

Inputs in the Paper White panel.

+

+ Input borders sit at 1px Mute Gray with a 3px radius — + tighter than the rest of the system. The focus indicator + is a 2px PlayStation Blue ring; no border-color change. +

+
+
+
+ + +

We'll pair this with your console on first sign-in.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/playstation/tokens.css b/design-systems/playstation/tokens.css new file mode 100644 index 000000000..06a697d9d --- /dev/null +++ b/design-systems/playstation/tokens.css @@ -0,0 +1,150 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/playstation/tokens.css + * + * Structured token bindings for "Design System Inspired by PlayStation". + * Console-grade retail: a three-surface channel (black hero → white content + * → cobalt footer), SST weight 300 at display sizes, and a signature + * 1.2× scale-on-hover that fires across the page like a power-on chime. + * + * Key brand decisions encoded here: + * - Console Black (#000000) is the dominant brand canvas; Paper White + * is the lifted --surface tier where editorial content lives + * - PlayStation Blue (#0070cc) is the immovable anchor — primary CTAs, + * focus ring, footer + * - PlayStation Cyan (#1eaedb) lives only in --accent-hover — the + * "cyan never appears at rest" rule encoded into the token layer + * - SST weight 300 at 22–54px is the typographic voice (component layer + * enforces the weight; tokens carry sizes) + * - 180ms is the canonical interaction window for hover/focus/scale + * - Eleven-radius system collapsed onto the schema spine: 6/12/24/999 + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Three-surface channel. Console Black anchors the masthead and hero + * zones; Paper White is the editorial gallery panel; Ice Mist is the + * gradient end-stop that quietly lifts panels off pure white. */ + --bg: #000000; /* Console Black — masthead / hero canvas */ + --surface: #ffffff; /* Paper White — primary content panel */ + --surface-warm: #f5f7fa; /* Ice Mist — atmospheric panel lift */ + + /* ─── Foreground ────────────────────────────────────────────────── + * On Console Black the primary text is Inverse White. Body Gray + * (#6b6b6b) is reserved for white-panel context (set at component + * layer); Mute Gray (#cccccc) is the muted tier visible on dark. */ + --fg: #ffffff; /* Inverse White — text on dark canvas */ + --fg-2: var(--fg); /* alias — single display weight throughout */ + --muted: #cccccc; /* Mute Gray — tertiary labels on dark */ + --meta: var(--muted); /* alias — one muted tier */ + + /* ─── Border ────────────────────────────────────────────────────── + * Borders sit quiet — the brand prefers spacing and feather shadow to + * define edges. #cccccc matches the input border spec from DESIGN.md + * §Inputs; Divider Tint is the editorial row separator. */ + --border: #cccccc; /* Mute Gray — input edges, default rule */ + --border-soft: #f3f3f3; /* Divider Tint — quiet horizontal rule */ + + /* ─── Accent ────────────────────────────────────────────────────── + * PlayStation Blue is the immovable anchor. PlayStation Cyan lives + * exclusively in --accent-hover — never as a resting background. + * Active state lands on Dark Link Blue. */ + --accent: #0070cc; /* PlayStation Blue — primary CTA / anchor */ + --accent-on: #ffffff; + --accent-hover: #1eaedb; /* PlayStation Cyan — hover/focus only */ + --accent-active: #0068bd; /* Dark Link Blue — pressed state */ + + /* ─── Semantic ──────────────────────────────────────────────────── + * Warning Red is the only semantic color the brand declares. Success + * and warn ride the schema defaults — PlayStation reserves its warm + * palette for Commerce Orange, not for semantic green/yellow. */ + --success: #16a34a; + --warn: #eab308; + --danger: #c81b3a; /* Warning Red — form errors */ + + /* ─── Typography ────────────────────────────────────────────────── + * SST is Sony's proprietary global typeface. Fallback chain: + * Arial → Helvetica → system sans. The weight 300 voice is enforced + * at the component layer — type tokens carry sizes, not weights. */ + --font-display: "SST", "Playstation SST", Arial, Helvetica, sans-serif; + --font-body: "SST", "Playstation SST", Arial, Helvetica, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3 Typography. + * 54px hero → 12px legal microcopy. SST weight 300 occupies 22–54px; + * body lives at 18px; mini CTAs and captions at 14px. */ + --text-xs: 12px; /* Micro Caption — footer / legal */ + --text-sm: 14px; /* Caption Body / Mini CTA */ + --text-base: 18px; /* Body Relaxed — standard reading */ + --text-lg: 22px; /* Compact Display — module titles */ + --text-xl: 28px; /* Mid Display — section headings */ + --text-2xl: 35px; /* Large Display — feature headlines */ + --text-3xl: 44px; /* Hero Display L — secondary hero */ + --text-4xl: 54px; /* Hero Display XL — biggest SST moment */ + + --leading-body: 1.5; /* Body Relaxed — 1.5 throughout reading */ + --leading-tight: 1.25; /* Display rhythm — 1.25 on 22–54px */ + --tracking-display: -0.1px; /* 54px hero — barely-there tightening */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit per DESIGN.md §5. Component-level micro-scale (3/6/ + * 9/10px) lives inside individual rules; the section-y tokens below + * carry the gallery rhythm. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* Section rhythm — gallery pace. DESIGN.md collapsing strategy: + * 96px → 64px → 48px as the viewport narrows. */ + --section-y-desktop: 96px; + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Eleven-value radius system collapsed onto the schema spine: + * 6px → compact buttons / inline images + * 12px → standard game cover images & content media + * 24px → hero cards, primary feature frames + * 999px → full-pill primary buttons (the CTA signature) + * Inputs override --radius-sm with their own 3px at component layer. */ + --radius-sm: 6px; + --radius-md: 12px; + --radius-lg: 24px; + --radius-pill: 999px; + + /* ─── Elevation ─────────────────────────────────────────────────── + * Whisper-or-shout ladder per DESIGN.md §6: shadow opacity lands on + * 0.06 / 0.08 / 0.16 / 0.8 with no middle ground. --elev-raised + * holds the standard 0.08 grid-tile feather. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: rgba(0, 0, 0, 0.08) 0 5px 9px 0; /* Feather tile lift */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * 2px PlayStation Blue ring — the exact spec from DESIGN.md §Inputs + * and §Buttons. Brand blue does focus; cyan does hover; the two + * never overlap at rest. */ + --focus-ring: 0 0 0 2px #0070cc; + + /* ─── Motion ────────────────────────────────────────────────────── + * 180ms is the canonical PlayStation interaction window — every + * hover / focus / scale transition lands here. The brand's "power- + * on" feel comes from synchronizing four properties at 180ms, not + * from a longer duration. */ + --motion-fast: 180ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1600px container — PlayStation explicitly tunes through 4K-TV + * browsing contexts (breakpoints reach 2120px). Outer gutters follow + * DESIGN.md §5: 64/32/16 from desktop to phone. */ + --container-max: 1600px; + --container-gutter-desktop: 64px; + --container-gutter-tablet: 32px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/spacex/components.html b/design-systems/spacex/components.html new file mode 100644 index 000000000..d3eee320d --- /dev/null +++ b/design-systems/spacex/components.html @@ -0,0 +1,496 @@ + + + + + + SpaceX — reference components + + + + + +
+
+
+

SpaceX · Mission 2026

+

Making life multi‑planetary.

+

+ From low‑Earth orbit to the surface of Mars — we build the + rockets, the spacecraft, and the operating cadence that turn + humanity into a multi‑planet species. +

+
+ + Learn more + + + View the spec +
+ +
+
+
Total Launches
+
438
+
+
+
Total Landings
+
406
+
+
+
Reflights
+
377
+
+
+
Status
+
Nominal
+
+
+
+
+ +
+
+

What this fixture exercises

+

A type system for engineering on the edge of the atmosphere.

+

+ Three principles, no cards, no shadows — text sits directly on the void. +

+
+
+
+

01 / Atmosphere

+

Pure black canvas, full‑viewport imagery.

+

+ --bg (#000000) is the void. There is no card surface, no warm + tier — every section is text on photograph, every photograph + is one cinematic frame. +

+ Inspect surface tokens +
+
+

02 / Voice

+

Universal uppercase, positive tracking.

+

+ D‑DIN at 0.02em (= 0.96px at 48px). Every label, every + counter, every CTA is stenciled like a serial number on a + spacecraft hull. +

+ Read the type rules +
+
+

03 / Restraint

+

Zero shadows, one ghost button.

+

+ --elev-raised resolves to none. + Depth comes from the photography. The lone ghost CTA at 32px + radius is the entire interactive surface area. +

+ Inspect elevation +
+
+
+ +
+
+
+

Mission Briefing

+

Receive launch and re‑entry telemetry.

+

+ We’ll send pre‑flight readiness reviews and + post‑landing recovery summaries. Hairline borders only — + no surface fills, no shadows, no cool grays. +

+
+
+
+ + +
+
+ + +

For mission summaries only.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/spacex/tokens.css b/design-systems/spacex/tokens.css new file mode 100644 index 000000000..ebfe697dc --- /dev/null +++ b/design-systems/spacex/tokens.css @@ -0,0 +1,154 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/spacex/tokens.css + * + * Structured token bindings for "Design System Inspired by SpaceX". + * Cinematic aerospace minimalism: pure black canvas, full-viewport + * photography, D-DIN industrial type, universal uppercase + positive + * tracking, zero shadows / cards / decoration. The interface disappears + * behind the imagery — only type, photography, and a single ghost button. + * + * Key brand decisions encoded here: + * - Pure Space Black (#000000) — the void of space; never a soft black + * - Spectral White (#f0f0fa) — slight blue-violet tint that mimics starlight + * - --surface aliases to --bg — SpaceX has NO cards, panels, or containers + * - Ghost border (rgba(240,240,250,0.35)) — only visible interactive edge + * - D-DIN industrial typeface — DIN heritage, stenciled aerospace voice + * - Display tracking 0.02em (= 0.96px at 48px) — DESIGN.md §3 verbatim + * - Tight leading 1.0 — compressed mission-briefing rhythm + * - --elev-raised: none — zero shadows; depth comes from photography + * - --radius-pill: 32px — the ghost button is the SOLE rounded element + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * The void of space. There is no card tier, no warm tier — every + * SpaceX section is text-on-photograph, not text-on-surface. We + * still declare --surface so cross-brand components that paint a + * card still resolve, but it deliberately matches --bg. */ + --bg: #000000; /* Space Black — pure void, the foundation canvas */ + --surface: #000000; /* No card surfaces — content sits directly on the void */ + --surface-warm: var(--surface); /* alias — no warm tier in an achromatic system */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Spectral White, never pure white. The slight blue-violet tint + * mimics starlight on a spacecraft hull and prevents the clinical + * feel of #ffffff against pure black. */ + --fg: #f0f0fa; /* Spectral White — primary text, mission-critical signal */ + --fg-2: var(--fg); /* alias — single text weight throughout the system */ + --muted: rgba(240, 240, 250, 0.7); /* Dimmed spectral — captions, secondary labels */ + --meta: var(--muted); /* alias — tertiary FG identical to muted on dark canvas */ + + /* ─── Border ────────────────────────────────────────────────────── + * The Ghost Border (35% spectral) is the only edge that ever + * appears — on the lone ghost CTA button. Inner separators borrow + * the 10% spectral surface tint so they barely register. */ + --border: rgba(240, 240, 250, 0.35); /* Ghost Border — DESIGN.md §2 verbatim */ + --border-soft: rgba(240, 240, 250, 0.1); /* Inner separators / barely-visible dividers */ + + /* ─── Accent ────────────────────────────────────────────────────── + * SpaceX has no chromatic accent — Spectral White IS the accent. + * Hover lifts to pure white (Hover White / --white-100 in DESIGN.md); + * active gently dims. The full ghost-button affordance is + * implemented in components, not in the accent token. */ + --accent: #f0f0fa; /* Spectral White stands in for any brand accent */ + --accent-on: #000000; /* Black text when accent is the bg */ + --accent-hover: #ffffff; /* Hover White — pure white per DESIGN.md §2 */ + --accent-active: #d8d8e6; /* Dimmed spectral — pressed state */ + + /* ─── Semantic ──────────────────────────────────────────────────── + * Schema defaults preserved. SpaceX's homepage is purely + * presentational and almost never surfaces semantic state, but the + * tokens must resolve when shared components reference them. */ + --success: #16a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * D-DIN — industrial geometric, German DIN heritage. Two weights + * only: 700 (Bold) for display + nav emphasis, 400 for body. + * Fallbacks per DESIGN.md §3: Arial, Verdana. */ + --font-display: "D-DIN-Bold", "D-DIN", "DIN Alternate", "Helvetica Neue", Arial, Verdana, sans-serif; + --font-body: "D-DIN", "DIN Alternate", "Helvetica Neue", Arial, Verdana, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3 anchors: 10px (Micro), 12px (Caption / + * Nav), 16px (Body), 48px (Display Hero). Intermediate tiers + * (20/24/32/40) are interpolated for the few moments a SpaceX-style + * layout needs them; the actual brand uses very few sizes. */ + --text-xs: 10px; /* Micro — uppercase ghost labels */ + --text-sm: 12px; /* Caption / Nav Link — uppercase */ + --text-base: 16px; /* Body — standard reading text */ + --text-lg: 20px; + --text-xl: 24px; + --text-2xl: 32px; + --text-3xl: 40px; + --text-4xl: 48px; /* Display Hero — D-DIN-Bold uppercase, "MISSION" weight */ + + --leading-body: 1.5; /* DESIGN.md says 1.5–1.7 for reading body */ + --leading-tight: 1.0; /* Display / mission-briefing rhythm */ + --tracking-display: 0.02em; /* = 0.96px at 48px — DESIGN.md §3 hero spec verbatim */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit per DESIGN.md §5. Schema-default scale preserved — + * SpaceX's irregular published scale (3/5/12/15/18/20/24/30) is a + * brand-specific rhythm; cross-brand components paint at 4/8/12/16. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* ─── Section rhythm ────────────────────────────────────────────── + * DESIGN.md §5: each section is one full viewport. We can't bind + * "100vh" to padding (it would collapse on short content), so + * section-y is generous to evoke the cinematic single-viewport + * rhythm in fixture renderings. */ + --section-y-desktop: 120px; + --section-y-tablet: 80px; + --section-y-phone: 56px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Sharp 4px on dividers / utility — DESIGN.md §5 "Sharp (4px)". + * --radius-pill rebound to 32px because SpaceX's ghost button IS + * the only rounded element in the system, and "pill" semantically + * maps to that lone interactive surface. */ + --radius-sm: 4px; + --radius-md: 4px; /* No medium tier exists — same as sm */ + --radius-lg: 4px; /* No large tier exists — same as sm */ + --radius-pill: 32px; /* Ghost button radius — the only rounded element */ + + /* ─── Elevation (ZERO shadows) ──────────────────────────────────── + * DESIGN.md §6: "SpaceX uses ZERO shadows." Every surface is + * already a photograph with natural lighting; CSS shadows would + * compete with the cinematic content. --elev-raised resolves to + * `none` so any shared component requesting a raised surface + * silently flattens instead of painting a synthetic drop shadow. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); /* Hairline spectral ring — ghost-button edge */ + --elev-raised: none; /* Zero shadows — photography carries depth */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Solid 2px spectral ring — high contrast on black canvas. No + * blurred glow (consistent with the zero-shadow philosophy). */ + --focus-ring: 0 0 0 2px var(--accent); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard schema durations. SpaceX's drama is in the photography + * and type, not in animated state changes. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1440px container — wide-format layouts honour the cinematic + * full-bleed feel without letting hero copy stretch beyond + * readable on ultra-wide displays. Generous gutters keep the + * "edge-to-edge imagery" feel even at smaller breakpoints. */ + --container-max: 1440px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 20px; + --container-gutter-phone: 18px; +} diff --git a/design-systems/starbucks/components.html b/design-systems/starbucks/components.html new file mode 100644 index 000000000..e2b072231 --- /dev/null +++ b/design-systems/starbucks/components.html @@ -0,0 +1,493 @@ + + + + + + Starbucks — reference components + + + + + +
+
+
+
+

Reference fixture · starbucks

+

More than coffee — your third place, on the house.

+

+ Warm cream canvas, four greens with assigned roles, and the friendly + confidence of SoDoSans. Open the app, find a store, or sit awhile — + every surface is built to feel like the café itself. +

+
+ + Order now + + + Join Rewards + Find a store +
+
+ +
+
+ +
+
+

A system for the café

+

Warmth, mapped to a role — never a single brand green.

+
+
+
+

Four-tier green

+

Starbucks · Accent · House · Uplift

+

+ Each green is mapped to a surface role: Starbucks Green for headings, + Green Accent (#00754A) for CTAs and the Frap, House Green for deep + feature bands and the footer, Uplift for decorative accents. +

+ Inspect tokens → +
+
+

Warm cream canvas

+

Never pure white.

+

+ Neutral Warm (#f2f0eb) and Ceramic (#edebe9) reference café paper, + wood, and ceramic mugs. White is reserved for the card surface so + content reads like a mug placed on the table. +

+ Read the rule → +
+
+

Pill + press

+

Full-pill buttons, scale(0.95) press.

+

+ Every button is a 9999px pill. The active-press tactile rebound + uses transform: scale(0.95) — a signature micro-interaction across + every CTA, including the floating Frap order button. +

+ Inspect motion → +
+
+
+ +
+
+
+
+

Rewards

+

+ Free coffee is just the beginning. +

+

+ Earn a Star for every dollar — redeem for handcrafted drinks, + food, and at-home favorites. Members also unlock birthday treats, + free refills in-café, and exclusive offers. +

+
+ Sign up for free + Learn more +
+
+
+

Your Stars

+

+ 312★ +

+

+ 88 more Stars to your next free handcrafted drink. +

+
+
+
+
+ +
+
+
+

Join Rewards

+

Sit awhile — and earn a Star on the way out.

+

+ No fees, no commitment. Save your favorite drink, skip the line + with mobile order, and let the third place come to you. +

+
+
+
+ + +

We'll send your welcome Star and nothing else.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/starbucks/tokens.css b/design-systems/starbucks/tokens.css new file mode 100644 index 000000000..4975efd94 --- /dev/null +++ b/design-systems/starbucks/tokens.css @@ -0,0 +1,182 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/starbucks/tokens.css + * + * Structured token bindings for "Design System Inspired by Starbucks". + * Warm cream canvas, four-tier green system, full-pill buttons, whisper- + * soft layered shadows, and SoDoSans with universal -0.01em tracking. + * + * Key brand decisions encoded here: + * - Neutral Warm cream (#f2f0eb) as the page canvas — never pure white + * - Green Accent (#00754A) reserved for the primary CTA fill / Frap + * - Text Black at rgba(0, 0, 0, 0.87) to match the warm canvas temperature + * - Whisper-soft dual-shadow card elevation — never one heavy drop + * - Universal -0.01em tracking on SoDoSans across every surface + * - 9999px pill radius — every button is a full pill, no exceptions + * - Measured ease-out (0.25, 0.46, 0.45, 0.94) — the Starbucks expander + * + * No C-extensions: every token in this :root maps to a shared schema slot. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Warm cream canvas: the brand never sits on cold white. Neutral + * Warm references café paper and store wood; Ceramic is the + * slightly warmer/darker step used for zone separators and + * partnership bands. White is reserved for the card surface so + * content cards feel like ceramic mugs on a wood table. */ + --bg: #f2f0eb; /* Neutral Warm — primary page canvas */ + --surface: #ffffff; /* White — content card / modal surface */ + --surface-warm: #edebe9; /* Ceramic — zone separator, warmer tier */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Text Black is 87%-opacity black, never pure #000 — it reads + * warmer on the cream canvas. Rewards Green (--fg-2) is the + * dustier slate-green used only on Rewards-page text blocks: a + * "reward surface" signal without reaching for Starbucks Green. */ + --fg: rgba(0, 0, 0, 0.87); /* Text Black — primary heading + body */ + --fg-2: #33433d; /* Rewards Green — dustier reading tier */ + --muted: rgba(0, 0, 0, 0.58); /* Text Black Soft — secondary / metadata */ + --meta: var(--muted); /* alias — single secondary text tier */ + + /* ─── Border ────────────────────────────────────────────────────── + * Input Border (#d6dbde) is the explicit DESIGN.md value for the + * outlined-rectangle Add-in / Milk / Customize fields. The soft + * tier is the nutrition-table hairline — quiet enough to row- + * separate without competing with the card edge. */ + --border: #d6dbde; /* Input Border — outlined rectangle edge */ + --border-soft: #e7e7e7; /* Nutrition-table row hairline */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Green Accent (#00754A) is the CTA green — the brighter, more + * luminous tier in the four-tier green system. Reserved for the + * primary filled pill CTAs and the Frap floating circular order + * button. Starbucks Green (#006241) is the heading tier and stays + * inline on h1; House Green (#1E3932) is the feature-band / + * footer tier and stays inline at those surfaces. */ + --accent: #00754A; /* Green Accent — primary CTA / Frap fill */ + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Red (#c82014) is the explicit DESIGN.md error / destructive + * value. Yellow (#fbbc05) is the documented warning / legacy brand + * touch. Success has no brand-specific value in DESIGN.md — keep + * the schema default so it does not collide with the four-tier + * green system. */ + --success: #16a34a; + --warn: #fbbc05; /* Yellow — DESIGN.md warning state */ + --danger: #c82014; /* Red — DESIGN.md error / destructive */ + + /* ─── Typography — fonts ────────────────────────────────────────── + * SoDoSans is Starbucks' proprietary corporate typeface (licensed + * from House Industries; not publicly available). Display and body + * share the same stack — the visual identity comes from the + * universal -0.01em / -0.16px tracking, not from typeface mixing. + * Lander Tall (Rewards serif) and Kalam (Careers script) are + * context-specific and intentionally NOT promoted to schema + * slots — they stay inline at their respective surfaces. */ + --font-display: SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-body: SoDoSans, "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* ─── Typography — type scale ───────────────────────────────────── + * DESIGN.md anchors at 1rem = 10px and uses semantic textSize-1 + * through textSize-10. We bind the px values directly so the + * pasted :root works without the 62.5% root font-size trick. + * Hierarchy is carried by weight + color, not by size jumps — + * H1 and H2 share 24px (--text-xl), only weight (600 vs 400) and + * color (Starbucks-Green vs Text Black) separate them. */ + --text-xs: 13px; /* Micro / text-1 — caption */ + --text-sm: 14px; /* Small / text-2 — button, label */ + --text-base: 16px; /* Body / text-3 — default body */ + --text-lg: 19px; /* Body Large — hero intro copy */ + --text-xl: 24px; /* H1 / H2 — shared by weight, not size */ + --text-2xl: 32px; /* sub-heading bridge to hero */ + --text-3xl: 45px; /* Hero Large / text-8 */ + --text-4xl: 58px; /* Jumbo / text-9 — display ceiling */ + + /* ─── Typography — leading & tracking ───────────────────────────── + * Body leading 1.5, display leading 1.2 — the schema-standard + * two-mode rhythm. Tracking sits at -0.01em across the entire + * system: SoDoSans reads slightly compressed, which gives it its + * confident-but-friendly presence without feeling squeezed. */ + --leading-body: 1.5; + --leading-tight: 1.2; + --tracking-display: -0.01em; /* universal — DESIGN.md letterSpacingNormal */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 4px grid. The brand's universal rhythm constant is 16px + * (--space-4) — the default outer gutter, card padding baseline, + * and body text size all share it. The off-grid Starbucks rem + * scale (4 / 8 / 16 / 24 / 32 / 40 / 48 / 56 / 64) maps cleanly + * to this schema with 12px and 20px filling the gaps. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; /* universal rhythm — gutter, card pad, body */ + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* ─── Section rhythm ────────────────────────────────────────────── + * 64px desktop / 48px tablet / 32px phone — generous breathing so + * the cream canvas can carry "plenty of space in the café". The + * brand never uses divider lines between sections; whitespace + * does the work. */ + --section-y-desktop: 64px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Two anchor values define the geometry: 12px on cards / modals + * (--cardBorderRadius), 9999px on every button (--buttonBorderRadius + * is 50px on the brand, but 9999px pills are visually identical at + * any reasonable height). 4px is reserved for outlined-rectangle + * inputs (Add-in / Milk / store availability). 16px stays as the + * larger-container tier for hero-photo frames. */ + --radius-sm: 4px; /* outlined-rectangle inputs */ + --radius-md: 12px; /* cards, modals — --cardBorderRadius */ + --radius-lg: 16px; /* larger containers */ + --radius-pill: 9999px; /* full pill — universal button radius */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Whisper-soft layered shadows. The brand forbids a single heavy + * drop shadow; instead it stacks 2–3 low-alpha shadows with + * different offsets to simulate ambient + direct lighting. The + * --elev-raised value here is the canonical Starbucks card + * --cardBoxShadow (DESIGN.md §6). The Frap floating button gets + * its own stacked shadow inline at the component level. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 0 0.5px 0 rgba(0, 0, 0, 0.14), 0 1px 1px 0 rgba(0, 0, 0, 0.24); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Green-tinted ring built from --accent. DESIGN.md does not + * publish a brand-specific focus treatment, so we keep the + * schema's accent-tinted formula — Green Accent reads cleanly + * against the warm cream canvas and the white card surface. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * 150ms for micro-states (the universal `transform: scale(0.95)` + * pressed-button rebound), 200ms for general state changes + * (DESIGN.md: `all 0.2s ease` on buttons). The standard easing + * curve is the Starbucks Expander cubic-bezier from DESIGN.md + * §4 — a measured ease-out rather than the schema's snappier + * default, giving accordions and disclosures a calm café cadence. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94); + + /* ─── Layout ────────────────────────────────────────────────────── + * Content caps at 1440px (--columnWidthXLarge per DESIGN.md §5). + * Gutters scale progressively: 40px desktop (--outerGutterLarge), + * 24px tablet (--outerGutterMedium), 16px phone (--outerGutter, + * the universal rhythm constant). */ + --container-max: 1440px; + --container-gutter-desktop: 40px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/tesla/components.html b/design-systems/tesla/components.html new file mode 100644 index 000000000..24be56dc3 --- /dev/null +++ b/design-systems/tesla/components.html @@ -0,0 +1,724 @@ + + + + + + Tesla — reference components + + + + + + +
+
+ TESLA + +
+
+ +
+ +
+
+
+
+

Reference fixture · tesla

+

Model Reference

+

+ Accelerating the world's transition to sustainable + energy — distilled into fifty-six tokens, one accent + color, and the white space between every section. +

+
+ Order Now + View Inventory +
+
+ + +
+
+
+ + +
+
+
+

The lineup

+

Three vehicles. One typography stack. Zero shadows.

+
+ +
+ + + + + +
+
+
+ + +
+
+
+
+

Schedule a drive

+

Quiet form. Loud product.

+

+ Inputs inherit the same token block — a hairline Pale + Silver edge, Carbon Dark text, the focus halo at three + pixels of soft Electric Blue. Press + ↵ to confirm; the rest of the page stays + out of the way. +

+
+ Test-drive availability + + + Open + +
+
+ +
+
+ + +

+ We'll only contact you to confirm the appointment. +

+
+
+ + +
+
+
+
+
+
+ + diff --git a/design-systems/tesla/tokens.css b/design-systems/tesla/tokens.css new file mode 100644 index 000000000..90a76ed7f --- /dev/null +++ b/design-systems/tesla/tokens.css @@ -0,0 +1,285 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/tesla/tokens.css + * + * Structured token bindings for "Design System Inspired by Tesla" — + * radical subtraction, full-viewport photography, near-zero UI. This + * file is the *machine-readable* form of the values described in + * `DESIGN.md`. Agents are expected to paste the `:root { … }` block + * verbatim into the first ` + + +
+
+
+
+

Reference fixture · wechat · 微信

+

微信，是一个生活方式。

+

+ WeChat — a way of life. From messages and Moments to Mini Programs, + payments, and official accounts, one app holds the whole day. + 所有功能，皆在微信。 +

+
+ + 立即体验 + + + 了解更多 · Learn more +
+
+ +
+
+ +
+
+

What this fixture exercises · 本示例所演示

+

日常的连接，安静地发生。

+

+ Everyday connection, quietly delivered — chat, pay, scan, share. + Green is the only colour that raises its voice. +

+
+
+
+ +

聊天 · Chat

+

+ 15px 正文配 1.6 行高，#95EC69 outgoing bubbles, #FFFFFF + incoming — the colour pair every WeChat user knows by heart. +

+ 查看气泡规范 → +
+
+ +

小程序 · Mini Programs

+

+ 卡片以 16px 圆角浮于灰底之上，hairline border 替代厚阴影 — + cards float on the chat-list gray with whisper-quiet elevation. +

+ Inspect radius → +
+
+ +

支付 · WeChat Pay

+

+ #07C160 是“完成”的颜色 — green doubles as success because in + WeChat green is paid, done, delivered, confirmed. +

+ Inspect accent → +
+
+
+ +
+
+
+

Form components · 表单组件

+

用微信号登录。

+

+ Sign in with your WeChat ID. Inputs sit on the surface tier, + focus rings inherit the brand green — no cool grays, no + competing accents. 简单、安静、熟悉。 +

+
+
+ 服务状态 · Service + + + 正常 Operational + +
+

+ Last reviewed · + Press ⌘ K to search tokens. +

+
+
+
+
+ + +

仅用于身份验证 — used for sign-in only.

+
+
+ + +

We'll send a verification code · 我们会发送验证码。

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/wechat/tokens.css b/design-systems/wechat/tokens.css new file mode 100644 index 000000000..f0cf32cb2 --- /dev/null +++ b/design-systems/wechat/tokens.css @@ -0,0 +1,176 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/wechat/tokens.css + * + * Structured token bindings for "WeChat" (微信) — Tencent's all-in-one + * social, payment, and mini-program super-app. The visual language is + * a quiet, light-friendly consumer canvas built around one decisive + * signal: WeChat Green (#07C160). Everything else recedes so green + * carries the brand — CTAs, success states, active tab, focus ring. + * Bilingual CJK-aware typography (PingFang SC, Hiragino Sans GB, + * Microsoft YaHei, Noto Sans SC) keeps English and 中文 on the same + * vertical rhythm so chat rows, page titles, and mini-program cards + * align in either script without per-language overrides. + * + * Brand identity in three sentences: + * 1. The canvas is the muted #EDEDED chat-list gray, not pure white — + * this is the colour every WeChat user has stared at for a decade. + * Surfaces (#F7F7F7) lift one tone above it. Pure white belongs to + * incoming chat bubbles, not pages. + * 2. Brand green #07C160 is the only accent. Hover (#10B160) and + * pressed (#059050) come straight from the platform spec; the same + * green doubles as the success state because in WeChat green *is* + * "good / done / sent / paid". + * 3. Type is mobile-first and dense: 15px body at 1.6 line-height, + * 18px page titles, 11px timestamps. The display ladder (24 → 32 + * → 48px) is deliberately modest — WeChat's marketing voice + * ("微信，是一个生活方式") is understated, not billboard-loud. + * + * Schema decisions: + * - --bg: #ededed (chat-list gray, DESIGN.md §UI Neutrals). + * - --surface: #f7f7f7 (card / sheet lift on bg). + * - --surface-warm: var(--surface) — single surface tier. + * - --fg: #1a1a1a (ink); --fg-2 alias — DESIGN.md has one text tier. + * - --muted: #888888 (secondary + timestamps); + * --meta: var(--muted) — DESIGN.md does not separate the tier. + * - --border: #e0e0e0; --border-soft alias — single border weight. + * - --accent: #07c160 + hover #10b160 + active #059050 (DESIGN.md). + * - --success: #07c160 (brand-as-success — green is "done" in WeChat). + * - --warn: #fab702; --danger: #fa5151 (DESIGN.md functional palette). + * - --font-display / --font-body: identical apple-system + CJK stack. + * DESIGN.md uses a single family across the app; bilingual users get + * PingFang SC → Hiragino Sans GB → Microsoft YaHei → Noto Sans SC + * fallbacks so 中文 renders crisply on macOS, iOS, Windows and Linux. + * - Type scale: 11 / 13 / 15 / 16 / 18 / 24 / 32 / 48 — mobile-first + * chat ladder extended with a modest 48px hero for marketing pages. + * - --leading-body: 1.6 (DESIGN.md body, generous for CJK density). + * - Radius: 4 / 8 / 16 / pill (DESIGN.md §Border Radius). + * - Motion: 100ms hover, 200ms message-entry, cubic-bezier(0.25, 0.1, + * 0.25, 1) — DESIGN.md §Motion (instant + fast + ease-default). + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ────────────────────────────────────────────────────── + * Light-friendly canvas: the muted #EDEDED chat-list gray is the + * WeChat user's home colour. Surfaces lift one tone above it. */ + --bg: #ededed; /* chat-list gray — primary canvas */ + --surface: #f7f7f7; /* card / sheet lift on bg */ + --surface-warm: var(--surface); /* alias — single surface tier */ + + /* ─── Foreground ─────────────────────────────────────────────────── + * One ink, one secondary. DESIGN.md does not separate dark / warm + * tiers, so --fg-2 and --meta alias their siblings. */ + --fg: #1a1a1a; /* ink — primary text */ + --fg-2: var(--fg); /* alias — single text weight */ + --muted: #888888; /* secondary + timestamps */ + --meta: var(--muted); /* alias — same gray for metadata */ + + /* ─── Border ─────────────────────────────────────────────────────── + * Dividers are quiet — most cards are defined by background contrast, + * not borders. When borders appear, they are the same hairline gray. */ + --border: #e0e0e0; /* card / row edge */ + --border-soft: var(--border); /* alias — no inner separator tier */ + + /* ─── Accent ─────────────────────────────────────────────────────── + * WeChat Green is the single load-bearing colour. Hover and active + * are taken verbatim from DESIGN.md so primary buttons feel native. */ + --accent: #07c160; /* WeChat green — primary brand */ + --accent-on: #ffffff; + --accent-hover: #10b160; /* DESIGN.md primary hover */ + --accent-active: #059050; /* DESIGN.md primary pressed */ + + /* ─── Semantic ───────────────────────────────────────────────────── + * Green doubles as success because in WeChat green *is* "done / paid / + * sent". Warning + danger come straight from DESIGN.md §Functional. */ + --success: #07c160; /* brand-as-success — paid / done */ + --warn: #fab702; /* DESIGN.md warning orange */ + --danger: #fa5151; /* DESIGN.md error red */ + + /* ─── Typography ─────────────────────────────────────────────────── + * Single bilingual stack across display + body. -apple-system first + * for SF / SF Pro on Apple platforms; PingFang SC + Hiragino Sans GB + * + Microsoft YaHei + Noto Sans SC keep 中文 crisp on macOS, iOS, + * Windows and Linux respectively. Helvetica Neue / Helvetica / Arial + * close the Latin tail. */ + --font-display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §Typography is mobile-first (11–18px). The + * top three tiers (24 / 32 / 48px) extend the ladder for marketing + * pages while staying understated — WeChat does not shout. */ + --text-xs: 11px; /* caption / timestamp */ + --text-sm: 13px; /* secondary text */ + --text-base: 15px; /* body — WeChat default */ + --text-lg: 16px; /* section header / button label */ + --text-xl: 18px; /* page title */ + --text-2xl: 24px; /* feature heading */ + --text-3xl: 32px; /* H2 — section title */ + --text-4xl: 48px; /* display hero — modest by design */ + + /* Leading + tracking. + * 1.6 body line-height (DESIGN.md) gives Chinese characters generous + * air; 1.3 tight line-height matches the page-title spec. Display + * tracking compresses one notch — works for both Latin and CJK. */ + --leading-body: 1.6; + --leading-tight: 1.3; + --tracking-display: -0.01em; + + /* ─── Spacing ────────────────────────────────────────────────────── + * 4px base unit, DESIGN.md §Spacing System. The schema's --space-5 + * (20px) and --space-12 (48px) fill in tiers DESIGN.md does not name + * but the layout grid needs. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* ─── Section rhythm ─────────────────────────────────────────────── + * Phone-first product — desktop rhythm stays modest (72px) and + * collapses to 32px on phones to keep chat-row density on small + * screens. */ + --section-y-desktop: 72px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ─────────────────────────────────────────────────────── + * DESIGN.md §Border Radius: 4 / 8 / 16 / pill. (The brand-specific + * --radius-bubble lives in DESIGN.md but is component-local — chat + * bubbles re-derive it inline so it does not enter the shared schema.) */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-pill: 9999px; + + /* ─── Elevation ──────────────────────────────────────────────────── + * Whisper-quiet shadow lifted from DESIGN.md's incoming-bubble spec + * (0 1px 2px rgba(0,0,0,0.06)). WeChat surfaces almost never float; + * when they do, the shadow is barely perceptible. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 1px 2px rgba(0, 0, 0, 0.06); + + /* ─── Focus ──────────────────────────────────────────────────────── + * Green-tinted ring keeps the brand voice consistent on keyboard + * focus across inputs, buttons, and links. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ─────────────────────────────────────────────────────── + * DESIGN.md §Motion: 100ms hover, 200ms chat-message entry. Easing + * is the platform default (cubic-bezier(0.25, 0.1, 0.25, 1)) — the + * classic browser "ease", chosen for muscle-memory familiarity. */ + --motion-fast: 100ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1); + + /* ─── Layout ─────────────────────────────────────────────────────── + * 1200px container fits WeChat's marketing-site pattern; phone + * gutters stay at 16px to match the chat row inset. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/xiaohongshu/components.html b/design-systems/xiaohongshu/components.html new file mode 100644 index 000000000..6ba34cb6d --- /dev/null +++ b/design-systems/xiaohongshu/components.html @@ -0,0 +1,865 @@ + + + + + + 小红书 / Xiaohongshu — reference components + + + + + +
+ +
+ +
+ +
+
+
+

灵感参考 · xiaohongshu

+

标记你的生活，
让世界被你种草。

+

+ 你今天的早餐、出差住的酒店、买了三支才挑对的口红 — + 都是别人正在寻找的灵感。Show up. 被看见。被收藏。 +

+
+ + 开始记录 + + + 阅读设计语言 +
+

+ 按 ⌘ K 搜索笔记 · Press ⌘ K to search. +

+
+ + +
+
+ + +
+
+
+

今日发现 · Discover

+

看看大家正在种草什么

+
+
+ 穿搭 + 咖啡 + 旅行 + 护肤 + 家居 +
+
+
+
+ +
+

+ 周末和朋友的 brunch 小记 · A slow Saturday in Shanghai +

+
+ + 小满 · xiaoman + + + 2.3w + +
+
+
+
+ +
+

+ 租房 50㎡ 的暖色客厅改造 — before / after 全记录 +

+
+ + 桃子家的小屋 + + + 8,712 + +
+
+
+
+ +
+

+ 第三支才挑对 · 显白程度十级的口红种草清单 +

+
+ + 林深 · lin.shen + + + 1.1w + +
+
+
+
+ +
+

+ 京都早春三日 · 在小巷里慢慢迷路也很好 +

+
+ + 远野日记 · tono + + + 6,304 + +
+
+
+
+
+ + +
+
+

为什么这样设计 · Why it looks like this

+

+ 克制做底色，内容才是主角。 +

+

+ 一个 --accent，一种 PingFang SC， + 一套 rgba(0,0,0,*) 的浮层灰阶 — + 其余空间，全部交给图片本身。 +

+
+ +
+
+ + + 品牌唯一红 + +

一屏只用一次的红

+

+ #ff2442 只出现在主要 CTA、心形高亮、 + 热门标签上。同一个页面里出现两次饱和红，画面就立刻 + "降级"成了打折海报，而不是一张笔记。 +

+ 查看 token → +
+ +
+ 柔黑文字 +

从不使用纯黑

+

+ 标题 rgba(0,0,0,.8)、正文 .62、 + 描述 .45、占位 .27 — + 四级透明黑替代离散灰阶，同一个浮层落在白卡、照片、 + 抽屉上都成立。 +

+ 阅读规则 → +
+ +
+ 圆得彻底 +

能按的，一定是 pill

+

+ 卡片 12px、按钮 9999px。 + 一个直角按钮在这套系统里立刻显得不对 — + 层次靠间距和圆角，不靠投影。Shadow stays + off until hover earns it. +

+ 检查圆角 → +
+
+
+ + +
+
+
+

订阅每日灵感 · Daily inspo digest

+

每天一封 · 100 张被收藏最多的笔记。

+

+ No spam，no third-party，no enterprise tone. + 一个邮箱，一个发布频率，仅此而已 — + 我们用 --focus-ring 的 RED 红圈 + 提示你正在专注的输入框。 +

+
    +
  • 输入框背景使用 --bg（#F5F5F5），focus 时升到 --surface。
    • +
  • 提交按钮即 .btn-primary — 系统里只有一种红 CTA。
    • +
  • 占位符使用 --meta，0.27 透明度的最弱一档。
    • +
+
+
+ 关注按钮三态 + DESIGN.md §4 · Follow Button +
+
+ + +
+
+
+ +
+
+

订阅每日灵感

+ + + Free · 免费 + +
+
+ + +
+
+ + +

仅用于发送每日灵感清单，可随时退订。

+
+
+ + +
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/xiaohongshu/tokens.css b/design-systems/xiaohongshu/tokens.css new file mode 100644 index 000000000..1661a31e3 --- /dev/null +++ b/design-systems/xiaohongshu/tokens.css @@ -0,0 +1,193 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/xiaohongshu/tokens.css + * + * Structured token bindings for "Design System Inspired by Xiaohongshu" + * (小红书 / RED) — the Chinese lifestyle UGC discovery platform. + * + * The visual baseline is *daily-ness*: a near-white masonry canvas that + * functions as a transparent picture frame for user-uploaded breakfasts, + * lipstick swatches, and hotel sofas. Brand red (`#FF2442`) is the + * single saturated voice the system permits — one accent per screen, + * never two. Neutrals are translucent overlays (`rgba(0,0,0, .05/.08/ + * .27/.45/.62/.80)`) rather than discrete grey steps so the same fill + * lands believably on white card, photo, or sheet. + * + * Brand identity in three sentences: + * 1. Canvas is `#F5F5F5`; the white card (`#FFFFFF`) lifts above it + * by color contrast, not by elevation. Shadows are essentially + * absent — depth comes from rounding and spacing. + * 2. Type is PingFang SC throughout (no separate display face) with + * the documented Hiragino Sans GB / Microsoft YaHei / Noto Sans SC + * fallback chain so 标记我的生活 reads the same on macOS, Windows, + * and Linux. Tracking is zero everywhere; the heading scale caps + * at 32px per DESIGN.md §3 ("no 48/64 hero"). + * 3. Brand red is the singular accent — used on CTAs, hearts, active + * tabs, and tag-on-trending. Danger has no independent token in + * RED's production system, so `--danger` aliases to the same red + * (DESIGN.md §2: "danger reuses --primary"). Skill authors should + * differentiate destructive intent via outline + leading icon when + * the difference matters. + * + * Schema decisions: + * - --bg: #f5f5f5 (canvas behind cards); --surface: #ffffff (card). + * - --surface-warm: #fafafa (info background, DESIGN.md --bg0-lighter). + * - --fg: rgba(0, 0, 0, 0.8) (title — soft black, never #000); + * --fg-2: rgba(0, 0, 0, 0.62) (paragraph); --muted: 0.45 (caption); + * --meta: rgba(0, 0, 0, 0.27) (disabled / placeholder). + * - --border: rgba(0, 0, 0, 0.08) (hairline separator); + * --border-soft: rgba(0, 0, 0, 0.05) (fill1 — group line). + * - --accent: #ff2442 (token red, default); --accent-hover: #ff2e4d + * (component-layer red — slightly pinker / lighter, doubles as the + * natural hover state for solid-fill primary CTAs). + * - --danger: #ff2442 (reuses brand red — DESIGN.md §2 explicit). + * - Font stacks lead with PingFang SC then the CJK fallback chain — + * RED is CJK-primary, so Latin fallbacks (`-apple-system`, etc.) + * come after. + * - Type scale ceiling at 32px (--text-4xl). DESIGN.md §3 forbids + * 48/64 hero type; --text-3xl bumps to 28px so the marketing + * hero has a usable intermediate above section headings. + * - --radius-md: 12px (feed card), --radius-lg: 16px (feature card), + * --radius-pill: 9999px (buttons are pill, always). + * - --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08) — DESIGN.md §6 + * "Subtle (1)", used only on PC card hover in the live system. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ────────────────────────────────────────────────────── + * Canvas → Card → Subtle. The grey canvas IS the separation device + * for white cards; cards do not need shadows to feel lifted. */ + --bg: #f5f5f5; /* Canvas — page background behind cards (DESIGN.md --bg0) */ + --surface: #ffffff; /* Surface — the white card / modal (DESIGN.md --bg) */ + --surface-warm: #fafafa; /* Subtle — information background (DESIGN.md --bg0-lighter) */ + + /* ─── Foreground ─────────────────────────────────────────────────── + * Four translucent black tiers. Pure #000 is never used for text; + * even the title sits at 0.8 alpha so it reads as "soft black" + * against the white card. */ + --fg: rgba(0, 0, 0, 0.8); /* Title — DESIGN.md --title */ + --fg-2: rgba(0, 0, 0, 0.62); /* Paragraph — DESIGN.md --paragraph */ + --muted: rgba(0, 0, 0, 0.45); /* Description — DESIGN.md --description */ + --meta: rgba(0, 0, 0, 0.27); /* Disabled / placeholder — DESIGN.md --disabled */ + + /* ─── Border ─────────────────────────────────────────────────────── + * Hairlines via alpha — the same line drops onto white card, onto + * photo, or onto a sheet without recoloring. No opaque grey borders + * by default. */ + --border: rgba(0, 0, 0, 0.08); /* Separator hairline — DESIGN.md --separator */ + --border-soft: rgba(0, 0, 0, 0.05); /* Fill1 — group / row line that should not visually compete */ + + /* ─── Accent ─────────────────────────────────────────────────────── + * One saturated voice for the whole system. The hover slot maps to + * the documented component-layer red (#FF2E4D, slightly pinker / + * lighter) — the same divergence that appears on .reds-button-new + * .primary in production, repurposed as the natural hover state for + * a token-driven primary CTA. */ + --accent: #ff2442; /* RED brand red (DESIGN.md --primary / --color-red) */ + --accent-on: #ffffff; /* White text on red CTA */ + --accent-hover: #ff2e4d; /* Component-layer red — slightly pinker; reads as a lift on hover */ + --accent-active: #e6203a; /* Pressed — darker, more saturated red */ + + /* ─── Semantic ───────────────────────────────────────────────────── + * Success / warn lifted from DESIGN.md §2 (the platform's + * --success / --warning tokens; nearly invisible in the consumer + * flow but tokenized for B2B console contexts). Danger has no + * independent token in RED — it reuses --primary; aliasing here + * preserves that explicit DESIGN.md decision. */ + --success: #02b940; /* DESIGN.md --success (#EAF8EF bg variant lives in components) */ + --warn: #ff7d03; /* DESIGN.md --warning */ + --danger: #ff2442; /* Reuses brand red — DESIGN.md §2 "danger reuses --primary" */ + + /* ─── Typography ─────────────────────────────────────────────────── + * CJK-primary brand: PingFang SC leads, then the documented + * Hiragino Sans GB / Microsoft YaHei / Noto Sans SC chain, then + * the Apple/Helvetica Latin fallback. No separate display face — + * every Typography-FontFamily-* in production resolves to PingFang SC. + * --font-mono inherits the schema default (RED Number is intentionally + * NOT referenced here per DESIGN.md §3 — end users don't have it). */ + --font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3 PC web tokens (h1=32 → c2=12). + * The ceiling is deliberately compact: DESIGN.md forbids 48/64 hero + * type, so --text-4xl tops out at 32px. --text-3xl interpolates at + * 28px so a marketing hero has visual lift above section headings. */ + --text-xs: 12px; /* c2 — small caption */ + --text-sm: 14px; /* b2 / t3 — body standard, secondary label */ + --text-base: 16px; /* b1 / t2 — body large, the marketing reading size */ + --text-lg: 18px; /* t1 — strong label */ + --text-xl: 20px; /* h3 — card heading */ + --text-2xl: 24px; /* h2 — section heading */ + --text-3xl: 28px; /* intermediate display — between h1 and h2 */ + --text-4xl: 32px; /* h1 — display ceiling (DESIGN.md "no 48/64 hero") */ + + /* Leading + tracking — DESIGN.md §3. + * Body rides on 1.5 (24px on 16px b1). Headings tighten to 1.25 + * (40px on 32px h1). Tracking is 0 everywhere; only component-level + * Chinese overrides hand-tune -0.3 to -0.64px and that stays out + * of the token system. */ + --leading-body: 1.5; + --leading-tight: 1.25; + --tracking-display: 0; /* DESIGN.md: "Every --Typography-Spacing-* token is 0" */ + + /* ─── Spacing ────────────────────────────────────────────────────── + * 8pt grid, stops 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 per DESIGN.md + * §5. Section-level gaps (48 / 64) live in the rhythm tier below. */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-12: 48px; + + /* ─── Section rhythm ─────────────────────────────────────────────── + * The masonry feed itself is dense (cards 7–10px apart) but section + * gaps on marketing surfaces breathe at 48–64px desktop, stepping + * down to 32px on phone where vertical real estate is scarce. */ + --section-y-desktop: 64px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ─────────────────────────────────────────────────────── + * Generous everywhere: 8px on inputs and tags, 12px on feed cards, + * 16px on feature / hero cards, full pill on every button. The + * pill radius is functionally mandatory — a square-cornered CTA + * reads as wrong in this brand. */ + --radius-sm: 8px; /* Inputs, tags, small chips */ + --radius-md: 12px; /* Feed card (DESIGN.md §4 "Cards") */ + --radius-lg: 16px; /* Larger feature card, bottom-sheet top corners */ + --radius-pill: 9999px; /* Buttons — always */ + + /* ─── Elevation ──────────────────────────────────────────────────── + * Three sanctioned levels, used sparingly. Default is flat — depth + * comes from canvas color contrast and rounding. The raised tier + * lands on PC card hover only; modal shadow is one-off on .modal + * and stays in components. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 4px 12px rgba(0, 0, 0, 0.08); /* DESIGN.md §6 "Subtle (1)" — PC card hover */ + + /* ─── Focus ──────────────────────────────────────────────────────── + * Brand red at 30% opacity. The schema default formula works for + * the RED accent without override. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ─────────────────────────────────────────────────────── + * Standard durations. RED's interaction language is soft and quiet; + * no aggressive bouncing curves. Defaults are appropriate. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ─────────────────────────────────────────────────────── + * 1200px container width — comfortably wider than the note-detail + * two-pane (~1100px) for marketing surfaces. Phone gutter is tighter + * (12px) so the masonry feed runs nearly edge-to-edge per DESIGN.md + * §5 "Mobile Two-Column". */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +}