From b68e4d32521286f99fb56bd0676d7727d2095388 Mon Sep 17 00:00:00 2001 From: chaoxiaoche Date: Mon, 18 May 2026 11:54:50 +0800 Subject: [PATCH] feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(design-systems): add tokens.css + components.html for 9 AI product brands Compiles DESIGN.md prose into machine-consumable agent artifacts for claude, cohere, elevenlabs, huggingface, mistral-ai, nvidia, opencode-ai, replicate, and together-ai. Each brand adds: - tokens.css — :root block of CSS custom properties derived from the brand's DESIGN.md; agents paste this directly into generated HTML + + +
+ +
+
+
+

Reference fixture · claude

+

Thoughtful conversations, made tangible.

+

+ A warm, literary design system built on parchment — where + every interaction carries the weight of a considered reply. +

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

What this fixture exercises

+

+ Warm parchment, terracotta, and the gentlest possible containment. +

+
+ +
+
+

Parchment surface tokens

+

+ --bg (#f5f4ed) → --surface (#faf9f5) → --surface-warm (#e8e6dc). + Three warm tiers with yellow-brown undertones — no cool grays anywhere. +

+ Inspect tokens → +
+ +
+

Terracotta discipline

+

+ --accent (#c96442) appears only on the primary CTA and brand + moments. The warm sand secondary button keeps the screen + from feeling mono-terracotta. +

+ Read the rule → +
+ +
+

Serif/sans hierarchy

+

+ Anthropic Serif weight 500 for all headings — the single weight + gives every title the gravitas of a published title. Anthropic + Sans handles UI text with quiet efficiency. +

+ Inspect typography → +
+
+
+ + +
+
+
+

Form components

+

Inputs in the same warm context.

+

+ Focus rings use Focus Blue (#3898ec) — the ONLY cool color in + the entire Claude system. It exists purely for accessibility. + Everything else stays warm. +

+
+ +
+
+ + +

+ We'll send a copy of the spec and nothing else. +

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/claude/tokens.css b/design-systems/claude/tokens.css new file mode 100644 index 000000000..24a00c30d --- /dev/null +++ b/design-systems/claude/tokens.css @@ -0,0 +1,130 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/claude/tokens.css + * + * Structured token bindings for "Design System Inspired by Claude (Anthropic)". + * Literary salon aesthetic: warm parchment canvas, terracotta accent, + * exclusive warm-toned neutrals, Anthropic Serif for all headlines. + * + * Key brand decisions encoded here: + * - Parchment (#f5f4ed) as page canvas — never pure white + * - Ivory (#faf9f5) for elevated card surfaces + * - Terracotta (#c96442) as the single brand accent — earthy, un-tech + * - All grays carry a yellow-brown undertone — no cool blue-grays + * - Serif for headings, sans for UI — the typographic identity split + * - Ring-based depth (0 0 0 1px) instead of traditional drop shadows + * - Generous body line-height (1.60) for a literary reading experience + * - Focus blue (#3898ec) is the only cool color — accessibility only + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface (3 levels) ───────────────────────────────────────── + * Parchment (bg) → Ivory (surface) → Warm Sand (surface-warm). + * Never use pure white as a page background — the warm cream IS + * the Claude personality. */ + --bg: #f5f4ed; + --surface: #faf9f5; + --surface-warm: #e8e6dc; /* Warm Sand — button bg, prominent interactive surfaces */ + + /* ─── Foreground ramp (4 levels) ──────────────────────────────── + * Every gray carries a yellow-brown undertone. No cool blue-grays. */ + --fg: #141413; /* Anthropic Near Black — warmest "black" in any major tech brand */ + --fg-2: #3d3d3a; /* Dark Warm — dark text links, emphasized secondary text */ + --muted: #5e5d59; /* Olive Gray — secondary body text */ + --meta: #87867f; /* Stone Gray — tertiary text, footnotes, metadata */ + + /* ─── Border (2 levels) ────────────────────────────────────────── + * Cream-tinted borders — the gentlest possible containment. */ + --border: #f0eee6; /* Border Cream — standard light-theme border */ + --border-soft: #e8e6dc; /* Border Warm — section dividers, emphasized containment */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Terracotta Brand — the only chromatic element on most screens. + * Used for primary CTA buttons and highest-signal brand moments only. */ + --accent: #c96442; + --accent-on: #faf9f5; /* Ivory — fg when terracotta is the bg */ + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Error Crimson is a warm, deep red — serious without alarming. + * Focus Blue (#3898ec) is the sole cool color in the system, + * reserved for accessibility (input focus rings). */ + --success: #17a34a; + --warn: #eab308; + --danger: #b53333; /* Error Crimson — warm red, not standard danger red */ + + /* ─── Typography ────────────────────────────────────────────────── + * Anthropic Serif (Georgia fallback) for all headlines — the single + * weight (500) gives every heading the gravitas of a published title. + * Anthropic Sans for all UI/body — quiet functional efficiency. */ + --font-display: "Anthropic Serif", Georgia, "Times New Roman", serif; + --font-body: "Anthropic Sans", "Arial", system-ui, -apple-system, sans-serif; + --font-mono: "Anthropic Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; + + /* Type scale — DESIGN.md §3 Typography Rules. + * 64px hero → 52px section → 36px sub → 32px card → 25px small */ + --text-xs: 10px; /* Overline — uppercase labels at smallest scale */ + --text-sm: 14px; /* Caption — metadata, descriptions */ + --text-base: 16px; /* Body Standard */ + --text-lg: 20px; /* Body Large — intro paragraphs */ + --text-xl: 25px; /* Sub-heading Small */ + --text-2xl: 32px; /* Sub-heading — card titles, feature names */ + --text-3xl: 52px; /* Section Heading */ + --text-4xl: 64px; /* Display / Hero — maximum impact, book-title presence */ + + --leading-body: 1.6; /* Relaxed — closer to a book than a dashboard */ + --leading-tight: 1.1; /* Tight headings — serif letterforms breathe naturally */ + --tracking-display: 0em; /* Serif faces carry authority; no compression needed */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit per DESIGN.md §5. Card internal padding ~24–32px. */ + --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-y-desktop: 96px; /* Editorial pacing — generous like a magazine spread */ + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Claude's softness: comfortably rounded (8px) for standard, + * generously rounded (12px) for primary, very rounded (16px) for + * featured containers. No sharp corners — softness is core identity. */ + --radius-sm: 8px; /* Comfortably rounded — standard buttons, cards */ + --radius-md: 12px; /* Generously rounded — primary buttons, inputs, nav */ + --radius-lg: 16px; /* Very rounded — featured containers, video players */ + --radius-pill: 9999px; /* Chip-like elements (use sparingly) */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Ring shadows (0px 0px 0px 1px) instead of drop shadows. + * The signature is a border-like halo — shadow pretending to be + * a border. Drop shadows only at 0.05 opacity when truly needed. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); /* Border-like halo */ + --elev-raised: rgba(0, 0, 0, 0.05) 0px 4px 24px; /* Whisper soft — barely visible lift */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Focus Blue (#3898ec) is the ONLY cool color in the Claude system. + * Reserved exclusively for accessibility / keyboard focus. */ + --focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3); + + /* ─── Motion ────────────────────────────────────────────────────── + * Short, purposeful transitions. The editorial warmth doesn't need + * animation energy — interactions should feel calm. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1200px container, editorial layout. Hero is centered, feature + * sections use 2–3 column card grids. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/cohere/components.html b/design-systems/cohere/components.html new file mode 100644 index 000000000..f8e58dc48 --- /dev/null +++ b/design-systems/cohere/components.html @@ -0,0 +1,353 @@ + + + + + + Cohere — reference components + + + + + +
+
+
+
+

Reference fixture · cohere

+

Enterprise AI that thinks at your scale.

+

+ Confident, clean, and designed to make AI feel like serious + infrastructure. Professional without being cold. +

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

What this fixture exercises

+

The 22px radius and ghost button: two signatures one system.

+
+
+
+

22px signature radius

+

+ --radius-md: 22px. Every primary card and container uses this radius — + creating a cloud-like, organic softness that's distinctly Cohere. +

+ Inspect → +
+
+

Ghost buttons

+

+ .btn-secondary is transparent by default — invisible until hover, + where text shifts to Interaction Blue (#1863dc). +

+ Read the rule → +
+
+

Cool-toned neutrals

+

+ --muted: #93939f carries a subtle blue-violet tint. No warm grays. + The palette is strictly black, white, and cool gray. +

+ Inspect colors → +
+
+
+ +
+
+
+

Form components

+

Enterprise inputs with focus purple.

+

+ Inputs use 8px radius (--radius-sm) and border: #d9d9dd. + Focus shifts border to Focus Purple (#9b60aa) — distinct from + the Interaction Blue hover accent. +

+
+
+
+ + +

Enterprise free trial — no credit card required.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/cohere/tokens.css b/design-systems/cohere/tokens.css new file mode 100644 index 000000000..e8869c825 --- /dev/null +++ b/design-systems/cohere/tokens.css @@ -0,0 +1,126 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/cohere/tokens.css + * + * Structured token bindings for "Design System Inspired by Cohere". + * Enterprise command deck: confident, clean, 22px signature roundness. + * + * Key brand decisions encoded here: + * - Pure white canvas with cool gray containment borders + * - 22px border-radius is THE Cohere visual signature — use on all cards + * - Interaction Blue (#1863dc) only on hover/focus — never ambient + * - CohereText serif for display (72px, negative tracking) + * - Unica77 for all body and UI — Swiss geometric neutrality + * - Ghost/transparent buttons as the default interaction style + * - Deep purple sections for full-width visual breaks (via layout) + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Bright white with Snow (#fafafa) for section differentiation. + * Enterprise clarity — no tinted surfaces in the main light mode. */ + --bg: #ffffff; + --surface: #fafafa; /* Snow — elevated surfaces, section backgrounds */ + --surface-warm: var(--surface); /* no warm tier — palette is strictly cool-toned */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Predominantly black/white. No warm grays. */ + --fg: #000000; /* Cohere Black — headline text, maximum emphasis */ + --fg-2: #212121; /* Near Black — standard body link, soft heading */ + --muted: #93939f; /* Muted Slate — de-emphasized text, cool violet tint */ + --meta: var(--muted); /* alias — same cool muted for metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Cool-toned borders — the subtle blue-violet tint in Border Cool + * reinforces the enterprise/tech personality. */ + --border: #d9d9dd; /* Border Cool — standard section and list borders */ + --border-soft: #f2f2f2; /* Lightest Gray — card edge on white (barely visible) */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Interaction Blue — appears ONLY on hover/focus, never ambient. + * Default state of most interactive elements is transparent/ghost. */ + --accent: #1863dc; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 16%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Standard semantic palette — reserved for state, not decoration. */ + --success: #16a34a; + --warn: #eab308; + --danger: #ef4444; + + /* ─── Typography ────────────────────────────────────────────────── + * CohereText (custom display serif) + Unica77 (Swiss geometric sans). + * "Confident authority meets engineering clarity" personality. + * Negative tracking at display scale (-1.2px to -1.44px at 60–72px). */ + --font-display: "CohereText", "Space Grotesk", Inter, ui-sans-serif, sans-serif; + --font-body: "Unica77 Cohere Web", Inter, Arial, ui-sans-serif, sans-serif; + --font-mono: "CohereMono", "JetBrains Mono", ui-monospace, monospace; + + /* Type scale — DESIGN.md §3. 72px display, 60px secondary, 48px section. */ + --text-xs: 12px; /* Small / footer links */ + --text-sm: 14px; /* Caption / Uppercase Label */ + --text-base: 16px; /* Body / Button */ + --text-lg: 18px; /* Body Large — intro paragraphs */ + --text-xl: 24px; /* Feature Title */ + --text-2xl: 32px; /* Sub-heading */ + --text-3xl: 60px; /* Display Secondary */ + --text-4xl: 72px; /* Display / Hero — maximum serif authority */ + + --leading-body: 1.5; + --leading-tight: 1.0; /* CohereText at display scale */ + --tracking-display: -0.02em; /* ≈ -1.44px at 72px — dense impactful text blocks */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit. Card internal padding 24–32px. + * Section rhythm 56–60px between sections. */ + --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-y-desktop: 60px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * The 22px radius IS the Cohere card — organic, cloud-like softness. + * DO NOT use other radii on primary cards. The signature matters. + * + * --radius-sm: small utility elements (dialog boxes, nav pills) + * --radius-md: THE PRIMARY COHERE CARD — always 22px + * --radius-lg: large featured containers — same 22px treatment */ + --radius-sm: 8px; /* Dialog, nav items, secondary elements */ + --radius-md: 22px; /* PRIMARY SIGNATURE — every main card and container */ + --radius-lg: 22px; /* Same 22px for large featured containers */ + --radius-pill: 9999px; /* Buttons, status tags */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Cohere is nearly shadow-free. Depth via background color contrast + * (white on purple band) and cool gray borders, not shadows. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border-soft); /* 1px ring on white */ + --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06); /* Minimal hover shadow */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Solid 2px Interaction Blue outline — enterprise-grade clarity. */ + --focus-ring: 0 0 0 2px var(--accent); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard durations — enterprise interfaces feel solid, not bouncy. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * Wide container (1440px for enterprise large-screen) with generous + * gutters. The 26-breakpoint system is handled component-side. */ + --container-max: 1440px; + --container-gutter-desktop: 32px; + --container-gutter-tablet: 24px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/elevenlabs/components.html b/design-systems/elevenlabs/components.html new file mode 100644 index 000000000..f0b7545ca --- /dev/null +++ b/design-systems/elevenlabs/components.html @@ -0,0 +1,342 @@ + + + + + + ElevenLabs — reference components + + + + + +
+
+
+
+

Reference fixture · elevenlabs

+

Give every voice a presence.

+

+ A premium audio product brochure in pixel form. Whisper-thin + headings, warm stone surfaces, achromatic warmth. +

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

What this fixture exercises

+

Lightness as the defining typographic statement.

+
+
+
+

Waldenburg weight 300

+

+ All h1/h2/h3 use Waldenburg at font-weight 300. The whisper-thin + strokes feel like audio waveforms. Never bold — lightness IS the brand. +

+ Inspect → +
+
+

Multi-layer shadows

+

+ --elev-ring: three layers at sub-0.04 opacity each. Surfaces barely + exist — defined by the lightest possible touch. +

+ Read the rule → +
+
+

Warm stone surfaces

+

+ --surface-warm: #f5f2ef. The achromatic system gets warmth through + stone-tinted backgrounds and rgba(78,50,23,...) warm shadows. +

+ Inspect surfaces → +
+
+
+ +
+
+
+

Form components

+

Inputs with the same whisper-level depth.

+

+ Form inputs use 16px radius matching the card tier. Focus ring uses + Ring Blue (rgba(147,197,253,0.5)) — the only cool tone in the system. +

+
+
+
+ + +

Start generating voice in minutes.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/elevenlabs/tokens.css b/design-systems/elevenlabs/tokens.css new file mode 100644 index 000000000..2e1feb66d --- /dev/null +++ b/design-systems/elevenlabs/tokens.css @@ -0,0 +1,127 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/elevenlabs/tokens.css + * + * Structured token bindings for "Design System Inspired by ElevenLabs". + * Premium audio product brochure: achromatic, whisper-thin headings, + * multi-layered sub-0.1 shadows, warm stone accent surfaces. + * + * Key brand decisions encoded here: + * - Intentionally achromatic — no brand colors; warmth from shadows/surfaces + * - Waldenburg weight 300 for display — lightness IS the brand + * - Positive letter-spacing on Inter body (+0.16–0.18px) for airy reading + * - Multi-layer shadows at sub-0.1 opacity — surfaces barely exist + * - Warm stone (#f5f2ef) as the signature warm accent surface + * - Warm shadows (rgba(78,50,23,...)) — shadows have color, not just darkness + * - Pill buttons (9999px) as primary shape for CTAs + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Near-white canvas — the warmth comes from shadows and stone surfaces, + * not from background tinting. */ + --bg: #ffffff; /* Pure White — primary background */ + --surface: #f5f5f5; /* Light Gray — subtle section differentiation */ + --surface-warm: #f5f2ef; /* Warm Stone — the signature warm accent surface */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Achromatic with a hint of warmth via the stone gray (#777169). */ + --fg: #000000; /* Black — primary text and headings */ + --fg-2: #4e4e4e; /* Dark Gray — secondary text, descriptions */ + --muted: #777169; /* Warm Gray — tertiary text, warm undertone */ + --meta: var(--muted); /* alias — same warm gray for metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Explicit borders are rare. Most edges are defined by shadow rings. */ + --border: #e5e5e5; /* Border Light — explicit borders when needed */ + --border-soft: rgba(0, 0, 0, 0.05); /* Ultra-subtle — bottom borders, dividers */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Black is the primary CTA color — the palette is intentionally achromatic. + * DO NOT introduce brand colors — warmth comes from shadows and stone. */ + --accent: #000000; /* Black — primary CTA background */ + --accent-on: #ffffff; + --accent-hover: #1a1a1a; /* Slightly softer black for hover */ + --accent-active: #333333; + + /* ─── Semantic ──────────────────────────────────────────────────── + * Standard semantic palette — used very sparingly in this system. */ + --success: #16a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Waldenburg weight 300 (light) for display — ethereal, whisper-thin. + * This is the defining typographic choice: lightness creates intrigue. + * Inter for all body/UI with positive letter-spacing for airy reading. + * WaldenburgFH bold uppercase ONLY for specific CTA button labels. */ + --font-display: "Waldenburg", "Waldenburg Fallback", system-ui, sans-serif; + --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif; + --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3. 48px display hero, 36px section, 32px card. */ + --text-xs: 12px; /* Micro */ + --text-sm: 13px; /* Small — tags, badges */ + --text-base: 16px; /* Body Standard */ + --text-lg: 20px; /* Body Large — introductions */ + --text-xl: 24px; /* Mid display */ + --text-2xl: 32px; /* Card Heading — weight 300 Waldenburg */ + --text-3xl: 36px; /* Section Heading */ + --text-4xl: 48px; /* Display Hero — whisper-thin at large scale */ + + --leading-body: 1.5; + --leading-tight: 1.08; /* Tight display for ethereal quality */ + --tracking-display: -0.02em; /* ≈ -0.96px at 48px — slight compression */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * Apple-like generosity: massive vertical spacing between sections. + * Each section is an exhibit. */ + --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-y-desktop: 96px; /* Premium, unhurried pace — Apple-like generosity */ + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Pill (9999px) for primary buttons. Generous (16–24px) for cards. + * Do not use sharp corners (<8px) — the generous radius is structural. */ + --radius-sm: 8px; /* Standard containers, nav elements */ + --radius-md: 16px; /* Standard cards */ + --radius-lg: 24px; /* Section containers, large panels */ + --radius-pill: 9999px; /* Primary pill buttons — THE ElevenLabs shape */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * The most refined shadow system: multi-layer at sub-0.1 opacity. + * --elev-ring: shadow-as-border (outline ring + soft lift) + * --elev-raised: button/card elevation with both outward + warm layers + * + * The inset half-pixel borders (0px 0px 0px 0.5px inset) that + * define edges so subtle they're felt rather than seen are applied + * inline in components, not captured as tokens (too component-specific). */ + --elev-flat: none; + --elev-ring: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px, rgba(0, 0, 0, 0.04) 0px 2px 4px; + --elev-raised: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 4px; + + /* ─── Focus ring ────────────────────────────────────────────────── + * Ring Blue — the only cool color moment in the system (accessibility). */ + --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.5); + + /* ─── Motion ────────────────────────────────────────────────────── + * Premium feel — interactions should feel like sound: precise and brief. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * Centered content with generous max-width. Single-column hero. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/huggingface/components.html b/design-systems/huggingface/components.html new file mode 100644 index 000000000..d7c8a5558 --- /dev/null +++ b/design-systems/huggingface/components.html @@ -0,0 +1,346 @@ + + + + + + Hugging Face — reference components + + + + + +
+
+
+
+

reference-fixture · huggingface

+

The AI community building the future.

+

+ The ML platform that refuses to look serious. Sunshine yellow, + monospace everywhere, crisp 1px borders. A community zine, not a research lab. +

+
+ + View tokens + + + Sponsor 🤗 +
+
+ +
+
+ +
+
+

what-this-fixture-exercises

+

Mono headings. Yellow accents. Crisp borders.

+
+
+
+

IBM Plex Mono

+

+ All headings and tags use IBM Plex Mono — they look like strings + developers paste into Python. Source Sans Pro for prose only. +

+ Inspect → +
+
+

HF Yellow (#ffd21e)

+

+ --accent: #ffd21e. The sunshine yellow for badge strips, "new" pills, + and sponsor CTAs. Dark text (--accent-on: #0d1117) for contrast. +

+ Read the rule → +
+
+

4–6px brutalist radius

+

+ --radius-md: 6px. Closer to brutalist than rounded. Borders announce + themselves. Tables are dense — this is a hub for power users. +

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

form-components

+

Model search with crisp inputs.

+

+ Inputs use 6px radius with 1px borders. Focus shifts border to --fg + (#0d1117) with dark ring. Dark focus ring — 3px rgba(13,17,23,0.1). +

+
+
+
+ + +

Sign in to download models and datasets.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/huggingface/tokens.css b/design-systems/huggingface/tokens.css new file mode 100644 index 000000000..ee7dc4db6 --- /dev/null +++ b/design-systems/huggingface/tokens.css @@ -0,0 +1,125 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/huggingface/tokens.css + * + * Structured token bindings for "Design System Inspired by Hugging Face". + * ML community hub: sunshine yellow badge accent, monospace identity, + * crisp 1px borders, brutalist-adjacent low radius, dense power-user layout. + * + * Key brand decisions encoded here: + * - HF Yellow (#ffd21e) as the lone saturated accent — badge/badge/header strip + * - Ink on off-white: deep slate (#0d1117) text on #fafafa canvas + * - IBM Plex Mono for headings and tags — "config file is the README" vibe + * - Source Sans Pro for body prose — contrasting readable counterpart + * - 4–6px radii — closer to brutalist than rounded + * - Crisp 1px borders (#e5e7eb) — borders that announce themselves + * - Dense tables and tight padding — built for power users + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Off-white canvas with white cards — the yellow accent on a + * neutral foundation maximizes its signal impact. */ + --bg: #fafafa; /* Canvas Subtle — the default off-white hub background */ + --surface: #ffffff; /* Canvas — card surfaces, white panels */ + --surface-warm: #fff4cc; /* HF Yellow Soft — callout backgrounds, warm tint */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Deep slate — dark, readable, technical. */ + --fg: #0d1117; /* Ink Primary — primary text, headings */ + --fg-2: #374151; /* Ink Secondary — body prose */ + --muted: #6b7280; /* Ink Muted — captions, file paths, model authors */ + --meta: var(--muted); /* alias — same muted for metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Crisp, visible borders — they announce themselves rather than hiding. */ + --border: #e5e7eb; /* Border Default — standard 1px hairline */ + --border-soft: #f3f4f6; /* Border Subtle — inner divider, row separator */ + + /* ─── Accent ────────────────────────────────────────────────────── + * HF Yellow — the sunshine yellow that makes Hugging Face instantly + * recognizable. Used for "new" pill, model-card header strip, badges. + * Dark text on yellow (--accent-on: #0d1117) for contrast. */ + --accent: #ffd21e; + --accent-on: #0d1117; /* Dark text on yellow — sufficient contrast */ + --accent-hover: #f59e0b; /* HF Yellow Deep — hover/active */ + --accent-active: color-mix(in oklab, var(--accent), black 20%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Task-category colors used for model badges. Success uses vision green. + * Warning uses HF Yellow Deep (same as hover — reinforces the brand). */ + --success: #16a34a; /* Vision Green — also "build succeeded" */ + --warn: #f59e0b; /* HF Yellow Deep — warning / rate limit */ + --danger: #dc2626; /* Error Red — failed build, broken model */ + + /* ─── Typography ────────────────────────────────────────────────── + * IBM Plex Mono for headings and tags — they look like code strings. + * Source Sans Pro for body — readable, prose-optimized counterpart. + * Weight cap at 600 — 700 is too loud against yellow. */ + --font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + --font-body: "Source Sans Pro", Inter, system-ui, -apple-system, sans-serif; + --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + + /* Type scale — DESIGN.md §3. Display 48px, H1 32px, H2 24px, H3 18px. */ + --text-xs: 12px; /* Tag / Badge — IBM Plex Mono */ + --text-sm: 13px; /* Caption — author byline, timestamp */ + --text-base: 15px; /* Body — standard prose, model card */ + --text-lg: 18px; /* Body Large / H3 — sub-section */ + --text-xl: 24px; /* H2 — section heading */ + --text-2xl: 32px; /* H1 — page heading, model name */ + --text-3xl: 40px; /* Display — for marketing contexts */ + --text-4xl: 48px; /* Display Hero — marketing hero */ + + --leading-body: 1.55; /* Source Sans Pro body reading */ + --leading-tight: 1.1; /* IBM Plex Mono display */ + --tracking-display: -0.01em; + + /* ─── Spacing ───────────────────────────────────────────────────── + * 4px base unit. Dense table padding (8px 16px per cell). + * Section rhythm 64–96px — community hub needs breathing room. */ + --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-y-desktop: 80px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * 4–6px — brutalist-adjacent. Borders announce themselves. + * Do not round cards to 12px+ — the crisp geometry is intentional. */ + --radius-sm: 4px; /* Tags, small chips — nearest to sharp */ + --radius-md: 6px; /* Cards, inputs, buttons — the primary radius */ + --radius-lg: 8px; /* Slightly larger containers */ + --radius-pill: 9999px; /* Model task badges, status pills */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Border-based containment — 1px borders are the primary depth cue. + * Table row hover uses background shift (#f3f4f6). */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 90%); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Dark ring matching the primary ink color. */ + --focus-ring: 0 0 0 3px rgba(13, 17, 23, 0.1); + + /* ─── Motion ────────────────────────────────────────────────────── + * Quick hover (120ms) — community hub interactions should feel snappy. + * Tag pop at 1.05× scale is the only exception to flat-on-hover. */ + --motion-fast: 120ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1280px container with 280px sidebar for model browser. + * 24px gutter — content-dense layout. */ + --container-max: 1280px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/mistral-ai/components.html b/design-systems/mistral-ai/components.html new file mode 100644 index 000000000..b01317797 --- /dev/null +++ b/design-systems/mistral-ai/components.html @@ -0,0 +1,338 @@ + + + + + + Mistral AI — reference components + + + + + +
+
+
+
+

Reference fixture · mistral-ai

+

Frontier AI, forged in warmth.

+

+ Open-weight models built with European engineering confidence. + Every tone from pale ivory to burnt orange, no cool grays anywhere. +

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

What this fixture exercises

+

Warmth as a system, not an afterthought.

+
+
+
+

Golden amber universe

+

+ --bg (#fffaeb) → --surface (#fff0c2) → --accent (#fa520f). + Every tone in the warm spectrum. No cool colors permitted. +

+ Inspect tokens → +
+
+

Weight 400 throughout

+

+ The entire system uses weight 400 — even at 82px. Size and color + carry hierarchy. Bold weight is European bad taste here. +

+ Read the rule → +
+
+

Sharp geometry

+

+ --radius-sm: 2px. Near-zero border-radius on everything. + The sharpness contrasts with warm colors, creating tension. +

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

Form components

+

Inputs in the warm ivory context.

+

+ Even form borders use the warm palette. The focus ring is orange-tinted + (--accent). No cool grays permitted in the Mistral universe. +

+
+
+
+ + +

We'll send API access and nothing else.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/mistral-ai/tokens.css b/design-systems/mistral-ai/tokens.css new file mode 100644 index 000000000..eb3393bbc --- /dev/null +++ b/design-systems/mistral-ai/tokens.css @@ -0,0 +1,125 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/mistral-ai/tokens.css + * + * Structured token bindings for "Design System Inspired by Mistral AI". + * Sun-drenched French engineering: golden amber universe, billboard typography, + * sharp architectural geometry, warm golden shadows. + * + * Key brand decisions encoded here: + * - Warm Ivory (#fffaeb) as the lightest canvas — never pure white + * - Mistral Orange (#fa520f) — vivid brand signal, declarative + * - Weight 400 throughout — even at 82px; size alone carries authority + * - Near-zero border-radius — sharp, architectural European geometry + * - Golden amber shadows (rgba(127,99,21,...)) instead of gray + * - Ultra-tight line-heights (1.0 at display) — billboard-like text blocks + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Warm void: empty space feels warm because backgrounds are tinted. + * Ivory → Cream → never pure white. */ + --bg: #fffaeb; /* Warm Ivory — the foundation canvas, barely warm */ + --surface: #fff0c2; /* Cream — primary warm surface, secondary button bg */ + --surface-warm: var(--surface); /* alias — surface already is the warm tier */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Mistral Black is a near-black warmer than #000. Even neutrals + * carry warmth — no cool grays anywhere. */ + --fg: #1f1f1f; /* Mistral Black — primary text */ + --fg-2: var(--fg); /* alias — single text weight throughout */ + --muted: #3d3d3d; /* Warm dark gray — secondary text */ + --meta: var(--muted); /* alias — same warm gray for metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Containers are primarily defined by background color, not borders. + * When borders appear, they're warm-tinted. */ + --border: #f0e8c8; /* Warm parchment border */ + --border-soft: var(--border); /* alias — no inner separator distinction */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Mistral Orange — burns through the page like a signal fire. + * Used exclusively for primary CTAs and highest-signal brand moments. */ + --accent: #fa520f; + --accent-on: #ffffff; + --accent-hover: #fb6424; /* Mistral Flame — slightly warmer lighter variant */ + --accent-active: color-mix(in oklab, var(--accent), black 12%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Standard semantic colors — they must remain distinguishable from the + * warm amber palette. No warm-tinted semantic overrides needed. */ + --success: #17a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Arial (custom font uses Arial as fallback) at a single weight (400). + * Single weight, maximum impact — size alone carries hierarchy. + * No bold anywhere — the billboard scale speaks for itself. */ + --font-display: Arial, ui-sans-serif, system-ui, sans-serif; + --font-body: Arial, ui-sans-serif, system-ui, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; + + /* Type scale — DESIGN.md §3. 82px display, 56px section, 48px sub. + * Ultra-tight at scale (lh 0.95-1.0) — ascenders nearly touch descenders. */ + --text-xs: 12px; + --text-sm: 14px; /* Caption / Link */ + --text-base: 16px; /* Body / Button */ + --text-lg: 24px; /* Feature Title */ + --text-xl: 32px; /* Card / Sub-heading */ + --text-2xl: 48px; /* Sub-heading Large */ + --text-3xl: 56px; /* Section Heading */ + --text-4xl: 82px; /* Display Hero — billboard scale */ + + --leading-body: 1.5; + --leading-tight: 1.0; /* Ultra-tight — text blocks feel like billboards */ + --tracking-display: -0.025em; /* ≈ -2.05px at 82px — monolithic block */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit. Section vertical spacing 80–100px. */ + --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-y-desktop: 80px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Near-zero: the dominant radius. Sharp, architectural corners on + * everything. The sharpness contrasts with the softness of the colors, + * creating tension between warm color and hard geometry. */ + --radius-sm: 2px; /* Near-zero — all standard elements */ + --radius-md: 2px; /* Same — no rounding variation */ + --radius-lg: 4px; /* Slight variation for larger containers */ + --radius-pill: 9999px; /* Pill reserved for chips/badges only */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Golden hour shadows — amber-tinted, warm, multi-layered. + * Primary layer of the cascade (subsequent layers in components). */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: -8px 16px 39px rgba(127, 99, 21, 0.12); /* Golden float */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Orange-tinted focus ring consistent with the warm brand. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard durations — Mistral's boldness is in type and color, + * not in animation. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1280px container — wide-format layouts for dramatic imagery. */ + --container-max: 1280px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/nvidia/components.html b/design-systems/nvidia/components.html new file mode 100644 index 000000000..33f6db9d9 --- /dev/null +++ b/design-systems/nvidia/components.html @@ -0,0 +1,414 @@ + + + + + + NVIDIA — reference components + + + + + +
+ +
+
+
+
+

reference-fixture · nvidia

+

Accelerated
intelligence.

+

+ True black canvas. NVIDIA Green (#76b900) used only as signal — + borders, underlines, outlines. Never filled. Hover reveals + teal (#1eaedb) — the brand surprise. +

+
+ + View tokens + + + Read design +
+
+
2pxradius
+
700weight
+
#76b900green
+
#1eaedbhover
+
+
+ +
+
+
+ + +
+
+
+

what-this-fixture-exercises

+

2px radius. Bold hierarchy. Green borders.

+
+
+
+ A1-identity +

NVIDIA-EMEA Bold

+

+ Arial/Helvetica fallback. Font-weight 700 is the dominant voice + for headings, buttons, nav, labels. Weight 400 reserved for body + copy and descriptions only. +

+ Inspect typography → +
+
+ A1-identity +

Teal hover surprise

+

+ Primary CTA: transparent + 2px green border at rest. + Hover: teal fill (#1eaedb). Active: bright blue (#007fff). + No dark-green variation — it's a horizontal color shift. +

+ Read the rule → +
+
+ A1-structure +

Dense 64px sections

+

+ --section-y-desktop: 64px — tighter than typical SaaS. + Technical product catalogs require density. 1200px container, + full-width alternating dark/light sections. +

+ Inspect spacing → +
+
+
+
+ + +
+
+
+
+

light-section-override

+

Same green signal. White canvas.

+

+ NVIDIA alternate sections use white backgrounds. Green accent + remains #76b900 — it works identically on both dark and light. + Button behavior is identical: transparent + green border, + teal fill on hover. +

+
+
+
+ + +

Access NVIDIA NIM inference endpoints.

+
+
+ + +
+
+
+
+
+
+ + diff --git a/design-systems/nvidia/tokens.css b/design-systems/nvidia/tokens.css new file mode 100644 index 000000000..7396342c7 --- /dev/null +++ b/design-systems/nvidia/tokens.css @@ -0,0 +1,133 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/nvidia/tokens.css + * + * Structured token bindings for "Design System Inspired by NVIDIA". + * GPU computing power aesthetic: black canvas, NVIDIA Green (#76b900) as + * pure signal accent, industrial NVIDIA-EMEA font, minimal 2px radius. + * + * Key brand decisions encoded here: + * - True black (#000000) primary canvas — maximum energy contrast + * - NVIDIA Green (#76b900) as SIGNAL ONLY: borders, underlines, outlines + * — never as large surface fills (that's the rule from the brand) + * - Bold (700) as the dominant voice for headings, buttons, nav, labels + * - Minimal radius (2px) — precision-engineered hardware aesthetic + * - Primary button is transparent with 2px green border (NOT filled green) + * - Hover shifts: green-border → teal fill (#1eaedb) — the NVIDIA surprise + * - Dark/light section alternation — green works identically on both + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * True black as the dominant page canvas. Cards and content areas + * alternate with white sections. Near Black (#1a1a1a) for dark cards. */ + --bg: #000000; /* True Black — dominant dark canvas */ + --surface: #1a1a1a; /* Near Black — card backgrounds on black pages */ + --surface-warm: var(--surface); /* alias — no warm tier; system is monochromatic */ + + /* ─── Foreground (on dark) ──────────────────────────────────────── + * White primary text. Gray scale for hierarchy on dark backgrounds. */ + --fg: #ffffff; /* Pure White — primary text on dark backgrounds */ + --fg-2: #a7a7a7; /* Gray 300 — muted heading variants */ + --muted: #757575; /* Gray 500 — tertiary text, placeholders, footers */ + --meta: #898989; /* Gray 400 — secondary text, metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Gray borders for structure; NVIDIA Green for emphasis/accent borders. + * The 2px green border IS the primary interactive signal. */ + --border: #5e5e5e; /* Gray Border — subtle borders, divider lines */ + --border-soft: #2a2a2a; /* Barely visible inner divider on dark */ + + /* ─── Accent ────────────────────────────────────────────────────── + * NVIDIA Green — the brand fingerprint. Use ONLY for borders, underlines, + * outlines, and active indicators. Never as a filled surface. + * + * Note on hover/active: NVIDIA's CTA hover shifts to TEAL (#1eaedb), + * not a darker green. This is the NVIDIA brand surprise — document it. + * --accent-hover: teal fill for hover state + * --accent-active: bright blue for active/pressed */ + --accent: #76b900; /* NVIDIA Green — the signature */ + --accent-on: #000000; /* Dark text on green (if ever used as fill) */ + --accent-hover: #1eaedb; /* Teal — NVIDIA button hover color */ + --accent-active: #007fff; /* Bright Blue — NVIDIA button active color */ + + /* ─── Semantic ──────────────────────────────────────────────────── + * Success uses a darker green (#3f8500) — clearly distinct from the + * brand NVIDIA Green (#76b900) while remaining in the green family. */ + --success: #3f8500; /* Green 500 — success (darker than brand green) */ + --warn: #ef9100; /* Yellow 300 — advisory states */ + --danger: #e52020; /* Red 500 — error states */ + + /* ─── Typography ────────────────────────────────────────────────── + * NVIDIA-EMEA font (Arial/Helvetica fallbacks) — European, pragmatic, + * engineering-focused. Bold (700) as the dominant voice. + * 400 reserved for body text and descriptions only. */ + --font-display: "NVIDIA-EMEA", Arial, Helvetica, sans-serif; + --font-body: "NVIDIA-EMEA", Arial, Helvetica, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; + + /* Type scale — DESIGN.md §3. Display at 36px (modest by GPU standards). + * Dense technical content doesn't need massive display typography. */ + --text-xs: 10px; /* Micro Label — uppercase tiny badges */ + --text-sm: 12px; /* Caption Small — fine print, legal */ + --text-base: 16px; /* Body — standard reading text */ + --text-lg: 18px; /* Body Large — emphasized lead paragraphs */ + --text-xl: 22px; /* Sub-heading — feature descriptions */ + --text-2xl: 24px; /* Section Heading */ + --text-3xl: 32px; /* Below display — intermediate heading */ + --text-4xl: 36px; /* Display Hero — maximum impact headlines */ + + --leading-body: 1.5; /* Body text */ + --leading-tight: 1.25; /* Tight headings — dense authoritative blocks */ + --tracking-display: 0em; /* No decorative tracking — font carries industrial character */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * Tighter than typical SaaS — technical content requires density. + * Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px. */ + --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-y-desktop: 64px; /* Denser than typical — GPU catalog feel */ + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * 2px for virtually everything — precision-engineered appearance. + * No rounding that would soften the hardware character. */ + --radius-sm: 2px; /* Everything — buttons, cards, inputs */ + --radius-md: 2px; /* Same — minimal variation */ + --radius-lg: 4px; /* Rare larger containers */ + --radius-pill: 9999px; /* Declared for schema compliance */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * One shadow value in the system: 5px ambient blur at 30% opacity. + * The primary depth signal is color contrast (black vs white sections) + * and green accent borders. */ + --elev-flat: none; + --elev-ring: 0 0 0 2px var(--accent); /* Green border ring — NVIDIA signal */ + --elev-raised: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px; /* Ambient card shadow */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Black outline focus — crisp, hardware-like. The green accent + * is already used for elev-ring; focus uses black for distinction. */ + --focus-ring: 0 0 0 2px #ffffff; /* White ring on dark surface for visibility */ + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard durations — GPU software feels solid and instantaneous. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1200px container with full-width hero sections. + * Feature sections: 2–3 column product card grids. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/opencode-ai/components.html b/design-systems/opencode-ai/components.html new file mode 100644 index 000000000..a41ed3ff7 --- /dev/null +++ b/design-systems/opencode-ai/components.html @@ -0,0 +1,389 @@ + + + + + + OpenCode AI — reference components + + + + + +
+
+
+

reference-fixture · opencode-ai

+

The terminal has a design system.

+

+ Warm near-black canvas (#201d1d). Berkeley Mono is the + only typeface — "everything is code." Flat depth: no shadows, only + border rings and background shifts. Apple HIG colors. +

+
+ + View tokens + + + Read DESIGN.md +
+
+
+ +
+
+

apple-hig-semantic-colors

+

Familiar signals on dark canvas.

+

+ #30d158 success · #ff9f0a warn · + #ff3b30 danger · #007aff accent. + Monospace badges. No rounded pills. +

+
+ passing + stale + failed + running +
+
+
+ +
+
+

what-this-fixture-exercises

+

Flat depth. Border rings. No blur.

+
+
+
+
+

Berkeley Mono — every tier

+ A1-identity +
+

+ --font-display, --font-body, and --font-mono all resolve to the same + font stack. Hierarchy is created by size and weight (400 / 500 / 700) + alone. No switching between faces. +

+

cat tokens.css | grep font

+
+
+
+

Flat elevation system

+ A1-structure +
+

+ --elev-flat: none · --elev-ring: 0 0 0 1px var(--border) · + --elev-raised: 0 0 0 2px var(--border). All three use ring outlines. + Zero blur, zero spread. Depth via bg-shift: #201d1d → #302c2c. +

+ Inspect elevation → +
+
+
+

880px narrow column

+ A1-structure +
+

+ --container-max: 880px. Single-column, text-centric layout. + "The whole page is a terminal session" — no multi-column marketing grids. + Generous 80px section spacing. +

+
+ Press ⌘ K to jump +
+
+
+
+ +
+
+

form-components

+

Config-file inputs.

+

+ Labels are small monospace — they look like config keys. + Inputs use 6px radius (the roundest element in the system), + warm borders, and a 2px Apple blue focus ring. +

+
+
+
+ + +

Set in environment or paste here to persist in keychain.

+
+
+ + +
+
+ + +
+
+
+
+ + diff --git a/design-systems/opencode-ai/tokens.css b/design-systems/opencode-ai/tokens.css new file mode 100644 index 000000000..bd4539957 --- /dev/null +++ b/design-systems/opencode-ai/tokens.css @@ -0,0 +1,126 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/opencode-ai/tokens.css + * + * Structured token bindings for "Design System Inspired by OpenCode". + * Terminal-native dark theme: warm near-black canvas, Berkeley Mono as + * the sole typeface, flat depth (no shadows), Apple HIG semantic colors. + * + * Key brand decisions encoded here: + * - Dark-on-dark: #201d1d (warm near-black) as page bg, #302c2c for surface + * - #fdfcfc (barely-warm off-white) as primary text — never pure white + * - Berkeley Mono ONLY — no second typeface, no typographic variation + * - FLAT depth system — zero shadows; depth via borders and bg shifts + * - Warm borders: rgba(15,0,0,0.12) — subtle red tint ties to warm palette + * - Apple HIG semantic colors (#007aff, #ff3b30, #30d158, #ff9f0a) + * - Narrow reading column (~880px) — single-column, text-centric + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface (dark theme) ──────────────────────────────────────── + * Warm near-black → slightly lighter dark surface. + * The reddish warmth (rgb(32,29,29)) is subtle but essential. */ + --bg: #201d1d; /* OpenCode Dark — warm near-black with reddish undertone */ + --surface: #302c2c; /* Dark Surface — elevated containers, slight differentiation */ + --surface-warm: var(--surface); /* alias — no separate warm tier needed */ + + /* ─── Foreground (on dark) ──────────────────────────────────────── + * Warm off-white text — never clinical pure white. */ + --fg: #fdfcfc; /* OpenCode Light — barely-warm off-white primary text */ + --fg-2: #c8c6c4; /* Warm light gray — secondary on dark */ + --muted: #9a9898; /* Mid Gray — secondary text, muted links */ + --meta: #6e6e73; /* Text Muted — disabled text, placeholders */ + + /* ─── Border (warm transparent) ────────────────────────────────── + * The warm red tint (rgba(15,0,0,...)) in borders ties them to the + * overall warm dark palette. Use #646262 for visible outlines. */ + --border: #464343; /* Warm dark border — visible against bg */ + --border-soft: #302c2c; /* Same as surface — barely-visible inner separator */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Apple system blue — #007aff. Familiar, trustworthy, high-contrast + * on the warm dark canvas. The full three-stage hover sequence: + * #007aff → #0056b3 (hover) → #004085 (active). */ + --accent: #007aff; + --accent-on: #ffffff; + --accent-hover: #0056b3; /* Accent Blue Hover — explicitly defined */ + --accent-active: #004085; /* Accent Blue Active — deeply pressed */ + + /* ─── Semantic (Apple HIG palette) ──────────────────────────────── + * Familiar trustworthy signals on a dark terminal canvas. */ + --success: #30d158; /* Apple system green */ + --warn: #ff9f0a; /* Apple system orange */ + --danger: #ff3b30; /* Apple system red */ + + /* ─── Typography ────────────────────────────────────────────────── + * Berkeley Mono is the ONLY font. No typographic variation — no + * display face, no body face — "everything is code" philosophy. + * Hierarchy via size and weight alone (400 / 500 / 700). */ + --font-display: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + --font-body: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + --font-mono: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; + + /* Type scale — DESIGN.md §3. Heading 1 at 38px, rest at 16px variants. + * The system is intentionally compressed — terminal scale. */ + --text-xs: 12px; + --text-sm: 14px; /* Caption — footnotes, metadata (lh 2.0) */ + --text-base: 16px; /* Body — standard text (weight 400 or 500) */ + --text-lg: 18px; + --text-xl: 22px; + --text-2xl: 28px; + --text-3xl: 38px; /* Heading 1 — hero headlines (weight 700, lh 1.5) */ + --text-4xl: 48px; /* Extended display if needed */ + + --leading-body: 1.5; /* Monospace grid breathes at 1.5 */ + --leading-tight: 1.0; /* Compact labels, tab items */ + --tracking-display: 0em; /* Monospace doesn't need letter-spacing manipulation */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit. Generous extended scale (up to 96px) for sections. + * Sections separated by spacing alone — no decorative dividers. */ + --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-y-desktop: 80px; /* Terminal-like generous spacing between sections */ + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Minimal: 4px everywhere, 6px for form inputs (the roundest element). + * "Terminals don't have rounded corners" — utilitarian aesthetic. */ + --radius-sm: 4px; /* Default for all elements */ + --radius-md: 6px; /* Form inputs — slightly more approachable */ + --radius-lg: 8px; /* Rare — largest container radius */ + --radius-pill: 9999px; /* Declared but not part of the OpenCode aesthetic */ + + /* ─── Elevation (FLAT) ──────────────────────────────────────────── + * Zero shadows — consistent with the terminal aesthetic. + * Depth via border treatments and background color shifts ONLY. + * All three levels use rings/outlines, never blur shadows. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 0 0 2px var(--border); /* Slightly more prominent ring — no blur */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Accent blue focus ring — no shadow-based ring (flat system). */ + --focus-ring: 0 0 0 2px var(--accent); + + /* ─── Motion ────────────────────────────────────────────────────── + * Terminal-inspired: instant state changes. 100ms for snappy feedback. */ + --motion-fast: 100ms; + --motion-base: 150ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * Narrow reading column (880px) — single-column, text-centric. + * Generous side margins focus attention on the content. */ + --container-max: 880px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 20px; + --container-gutter-phone: 16px; +} diff --git a/design-systems/replicate/components.html b/design-systems/replicate/components.html new file mode 100644 index 000000000..71a2467d5 --- /dev/null +++ b/design-systems/replicate/components.html @@ -0,0 +1,340 @@ + + + + + + Replicate — reference components + + + + + +
+
+
+
+

Reference fixture · replicate

+

Run models with a single API call.

+

+ A developer playground crackling with creative energy. + Bold, high-contrast, pill-shaped — everything. +

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

What this fixture exercises

+

Everything is pill-shaped. Everything.

+
+
+
+

Universal pill radius

+

+ --radius-sm/md/lg/pill: all 9999px. Buttons, cards, inputs, + images, badges — the most extreme pill commitment in any tech brand. +

+ Inspect tokens → +
+
+

Heavy display, quiet body

+

+ rb-freigeist-neue at weight 700 thunders through headlines. + basier-square at weight 400 handles body text silently. Extreme contrast. +

+ Read the rule → +
+
+

Dotted underline links

+

+ text-decoration: underline dotted #bbbbbb — a developer notebook + aesthetic. Lighter and more casual than solid underlines. +

+ Inspect → +
+
+
+ +
+
+
+

Form components

+

Even inputs are pill-shaped.

+

+ Inputs use 9999px radius consistent with the system commitment. + Border is Replicate Dark (#202020) — heavy, high-contrast containment. +

+
+
+
+ + +

Get your API key.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/replicate/tokens.css b/design-systems/replicate/tokens.css new file mode 100644 index 000000000..fc7164c24 --- /dev/null +++ b/design-systems/replicate/tokens.css @@ -0,0 +1,125 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/replicate/tokens.css + * + * Structured token bindings for "Design System Inspired by Replicate". + * Developer playground: explosive gradient energy, pill-shaped geometry, + * massive display typography, high-contrast black/white + red brand. + * + * Key brand decisions encoded here: + * - Pure white body canvas with Replicate Dark (#202020) for text/borders + * - Replicate Red (#ea2804) — brand accent for gradients and accent borders + * - EVERYTHING is pill-shaped (9999px) — the absolute design commitment + * - rb-freigeist-neue at weight 700 for display — thundering headlines + * - basier-square at weight 400 for body — quiet counterpart to heavy display + * - Links use dotted underline (#bbbbbb) — developer notebook aesthetic + * - Depth via borders and background color, not shadows + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Pure white body. The hero gradient section provides its own + * background — no warm canvas tinting. */ + --bg: #ffffff; + --surface: #f8f8f8; /* Subtle gray for alternate sections */ + --surface-warm: var(--surface); /* no warm tier */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Replicate Dark (#202020) — warmer than pure black, the anchor + * for all text and borders. */ + --fg: #202020; /* Replicate Dark */ + --fg-2: #4e4e4e; /* Warm Gray — emphasized secondary */ + --muted: #646464; /* Medium Gray — secondary body text */ + --meta: #8d8d8d; /* Mid Silver — tertiary, footnotes */ + + /* ─── Border ────────────────────────────────────────────────────── + * The primary containment mechanism. Replicate uses heavy dark + * borders (1px solid #202020) rather than shadows. */ + --border: #202020; /* Dark border — primary card/button containment */ + --border-soft: #e5e5e5; /* Lighter — inner dividers, less prominent */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Replicate Red — used for gradients and accent borders. + * NOT used as a surface fill — it's for the hero gradient and highlights. */ + --accent: #ea2804; + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 16%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Status Green is the Replicate brand green for operational badges. + * Replaces the default success color to reinforce the community vibe. */ + --success: #2b9a66; /* Status Green — "running" and operational badges */ + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Two-voice system: heavy display (rb-freigeist-neue 700) vs + * quiet body (basier-square 400). The contrast is extreme and intentional. + * JetBrains Mono for all code — primary content for developers. */ + --font-display: "rb-freigeist-neue", ui-sans-serif, system-ui, sans-serif; + --font-body: "basier-square", ui-sans-serif, system-ui, sans-serif; + --font-mono: "jetbrains-mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; + + /* Type scale — DESIGN.md §3. 128px manifesto, 72px hero, 48px section. + * "128px is a real size" — the design equivalent of shouting from a rooftop. */ + --text-xs: 12px; /* Tag — lowercase transform */ + --text-sm: 14px; /* Code Small / Caption */ + --text-base: 16px; /* Body / Button */ + --text-lg: 18px; /* Body Large */ + --text-xl: 30px; /* Sub-heading */ + --text-2xl: 48px; /* Section Heading */ + --text-3xl: 72px; /* Display / Hero */ + --text-4xl: 128px; /* Display Mega — closing manifesto */ + + --leading-body: 1.5; + --leading-tight: 1.0; /* Tight at all display sizes */ + --tracking-display: -0.025em; /* ≈ -1.8px at 72px — dense hero text */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * Very generous section spacing (96–192px). Dense within galleries. */ + --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-y-desktop: 96px; /* Bold and generous — distinct content zones */ + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * EVERYTHING is pill-shaped (9999px). This is the most extreme pill + * commitment in any major tech brand. All four tiers collapse to pill. + * The only acceptable alternative is the hero gradient section itself. */ + --radius-sm: 9999px; /* Even small elements are pill-shaped */ + --radius-md: 9999px; /* All cards, containers — pill */ + --radius-lg: 9999px; /* All featured containers — still pill */ + --radius-pill: 9999px; /* Explicit pill */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * No drop shadows — depth comes from borders and background color. + * The --elev-raised uses the accent border to highlight featured items. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 0 0 1px var(--accent); /* Accent border ring for featured items */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Orange-red tinted focus — consistent with the brand energy. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Developer energy: snappy transitions, no decoration. */ + --motion-fast: 120ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * Fluid width, responsive grid. Hero full-width gradient. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/together-ai/components.html b/design-systems/together-ai/components.html new file mode 100644 index 000000000..ca198a7e7 --- /dev/null +++ b/design-systems/together-ai/components.html @@ -0,0 +1,422 @@ + + + + + + Together AI — reference components + + + + + +
+ +
+
+
+
+

reference-fixture · together-ai

+

Fast inference. Open models.

+

+ "The Future" font with aggressive negative tracking. + Pure white canvas for business, deep midnight for research. + Sharp 4/8px geometry — never pill, never generous. +

+
+ + View tokens + + + Read design +
+
+
+
+ 100+ + open models +
+
+ 64px + display size +
+
+ −0.03em + tracking +
+
+
+
+
+ + +
+
+
+

what-this-fixture-exercises

+

Sharp geometry. Negative tracking. Lavender tints.

+
+
+
+ Display +

"The Future"

+

+ Single typeface for both display and body. Weight capped at 500. + Aggressive negative tracking (−0.03em) throughout — no exceptions. +

+ Inspect → +
+
+ Geometry +

4px + 8px only

+

+ --radius-sm: 4px for buttons, badges, tags. --radius-md: 8px for + feature containers. No pill shapes — technical precision over softness. +

+ Inspect radius → +
+
+ Accent +

Midnight CTA

+

+ --accent: #010120. The dark world's background color used as the + primary CTA on light sections. Lavender (#bdbbff) as soft UI tint. +

+ Read the rule → +
+
+
+
+ + +
+
+
+
+

dark-section-override

+

The research world. Midnight blue.

+

+ Dark sections use background #010120 with white text. Same font, + same sharp geometry. Lavender becomes the primary CTA color here. +

+
+ Lavender CTA + Read design +
+
+
+
+ Technical +

PP Neue Montreal Mono

+

+ --font-mono: "PP Neue Montreal Mono". Used for uppercase section + labels and technical markers. Positive tracking contrast (0.1em) + against "The Future"'s negative display tracking. +

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

form-components

+

Sharp inputs. Mono labels.

+

+ Labels use PP Neue Montreal Mono, uppercase. Inputs have 4px radius, + crisp 1px borders. Focus shifts border to midnight dark (#010120) + with brand-tinted focus ring. +

+
+
+
+ + +

Used to authenticate all inference requests.

+
+
+ + +
+
+ + +
+
+
+
+
+
+ + diff --git a/design-systems/together-ai/tokens.css b/design-systems/together-ai/tokens.css new file mode 100644 index 000000000..2fbfadb77 --- /dev/null +++ b/design-systems/together-ai/tokens.css @@ -0,0 +1,127 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/together-ai/tokens.css + * + * Structured token bindings for "Design System Inspired by Together AI". + * Pastel-gradient dreamscape for enterprise AI infrastructure: airy + * optimism meets technical precision, dual light/dark world approach. + * + * Key brand decisions encoded here: + * - Pure white light sections; Deep midnight blue (#010120) for dark sections + * - "The Future" font with aggressive negative tracking throughout + * - PP Neue Montreal Mono for uppercase section labels — technical taste + * - Sharp geometry (4px, 8px) — never pill, never generous rounding + * - Dark-blue-tinted shadows (rgba(1,1,32,0.1)) — ties to brand midnight + * - Brand Magenta (#ef2cc1) + Orange (#fc4c02) for illustrations ONLY + * - Lavender (#bdbbff) as a soft secondary UI accent + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Pure white for the light "business" world. Dark blue sections + * (the research/technical world) are applied as section overrides + * in components, not as the base --bg token. */ + --bg: #ffffff; + --surface: #ffffff; /* Cards on white — subtle glass tint in components */ + --surface-warm: var(--surface); /* no warm tier — system uses cool/neutral palette */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Pure black on light; aliased to white on dark sections via component + * overrides. The soft lavender muted provides a gentle secondary tint. */ + --fg: #000000; /* Pure Black on light surfaces */ + --fg-2: rgba(0, 0, 0, 0.6); /* Black 40 — de-emphasized secondary text */ + --muted: #666666; /* Approximated from Black 40 on white for readability */ + --meta: var(--muted); /* alias */ + + /* ─── Border ────────────────────────────────────────────────────── + * Semi-transparent borders using rgba — together with the dark blue + * shadow they give a "glass on white" quality to containment. */ + --border: #ebebeb; /* ≈ rgba(0,0,0,0.08) on white — subtle containment */ + --border-soft: var(--border); /* alias — single border tier for light sections */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Dark Blue (#010120) as the primary CTA — it IS the dark world's + * surface color, making CTAs feel grounded in the brand universe. + * Brand Magenta and Orange are illustration-only; never use as --accent. */ + --accent: #010120; /* Dark Blue — primary CTA on light surfaces */ + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), white 8%); /* lighten the dark */ + --accent-active: color-mix(in oklab, var(--accent), white 16%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Standard semantic palette against the clean white light world. */ + --success: #16a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * "The Future" for all display and body — negative tracking throughout. + * PP Neue Montreal Mono for uppercase technical labels and markers. + * Weight range: 400 (regular) and 500 (medium) — NO bold. + * Tight line-heights (1.25–1.30) create a dense, information-rich feel. */ + --font-display: "The Future", Arial, ui-sans-serif, sans-serif; + --font-body: "The Future", Arial, ui-sans-serif, sans-serif; + --font-mono: "PP Neue Montreal Mono", Georgia, ui-monospace, monospace; + + /* Type scale — DESIGN.md §3. 64px display, 40px section, 28px sub. */ + --text-xs: 10px; /* Mono Micro — smallest uppercase labels */ + --text-sm: 14px; /* Caption — metadata, descriptions */ + --text-base: 16px; /* Body / Button / Nav */ + --text-lg: 18px; /* Body Large — descriptions, sections */ + --text-xl: 22px; /* Feature Title */ + --text-2xl: 28px; /* Sub-heading */ + --text-3xl: 40px; /* Section Heading */ + --text-4xl: 64px; /* Display / Hero — maximum impact */ + + --leading-body: 1.3; /* Dense, information-rich feel — tighter than typical */ + --leading-tight: 1.0; /* Ultra-tight at display scale */ + --tracking-display: -0.03em; /* ≈ -1.92px at 64px — always negative on The Future */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * Generous section spacing (80–120px) for optimistic breathing room. */ + --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-y-desktop: 80px; + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Sharp geometry — never pill, never generous rounding. + * This deliberately contrasts with the soft pastel gradients, + * creating "technical infrastructure company with taste." */ + --radius-sm: 4px; /* Badges, buttons, tags, small interactive */ + --radius-md: 8px; /* Larger containers, feature cards */ + --radius-lg: 8px; /* Same — no large roundness */ + --radius-pill: 9999px; /* Declared but should not be used in Together AI */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Dark-blue-tinted shadow — the subtle blue cast ties elevated + * elements to the brand's midnight-blue dark mode. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: rgba(1, 1, 32, 0.1) 0px 4px 10px; /* Brand midnight blue shadow */ + + /* ─── Focus ring ────────────────────────────────────────────────── + * Dark blue focus ring consistent with the CTA color. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard — Together AI's energy is in the gradient illustrations, + * not animation velocity. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1200px container, centered. Hero has centered pastel gradient bg. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +}