diff --git a/design-systems/binance/components.html b/design-systems/binance/components.html new file mode 100644 index 000000000..46a6fcc57 --- /dev/null +++ b/design-systems/binance/components.html @@ -0,0 +1,550 @@ + + + + + + Binance — reference components + + + + + +
+
+
+
+

Reference fixture · binance

+

The world's leading cryptocurrency exchange.

+

+ Trade 350+ coins on the platform millions trust for low fees, deep liquidity, + and a security record built for the long term. Buy, sell, and stake in seconds. +

+
+
+ BTC / USD + $68,432.10 + +2.41% +
+
+ ETH / USD + $3,584.20 + +1.18% +
+
+ BNB / USD + $612.55 + −0.73% +
+
+ SOL / USD + $148.07 + +4.92% +
+
+
+ + Get started + + + View markets +
+
+ +
+
+ +
+
+

Built for traders

+

Operational clarity, every screen.

+
+
+
+ +

Industry-low fees

+

+ 0.10% spot trading fee — discounted further when paying in BNB. + Tabular numerics keep price columns aligned across portfolios. +

+
+ Spot · 0.10% + Fees → +
+
+
+ +

Security & SAFU

+

+ Cold-storage majority, real-time risk monitoring, and the SAFU fund — + an insurance reserve protecting user assets since 2018. +

+
+ + + Operational + + Trust → +
+
+
+ +

Deep liquidity

+

+ Execute size on 350+ markets with the order-book depth of the world's + busiest exchange. Sub-millisecond matching engine across global regions. +

+
+ 24h vol −1.2% + Markets → +
+
+
+
+ +
+
+
+

Trusted by millions

+

A platform engineered to scale.

+
+
+
+

$76B+

+

24h trading volume across spot and derivatives

+
+
+

180M+

+

Registered users in 180+ countries worldwide

+
+
+

350+

+

Cryptocurrencies and trading pairs available today

+
+
+
+ + Read the security report + + +
+
+
+ +
+
+
+

Open an account

+

Start trading in minutes.

+

+ KYC verification is fast and runs entirely in-app. Sign up with email, + verify your identity, fund your account, and place your first trade. + Press ⌘ K anytime to search markets. +

+

+ Already have an account? + Log in → +

+
+
+
+ + +

We'll send a verification code — no marketing.

+
+
+ + +

Get up to 20% trading-fee kickback on your first trades.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/binance/tokens.css b/design-systems/binance/tokens.css new file mode 100644 index 000000000..731fbb877 --- /dev/null +++ b/design-systems/binance/tokens.css @@ -0,0 +1,255 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/binance/tokens.css + * + * Structured token bindings for "Design System Inspired by Binance.US" + * — the polished urgency of a crypto trading floor: white surfaces and + * deep near-black `#222126` panels alternating in rhythm, Binance Yellow + * `#F0B90B` cutting through the monochrome as the single brand signal, + * BinancePlex headlines that carry proprietary gravitas, pill-shaped CTAs + * (50px+ radius) demanding attention, and whisper-light 5%-opacity card + * shadows that ground floating surfaces without ever feeling decorative. + * + * This file pre-compiles the values described in `DESIGN.md` into the + * shared schema. Agents generating a Binance-flavored artifact should + * paste the `:root { … }` block verbatim into the first ` + + +
+
+
+
+

Reference fixture · clickhouse

+

The fastest open-source OLAP database.

+

+ Sub-second analytical queries over petabytes. A columnar engine built + for real-time analytics, observability, and the agentic workloads of + the next decade — running on commodity hardware. +

+
+ + Run a query + + + Get started + Read the docs +
+
+ +
+ +
+
+
100×
+

Faster than row-oriented stores on analytical workloads.

+
+
+
38ms
+

P95 latency on 1.2B-row aggregations, single replica.

+
+
+
2.2PB
+

Largest production cluster — and growing every quarter.

+
+
+
+ +
+
+

What this fixture exercises

+

Engineered for the workloads other databases can't keep up with.

+
+
+
+

Featured

+

Columnar at the core

+

+ A vectorized execution engine reads only the columns a query touches. + Compression ratios of 10–100× shrink storage and accelerate scans. +

+ Inspect tokens → +
+
+

Real-time ingestion

+

+ Millions of rows per second per node. Kafka, S3, JDBC, HTTP — + ingest from anywhere, query while writes are still in flight. +

+ Read the spec → +
+
+

SQL you already know

+

+ ANSI SQL plus a powerful expression library. Window functions, + JSON, geospatial, arrays — every analytical primitive, native. +

+ Browse functions → +
+
+
+ +
+
+
+

Form components

+

Spin up a cluster in 30 seconds.

+

+ Inputs use the same charcoal-bordered geometry as the cards. Focus + ring is neon volt — unified interactive feedback across the system. +

+

+ Already running ClickHouse? Connect an existing cluster. +

+
+
+
+ + +

We'll send your free-tier credentials and nothing else.

+
+
+ + +

Pick a region close to your data sources for lowest latency.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/clickhouse/tokens.css b/design-systems/clickhouse/tokens.css new file mode 100644 index 000000000..310e09732 --- /dev/null +++ b/design-systems/clickhouse/tokens.css @@ -0,0 +1,135 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/clickhouse/tokens.css + * + * Structured token bindings for "Design System Inspired by ClickHouse". + * High-performance cockpit in acid yellow-green on obsidian black — + * pure black canvas, neon volt accents, extra-heavy Inter (900) display, + * charcoal-bordered cards, terminal-grade aesthetic. + * + * Key brand decisions encoded here: + * - Pure Black (#000000) page bg — never dark gray as page bg + * - Neon Volt (#faff69) as sole chromatic accent — maximum contrast on black + * - Charcoal borders (rgba(65,65,65,0.8)) — primary depth mechanism + * - Inter as primary, Basier as secondary display, Inconsolata for code + * - 96px display headlines with weight 900 — text as physical mass + * - Tight 1.0 leading on display sizes — billboard scale + * - Sharp 4px radius on buttons, 8px on cards — database precision geometry + * - Forest Green (#166534) doubles as --success — brand-aligned semantic + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Dark void: pure black canvas, near-black surfaces. + * The black is absolute (#000000) — never softened to dark gray. */ + --bg: #000000; /* Pure Black — the page canvas, absolute */ + --surface: #141414; /* Near Black — buttons, lifted dark surfaces */ + --surface-warm: var(--surface); /* alias — no warm tier in the cool-neutral palette */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Pure White on black for primary, Silver for secondary. + * All neutrals are perfectly neutral — no warm undertone. */ + --fg: #ffffff; /* Pure White — primary text on dark surfaces */ + --fg-2: #a0a0a0; /* Silver — secondary body text on dark */ + --muted: #a0a0a0; /* Silver — captions, muted content */ + --meta: #585858; /* Mid Gray — metadata, deepest neutral text */ + + /* ─── Border ────────────────────────────────────────────────────── + * Charcoal at 80% opacity — the workhorse for all card containment. + * Deep charcoal for inner separators that should not visually compete. */ + --border: rgba(65, 65, 65, 0.8); /* Charcoal — primary card edge */ + --border-soft: #343434; /* Deep Charcoal — inner separator, quieter */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Neon Volt — the literal ClickHouse brand mark. Sole chromatic + * interruption on the obsidian canvas. Used on CTAs, link hovers, + * featured borders. Hover/active swap to dark variants per DESIGN.md: + * the neon CTA's hover INVERTS to near-black bg; active dims to pale. */ + --accent: #faff69; /* Neon Volt — signature acid yellow-green */ + --accent-on: #151515; /* Near Black text on neon — maximum readability */ + --accent-hover: #1d1d1d; /* Brand-specific: neon CTA inverts to dark on hover */ + --accent-active: #f4f692; /* Pale Yellow — DESIGN.md active/pressed state */ + + /* ─── Semantic ──────────────────────────────────────────────────── + * Forest Green doubles as success — it's already the brand's + * "Get Started" CTA color, so it's natively part of the palette. + * Warn and danger use schema defaults to stay distinguishable. */ + --success: #166534; /* Forest Green — brand-aligned secondary CTA / success */ + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Inter is the primary face — full weight spectrum (400/500/600/700/900). + * Basier is the secondary display face for feature anchors at weight 600. + * Inconsolata for code blocks at weight 600 — terminal-like rendering. */ + --font-display: "Inter", "Basier", Arial, Helvetica, ui-sans-serif, system-ui, sans-serif; + --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; + --font-mono: "Inconsolata", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3. 96px display mega, 72px hero, 36px feature. + * Weight 900 is reserved for --text-4xl in components; 700 carries the + * rest. Tight leading at scale — text feels architectural. */ + --text-xs: 12px; /* Small — smallest text */ + --text-sm: 14px; /* Caption / Uppercase Label (1.4px tracking) */ + --text-base: 16px; /* Body / Button / Code */ + --text-lg: 20px; /* Feature Title */ + --text-xl: 24px; /* Sub-heading / Card title */ + --text-2xl: 36px; /* Feature Heading (Basier 600) */ + --text-3xl: 72px; /* Display / Hero (Inter 700) */ + --text-4xl: 96px; /* Display Mega — Inter Black (900) */ + + --leading-body: 1.5; + --leading-tight: 1.0; /* Display ultra-tight — physical mass */ + --tracking-display: normal; /* DESIGN.md: normal letter-spacing on display */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base grid. Section vertical spacing 48–64px (generous). */ + --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; /* DESIGN.md: 48–64px generous section rhythm */ + --section-y-tablet: 48px; + --section-y-phone: 32px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Sharp (4px) on buttons / badges / code blocks — database precision. + * Comfortable (8px) on cards. Never round corners beyond 8px. */ + --radius-sm: 4px; /* Sharp — buttons, badges, small elements */ + --radius-md: 8px; /* Comfortable — cards, containers */ + --radius-lg: 8px; /* Same — DESIGN.md caps radius at 8px */ + --radius-pill: 9999px; /* Pill — toggle indicators, status badges */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Shadows are barely visible on black — depth comes from borders. + * Level 2 subtle shadow declared for parity; the real depth signal + * is --elev-ring (charcoal hairline) and neon-border highlights. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Neon-tinted focus — unified interactive feedback signal across + * links, buttons, and inputs. Always shifts toward the accent. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard durations — ClickHouse's intensity is in color and weight, + * not motion. Snappy enough to feel performant. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1280px container — wide enough for multi-column dense data layouts + * while still tractable on standard desktops (DESIGN.md tops at 2200px + * for ultra-wide; 1280px is the workable default). */ + --container-max: 1280px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/coinbase/components.html b/design-systems/coinbase/components.html new file mode 100644 index 000000000..6827de780 --- /dev/null +++ b/design-systems/coinbase/components.html @@ -0,0 +1,501 @@ + + + + + + Coinbase — reference components + + + + + +
+
+
+
+

Reference fixture · coinbase

+

The easiest place to buy, sell, and manage crypto.

+

+ From your first satoshi to a long-term portfolio — Coinbase is the + trusted on-ramp for over 100 million people worldwide. Get started + in minutes, secure your assets, and trade with confidence. +

+
+ + Get started + + + View prices +
+
+ +
+
+ +
+
+

Why Coinbase

+

A mainstream-friendly home for digital money.

+
+
+
+ +

Trusted security

+

+ Industry-leading custody, cold storage for the majority of customer + assets, and FDIC-insured USD balances up to $250,000. +

+ Learn how → +
+
+ +

200+ assets

+

+ Buy and trade Bitcoin, Ethereum, and hundreds of other supported + cryptocurrencies — all from a single, regulated platform. +

+ See all assets → +
+
+ +

Instant on-ramp

+

+ Link a bank or card, verify your identity, and place your first + trade in minutes. Recurring buys keep your portfolio on autopilot. +

+ Start in minutes → +
+
+
+ +
+
+
+
+

+ Get the app +

+

Start with as little as $1.

+

+ Create your account and we'll send setup instructions, recurring-buy + templates, and a guide to keeping your assets safe — nothing else. +

+
+ + + No platform fees on USDC + +
+
+
+
+ + +

+ By continuing, you agree to Coinbase's User Agreement and Privacy Policy. +

+
+
+ + +
+
+
+
+
+
+ + diff --git a/design-systems/coinbase/tokens.css b/design-systems/coinbase/tokens.css new file mode 100644 index 000000000..b1b28a5ca --- /dev/null +++ b/design-systems/coinbase/tokens.css @@ -0,0 +1,257 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/coinbase/tokens.css + * + * Structured token bindings for "Inspired by Coinbase" — the consumer + * crypto exchange dressed in singular Coinbase Blue, near-black product + * surfaces, and the 56px pill CTAs that make the brand instantly + * recognisable. Mainstream-friendly fintech polish: white canvas, + * one functional accent, restrained type, generous radii. + * + * Agents generating a Coinbase-flavored artifact should paste the + * `:root { … }` block verbatim into the first ` + + +
+ +
+
+
+

Reference fixture · hashicorp

+

Infrastructure for any application, on any cloud.

+

+ Provision, secure, connect, and run any application on any + infrastructure. The HashiCorp Cloud Platform unifies Terraform, + Vault, Consul, and Nomad behind one operating model — built for + the platform teams who run production. +

+
+ + Try HCP free + + + Talk to sales +
+
+ + +
+
+ + +
+
+

What this fixture exercises

+

One operating model for cloud, not many.

+
+ +
+
+

Provision with Terraform

+

+ Infrastructure as code across AWS, Azure, GCP, and 3,000+ + providers. Reproducible environments, drift detection, and + policy as code — the platform layer for every team. +

+

terraform apply

+
+
+

Secure with Vault

+

+ Identity-based secrets management and zero-trust security. + Dynamic credentials, automatic rotation, encryption as a + service — the same primitives behind production at scale. +

+

vault kv get secret/api

+
+
+

Connect with Consul

+

+ Service mesh and service discovery across any runtime and + any cloud. mTLS by default, intentions, and traffic shaping — + network automation without the YAML. +

+

consul services register

+
+
+
+ + +
+
+
+

Get started

+

Spin up your first workspace.

+

+ Free tier includes Terraform Cloud, Vault Secrets, and HCP + Boundary. Bring your own cloud account or use HCP-managed + infrastructure — production-grade defaults, day one. +

+

+ By signing up you agree to the terms + and privacy notice. +

+
+
+
+ + +

We'll send a verification link — nothing else.

+
+
+ + +

Lowercase, hyphen-separated. Used in resource paths.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/hashicorp/tokens.css b/design-systems/hashicorp/tokens.css new file mode 100644 index 000000000..fba457d59 --- /dev/null +++ b/design-systems/hashicorp/tokens.css @@ -0,0 +1,272 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/hashicorp/tokens.css + * + * Structured token bindings for "Design System Inspired by HashiCorp" — + * enterprise infrastructure-as-code made tangible: a dramatic near-black + * canvas, engineering-grade typography, whisper-level shadows, and one + * functional blue accent reserved for actionable signals. + * + * Brand identity in three sentences: + * 1. Dark-mode-native canvas (#15181e Dark Charcoal → #0d0e12 Near Black). + * DESIGN.md §1 names these as the "dramatic dark-mode for hero areas + * and product showcases" — we bind --bg/--surface to the iconic + * pair because HashiCorp's brand-defining surfaces are dark. + * 2. HashiCorp Sans for headings (600–700 weight, kern enabled, 1.17 + * line-height at 82px display); system-ui for body, navigation, and + * functional text. The brand font carries the weight; system-ui + * carries the words. + * 3. Action Blue (#1060ff) as the lone functional accent on dark; the + * multi-product palette (Terraform purple, Vault yellow, Waypoint + * teal, Vagrant blue) lives in DESIGN.md §2 as product-scoped + * colors and intentionally does NOT bind here — DESIGN.md §7 forbids + * "product brand colors outside their product context". + * + * Brand-specific schema decisions (each one bends a schema convention + * to match HashiCorp's voice rather than the cross-brand default): + * + * 1. --bg is #15181e (Dark Charcoal), not white. DESIGN.md describes + * the brand's "dual mode" — clean white informational sections AND + * dramatic dark hero/product areas — but the dark surfaces are the + * identity-defining ones; that is where HashiCorp Sans at 82px, + * the multi-product accent colors, and the whisper shadows all + * do their work. Binding --bg to the dark canvas honors the + * iconic look and matches the "dark-friendly enterprise UI" + * identity called out in the brand interpretation. + * + * 2. --fg ramp is independently bound across all four tiers + * (Near White #efeff1 → Mid Gray #d5d7db → Cool Gray #b2b6bd → + * Dark Gray #656a76). DESIGN.md §2 lists each as a named role — + * "Primary text on dark / Button text on dark / Border accents / + * Helper text" — and the brand genuinely walks the full ramp. + * Collapsing --fg-2 or --muted to siblings would flatten the + * ladder that gives HashiCorp content its enterprise density. + * + * 3. --border is rgba(178, 182, 189, 0.4) — the literal alpha used + * on DESIGN.md §4's "Primary Dark" button border. Binding + * --border to the alpha (not a solid hex) lets `--elev-ring` + * reproduce the cool-gray hairline and lets components reach the + * same value via `border: 1px solid var(--border)`. + * --border-soft drops to 0.15 alpha for inner separators that + * should not visually compete with the button edge. + * + * 4. --accent is Action Blue (#1060ff), NOT a product brand color. + * DESIGN.md §2 explicitly classifies Terraform purple / Vault + * yellow / Waypoint teal as product-scoped tokens; the corporate + * brand's functional CTA color on dark is #1060ff. --accent-hover + * LIFTS to #2b89ff (DESIGN.md "Bright Blue — Active links, hover + * accent") instead of darkening — the schema's default black-mix + * formula would lose contrast on the dark canvas. --accent-active + * then darkens via the standard formula for the press state. + * + * 5. --warn is #bb5a00 (DESIGN.md Amber-200), not the schema default + * #eab308. The brighter yellow would clash with HashiCorp's + * muted enterprise palette and read as "Vault product color" + * rather than "warning state". The burnt-amber sits warm but + * restrained on the dark canvas. + * + * 6. --font-display loads HashiCorp Sans (the custom brand face + * called out throughout DESIGN.md) with a substantive fallback + * stack; --font-body uses system-ui per DESIGN.md §3's brand/ + * system split ("HashiCorp Sans for headings only (17px+), + * system-ui for everything else"). Mixing the two is the + * structural rule — never set body copy in HashiCorp Sans. + * + * 7. Type scale tops at 82px (--text-4xl) with 1.17 line-height + * (--leading-tight). DESIGN.md §3 lists 82px / 52px / 42px / 34px + * / 26px as the documented HashiCorp Sans tiers; the 8 schema + * slots map onto five of those plus body sizes 20/16/14/13. + * --tracking-display is `normal` because DESIGN.md §3 explicitly + * sets the 82px hero to letter-spacing `normal` — the brand + * relies on kerning, not tracking, for its monolithic feel. + * + * 8. --leading-body is 1.63 (DESIGN.md's relaxed 1.63–1.69 body + * range) — generous reading rhythm BELOW the tight 1.17 headings + * is the brand's "weight at the top of each section" rule. + * --leading-tight is 1.17, the documented display line-height. + * + * 9. --radius scale is tight: 5px / 8px / 8px / 5px. DESIGN.md §5 + * caps radius at 8px ("nothing pill-shaped or circular") and + * uses 5px for primary buttons, badges, and inputs. We bind + * --radius-lg to the same 8px ceiling (HashiCorp does not have + * a third tier above cards) and --radius-pill to 5px, matching + * DESIGN.md §4's "Badges / Pills — Radius: 5px". The brand's + * "no true pill" rule is structural, not stylistic. + * + * 10. --elev-raised is the whisper-shadow VERBATIM from DESIGN.md §6 + * Level 1: dual-layer at 5% opacity on a cool-gray base. The + * doc says it explicitly: "If you can see the shadow, it's too + * strong." We must not strengthen this in component CSS — + * enterprise stability is communicated through restraint. + * + * 11. --focus-ring is 3px solid var(--accent) (sharp ring, no halo), + * per DESIGN.md §6 ("Focus (Level 2) — 3px solid"). Sharp focus + * is the engineered alternative to the schema's 3px alpha glow. + * + * 12. --section-y-desktop is 80px (DESIGN.md §5 "Enterprise breathing + * room: Generous vertical spacing between sections (48px–80px+)"). + * --container-max is 1150px exactly — DESIGN.md §5 names ~1150px + * as the documented xl breakpoint and max content width. + * + * 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 HashiCorp Sans face is referenced by + * name only — the stack lists OS fallbacks so artifacts render + * acceptably even when the brand font is not loaded. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface (3 levels — dark-mode canvas) ─────────────────────── + * DESIGN.md §1 names #15181e and #0d0e12 as the two dark-mode + * surfaces. --surface-warm aliases --surface because the brand is + * famously achromatic on dark — depth comes from luminance steps + * and whisper shadows, not from warm-tinting one surface against + * another. (DESIGN.md §7: "Don't use pure black (#000000) for dark + * backgrounds — use #15181e or #0d0e12.") */ + --bg: #15181e; /* Dark Charcoal — hero canvas */ + --surface: #0d0e12; /* Near Black — cards, inputs */ + --surface-warm: var(--surface); /* alias — no warm tier on dark */ + + /* ─── Foreground ramp (4 levels) ────────────────────────────────── + * Near White → Mid Gray → Cool Gray → Dark Gray. All four are named + * in DESIGN.md §2 with distinct roles, so we bind each independently + * (no aliasing). #efeff1 instead of #ffffff matters — pure white + * against #15181e reads as harsh; the slight warmth keeps the + * enterprise tone from feeling clinical. */ + --fg: #efeff1; /* Near White — primary text on dark */ + --fg-2: #d5d7db; /* Mid Gray — body description, button text */ + --muted: #b2b6bd; /* Cool Gray — captions, tertiary text */ + --meta: #656a76; /* Dark Gray — helper text, disabled */ + + /* ─── Border (2 levels) ────────────────────────────────────────── + * DESIGN.md §4 names rgba(178, 182, 189, 0.4) as the primary dark + * button border — we lift that exact alpha into --border so + * --elev-ring and `border: 1px solid var(--border)` both reproduce + * the documented hairline. --border-soft drops to 0.15 for inner + * row separators that must not compete with the card edge. */ + --border: rgba(178, 182, 189, 0.4); /* Cool Gray @ 0.4 — primary button edge */ + --border-soft: rgba(178, 182, 189, 0.15); /* inner separator — barely-there */ + + /* ─── Accent ───────────────────────────────────────────────────── + * Action Blue — the corporate brand's single functional CTA color + * on dark. Hard cap of ≤2 visible uses per screen aligns with + * DESIGN.md §7's restraint: the multi-product palette (Terraform + * purple, Vault yellow) is product-scoped and intentionally does + * NOT bind here. Hover LIFTS to Bright Blue rather than darkening + * (the schema default would lose contrast on dark). */ + --accent: #1060ff; /* Action Blue — primary CTA on dark */ + --accent-on: #ffffff; /* white label on saturated blue */ + --accent-hover: #2b89ff; /* Bright Blue — DESIGN.md §2 active links */ + --accent-active: color-mix(in oklab, var(--accent), black 14%); + + /* ─── Semantic ─────────────────────────────────────────────────── + * --warn overrides to DESIGN.md §2 Amber #bb5a00 (the schema's + * #eab308 would read as "Vault product color" on a HashiCorp + * surface). --success and --danger inherit the schema defaults — + * DESIGN.md does not define a brand-specific success color, and + * #731e25 (DESIGN.md's documented red) is a deep error-background + * tone, not the foreground signal a --danger token needs. */ + --success: #16a34a; + --warn: #bb5a00; /* DESIGN.md Amber-200 — warning states */ + --danger: #dc2626; + + /* ─── Typography ───────────────────────────────────────────────── + * Brand/system split per DESIGN.md §3. HashiCorp Sans is the + * heading face; system-ui handles body, navigation, and functional + * text. The fallback chains let artifacts render acceptably when + * the custom face is not loaded. */ + --font-display: "HashiCorp Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3 Hierarchy table. The 8 schema slots + * map the HashiCorp Sans display tiers (82/52/42/26) plus the + * documented body/caption sizes (20/16/14/13). Sub-heading 34px + * and small-title 19px live inline in components when needed. */ + --text-xs: 13px; /* caption / uppercase label */ + --text-sm: 14px; /* small body */ + --text-base: 16px; /* body / nav / button text */ + --text-lg: 20px; /* body large / hero description */ + --text-xl: 26px; /* card title */ + --text-2xl: 42px; /* feature heading */ + --text-3xl: 52px; /* section heading */ + --text-4xl: 82px; /* display hero — "infrastructure-grade" */ + + /* DESIGN.md §3: tight headings (1.17–1.21) over relaxed body + * (1.50–1.69). We sit at the documented endpoints — 1.17 hero, + * 1.63 body. --tracking-display is `normal` because DESIGN.md §3 + * lists the 82px hero at letter-spacing `normal` (kerning is on + * via font-feature-settings, not tracking). */ + --leading-body: 1.63; + --leading-tight: 1.17; + --tracking-display: normal; + + /* ─── Spacing ──────────────────────────────────────────────────── + * 8px base unit (DESIGN.md §5). The 4/8/12/16/20/24/32/48 tier + * covers structural rhythm; sub-tier increments (2/3/6/7/9/11) + * live per-component because they are too fine 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 — DESIGN.md §5 "Enterprise breathing room + * (48–80px+)". 80px desktop sits at the documented top end; + * we collapse to 56px on tablet and 40px on phone. */ + --section-y-desktop: 80px; + --section-y-tablet: 56px; + --section-y-phone: 40px; + + /* ─── Radius ───────────────────────────────────────────────────── + * DESIGN.md §5 caps radius at 8px and uses 5px for buttons/inputs/ + * badges. --radius-lg sits at the 8px ceiling (no third tier + * exists in the brand). --radius-pill binds to 5px because + * DESIGN.md §4 explicitly says "Badges / Pills — Radius: 5px" — + * HashiCorp does not have a true 9999px pill shape; the no-pill + * rule is structural. */ + --radius-sm: 5px; /* DESIGN.md "Comfortable" — buttons, inputs */ + --radius-md: 8px; /* DESIGN.md "Card" — cards, containers */ + --radius-lg: 8px; /* same 8px ceiling — no third tier */ + --radius-pill: 5px; /* DESIGN.md §4 — no true pills, 5px chips */ + + /* ─── Elevation (3 levels) ─────────────────────────────────────── + * Whisper shadows VERBATIM from DESIGN.md §6 Level 1: dual-layer + * at 5% opacity on a cool-gray (97, 104, 117) base. The doc is + * emphatic: "If you can see the shadow, it's too strong." Never + * strengthen these values in component overrides. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: + rgba(97, 104, 117, 0.05) 0px 1px 1px, + rgba(97, 104, 117, 0.05) 0px 2px 2px; + + /* ─── Focus ring ───────────────────────────────────────────────── + * DESIGN.md §6 Level 2: "3px solid var(--mds-color-focus-action- + * external)". Sharp 3px ring at --accent, not the schema's alpha + * glow — HashiCorp's focus is engineered, not atmospheric. */ + --focus-ring: 0 0 0 3px var(--accent); + + /* ─── Motion ───────────────────────────────────────────────────── + * Standard durations — HashiCorp's enterprise tone leans on type + * and shadow restraint, not motion choreography. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ───────────────────────────────────────────────────── + * 1150px max content width per DESIGN.md §5 ("Max content width: + * ~1150px (xl breakpoint)"). Gutters narrow on mobile to preserve + * the line-length-as-craft feel. */ + --container-max: 1150px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/intercom/components.html b/design-systems/intercom/components.html new file mode 100644 index 000000000..b5a519bd6 --- /dev/null +++ b/design-systems/intercom/components.html @@ -0,0 +1,557 @@ + + + + + + Intercom — reference components + + + + + +
+
+
+
+

Reference fixture · intercom

+

AI-first customer service, built on real conversations.

+

+ Fin handles the routine questions instantly, your team handles the rest. + One platform for every message — chat, email, phone, ticket — with the + warmth of a human and the speed of a machine. +

+
+ + Try Fin free + + + See how it works +
+

+ No credit card · 14-day trial · cancel anytime +

+
+ + +
+
+ +
+
+

What this fixture exercises

+

A conversational system, not a help-desk form.

+
+
+
+

Fin AI

+

Answers in seconds

+

+ Trained on your help center, past conversations, and product docs. + Resolves up to 50% of queries with no human escalation. +

+ Inspect tokens → +
+
+

Inbox

+

One thread per customer

+

+ Chat, email, phone, and social messages collapse into a single + conversation — your team never asks the customer to repeat themselves. +

+ Read the spec → +
+
+

Workflows

+

Sharp by design

+

+ 4px button corners, oat-tone borders, 80px Saans display with + -2.4px tracking — the system insists on precision. +

+ Inspect type → +
+
+
+ +
+
+
+

Get started

+

Install the Messenger in three minutes.

+

+ Drop one script into your site, point Fin at your help center, and + the conversation surface is live. No backend rewrites, no design audit. +

+

+ Press ⌘ K anywhere to search the docs. +

+
+
+
+ + +

We'll send setup steps and nothing else.

+
+
+ + +
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/intercom/tokens.css b/design-systems/intercom/tokens.css new file mode 100644 index 000000000..6701dfa96 --- /dev/null +++ b/design-systems/intercom/tokens.css @@ -0,0 +1,150 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/intercom/tokens.css + * + * Structured token bindings for "Design System Inspired by Intercom". + * Editorial customer-service warmth: warm cream canvas, off-black text, + * a single Fin Orange signal, and aggressively sharp 4px geometry. + * + * Key brand decisions encoded here: + * - Warm Cream (#faf9f6) canvas — never pure white, but white pops above it + * - Fin Orange (#ff5600) — the SINGULAR accent, named after Intercom's AI agent + * - Off Black (#111111) — warmer than #000, primary text + dark buttons + * - Oat (#dedbd6) borders — warm-tinted, never cool gray + * - Saans display: 80px at line-height 1.0 with -2.4px (≈ -0.03em) tracking + * - Sharp 4px radius — near-rectangular buttons are the geometric identity + * + * The "vivid purple/blue" hint sometimes associated with Intercom is the + * legacy Messenger SDK palette. The current intercom.com identity is + * warm-neutral + Fin Orange (see DESIGN.md §1, §2, §9), and that is what + * this token set encodes. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Warm cream is the foundation — Intercom's website never uses pure + * white as the page background. Pure white IS used for the "lifted" + * surface tier so cards and panels punch above the warm canvas. + * --surface-warm holds the warm-cream value for any component that + * wants the warm tier explicitly (cards-on-warm-canvas pattern). */ + --bg: #faf9f6; /* Warm Cream — the editorial canvas */ + --surface: #ffffff; /* Pure White — lifted card / panel tier */ + --surface-warm: #faf9f6; /* Warm Cream — DESIGN.md §4 warm-card pattern */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Off Black is warmer than #000 — pure black would read harsh against + * the warm canvas. DESIGN.md describes a single off-black heading + * weight; --fg-2 aliases --fg because the brand expresses hierarchy + * through size and tracking, not through tonal text variation. */ + --fg: #111111; /* Off Black — primary text, dark buttons */ + --fg-2: var(--fg); /* alias — single heading color throughout */ + --muted: #7b7b78; /* Black 50 — warm muted text */ + --meta: #9c9fa5; /* Content Tertiary — captions, metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Oat is THE Intercom border — warm-tinted, never cool gray. The + * DESIGN.md "don't" list explicitly forbids cool grays. --border-soft + * is a lighter oat for inner row separators that must not compete + * with the primary card edge. */ + --border: #dedbd6; /* Oat — warm card edge */ + --border-soft: #ebe9e4; /* Lighter oat — inner row separators */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Fin Orange — named after Intercom's AI agent, the SINGLE chromatic + * move against the warm-neutral palette. DESIGN.md §7 forbids + * decorative use: reserve for primary CTAs and AI/brand moments. */ + --accent: #ff5600; /* Fin Orange */ + --accent-on: #ffffff; + --accent-hover: color-mix(in oklab, var(--accent), black 8%); + --accent-active: color-mix(in oklab, var(--accent), black 14%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Pulled from DESIGN.md §2 "Report Palette" so semantic states land + * inside the brand vocabulary (green, red), with the schema warn + * default for amber. */ + --success: #00da00; /* Green from report palette */ + --warn: #eab308; + --danger: #c41c1c; /* Report Red */ + + /* ─── Typography ────────────────────────────────────────────────── + * Saans is Intercom's custom geometric sans — falls back through + * Saans Fallback and then through the system ui-sans-serif chain so + * artifacts render legibly even when Saans is not loaded. SaansMono + * for code and uppercase technical labels (DESIGN.md §3). */ + --font-display: "Saans", "Saans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; + --font-body: "Saans", "Saans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; + --font-mono: "SaansMono", "SaansMono Fallback", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; + + /* Type scale — DESIGN.md §3 hierarchy: 80 / 54 / 40 / 32 / 24 / 20 + * down to 14 / 12. The 80px display with -2.4px tracking and 1.00 + * line-height is the billboard identity. */ + --text-xs: 12px; /* Mono labels, eyebrows */ + --text-sm: 14px; /* Body Light, button small */ + --text-base: 16px; /* Body, button */ + --text-lg: 20px; /* Body Emphasis */ + --text-xl: 24px; /* Feature Title */ + --text-2xl: 32px; /* Card Title */ + --text-3xl: 54px; /* Section Heading */ + --text-4xl: 80px; /* Display Hero — billboard scale */ + + --leading-body: 1.5; + --leading-tight: 1.0; /* 1.00 across all heading sizes — ultra-compressed */ + --tracking-display: -0.03em; /* ≈ -2.4px at 80px — aggressive negative tracking */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 4px-grid base scale. DESIGN.md §5 lists 8/10/12/14/16/20/24/32/ + * 40/48/60/64/80/96; the intermediate 10/14/40/60 tiers are + * component-internal and not part of 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 — DESIGN.md §5 documents 80–96px between sections + * desktop. Generous editorial whitespace is part of the magazine- + * like reading experience. */ + --section-y-desktop: 96px; + --section-y-tablet: 64px; + --section-y-phone: 48px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Sharp geometry is the identity. DESIGN.md §7 "Don't" list: + * "Don't round buttons beyond 4px". The radius scale tops out at + * 8px for cards. No softness. */ + --radius-sm: 4px; /* Buttons — near-rectangular */ + --radius-md: 6px; /* Nav items */ + --radius-lg: 8px; /* Cards, containers */ + --radius-pill: 9999px; /* Badges, status dots */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Minimal shadows (DESIGN.md §6). Depth comes from warm borders and + * surface tints. The raised tier is a near-invisible whisper using + * the warm fg as the shadow color so it tints rather than greys. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 94%); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Orange-tinted to match the Fin accent — keeps keyboard focus + * inside the brand voice rather than borrowing browser blue. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Schema defaults — Intercom's signature interaction is scale(1.1) + * hover, which lives in components (button :hover transform), not + * in the motion duration tokens. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1280px container — comfortable editorial width that accommodates + * the 80px display headlines without crowding. */ + --container-max: 1280px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/lovable/components.html b/design-systems/lovable/components.html new file mode 100644 index 000000000..8aa73aa6d --- /dev/null +++ b/design-systems/lovable/components.html @@ -0,0 +1,441 @@ + + + + + + Lovable — reference components + + + + + +
+
+
+
+

Reference fixture · lovable

+

Describe your app.
Lovable builds it.

+

+ Type a sentence in plain language and watch your idea become a working + web app — no setup, no boilerplate, just a preview that updates as you + tinker. Built warm, on cream, never on cold white. +

+
+ + Start building + + + Read the spec +
+
+ +
+
+ +
+
+

What this fixture exercises

+

Warmth as a system, not a coat of paint.

+
+
+
+

Cream-on-cream depth

+

+ --bg and --surface are the same warm parchment (#f7f4ed). The 1px + #eceae4 border carries the containment — Lovable's depth model is + borders, never drop-shadows on cards. +

+ Inspect tokens → +
+
+

Camera Plain humanism

+

+ Display type runs at 60px / weight 600 / -1.5px tracking. The + variable axis lets weight 480 sit between regular and semibold + for editorial moments. Body stays at 400, normal tracking. +

+ Read the rule → +
+
+

Inset, not lifted

+

+ Dark CTAs press into the cream with a multi-layer inset shadow: + white highlight at 0.5px, dark ring at 0.5px, soft drop at 1px. + The button feels pressed-into-paper, not floated above it. +

+ Inspect shadow → +
+
+
+ +
+
+
+

Try it

+

Start with a sentence.

+

+ The whole product begins from one prompt — the input below uses the + same warm cream surface, the same #eceae4 border, the same Tailwind + ring blue at 50% for keyboard focus. Form is page is craft. +

+
+
+
+ + +

Plain language is fine — Lovable handles the scaffolding.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/lovable/tokens.css b/design-systems/lovable/tokens.css new file mode 100644 index 000000000..f12ba9269 --- /dev/null +++ b/design-systems/lovable/tokens.css @@ -0,0 +1,258 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/lovable/tokens.css + * + * Structured token bindings for "Design System Inspired by Lovable". + * Warm parchment canvas, opacity-driven gray ramp, humanist Camera Plain + * Variable display type, borders-not-shadows for cards, inset-shadow + * tactility on dark CTAs. + * + * This file pre-compiles the values described in `DESIGN.md` into the + * shared schema. Agents generating an artifact for Lovable should paste + * the `:root` block verbatim into the first ` + + +
+ +
+
+ v1.0 · stable +

Reference fixture · mintlify

+
+

The documentation your users will love.

+

+ A token block distilled from Mintlify's published design system — + Inter with tight -0.02em display tracking, full-pill buttons and + inputs, mint accent used sparingly, and 5%-opacity hairlines + carrying every section break. The fixture you are reading paints + from the same :root + block agents inline into every Mintlify artifact. +

+
+ + View tokens + + + Read the spec + Skip to components +
+

+ + + 56 tokens · 0 C-extensions + + Press ⌘ K to search the docs. +

+ +
+
Anthropic
+
Resend
+
Cursor
+
Replicate
+
ElevenLabs
+
+
+ + +
+
+

What this fixture exercises

+

Documentation as product, not afterthought.

+

+ Every component below pulls from var(--*) — + no raw hex, no off-token type, no shadow heavier than the + documented 0.03-alpha whisper. +

+
+ +
+
+ +

Whisper-thin separation.

+

+ 5% black hairlines (rgba(0,0,0,0.05)) + carry every section break and card edge. No gray section + backgrounds, no heavy shadows — the depth system is + border-driven, paper-like. +

+ Inspect --border → +
+ +
+ +

The pill is the signature.

+

+ Every button, input, and badge resolves to + --radius-pill + (9999px). Cards step from 16 (standard) to 24 (featured) — + the four-tier radius scale is the silhouette grammar of + the system. +

+ Read the rule → +
+ +
+ +

Inter runs tight on display.

+

+ Hero tracks at -0.02em + (≈ -1.28px at 64px), section heads at -0.02em, body relaxes + to 0. Three weights only: 400 reads, 500 interacts, 600 + announces. Geist Mono is reserved for the terminal voice. +

+ Inspect typography → +
+
+
+ + +
+

Form components

+

Inputs inherit the same tokens.

+ +
+
+

+ Focus ring, edge, and placeholder colour all derive from + --accent and + --border. + The submit button reuses + .btn-primary + unchanged — black fill, white label, full-pill silhouette. +

+

+ No new token is introduced for this section. The form card + uses the documented featured-card radius + (--radius-lg, 24px) + and the same 0.03-alpha shadow whisper as everything else. +

+

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

+
+ +
+
+

Get the spec

+ + + Open + +
+
+ + +

We'll send the spec PDF and nothing else.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/mintlify/tokens.css b/design-systems/mintlify/tokens.css new file mode 100644 index 000000000..92c8a505b --- /dev/null +++ b/design-systems/mintlify/tokens.css @@ -0,0 +1,256 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/mintlify/tokens.css + * + * Structured token bindings for "Design System Inspired by Mintlify". + * Documentation-as-product clarity: white-on-white canvas, near-black + * text, signature mint-green accent used sparingly, ultra-subtle 5%- + * opacity borders carrying the entire separation system, and a full- + * pill (9999px) radius reserved for buttons / inputs / badges as the + * brand's signature shape. + * + * This file pre-compiles the values described in `DESIGN.md` into the + * shared schema. Agents generating an artifact for Mintlify should + * paste the `:root` block verbatim into the first ` + + +
+
+
+
+

Reference fixture · mongodb

+

The developer data platform.

+

+ Atlas-scale documents, query, and search across every cloud. Built for + builders who treat the database as part of the application, not the + place applications go to wait. +

+
+ + Start free + + + Read the docs +
+
+ +
+
+ +
+
+

What this fixture exercises

+

+ Forest-dark canvas, electric green signal. +

+
+
+
+

Color

+

Bioluminescent accent

+

+ MongoDB Green (#00ed64) burns through a forest-black (#001e2b) + canvas. Used once per section, sparingly, for maximum electric + impact — never as a background. +

+ Inspect tokens → +
+
+

Type

+

Serif at database scale

+

+ MongoDB Value Serif at 96px gives the page editorial authority + normally reserved for newspapers. Euclid Circular A at weight 300 + keeps body copy airy against the dense dark surface. +

+ Read the rule → +
+
+

Depth

+

Teal-tinted elevation

+

+ Card shadows use rgba(0,30,43,0.12) — the forest tone carried + into the depth system so even lifted surfaces feel like they + belong to the MongoDB color world. +

+ Inspect shadow → +
+
+
+ +
+
+
+

Form components

+

Inputs in the forest-dark context.

+

+ Borders use teal-gray (#3d4f58), text uses light-input (#e8edeb), + focus rings glow neon green. Source Code Pro uppercase labels + read as database field names — systematic, structured, classified. +

+
+
+
+ + +

We'll send Atlas access and nothing else.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/mongodb/tokens.css b/design-systems/mongodb/tokens.css new file mode 100644 index 000000000..d7acdfa87 --- /dev/null +++ b/design-systems/mongodb/tokens.css @@ -0,0 +1,176 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/mongodb/tokens.css + * + * Structured token bindings for "Design System Inspired by MongoDB". + * Forest-dark database aesthetic: a near-black teal canvas (#001e2b) lit + * by a single bioluminescent neon green (#00ed64), serif authority at + * hero scale, and shadows that carry the brand color into elevation. + * + * Key brand decisions encoded here: + * - Forest Black (#001e2b) as the primary canvas — never pure black; + * the teal undertone is what keeps the dark mode feeling alive + * rather than void + * - MongoDB Green (#00ed64) as the singular electric accent — used + * for highlights, underlines, and one CTA per screen + * - MongoDB Value Serif for display sizes — editorial authority at + * database-company scale; Euclid Circular A for everything else + * - Source Code Pro as the mono voice — wide-tracked uppercase + * labels are the "database field" identity + * - Teal-tinted shadows (rgba(0,30,43,0.12)) — depth that belongs to + * the MongoDB color world, not generic neutral black + * - Full 4-tier fg/border ramps — MongoDB genuinely uses #ffffff → + * #e8edeb → #b8c4c2 → #5c6c75 for cascading text hierarchies and + * #3d4f58 for dark-surface edges + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * Forest-dark canvas: the page is the deepest teal-black; cards lift + * on a slightly warmer deep-teal panel. No warm tier — MongoDB's + * palette is strictly cool (teal, green, blue) and surface-warm + * aliases to the dark surface rather than introducing an amber tint + * that would break the forest atmosphere. */ + --bg: #001e2b; /* Forest Black — the deepest teal-black canvas */ + --surface: #1c2d38; /* Deep Teal — lifted cards / secondary dark panels */ + --surface-warm: var(--surface); /* alias — MongoDB has no warm tier */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Four-tier ramp matches MongoDB's real usage on dark surfaces: + * pure white for headings, light-input for body, silver-teal for + * captions, cool-gray for metadata. Independently bound (not + * aliased) because the brand actually paints each tier somewhere. */ + --fg: #ffffff; /* Pure White — primary text on dark */ + --fg-2: #e8edeb; /* Light Input — body text, secondary headings */ + --muted: #b8c4c2; /* Silver Teal — captions, supporting text */ + --meta: #5c6c75; /* Cool Gray — metadata, tertiary labels */ + + /* ─── Border ────────────────────────────────────────────────────── + * Teal Gray edges on dark surfaces — the cool border tone that + * belongs to the forest palette. border-soft aliases because + * MongoDB does not draw an inner-separator tier distinct from the + * card edge on dark mode. */ + --border: #3d4f58; /* Teal Gray — dark-surface card edge */ + --border-soft: var(--border); /* alias — no inner separator tier on dark */ + + /* ─── Accent ────────────────────────────────────────────────────── + * MongoDB Green — neon, electric, bioluminescent. Used sparingly + * (≤2 per screen) for headline highlights, accent underlines, and + * one CTA per section. accent-on is Forest Black (not white) + * because neon green is luminous enough that dark text reads with + * far more contrast than white. accent-hover is the functional + * muted Dark Green (#00684a) from DESIGN.md §2 — the brand's own + * darker green variant, not a synthesized darken. */ + --accent: #00ed64; + --accent-on: #001e2b; /* Forest Black text on neon green CTAs */ + --accent-hover: #00684a; /* Dark Green — MongoDB's own muted variant */ + --accent-active: color-mix(in oklab, var(--accent-hover), black 12%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Standard semantic palette. MongoDB's brand green is already the + * accent; success keeps the schema default so it does not collide + * with the neon brand voice. */ + --success: #16a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Three voices, three roles: + * --font-display: MongoDB Value Serif for editorial hero headlines + * --font-body: Euclid Circular A for geometric body / UI + * --font-mono: Source Code Pro for code and wide-tracked labels + * The serif-at-hero choice is the typographic signature; component + * CSS should never substitute the body face for display sizes. */ + --font-display: "MongoDB Value Serif", "Times New Roman", Times, ui-serif, Georgia, serif; + --font-body: "Euclid Circular A", "Akzidenz-Grotesk Std", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; + --font-mono: "Source Code Pro", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — distilled from DESIGN.md §3 hierarchy table. + * 96px hero (MongoDB Value Serif) and 64px sub-hero are the + * editorial moves; the rest follows Euclid Circular A from 11px + * small to 36px section heading. Weight 300 body is encoded in + * component CSS (the schema does not carry weight tokens). */ + --text-xs: 11px; /* Small — tags, annotations */ + --text-sm: 14px; /* Caption, Code Label */ + --text-base: 16px; /* Body Light, Nav, Code Body */ + --text-lg: 20px; /* Body Large — introductions */ + --text-xl: 24px; /* Sub-heading — feature titles */ + --text-2xl: 36px; /* Section Heading */ + --text-3xl: 64px; /* Display Secondary — serif sub-hero */ + --text-4xl: 96px; /* Display Hero — serif at editorial scale */ + + /* Leading + tracking — DESIGN.md §3. + * Body Light uses 1.5–2.0; we sit at 1.5 so paragraphs breathe + * without losing rhythm. Hero display uses 1.20 (tight). Display + * letter-spacing is `normal` — MongoDB Value Serif at 96px does + * not compress like Geist or industrial sans; the serif drawing + * carries the authority without negative tracking. */ + --leading-body: 1.5; + --leading-tight: 1.2; + --tracking-display: normal; + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px-rooted scale; MongoDB's documented spacing (1/4/7/8/10/12/ + * 14/15/16/18/20/24/32) includes odd sub-tiers (7, 14, 15, 18) + * for fine-grained type alignment that stay component-internal. + * The schema's 4/8/12/16/20/24/32/48 covers the structural 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 — DESIGN.md §5 Whitespace Philosophy: dark hero + * sections use extra vertical padding (80px+) to let the forest- + * dark background breathe. 96px desktop sits at the generous end + * of MongoDB's documented range. */ + --section-y-desktop: 96px; + --section-y-tablet: 64px; + --section-y-phone: 40px; + + /* ─── Radius ────────────────────────────────────────────────────── + * DESIGN.md §5 radius scale: 1/2/4/8/16/20/24/30/32/48/100/9999. + * Schema slots bind to: 4 (input subtle), 8 (standard card / link), + * 16 (card), 9999 (pill button). The 30–32px image radius and + * 48px hero radius live as inline overrides in components.html + * where they apply — they are surface-specific, not scale-wide. */ + --radius-sm: 4px; /* inputs, small buttons */ + --radius-md: 8px; /* standard cards, links */ + --radius-lg: 16px; /* feature cards, containers */ + --radius-pill: 9999px; /* pill buttons, badges */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Forest-tinted shadow signature. DESIGN.md §6: the primary card + * elevation uses rgba(0, 30, 43, 0.12) — a teal-tinted shadow that + * carries the forest-dark brand color into the depth system. Even + * on light surfaces, shadows feel like they belong to the MongoDB + * color world rather than being generic neutral black. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: + 0 26px 44px rgba(0, 30, 43, 0.12), + 0 7px 13px rgba(0, 0, 0, 0.13); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Neon-green-tinted halo at 30% alpha — uses the brand accent so + * keyboard focus reads as part of the MongoDB color world rather + * than a generic blue ring. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard durations — MongoDB's identity lives in color, type, + * and shadow; animation is purposeful, not choreographed. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1200px max content width — contained editorial layouts within + * generous full-bleed dark sections. */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/superhuman/components.html b/design-systems/superhuman/components.html new file mode 100644 index 000000000..c51d2cc12 --- /dev/null +++ b/design-systems/superhuman/components.html @@ -0,0 +1,537 @@ + + + + + + Superhuman — reference components + + + + + +
+
+
+
+

Reference fixture · superhuman

+

The fastest email
experience ever made.

+

+ Fly through your inbox with keyboard shortcuts, instant + search, and AI that drafts replies in your voice. Built + for high performers who answer hundreds of messages a day. +

+
+ + Get Superhuman + + + Read the spec +
+
+ +
+
+ +
+
+

Your Superhuman suite

+

Velocity, by design.

+
+
+
+

Accent · 01

+

One color, total restraint.

+

+ Lavender Glow (#cbb7fb) is the only chromatic departure from + the warm-neutral palette. Every saturated CTA you've seen on + other sites — Superhuman quietly omits it. +

+

+ Inspect --accent +

+
+
+

Type · 02

+

Weights between weights.

+

+ Super Sans VF runs at 460 / 540 / 600 / 700 — non-standard + stops that sit between Regular and Medium, between Medium + and Semibold. Body is 460. Display is 540. Bold is rare. +

+

+ Read the rule +

+
+
+

Geometry · 03

+

Two radii, total clarity.

+

+ --radius-sm: 8px for buttons and inputs. + --radius-lg: 16px for cards. + No micro-rounding. No pill buttons. The binary system is the system. +

+

+ Inspect radii +

+
+
+
+ +
+
+
+

Get on the list

+

Built for the highest performers.

+

+ Superhuman is invitation-only. Tell us your work email and + we'll let you know when a seat opens up. No marketing, no + follow-ups, no noise — that's the whole point. +

+
+ Tip: + Tab + to focus, + Enter + to submit. +
+
+
+
+ + +

+ We'll only email you when a seat opens. Promise. +

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/superhuman/tokens.css b/design-systems/superhuman/tokens.css new file mode 100644 index 000000000..45de0dcef --- /dev/null +++ b/design-systems/superhuman/tokens.css @@ -0,0 +1,160 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/superhuman/tokens.css + * + * Structured token bindings for "Design System Inspired by Superhuman". + * Premium keyboard-first email client. Predominantly white canvas with a + * single dramatic gesture of color (deep purple hero), warm cream CTAs, + * lavender as the sole accent, and charcoal ink (warmer than #000) for text. + * + * Brand identity in three sentences: + * 1. Maximum confidence through minimum decoration — white dominates, + * borders define containers, shadows are whispered. Lavender Glow + * (#cbb7fb) is the only accent that ever leaves the warm-neutral + * grayscale. + * 2. Super Sans VF with non-standard weight stops (460 / 540 / 600 / 700). + * Body weight is 460 — slightly heavier than regular but lighter than + * medium — the typographic signature that feels confident, never bold. + * 3. Two-radius binary system (8px / 16px) and ultra-tight 0.96 leading + * on display sizes — headlines compress into architectural blocks + * while body text breathes at 1.50 leading. + * + * Schema decisions: + * - --bg: #ffffff (Pure White) — the dominant content canvas. + * - --surface: #ffffff — cards inherit the canvas; --border defines them. + * - --surface-warm: #e9e5dd (Warm Cream) — lifted warm tier for CTAs. + * - --fg: #292827 (Charcoal Ink) — warm near-black, never pure black. + * - --fg-2 → var(--fg) — DESIGN.md uses one ink color on light surfaces. + * - --muted: #6f6c69 — warm mid-gray for captions, derived to sit + * between Charcoal Ink and Parchment Border on the warm hue family. + * - --border: #dcd7d3 (Parchment Border) — warm light gray, slight pink. + * - --accent: #cbb7fb (Lavender Glow); --accent-on: #292827 — charcoal + * on lavender (DESIGN.md "Don't use bright/saturated CTA text"). + * - --leading-tight: 0.96 — the signature display compression. + * - --tracking-display: -0.0275em ≈ -1.32px / 48px (DESIGN.md §3). + * - --radius-md: 8px (no mid-tier — DESIGN.md mandates only 8 / 16). + * - --elev-raised: charcoal-tinted whisper, never gray; matches the + * warm-neutral palette used everywhere else. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * White canvas dominates. Warm Cream (#e9e5dd) lives in --surface-warm + * as the lifted warm tier — reserved for CTAs, never used as a card bg. */ + --bg: #ffffff; /* Pure White — primary page background */ + --surface: #ffffff; /* Cards inherit the canvas; --border contains them */ + --surface-warm: #e9e5dd; /* Warm Cream — primary button background only */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Charcoal Ink — warm near-black with faint brown undertone. Body + * text uses one ink color throughout; --muted is reserved for true + * subtext like captions and helper labels. */ + --fg: #292827; /* Charcoal Ink — primary text */ + --fg-2: var(--fg); /* alias — DESIGN.md uses one ink for body */ + --muted: #6f6c69; /* Warm mid-gray — captions, helper text */ + --meta: var(--muted); /* alias — same warm gray for metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Parchment Border — warm light gray with slight pink undertone. + * Cards rely on borders for containment, not box shadows. */ + --border: #dcd7d3; /* Parchment Border — card edges, dividers */ + --border-soft: var(--border); /* alias — no separate inner-row tier */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Lavender Glow — soft, approachable purple. The ONLY chromatic + * departure from the warm-neutral palette. Charcoal sits on it for + * AA contrast (lavender is too light for white text). */ + --accent: #cbb7fb; + --accent-on: #292827; /* Charcoal on lavender — DESIGN.md §4 */ + --accent-hover: color-mix(in oklab, var(--accent), black 6%); + --accent-active: color-mix(in oklab, var(--accent), black 12%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Superhuman's marketing exercises extreme color restraint, but the + * schema requires semantic tokens for product-side usage (status pills, + * inline validation). Defaults from _schema/defaults.css; legible on white. */ + --success: #16a34a; + --warn: #eab308; + --danger: #dc2626; + + /* ─── Typography ────────────────────────────────────────────────── + * Super Sans VF — custom variable font with non-standard weight axis + * (460, 540, 600, 700). Body weight is 460 — the signature stop that + * sits between Regular and Medium. Fallback chain mirrors DESIGN.md §3. */ + --font-display: "Super Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + --font-body: "Super Sans VF", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3 hierarchy. 64px hero / 48px section / + * 28px feature title / 22px card heading / 20px body heading. + * All eight stops appear verbatim in DESIGN.md — no interpolation. */ + --text-xs: 12px; /* Micro Label */ + --text-sm: 14px; /* Caption family */ + --text-base: 16px; /* Body / Button / Nav */ + --text-lg: 20px; /* Body Heading */ + --text-xl: 22px; /* Card Heading */ + --text-2xl: 28px; /* Feature Title */ + --text-3xl: 48px; /* Section Heading */ + --text-4xl: 64px; /* Display Hero */ + + /* Leading + tracking. + * 0.96 — the signature display compression (DESIGN.md §3). + * 1.50 — body text breathes generously by contrast. + * -0.0275em ≈ -1.32px / 48px from DESIGN.md §3, applied at display sizes only. */ + --leading-body: 1.5; + --leading-tight: 0.96; + --tracking-display: -0.0275em; + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base. Scale per DESIGN.md §5: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48. */ + --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 says 48–80px between major sections. + * Top of the range on desktop, compresses on smaller breakpoints. */ + --section-y-desktop: 80px; + --section-y-tablet: 56px; + --section-y-phone: 40px; + + /* ─── Radius ────────────────────────────────────────────────────── + * Binary system — DESIGN.md §5: only 8px and 16px exist on the + * marketing site. No micro-rounding (2px), no pill buttons (50px+). + * --radius-md collapses to --radius-sm because the brand has no + * mid-tier; --radius-pill is reserved for status dots only. */ + --radius-sm: 8px; /* Buttons, inputs, inline elements */ + --radius-md: 8px; /* No mid-tier — DESIGN.md mandates only 8/16 */ + --radius-lg: 16px; /* Cards, links, larger containers */ + --radius-pill: 9999px; /* Status dots only — never buttons */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Depth lives in borders and color contrast, not shadow. The raised + * tier is a charcoal-tinted whisper for product-screenshot frames + * (DESIGN.md §6 "Subtle shadow … product screenshot containers"). */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 2px 12px rgba(41, 40, 39, 0.06); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Lavender Glow at 45% — Superhuman is keyboard-first, so the focus + * indicator must read clearly without violating the muted palette. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 55%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Restrained — Superhuman's velocity is in the keyboard, not the page. + * Defaults from _schema/defaults.css. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1200px container — DESIGN.md §5 "~1200px content container, centered". */ + --container-max: 1200px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +} diff --git a/design-systems/wise/components.html b/design-systems/wise/components.html new file mode 100644 index 000000000..40360513a --- /dev/null +++ b/design-systems/wise/components.html @@ -0,0 +1,365 @@ + + + + + + Wise — reference components + + + + + +
+
+
+
+

Reference fixture · wise

+

The international account for everyone.

+

+ Hold 40+ currencies, send money across borders at the real exchange + rate, and get paid like a local — no hidden fees, no fine print. +

+
+ + Open an account + + + Read the spec +
+
+ +
+
+ +
+
+

What this fixture exercises

+

Money without borders, by design.

+
+
+
+

Green-on-green CTAs

+

+ --accent (#9fe870) paired with --accent-on (#163300) — dark green text + on lime green is the Wise signature, not white. Pill radius 9999px. +

+ Inspect tokens → +
+
+

Billboard Wise Sans 900

+

+ Display headlines run at weight 900 with line-height 0.85 — letters + overlap vertically, creating dense text blocks that read like signage. +

+ Read the rule → +
+
+

Ring-only elevation

+

+ --elev-ring (0 0 0 1px rgba(14,15,12,0.12)) is the only depth treatment. + No drop shadows; the green accent provides all the visual lift needed. +

+ Inspect elevation → +
+
+
+ +
+
+
+

Form components

+

Sign up in seconds.

+

+ Inputs sit on the white canvas with hairline ring borders. Focus pulls a + green-tinted ring (--focus-ring) and snaps the border to dark green — + the same brand family, never a competing color. +

+
+
+
+ + +

We'll send your account confirmation here.

+
+
+ + +
+
+
+
+
+ + diff --git a/design-systems/wise/tokens.css b/design-systems/wise/tokens.css new file mode 100644 index 000000000..a68e9e779 --- /dev/null +++ b/design-systems/wise/tokens.css @@ -0,0 +1,141 @@ +/* ───────────────────────────────────────────────────────────────────────── + * design-systems/wise/tokens.css + * + * Structured token bindings for "Design System Inspired by Wise". + * Money without borders: bright spring-green CTAs on warm-neutral canvas, + * billboard Wise Sans at weight 900 with 0.85 line-height, pill buttons, + * ring-only shadows, and "calt" everywhere. + * + * Key brand decisions encoded here: + * - Wise Green (#9fe870) as the only accent; Dark Green (#163300) as + * --accent-on — green-on-green CTA is THE Wise signature, not white. + * - Pastel Green (#cdffad) for hover — lighter, contrast-up, not darker. + * - Near-Black with warm green undertone (#0e0f0c), never pure #000. + * - Inter weight 600 as body default — confident, not light. Wise Sans + * weight 900 for display, line-height 0.85, letter-spacing normal. + * - Ring-only elevation: rgba(14,15,12,0.12) 1px ring; no traditional + * drop shadows anywhere. Depth comes from green-on-neutral contrast. + * - Pill buttons (9999px); cards span 16px → 30px → 40px radius tiers. + * - 18px body baseline (not 16px) — Wise reads bigger than typical UI. + * ─────────────────────────────────────────────────────────────────── */ + +:root { + /* ─── Surface ───────────────────────────────────────────────────── + * White canvas with a barely-tinted green-gray surface tier. The + * background is pure white because the green accent must read as + * the only colored element on the page. */ + --bg: #ffffff; /* Pure white canvas — green pops as the sole accent */ + --surface: #e8ebe6; /* Light Surface — subtle green-tinted neutral */ + --surface-warm: var(--surface); /* alias — no warm tier; Wise is cool-green, not warm */ + + /* ─── Foreground ────────────────────────────────────────────────── + * Near-black with a warm green undertone (#0e0f0c) — never #000. + * The faint green in the black ties text to the brand accent. */ + --fg: #0e0f0c; /* Near Black — primary text, headlines */ + --fg-2: var(--fg); /* alias — single confident text color */ + --muted: #868685; /* Gray — captions, tertiary text */ + --meta: var(--muted); /* alias — same gray for metadata */ + + /* ─── Border ────────────────────────────────────────────────────── + * Matches the ring-shadow color from DESIGN.md §6 — borders and + * ring elevation share the same hairline so cards read as one + * unified material. */ + --border: rgba(14, 15, 12, 0.12); /* Ring hairline — also used by --elev-ring */ + --border-soft: var(--border); /* alias — no inner separator distinction */ + + /* ─── Accent ────────────────────────────────────────────────────── + * Wise Green — the brand's most recognizable element. Reserved for + * primary CTAs and brand moments; never used as a large surface. + * Hover lightens to Pastel Green (Wise's contrast-up convention), + * active darkens via color-mix. */ + --accent: #9fe870; /* Wise Green — primary CTA, brand signal */ + --accent-on: #163300; /* Dark Green text on Wise Green — THE signature */ + --accent-hover: #cdffad; /* Pastel Green — lighter on hover, not darker */ + --accent-active: color-mix(in oklab, var(--accent), black 12%); + + /* ─── Semantic ──────────────────────────────────────────────────── + * Pulled from Wise's semantic palette in DESIGN.md §2. Positive + * is deep green (#054d28) to stay in the brand family rather than + * jumping to a generic emerald. */ + --success: #054d28; /* Positive Green — success state, in-brand */ + --warn: #ffd11a; /* Warning Yellow — Wise's hover-warn yellow */ + --danger: #d03238; /* Danger Red — destructive / error */ + + /* ─── Typography ────────────────────────────────────────────────── + * Wise Sans for display (weight 900 in components), Inter for body + * (weight 600 as default). Both stacks enable "calt" at the + * component layer. Helvetica/Arial fall back to keep the system + * usable when proprietary Wise Sans is unavailable. */ + --font-display: "Wise Sans", Inter, ui-sans-serif, system-ui, sans-serif; + --font-body: Inter, Helvetica, Arial, ui-sans-serif, sans-serif; + --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace; + + /* Type scale — DESIGN.md §3. 18px body baseline, 96px hero display. + * Wise reads bigger than typical UI; --text-base = 18px is intentional. */ + --text-xs: 12px; /* Small */ + --text-sm: 14px; /* Caption */ + --text-base: 18px; /* Body — confident, larger than typical UI */ + --text-lg: 22px; /* Feature Title */ + --text-xl: 26px; /* Card Title */ + --text-2xl: 40px; /* Sub-heading */ + --text-3xl: 64px; /* Section Heading */ + --text-4xl: 96px; /* Display Hero — billboard Wise Sans 900 */ + + --leading-body: 1.44; /* Inter body rhythm per DESIGN.md */ + --leading-tight: 0.85; /* Wise Sans display — letters overlap vertically */ + --tracking-display: normal; /* DESIGN.md: normal tracking on all Wise Sans display sizes */ + + /* ─── Spacing ───────────────────────────────────────────────────── + * 8px base unit. Section vertical spacing 80px desktop. */ + --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 ────────────────────────────────────────────────────── + * Wise's radius vocabulary spans pill buttons to deeply-rounded + * cards. Per DESIGN.md §5: 16px (small cards), 30px (medium + * features), 40px (large containers/tables), 9999px (all buttons). */ + --radius-sm: 16px; /* Small cards, inputs — Wise's "card" tier */ + --radius-md: 30px; /* Medium feature cards */ + --radius-lg: 40px; /* Large containers, tables — Wise's signature deep round */ + --radius-pill: 9999px; /* All buttons, badges */ + + /* ─── Elevation ─────────────────────────────────────────────────── + * Ring-only philosophy per DESIGN.md §6. No drop shadows; depth + * lives in the green-on-neutral contrast. --elev-raised is kept + * extremely subtle (1px ring + whisper of lift) for components + * that genuinely need to read as elevated. */ + --elev-flat: none; + --elev-ring: 0 0 0 1px var(--border); + --elev-raised: 0 0 0 1px var(--border), 0 2px 8px rgba(14, 15, 12, 0.04); + + /* ─── Focus ring ────────────────────────────────────────────────── + * Green-tinted focus ring — keeps the accent visible without + * introducing a competing color. */ + --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 60%); + + /* ─── Motion ────────────────────────────────────────────────────── + * Standard 150/200ms. Note: the scale(1.05) hover and scale(0.95) + * active that DESIGN.md §4 calls out live in component CSS — they + * are interaction grammar, not token grammar. */ + --motion-fast: 150ms; + --motion-base: 200ms; + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + + /* ─── Layout ────────────────────────────────────────────────────── + * 1280px container — generous for billboard typography while still + * comfortable on standard laptop displays. */ + --container-max: 1280px; + --container-gutter-desktop: 24px; + --container-gutter-tablet: 16px; + --container-gutter-phone: 12px; +}