mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
feat(design-systems): add tokens.css + components.html for 9 AI product brands (#1841)
* 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 <style> tags
- components.html — reference fixture embedding the token block inline and
demonstrating buttons, inputs, cards, and badges styled
with var(--token-name) calls
Key brand decisions encoded:
- claude: warm parchment canvas, terracotta accent, Anthropic Serif display
- cohere: pure white, 22px signature radius, CohereText + Unica77
- elevenlabs: achromatic + warm stone, Waldenburg weight 300, pill-shaped
- huggingface: IBM Plex Mono headings/tags, HF Yellow (#ffd21e), 4-6px radius
- mistral-ai: golden amber palette, Arial weight 400, near-zero radius
- nvidia: true black, NVIDIA Green as border/outline signal only, teal hover
- opencode-ai: Berkeley Mono sole typeface, flat depth (ring-only elevation)
- replicate: pill-shaped everything (9999px), rb-freigeist-neue heavy
- together-ai: "The Future" font, -0.03em tracking, white/midnight dual world
openai tokens.css + components.html were merged to main separately.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(design-systems): sync :root token blocks with tokens.css for opencode-ai and together-ai
opencode-ai: add missing "Liberation Mono" to all three font-stack fallbacks.
together-ai: remove --lavender declaration absent from tokens.css (guard requires byte-identical :root blocks).
Co-authored-by: Cursor <cursoragent@cursor.com>
---------
Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
chaoxiaoche
GitHub
parent
fa9f1d37be
commit
b68e4d3252
18 changed files with 4571 additions and 0 deletions
483
design-systems/claude/components.html
Normal file
483
design-systems/claude/components.html
Normal file
|
|
@ -0,0 +1,483 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Claude (Anthropic) — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/claude. Literary salon aesthetic:
|
||||
warm parchment canvas, terracotta accent, Anthropic Serif headings.
|
||||
Every visible value comes from tokens.css via var(--*)."
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* :root paste — sourced verbatim from
|
||||
design-systems/claude/tokens.css. Keep in sync when tokens change. */
|
||||
:root {
|
||||
--bg: #f5f4ed;
|
||||
--surface: #faf9f5;
|
||||
--surface-warm: #e8e6dc;
|
||||
|
||||
--fg: #141413;
|
||||
--fg-2: #3d3d3a;
|
||||
--muted: #5e5d59;
|
||||
--meta: #87867f;
|
||||
|
||||
--border: #f0eee6;
|
||||
--border-soft: #e8e6dc;
|
||||
|
||||
--accent: #c96442;
|
||||
--accent-on: #faf9f5;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #17a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #b53333;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 10px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 25px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 52px;
|
||||
--text-4xl: 64px;
|
||||
|
||||
--leading-body: 1.6;
|
||||
--leading-tight: 1.1;
|
||||
--tracking-display: 0em;
|
||||
|
||||
--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;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: rgba(0, 0, 0, 0.05) 0px 4px 24px;
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(56, 152, 236, 0.3);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — Anthropic Serif for all headings ─────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500; /* Claude uses weight 500 for all serif headings */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); }
|
||||
h2 { font-size: var(--text-2xl); }
|
||||
h3 { font-size: var(--text-xl); }
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--muted);
|
||||
line-height: var(--leading-body);
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.eyebrow {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--meta);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 9px 16px 9px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition:
|
||||
box-shadow var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: Terracotta Brand — the only button with chromatic color */
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
box-shadow: var(--accent) 0px 0px 0px 0px, var(--accent) 0px 0px 0px 1px;
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-primary:active { background: var(--accent-active); }
|
||||
/* Secondary: Warm Sand — workhorse button */
|
||||
.btn-secondary {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg-2);
|
||||
box-shadow: var(--surface-warm) 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: color-mix(in oklab, var(--surface-warm), black 4%);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.field label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.field input {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-soft);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: #3898ec; /* Focus Blue — the only cool color in Claude */
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--meta);
|
||||
}
|
||||
|
||||
/* ─── Cards — ivory surface, whisper shadow ─────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 3px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12px;
|
||||
}
|
||||
.badge-success {
|
||||
color: var(--success);
|
||||
background: color-mix(in oklab, var(--success), transparent 90%);
|
||||
}
|
||||
.badge-muted {
|
||||
color: var(--muted);
|
||||
background: color-mix(in oklab, var(--muted), transparent 88%);
|
||||
}
|
||||
.badge-dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a {
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ─── Kbd ───────────────────────────────────────────────── */
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-soft);
|
||||
background: var(--surface-warm);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Section layouts ───────────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: end;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-6);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.features-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: 420px;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
HERO — exercises: h1 (Anthropic Serif 500), .lead,
|
||||
.eyebrow, .btn-primary (terracotta), .btn-secondary
|
||||
(warm sand), kbd, .badge-success, hero-grid.
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · claude</p>
|
||||
<h1>Thoughtful conversations, made tangible.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
A warm, literary design system built on parchment — where
|
||||
every interaction carries the weight of a considered reply.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm" style="color: var(--muted)">Model status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Available
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm body-muted">
|
||||
Last reviewed
|
||||
<time datetime="2026-05-15">2026-05-15</time> · v1.0
|
||||
</p>
|
||||
<p class="body-sm body-muted">
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
FEATURES — exercises: h2, h3, .card (ivory + whisper
|
||||
shadow), .body-muted, link, .features-grid.
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 30ch">
|
||||
Warm parchment, terracotta, and the gentlest possible containment.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<h3>Parchment surface tokens</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--bg (#f5f4ed) → --surface (#faf9f5) → --surface-warm (#e8e6dc).
|
||||
Three warm tiers with yellow-brown undertones — no cool grays anywhere.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect tokens →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Terracotta discipline</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--accent (#c96442) appears only on the primary CTA and brand
|
||||
moments. The warm sand secondary button keeps the screen
|
||||
from feeling mono-terracotta.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3>Serif/sans hierarchy</h3>
|
||||
<p class="body-muted body-sm">
|
||||
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.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect typography →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════
|
||||
FORM — exercises: .field, input :focus-visible (Focus
|
||||
Blue), .btn-primary, .btn-secondary, .field-help.
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs in the same warm context.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
Focus rings use Focus Blue (#3898ec) — the ONLY cool color in
|
||||
the entire Claude system. It exists purely for accessibility.
|
||||
Everything else stays warm.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@team.dev"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
<p class="field-help">
|
||||
We'll send a copy of the spec and nothing else.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send the spec
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Skip for now
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
130
design-systems/claude/tokens.css
Normal file
130
design-systems/claude/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
353
design-systems/cohere/components.html
Normal file
353
design-systems/cohere/components.html
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Cohere — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/cohere. Enterprise command deck:
|
||||
22px signature card radius, CohereText serif display, ghost buttons."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #fafafa;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #000000;
|
||||
--fg-2: #212121;
|
||||
--muted: #93939f;
|
||||
--meta: var(--muted);
|
||||
|
||||
--border: #d9d9dd;
|
||||
--border-soft: #f2f2f2;
|
||||
|
||||
--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%);
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #ef4444;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 60px;
|
||||
--text-4xl: 72px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
--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-sm: 8px;
|
||||
--radius-md: 22px;
|
||||
--radius-lg: 22px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border-soft);
|
||||
--elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
|
||||
--focus-ring: 0 0 0 2px var(--accent);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1440px;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-tablet: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border-soft); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — CohereText serif for display ─────────── */
|
||||
h1 {
|
||||
font-family: var(--font-display); /* CohereText serif — declaration */
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-display);
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-family: var(--font-body); /* Unica77 for h2 and below */
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead { font-size: var(--text-lg); color: var(--muted); line-height: var(--leading-body); }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
/* CohereMono uppercase label — section markers, technical tags */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.028em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — ghost by default, dark solid for CTA ────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 18px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition:
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: dark solid — the enterprise CTA */
|
||||
.btn-primary {
|
||||
background: var(--fg);
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-primary:hover { background: var(--fg-2); }
|
||||
/* Secondary: ghost — transparent until interacted with */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
}
|
||||
.btn-secondary:hover { color: var(--accent); opacity: 0.8; }
|
||||
|
||||
/* ─── Inputs — focus purple per DESIGN.md ───────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 500; }
|
||||
.field input {
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: #9b60aa; /* Focus Purple per DESIGN.md */
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--muted); }
|
||||
|
||||
/* ─── Cards — THE 22px Cohere signature radius ──────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-md); /* 22px — THE Cohere signature */
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 4px 10px; border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
|
||||
}
|
||||
.badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 90%); }
|
||||
.badge-muted { color: var(--muted); background: color-mix(in oklab, var(--muted), transparent 88%); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links, Kbd ────────────────────────────────────────── */
|
||||
a { color: var(--fg); text-decoration: none; }
|
||||
a:hover { color: var(--accent); }
|
||||
kbd {
|
||||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||||
padding: 2px 6px; border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
|
||||
text-transform: uppercase; letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.hero-meta {
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
padding: var(--space-4); border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-md); background: var(--surface); /* 22px radius on meta card too */
|
||||
}
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · cohere</p>
|
||||
<h1>Enterprise AI that thinks at your scale.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
Confident, clean, and designed to make AI feel like serious
|
||||
infrastructure. Professional without being cold.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm" style="color: var(--muted)">Platform status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Operational
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm" style="color: var(--muted)">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
|
||||
<p class="body-sm" style="color: var(--muted)">Press <kbd>⌘</kbd> <kbd>K</kbd> to search.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 28ch">The 22px radius and ghost button: two signatures one system.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<h3>22px signature radius</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--radius-md: 22px. Every primary card and container uses this radius —
|
||||
creating a cloud-like, organic softness that's distinctly Cohere.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Ghost buttons</h3>
|
||||
<p class="body-muted body-sm">
|
||||
.btn-secondary is transparent by default — invisible until hover,
|
||||
where text shifts to Interaction Blue (#1863dc).
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Cool-toned neutrals</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--muted: #93939f carries a subtle blue-violet tint. No warm grays.
|
||||
The palette is strictly black, white, and cool gray.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect colors →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Enterprise inputs with focus purple.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
Inputs use 8px radius (--radius-sm) and border: #d9d9dd.
|
||||
Focus shifts border to Focus Purple (#9b60aa) — distinct from
|
||||
the Interaction Blue hover accent.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input id="email" type="email" placeholder="you@company.com" autocomplete="email" required />
|
||||
<p class="field-help">Enterprise free trial — no credit card required.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Start trial</button>
|
||||
<button type="button" class="btn btn-secondary">Talk to sales</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
126
design-systems/cohere/tokens.css
Normal file
126
design-systems/cohere/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
342
design-systems/elevenlabs/components.html
Normal file
342
design-systems/elevenlabs/components.html
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ElevenLabs — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/elevenlabs. Achromatic premium:
|
||||
Waldenburg weight 300 headings, warm stone surfaces, multi-layer whisper shadows."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f5f5f5;
|
||||
--surface-warm: #f5f2ef;
|
||||
|
||||
--fg: #000000;
|
||||
--fg-2: #4e4e4e;
|
||||
--muted: #777169;
|
||||
--meta: var(--muted);
|
||||
|
||||
--border: #e5e5e5;
|
||||
--border-soft: rgba(0, 0, 0, 0.05);
|
||||
|
||||
--accent: #000000;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #1a1a1a;
|
||||
--accent-active: #333333;
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 48px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.08;
|
||||
--tracking-display: -0.02em;
|
||||
|
||||
--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;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 24px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--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: 0 0 0 3px rgba(147, 197, 253, 0.5);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
letter-spacing: 0.16px; /* Inter positive tracking — airy reading */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — Waldenburg weight 300 — the brand ────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 300; /* Light IS the brand — never bold */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); }
|
||||
h2 { font-size: var(--text-2xl); }
|
||||
h3 { font-size: var(--text-xl); }
|
||||
p { margin: 0; }
|
||||
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); letter-spacing: 0.18px; }
|
||||
.body-muted { color: var(--fg-2); }
|
||||
.body-sm { font-size: var(--text-sm); letter-spacing: 0.14px; }
|
||||
.eyebrow {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 500;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — pill primary, warm stone CTA ────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-body);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.47;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary black pill */
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
padding: 0 14px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
/* Secondary: white pill with shadow-as-border */
|
||||
.btn-secondary {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
padding: 0 14px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-pill);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 4px;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 4px 6px;
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.14px; }
|
||||
.field input {
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.14px;
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--muted); }
|
||||
|
||||
/* ─── Cards — multi-layer whisper shadow ────────────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--elev-ring);
|
||||
}
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 3px var(--space-2); border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs); font-weight: 500; line-height: 1.6;
|
||||
}
|
||||
.badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 90%); }
|
||||
.badge-muted { color: var(--muted); background: color-mix(in oklab, var(--muted), transparent 88%); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links, Kbd ────────────────────────────────────────── */
|
||||
a { color: var(--fg); text-decoration: none; }
|
||||
a:hover { color: var(--muted); }
|
||||
kbd {
|
||||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||||
padding: 2px 6px; border-radius: var(--radius-sm);
|
||||
box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset;
|
||||
background: var(--surface); color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; align-items: center; }
|
||||
.hero-meta {
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
padding: var(--space-4); border-radius: var(--radius-lg);
|
||||
box-shadow: var(--elev-ring); background: var(--bg);
|
||||
}
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); align-items: center; }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · elevenlabs</p>
|
||||
<h1>Give every voice a presence.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
A premium audio product brochure in pixel form. Whisper-thin
|
||||
headings, warm stone surfaces, achromatic warmth.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm" style="color: var(--muted)">Service status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Live
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm" style="color: var(--muted)">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
|
||||
<p class="body-sm" style="color: var(--muted)">Press <kbd>⌘</kbd> <kbd>K</kbd> to search.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 28ch">Lightness as the defining typographic statement.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<h3>Waldenburg weight 300</h3>
|
||||
<p class="body-muted body-sm" style="letter-spacing: 0.16px">
|
||||
All h1/h2/h3 use Waldenburg at font-weight 300. The whisper-thin
|
||||
strokes feel like audio waveforms. Never bold — lightness IS the brand.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Multi-layer shadows</h3>
|
||||
<p class="body-muted body-sm" style="letter-spacing: 0.16px">
|
||||
--elev-ring: three layers at sub-0.04 opacity each. Surfaces barely
|
||||
exist — defined by the lightest possible touch.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Warm stone surfaces</h3>
|
||||
<p class="body-muted body-sm" style="letter-spacing: 0.16px">
|
||||
--surface-warm: #f5f2ef. The achromatic system gets warmth through
|
||||
stone-tinted backgrounds and rgba(78,50,23,...) warm shadows.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect surfaces →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs with the same whisper-level depth.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch; letter-spacing: 0.16px">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input id="email" type="email" placeholder="you@studio.ai" autocomplete="email" required />
|
||||
<p class="field-help">Start generating voice in minutes.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Get started</button>
|
||||
<button type="button" class="btn btn-secondary">Learn more</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
127
design-systems/elevenlabs/tokens.css
Normal file
127
design-systems/elevenlabs/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
346
design-systems/huggingface/components.html
Normal file
346
design-systems/huggingface/components.html
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Hugging Face — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/huggingface. ML community hub:
|
||||
IBM Plex Mono headings, HF Yellow badge accent, crisp 1px borders, 4-6px radius."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #fafafa;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #fff4cc;
|
||||
|
||||
--fg: #0d1117;
|
||||
--fg-2: #374151;
|
||||
--muted: #6b7280;
|
||||
--meta: var(--muted);
|
||||
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f3f4f6;
|
||||
|
||||
--accent: #ffd21e;
|
||||
--accent-on: #0d1117;
|
||||
--accent-hover: #f59e0b;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 20%);
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #f59e0b;
|
||||
--danger: #dc2626;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 15px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 48px;
|
||||
|
||||
--leading-body: 1.55;
|
||||
--leading-tight: 1.1;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
--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-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--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: 0 0 0 3px rgba(13, 17, 23, 0.1);
|
||||
|
||||
--motion-fast: 120ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — IBM Plex Mono for all headings/tags ─── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display); /* IBM Plex Mono — "config file is README" */
|
||||
font-weight: 600; /* Weight cap at 600 — 700 is too loud vs yellow */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); }
|
||||
h2 { font-size: var(--text-2xl); }
|
||||
h3 { font-size: var(--text-xl); }
|
||||
p { margin: 0; font-family: var(--font-body); } /* Source Sans Pro for all body */
|
||||
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
/* IBM Plex Mono tags — look like the strings devs paste into Python */
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — dark primary, yellow CTA, outlined ──────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-md); /* 6px — crisp, not rounded */
|
||||
font-family: var(--font-display); /* IBM Plex Mono on buttons */
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: dark — "Use this model", primary actions */
|
||||
.btn-primary {
|
||||
background: var(--fg);
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-primary:hover { background: var(--fg-2); }
|
||||
/* Yellow CTA: HF accent — "Pro upgrade", "Sponsor" */
|
||||
.btn-secondary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.btn-secondary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm); font-weight: 500;
|
||||
}
|
||||
.field input {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--fg);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--muted); }
|
||||
|
||||
/* ─── Cards — model card style ──────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
/* Yellow header strip — featured model card indicator */
|
||||
.card.featured { border-top: 4px solid var(--accent); }
|
||||
|
||||
/* ─── Badges — task category tags ───────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs); font-weight: 500; line-height: 1.2;
|
||||
}
|
||||
.badge-success { color: #16a34a; background: #dcfce7; } /* Vision green */
|
||||
.badge-muted { color: var(--muted); background: var(--border-soft); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links, Kbd ────────────────────────────────────────── */
|
||||
a { color: var(--fg); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
kbd {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px; border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border); background: var(--border-soft); color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.hero-meta {
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
padding: var(--space-4); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md); background: var(--surface);
|
||||
}
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">reference-fixture · huggingface</p>
|
||||
<h1>The AI community building the future.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
The ML platform that refuses to look serious. Sunshine yellow,
|
||||
monospace everywhere, crisp 1px borders. A community zine, not a research lab.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Sponsor 🤗</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="eyebrow">build status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
passing
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm body-muted">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
|
||||
<p class="body-sm body-muted">Press <kbd>⌘</kbd> <kbd>K</kbd> to search.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">what-this-fixture-exercises</p>
|
||||
<h2 style="max-width: 28ch">Mono headings. Yellow accents. Crisp borders.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card featured">
|
||||
<h3>IBM Plex Mono</h3>
|
||||
<p class="body-muted body-sm">
|
||||
All headings and tags use IBM Plex Mono — they look like strings
|
||||
developers paste into Python. Source Sans Pro for prose only.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>HF Yellow (#ffd21e)</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--accent: #ffd21e. The sunshine yellow for badge strips, "new" pills,
|
||||
and sponsor CTAs. Dark text (--accent-on: #0d1117) for contrast.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>4–6px brutalist radius</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--radius-md: 6px. Closer to brutalist than rounded. Borders announce
|
||||
themselves. Tables are dense — this is a hub for power users.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect radius →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">form-components</p>
|
||||
<h2>Model search with crisp inputs.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
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).
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Email or username</label>
|
||||
<input id="email" type="email" placeholder="your@email.com" autocomplete="email" required />
|
||||
<p class="field-help">Sign in to download models and datasets.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
<button type="button" class="btn btn-secondary">Create account</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
125
design-systems/huggingface/tokens.css
Normal file
125
design-systems/huggingface/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
338
design-systems/mistral-ai/components.html
Normal file
338
design-systems/mistral-ai/components.html
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Mistral AI — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/mistral-ai. Golden amber universe,
|
||||
billboard typography (82px), sharp architectural corners, weight 400 only."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #fffaeb;
|
||||
--surface: #fff0c2;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #1f1f1f;
|
||||
--fg-2: var(--fg);
|
||||
--muted: #3d3d3d;
|
||||
--meta: var(--muted);
|
||||
|
||||
--border: #f0e8c8;
|
||||
--border-soft: var(--border);
|
||||
|
||||
--accent: #fa520f;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #fb6424;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 12%);
|
||||
|
||||
--success: #17a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 24px;
|
||||
--text-xl: 32px;
|
||||
--text-2xl: 48px;
|
||||
--text-3xl: 56px;
|
||||
--text-4xl: 82px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: -0.025em;
|
||||
|
||||
--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-sm: 2px;
|
||||
--radius-md: 2px;
|
||||
--radius-lg: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: -8px 16px 39px rgba(127, 99, 21, 0.12);
|
||||
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — weight 400 ONLY; size carries hierarchy ─ */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400; /* Single weight throughout — no exception */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); }
|
||||
h2 { font-size: var(--text-3xl); letter-spacing: -0.01em; }
|
||||
h3 { font-size: var(--text-xl); }
|
||||
p { margin: 0; }
|
||||
.lead { font-size: var(--text-base); color: var(--muted); line-height: var(--leading-body); }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
/* Uppercase on section labels — European signage quality */
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 400;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — sharp corners, warm palette ─────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-sm); /* Near-zero — sharp corners */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400; /* Single weight — no bold anywhere */
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-transform: uppercase; /* European formality on CTAs */
|
||||
letter-spacing: 0.04em;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { opacity: 0.9; }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: dark solid (#1f1f1f) — dark on warm background */
|
||||
.btn-primary {
|
||||
background: var(--fg);
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-primary:hover { background: #333333; }
|
||||
/* Secondary: Cream surface — warm, inviting */
|
||||
.btn-secondary {
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
}
|
||||
.btn-secondary:hover { background: color-mix(in oklab, var(--surface), black 6%); }
|
||||
|
||||
/* ─── Inputs — warm borders ─────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 400; }
|
||||
.field input {
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--muted); }
|
||||
|
||||
/* ─── Cards — background-defined, golden shadow ─────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-sm); /* Sharp corners */
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--elev-raised); /* Golden float shadow */
|
||||
}
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 3px var(--space-2);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs); font-weight: 400; line-height: 1.6;
|
||||
}
|
||||
.badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 90%); }
|
||||
.badge-muted { color: var(--muted); background: color-mix(in oklab, var(--muted), transparent 88%); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; text-underline-offset: 3px; }
|
||||
kbd {
|
||||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||||
padding: 2px 6px; border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.hero-meta {
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
padding: var(--space-4); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm); background: var(--surface);
|
||||
}
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · mistral-ai</p>
|
||||
<h1>Frontier AI, forged in warmth.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
Open-weight models built with European engineering confidence.
|
||||
Every tone from pale ivory to burnt orange, no cool grays anywhere.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm">API status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Operational
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm" style="color: var(--muted)">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
|
||||
<p class="body-sm" style="color: var(--muted)">Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 22ch">Warmth as a system, not an afterthought.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<h3>Golden amber universe</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--bg (#fffaeb) → --surface (#fff0c2) → --accent (#fa520f).
|
||||
Every tone in the warm spectrum. No cool colors permitted.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect tokens →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Weight 400 throughout</h3>
|
||||
<p class="body-muted body-sm">
|
||||
The entire system uses weight 400 — even at 82px. Size and color
|
||||
carry hierarchy. Bold weight is European bad taste here.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Sharp geometry</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--radius-sm: 2px. Near-zero border-radius on everything.
|
||||
The sharpness contrasts with warm colors, creating tension.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect radius →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs in the warm ivory context.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
Even form borders use the warm palette. The focus ring is orange-tinted
|
||||
(--accent). No cool grays permitted in the Mistral universe.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input id="email" type="email" placeholder="you@mistral.ai" autocomplete="email" required />
|
||||
<p class="field-help">We'll send API access and nothing else.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Get access</button>
|
||||
<button type="button" class="btn btn-secondary">Learn more</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
125
design-systems/mistral-ai/tokens.css
Normal file
125
design-systems/mistral-ai/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
414
design-systems/nvidia/components.html
Normal file
414
design-systems/nvidia/components.html
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>NVIDIA — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/nvidia. GPU computing aesthetic:
|
||||
true black canvas, NVIDIA Green (#76b900) as signal-only accent,
|
||||
bold NVIDIA-EMEA typography, minimal 2px radius, teal hover surprise."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #000000;
|
||||
--surface: #1a1a1a;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #ffffff;
|
||||
--fg-2: #a7a7a7;
|
||||
--muted: #757575;
|
||||
--meta: #898989;
|
||||
|
||||
--border: #5e5e5e;
|
||||
--border-soft: #2a2a2a;
|
||||
|
||||
/* NVIDIA Green — SIGNAL only: borders, underlines, outlines, NOT fills */
|
||||
--accent: #76b900;
|
||||
--accent-on: #000000;
|
||||
--accent-hover: #1eaedb; /* Teal — the NVIDIA button hover surprise */
|
||||
--accent-active: #007fff; /* Bright Blue — pressed state */
|
||||
|
||||
--success: #3f8500;
|
||||
--warn: #ef9100;
|
||||
--danger: #e52020;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 10px;
|
||||
--text-sm: 12px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 32px;
|
||||
--text-4xl: 36px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.25;
|
||||
--tracking-display: 0em;
|
||||
|
||||
--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;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 2px; /* Everything — precision-engineered, no softness */
|
||||
--radius-md: 2px;
|
||||
--radius-lg: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 2px var(--accent); /* Green ring — the NVIDIA signal */
|
||||
--elev-raised: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
|
||||
|
||||
--focus-ring: 0 0 0 2px #ffffff;
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border-soft); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — Bold dominant voice ──────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700; /* Bold is the NVIDIA voice */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); } /* 36px display */
|
||||
h2 { font-size: var(--text-3xl); } /* 32px */
|
||||
h3 { font-size: var(--text-2xl); } /* 24px */
|
||||
p { margin: 0; font-weight: 400; } /* 400 for body only */
|
||||
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.eyebrow {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
color: var(--accent); /* Green eyebrow — signal, not decoration */
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
/* NVIDIA Green underline treatment — brand rule */
|
||||
.green-underline { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
|
||||
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — green border, teal hover ────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--radius-sm); /* 2px — precision hardware */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 700; /* Bold — NVIDIA voice */
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: transparent + 2px green border → teal fill on hover */
|
||||
.btn-primary {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border-color: var(--accent); /* Green border IS the primary signal */
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover); /* Teal fill — the NVIDIA surprise */
|
||||
border-color: var(--accent-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-primary:active {
|
||||
background: var(--accent-active);
|
||||
border-color: var(--accent-active);
|
||||
}
|
||||
/* Secondary: dark surface fill, gray border */
|
||||
.btn-secondary {
|
||||
background: var(--surface);
|
||||
color: var(--fg-2);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover { background: #2a2a2a; color: var(--fg); border-color: var(--fg-2); }
|
||||
|
||||
/* ─── Light section override ─────────────────────────────── */
|
||||
.section-light {
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
.section-light .eyebrow { color: var(--accent); }
|
||||
.section-light p { color: #333333; }
|
||||
.section-light .card {
|
||||
background: #f5f5f5;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
.section-light .btn-primary {
|
||||
background: transparent;
|
||||
color: #000000;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.section-light .btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
border-color: var(--accent-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.field input {
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-sm); /* 2px */
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent); /* Green border on focus */
|
||||
box-shadow: 0 0 0 1px var(--accent);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--meta); }
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
/* Green-accented card: left border signal */
|
||||
.card.accent-border { border-left: 3px solid var(--accent); }
|
||||
|
||||
/* ─── Badges ─────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs); font-weight: 700; line-height: 1.2;
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
}
|
||||
.badge-green { color: var(--accent); background: rgba(118, 185, 0, 0.12); border: 1px solid rgba(118,185,0,0.3); }
|
||||
.badge-muted { color: var(--muted); background: rgba(94,94,94,0.2); }
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
/* GPU spec row */
|
||||
.spec-row {
|
||||
display: flex; gap: var(--space-4); flex-wrap: wrap;
|
||||
border-top: 1px solid var(--border-soft);
|
||||
padding-block-start: var(--space-4);
|
||||
margin-block-start: var(--space-4);
|
||||
}
|
||||
.spec { display: flex; flex-direction: column; gap: 2px; }
|
||||
.spec .num { font-size: var(--text-xl); font-weight: 700; color: var(--accent); }
|
||||
.spec .lbl { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<!-- Dark section — primary NVIDIA canvas -->
|
||||
<section data-od-id="hero">
|
||||
<div class="container">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">reference-fixture · nvidia</p>
|
||||
<h1>Accelerated<br><span class="green-underline">intelligence.</span></h1>
|
||||
<p class="lead" style="max-width: 48ch">
|
||||
True black canvas. NVIDIA Green (#76b900) used only as signal —
|
||||
borders, underlines, outlines. Never filled. Hover reveals
|
||||
teal (#1eaedb) — the brand surprise.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read design</a>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<div class="spec"><span class="num">2px</span><span class="lbl">radius</span></div>
|
||||
<div class="spec"><span class="num">700</span><span class="lbl">weight</span></div>
|
||||
<div class="spec"><span class="num">#76b900</span><span class="lbl">green</span></div>
|
||||
<div class="spec"><span class="num">#1eaedb</span><span class="lbl">hover</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<aside style="display: flex; flex-direction: column; gap: var(--space-4);">
|
||||
<div class="card accent-border">
|
||||
<div class="row-between">
|
||||
<span class="eyebrow">key rule</span>
|
||||
<span class="badge badge-green">A1-identity</span>
|
||||
</div>
|
||||
<h3>Green = signal, not fill</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--accent: #76b900 appears as 2px borders and underlines only.
|
||||
The primary button is transparent with a green border — hover
|
||||
fills it with teal (#1eaedb), not green.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features — dark cards -->
|
||||
<section data-od-id="features">
|
||||
<div class="container">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">what-this-fixture-exercises</p>
|
||||
<h2>2px radius. Bold hierarchy. Green borders.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<span class="badge badge-green">A1-identity</span>
|
||||
<h3>NVIDIA-EMEA Bold</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Arial/Helvetica fallback. Font-weight 700 is the dominant voice
|
||||
for headings, buttons, nav, labels. Weight 400 reserved for body
|
||||
copy and descriptions only.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect typography →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="badge badge-green">A1-identity</span>
|
||||
<h3>Teal hover surprise</h3>
|
||||
<p class="body-muted body-sm">
|
||||
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.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="badge badge-muted">A1-structure</span>
|
||||
<h3>Dense 64px sections</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--section-y-desktop: 64px — tighter than typical SaaS.
|
||||
Technical product catalogs require density. 1200px container,
|
||||
full-width alternating dark/light sections.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect spacing →</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Light section override — NVIDIA alternates black/white -->
|
||||
<section data-od-id="light-world" class="section-light">
|
||||
<div class="container">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">light-section-override</p>
|
||||
<h2 style="color: #000000;">Same green signal. White canvas.</h2>
|
||||
<p style="color: #333333; max-width: 48ch">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field" style="--border: #d0d0d0; --surface: #f5f5f5;">
|
||||
<label for="api-key" style="color: #333;">API key</label>
|
||||
<input id="api-key" type="text"
|
||||
style="background: #f5f5f5; color: #000; border-color: #d0d0d0;"
|
||||
placeholder="nvapi-..." autocomplete="off" />
|
||||
<p class="field-help" style="color: #666;">Access NVIDIA NIM inference endpoints.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" style="color: #000;">Save</button>
|
||||
<button type="button" class="btn" style="border-color: #999; color: #333; background: transparent;">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
133
design-systems/nvidia/tokens.css
Normal file
133
design-systems/nvidia/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
389
design-systems/opencode-ai/components.html
Normal file
389
design-systems/opencode-ai/components.html
Normal file
|
|
@ -0,0 +1,389 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>OpenCode AI — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/opencode-ai. Terminal-native dark:
|
||||
warm near-black canvas, Berkeley Mono sole typeface, flat depth (no shadows),
|
||||
Apple HIG semantic colors, 880px narrow reading column."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #201d1d;
|
||||
--surface: #302c2c;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #fdfcfc;
|
||||
--fg-2: #c8c6c4;
|
||||
--muted: #9a9898;
|
||||
--meta: #6e6e73;
|
||||
|
||||
--border: #464343;
|
||||
--border-soft: #302c2c;
|
||||
|
||||
--accent: #007aff;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #0056b3;
|
||||
--accent-active: #004085;
|
||||
|
||||
--success: #30d158;
|
||||
--warn: #ff9f0a;
|
||||
--danger: #ff3b30;
|
||||
|
||||
/* Berkeley Mono is the ONLY font — no typographic variation */
|
||||
--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;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 38px;
|
||||
--text-4xl: 48px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: 0em;
|
||||
|
||||
--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: 64px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 0 0 2px var(--border);
|
||||
|
||||
--focus-ring: 0 0 0 2px var(--accent);
|
||||
|
||||
--motion-fast: 100ms;
|
||||
--motion-base: 150ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 880px; /* Narrow reading column — "everything is code" */
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 20px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout — narrow reading column ─────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — Berkeley Mono only ───────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display); /* Same typeface as body — no switching */
|
||||
font-weight: 700; /* Bold headings — size + weight only */
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
letter-spacing: 0; /* Monospace needs no tracking adjust */
|
||||
}
|
||||
h1 { font-size: var(--text-3xl); } /* 38px — Heading 1 */
|
||||
h2 { font-size: var(--text-2xl); } /* 28px */
|
||||
h3 { font-size: var(--text-xl); } /* 22px */
|
||||
p { margin: 0; font-weight: 400; }
|
||||
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
/* Section labels — same font, smaller, muted */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
/* Inline code — same mono font, just tinted */
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
color: var(--success); /* Apple green for inline code */
|
||||
background: rgba(48, 209, 88, 0.08);
|
||||
padding: 1px 5px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — flat, Apple-blue primary ────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm); /* 4px — utilitarian */
|
||||
font-family: var(--font-body); /* Berkeley Mono */
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: Apple system blue */
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
|
||||
.btn-primary:active { background: var(--accent-active); }
|
||||
/* Secondary: flat outlined on dark surface */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--fg-2);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover { background: var(--surface); color: var(--fg); }
|
||||
|
||||
/* ─── Inputs — flat, no shadows ────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
}
|
||||
.field input {
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius-md); /* 6px — slightly more approachable */
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-mono); /* Berkeley Mono in inputs */
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring); /* Apple blue ring — no shadow */
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--meta); }
|
||||
|
||||
/* ─── Cards — flat via border, not shadow ───────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border); /* Ring creates depth — NO shadow */
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* ─── Badges — Apple HIG semantic palette ───────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs); font-weight: 500; line-height: 1.2;
|
||||
}
|
||||
.badge-success { color: var(--success); background: rgba(48, 209, 88, 0.12); }
|
||||
.badge-danger { color: var(--danger); background: rgba(255, 59, 48, 0.12); }
|
||||
.badge-warn { color: var(--warn); background: rgba(255, 159, 10, 0.12); }
|
||||
.badge-accent { color: var(--accent); background: rgba(0, 122, 255, 0.12); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links, kbd ────────────────────────────────────────── */
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Terminal prompt prefix ────────────────────────────── */
|
||||
.prompt {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--success);
|
||||
display: flex; align-items: baseline; gap: var(--space-2);
|
||||
}
|
||||
.prompt::before {
|
||||
content: "$";
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.features-stack > * + * { margin-block-start: var(--space-5); }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">reference-fixture · opencode-ai</p>
|
||||
<h1>The terminal has a design system.</h1>
|
||||
<p class="lead" style="max-width: 60ch">
|
||||
Warm near-black canvas (<code>#201d1d</code>). Berkeley Mono is the
|
||||
only typeface — "everything is code." Flat depth: no shadows, only
|
||||
border rings and background shifts. Apple HIG colors.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read DESIGN.md</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="status">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">apple-hig-semantic-colors</p>
|
||||
<h2>Familiar signals on dark canvas.</h2>
|
||||
<p class="body-muted" style="max-width: 56ch">
|
||||
<code>#30d158</code> success · <code>#ff9f0a</code> warn ·
|
||||
<code>#ff3b30</code> danger · <code>#007aff</code> accent.
|
||||
Monospace badges. No rounded pills.
|
||||
</p>
|
||||
<div style="display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-4);">
|
||||
<span class="badge badge-success"><span class="badge-dot" aria-hidden="true"></span>passing</span>
|
||||
<span class="badge badge-warn"><span class="badge-dot" aria-hidden="true"></span>stale</span>
|
||||
<span class="badge badge-danger"><span class="badge-dot" aria-hidden="true"></span>failed</span>
|
||||
<span class="badge badge-accent"><span class="badge-dot" aria-hidden="true"></span>running</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">what-this-fixture-exercises</p>
|
||||
<h2>Flat depth. Border rings. No blur.</h2>
|
||||
</div>
|
||||
<div class="features-stack" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<div class="row-between">
|
||||
<h3>Berkeley Mono — every tier</h3>
|
||||
<span class="badge badge-accent">A1-identity</span>
|
||||
</div>
|
||||
<p class="body-muted body-sm">
|
||||
--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.
|
||||
</p>
|
||||
<p class="prompt" aria-label="Inspect tokens">cat tokens.css | grep font</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<div class="row-between">
|
||||
<h3>Flat elevation system</h3>
|
||||
<span class="badge badge-accent">A1-structure</span>
|
||||
</div>
|
||||
<p class="body-muted body-sm">
|
||||
--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: <code>#201d1d</code> → <code>#302c2c</code>.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect elevation →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<div class="row-between">
|
||||
<h3>880px narrow column</h3>
|
||||
<span class="badge badge-accent">A1-structure</span>
|
||||
</div>
|
||||
<p class="body-muted body-sm">
|
||||
--container-max: 880px. Single-column, text-centric layout.
|
||||
"The whole page is a terminal session" — no multi-column marketing grids.
|
||||
Generous 80px section spacing.
|
||||
</p>
|
||||
<div style="display: flex; gap: var(--space-2); margin-block-start: var(--space-1);">
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> to jump
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">form-components</p>
|
||||
<h2>Config-file inputs.</h2>
|
||||
<p class="body-muted" style="max-width: 56ch">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" style="margin-block-start: var(--space-8);" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="anthropic-key">ANTHROPIC_API_KEY</label>
|
||||
<input id="anthropic-key" type="text" placeholder="sk-ant-api03-..." autocomplete="off" />
|
||||
<p class="field-help">Set in environment or paste here to persist in keychain.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="model-id">DEFAULT_MODEL</label>
|
||||
<input id="model-id" type="text" placeholder="claude-opus-4" />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save config</button>
|
||||
<button type="button" class="btn btn-secondary">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
126
design-systems/opencode-ai/tokens.css
Normal file
126
design-systems/opencode-ai/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
340
design-systems/replicate/components.html
Normal file
340
design-systems/replicate/components.html
Normal file
|
|
@ -0,0 +1,340 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Replicate — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/replicate. Developer playground:
|
||||
everything pill-shaped (9999px), heavy display (700), red brand accent."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f8f8f8;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #202020;
|
||||
--fg-2: #4e4e4e;
|
||||
--muted: #646464;
|
||||
--meta: #8d8d8d;
|
||||
|
||||
--border: #202020;
|
||||
--border-soft: #e5e5e5;
|
||||
|
||||
--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%);
|
||||
|
||||
--success: #2b9a66;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 30px;
|
||||
--text-2xl: 48px;
|
||||
--text-3xl: 72px;
|
||||
--text-4xl: 128px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: -0.025em;
|
||||
|
||||
--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;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
--radius-sm: 9999px;
|
||||
--radius-md: 9999px;
|
||||
--radius-lg: 9999px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 0 0 1px var(--accent);
|
||||
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
|
||||
--motion-fast: 120ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border-soft); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography — heavy display 700, quiet body 400 ────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700; /* Thundering heavy display */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
}
|
||||
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
|
||||
h2 { font-size: var(--text-2xl); }
|
||||
h3 { font-size: var(--text-xl); }
|
||||
p { margin: 0; }
|
||||
.lead { font-family: var(--font-body); font-size: var(--text-lg); color: var(--muted); line-height: var(--leading-body); font-weight: 400; }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.eyebrow {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--meta);
|
||||
font-weight: 600;
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — ALL pill-shaped, dark/outlined variants ─── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-pill); /* ALWAYS 9999px */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: dark solid pill */
|
||||
.btn-primary {
|
||||
background: var(--fg);
|
||||
color: #fcfcfc;
|
||||
border-color: var(--fg);
|
||||
outline: 4px solid var(--fg);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.btn-primary:hover { background: #333333; border-color: #333333; outline-color: #333333; }
|
||||
/* Secondary: white outlined pill */
|
||||
.btn-secondary {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border-color: var(--fg);
|
||||
}
|
||||
.btn-secondary:hover { background: var(--surface); }
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
|
||||
.field input {
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-pill); /* Pill input */
|
||||
border: 1px solid var(--fg);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--meta); }
|
||||
|
||||
/* ─── Cards — bordered, pill-rounded ───────────────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--fg);
|
||||
border-radius: var(--radius-md); /* 9999px — still pill */
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* ─── Badges — pill status indicators ──────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 4px var(--space-3);
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs); font-weight: 400; line-height: 1.4;
|
||||
text-transform: lowercase; /* Replicate uses lowercase tags */
|
||||
}
|
||||
.badge-success { color: #ffffff; background: var(--success); }
|
||||
.badge-muted { color: var(--muted); background: color-mix(in oklab, var(--muted), transparent 88%); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links — dotted underline (#bbbbbb) — the signature ── */
|
||||
a { color: var(--fg); text-decoration: underline dotted #bbbbbb; text-underline-offset: 3px; }
|
||||
a:hover { text-decoration: underline; text-underline-offset: 3px; }
|
||||
kbd {
|
||||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||||
padding: 2px 6px; border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--fg); background: var(--surface); color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.hero-meta {
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
padding: var(--space-4); border: 1px solid var(--fg);
|
||||
border-radius: var(--radius-md); background: var(--surface);
|
||||
}
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · replicate</p>
|
||||
<h1>Run models with a single API call.</h1>
|
||||
<p class="lead" style="max-width: 52ch">
|
||||
A developer playground crackling with creative energy.
|
||||
Bold, high-contrast, pill-shaped — everything.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-meta" aria-label="System status">
|
||||
<div class="row-between">
|
||||
<span class="body-sm" style="color: var(--muted)">API status</span>
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
running
|
||||
</span>
|
||||
</div>
|
||||
<p class="body-sm" style="color: var(--meta)">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
|
||||
<p class="body-sm" style="color: var(--meta)">Press <kbd>⌘</kbd> <kbd>K</kbd> to search.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 22ch">Everything is pill-shaped. Everything.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<h3>Universal pill radius</h3>
|
||||
<p class="body-muted body-sm">
|
||||
--radius-sm/md/lg/pill: all 9999px. Buttons, cards, inputs,
|
||||
images, badges — the most extreme pill commitment in any tech brand.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect tokens →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Heavy display, quiet body</h3>
|
||||
<p class="body-muted body-sm">
|
||||
rb-freigeist-neue at weight 700 thunders through headlines.
|
||||
basier-square at weight 400 handles body text silently. Extreme contrast.
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Dotted underline links</h3>
|
||||
<p class="body-muted body-sm">
|
||||
text-decoration: underline dotted #bbbbbb — a developer notebook
|
||||
aesthetic. Lighter and more casual than solid underlines.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Inspect →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Even inputs are pill-shaped.</h2>
|
||||
<p class="body-muted" style="max-width: 48ch">
|
||||
Inputs use 9999px radius consistent with the system commitment.
|
||||
Border is Replicate Dark (#202020) — heavy, high-contrast containment.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Your email</label>
|
||||
<input id="email" type="email" placeholder="dev@your.app" autocomplete="email" required />
|
||||
<p class="field-help">Get your API key.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Get API key</button>
|
||||
<button type="button" class="btn btn-secondary">Explore models</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
125
design-systems/replicate/tokens.css
Normal file
125
design-systems/replicate/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
422
design-systems/together-ai/components.html
Normal file
422
design-systems/together-ai/components.html
Normal file
|
|
@ -0,0 +1,422 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Together AI — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/together-ai. Enterprise AI infrastructure:
|
||||
'The Future' font, aggressive negative tracking, pure white light sections,
|
||||
midnight blue dark sections, sharp 4/8px geometry."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: var(--surface);
|
||||
|
||||
--fg: #000000;
|
||||
--fg-2: rgba(0, 0, 0, 0.6);
|
||||
--muted: #666666;
|
||||
--meta: var(--muted);
|
||||
|
||||
--border: #ebebeb;
|
||||
--border-soft: var(--border);
|
||||
|
||||
--accent: #010120;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), white 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), white 16%);
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--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;
|
||||
|
||||
--text-xs: 10px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
|
||||
--leading-body: 1.3;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: -0.03em;
|
||||
|
||||
--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-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: rgba(1, 1, 32, 0.1) 0px 4px 10px;
|
||||
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset ─────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────── */
|
||||
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── "The Future" typography ────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500; /* Medium — NO bold in Together AI */
|
||||
line-height: var(--leading-tight);
|
||||
margin: 0;
|
||||
letter-spacing: var(--tracking-display); /* Always negative */
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); }
|
||||
h2 { font-size: var(--text-3xl); }
|
||||
h3 { font-size: var(--text-2xl); }
|
||||
p { margin: 0; font-weight: 400; }
|
||||
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: var(--leading-body); }
|
||||
/* PP Neue Montreal Mono for section labels — uppercase technical */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em; /* Mono labels: positive tracking contrast */
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — dark midnight primary, lavender ghost ────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius-sm); /* 4px — sharp geometry */
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--tracking-display);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary: midnight dark — main CTA */
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
/* Secondary: outlined with lavender tint on hover */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-secondary:hover { background: rgba(189, 187, 255, 0.12); border-color: var(--lavender); }
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.field input {
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm); /* 4px */
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--tracking-display);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); }
|
||||
.field-help { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); }
|
||||
|
||||
/* ─── Cards — enterprise feature cards ──────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md); /* 8px — feature containers */
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
|
||||
/* ─── Dark section override — the "midnight world" ─────── */
|
||||
.section-dark {
|
||||
background: #010120; /* Brand dark blue — the research world */
|
||||
color: #ffffff;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.section-dark .eyebrow { color: rgba(255, 255, 255, 0.5); }
|
||||
.section-dark p { color: rgba(255, 255, 255, 0.7); }
|
||||
.section-dark .card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.section-dark .btn-primary {
|
||||
background: var(--lavender);
|
||||
color: var(--accent); /* Dark on lavender — reverse CTA */
|
||||
}
|
||||
.section-dark .btn-primary:hover { background: #d4d3ff; }
|
||||
|
||||
/* ─── Badges ─────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs); font-weight: 400; line-height: 1.2;
|
||||
text-transform: uppercase; letter-spacing: 0.06em;
|
||||
}
|
||||
.badge-lavender { color: #6059ff; background: rgba(189, 187, 255, 0.2); }
|
||||
.badge-muted { color: var(--muted); background: var(--border-soft); }
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a { color: var(--fg); text-decoration: none; letter-spacing: var(--tracking-display); }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; }
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
/* Lavender gradient stat pill */
|
||||
.stat-pill {
|
||||
display: inline-flex; flex-direction: column; align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: rgba(189, 187, 255, 0.15);
|
||||
border: 1px solid rgba(189, 187, 255, 0.35);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.stat-pill .num { font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-display); }
|
||||
.stat-pill .lbl { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<!-- Light section — the "business world" -->
|
||||
<section data-od-id="hero">
|
||||
<div class="container">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">reference-fixture · together-ai</p>
|
||||
<h1>Fast inference. Open models.</h1>
|
||||
<p class="lead" style="max-width: 48ch">
|
||||
"The Future" font with aggressive negative tracking.
|
||||
Pure white canvas for business, deep midnight for research.
|
||||
Sharp 4/8px geometry — never pill, never generous.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
View tokens
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary">Read design</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: var(--space-4); flex-wrap: wrap;">
|
||||
<div class="stat-pill">
|
||||
<span class="num">100+</span>
|
||||
<span class="lbl">open models</span>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<span class="num">64px</span>
|
||||
<span class="lbl">display size</span>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<span class="num">−0.03em</span>
|
||||
<span class="lbl">tracking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Light features section -->
|
||||
<section data-od-id="features">
|
||||
<div class="container">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">what-this-fixture-exercises</p>
|
||||
<h2 style="max-width: 24ch">Sharp geometry. Negative tracking. Lavender tints.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<span class="badge badge-lavender">Display</span>
|
||||
<h3>"The Future"</h3>
|
||||
<p style="color: var(--fg-2); font-size: var(--text-sm)">
|
||||
Single typeface for both display and body. Weight capped at 500.
|
||||
Aggressive negative tracking (−0.03em) throughout — no exceptions.
|
||||
</p>
|
||||
<a href="./tokens.css" style="font-size: var(--text-sm)">Inspect →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="badge badge-muted">Geometry</span>
|
||||
<h3>4px + 8px only</h3>
|
||||
<p style="color: var(--fg-2); font-size: var(--text-sm)">
|
||||
--radius-sm: 4px for buttons, badges, tags. --radius-md: 8px for
|
||||
feature containers. No pill shapes — technical precision over softness.
|
||||
</p>
|
||||
<a href="./tokens.css" style="font-size: var(--text-sm)">Inspect radius →</a>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="badge badge-lavender">Accent</span>
|
||||
<h3>Midnight CTA</h3>
|
||||
<p style="color: var(--fg-2); font-size: var(--text-sm)">
|
||||
--accent: #010120. The dark world's background color used as the
|
||||
primary CTA on light sections. Lavender (#bdbbff) as soft UI tint.
|
||||
</p>
|
||||
<a href="./DESIGN.md" style="font-size: var(--text-sm)">Read the rule →</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dark section override — the "research/technical world" -->
|
||||
<section data-od-id="dark-world" class="section-dark">
|
||||
<div class="container">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">dark-section-override</p>
|
||||
<h2 style="color: #ffffff; max-width: 28ch">The research world. Midnight blue.</h2>
|
||||
<p style="color: rgba(255,255,255,0.7); max-width: 48ch; font-size: var(--text-lg)">
|
||||
Dark sections use background #010120 with white text. Same font,
|
||||
same sharp geometry. Lavender becomes the primary CTA color here.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Lavender CTA</a>
|
||||
<a href="./DESIGN.md" class="btn btn-secondary" style="border-color: rgba(255,255,255,0.2); color: #fff;">Read design</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-grid" style="grid-template-columns: 1fr;">
|
||||
<article class="card" style="background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1);">
|
||||
<span class="badge" style="color: var(--lavender); background: rgba(189,187,255,0.15);">Technical</span>
|
||||
<h3 style="color: #ffffff;">PP Neue Montreal Mono</h3>
|
||||
<p style="color: rgba(255,255,255,0.6); font-size: var(--text-sm)">
|
||||
--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.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Form — light section -->
|
||||
<section data-od-id="form">
|
||||
<div class="container">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">form-components</p>
|
||||
<h2 style="max-width: 24ch">Sharp inputs. Mono labels.</h2>
|
||||
<p style="color: var(--fg-2); max-width: 48ch">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="api-key">API key</label>
|
||||
<input id="api-key" type="text" placeholder="sk-together-..." autocomplete="off" />
|
||||
<p class="field-help">Used to authenticate all inference requests.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="model">Default model</label>
|
||||
<input id="model" type="text" placeholder="meta-llama/Llama-3-70b-chat" />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Save config</button>
|
||||
<button type="button" class="btn btn-secondary">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
127
design-systems/together-ai/tokens.css
Normal file
127
design-systems/together-ai/tokens.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue