Created
May 12, 2026 16:13
-
-
Save finom/cd48ae251e68da2938307b7854741f98 to your computer and use it in GitHub Desktop.
StarlingAIX design system storybook v0.1 (draft)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Starling AIX — Storybook (Draft)</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Text:ital@0;1&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| /* DRAFT tokens — keep in sync with SKILL.md */ | |
| --bg-sidebar: #f1ede2; | |
| --bg-content: #f5f3ee; | |
| --color-primary: #e88936; | |
| --radius-card: 12px; | |
| --radius-control: 10px; | |
| --font-logo: "DM Serif Text", Georgia, serif; | |
| --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; | |
| /* Provisional secondary tokens (not yet canonical — flagged in skill) */ | |
| --color-text: #1a1a1a; | |
| --color-text-muted: #6b6557; | |
| --color-border: #e1dcce; | |
| --color-surface: #ffffff; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { margin: 0; padding: 0; } | |
| body { | |
| font-family: var(--font-body); | |
| color: var(--color-text); | |
| background: var(--bg-content); | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ── Storybook layout ───────────────────────────────────────────── */ | |
| .sb-header { | |
| padding: 24px 32px; | |
| background: var(--bg-sidebar); | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .sb-title { font-family: var(--font-logo); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.05em; margin: 0; } | |
| .sb-subtitle { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; } | |
| .sb-status { | |
| display: inline-block; | |
| margin-left: 8px; | |
| padding: 2px 8px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| background: var(--color-primary); | |
| color: #fff; | |
| border-radius: 999px; | |
| vertical-align: middle; | |
| } | |
| .sb-container { max-width: 1100px; margin: 0 auto; padding: 32px; } | |
| .sb-section { margin-bottom: 40px; } | |
| .sb-section-title { | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--color-text-muted); | |
| margin: 0 0 12px; | |
| } | |
| .sb-panel { | |
| background: var(--color-surface); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-card); | |
| padding: 24px; | |
| } | |
| .sb-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } | |
| .sb-stack { display: flex; flex-direction: column; gap: 12px; } | |
| .sb-caption { | |
| font-size: 11px; | |
| color: var(--color-text-muted); | |
| margin-top: 6px; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, monospace; | |
| } | |
| /* ── Tokens swatches ─────────────────────────────────────────────── */ | |
| .swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } | |
| .swatch { | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-control); | |
| overflow: hidden; | |
| background: var(--color-surface); | |
| } | |
| .swatch .chip { height: 64px; } | |
| .swatch .meta { padding: 10px 12px; } | |
| .swatch .name { font-size: 13px; font-weight: 600; } | |
| .swatch .val { font-size: 11px; color: var(--color-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| /* ── Typography ──────────────────────────────────────────────────── */ | |
| .h-display { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0; } | |
| .h-1 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; } | |
| .h-2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; } | |
| .h-3 { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: 0.02em; } | |
| .t-body { font-size: 14px; font-weight: 400; line-height: 1.55; margin: 0; } | |
| .t-small { font-size: 12px; font-weight: 400; line-height: 1.5; margin: 0; } | |
| .t-muted { color: var(--color-text-muted); } | |
| .t-logo { font-family: var(--font-logo); font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0.05em; margin: 0; } | |
| .t-logo .accent { color: var(--color-primary); } | |
| /* ── Buttons ────────────────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| height: 40px; | |
| padding: 0 18px; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| border-radius: var(--radius-control); | |
| border: 1px solid transparent; | |
| cursor: pointer; | |
| transition: background 120ms ease, border-color 120ms ease, color 120ms ease; | |
| } | |
| .btn-primary { | |
| background: var(--color-primary); | |
| color: #1a1a1a; | |
| } | |
| .btn-primary:hover { background: #db7e2c; } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--color-text); | |
| border-color: var(--color-border); | |
| } | |
| .btn-secondary:hover { background: var(--bg-sidebar); } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--color-text); | |
| border-color: transparent; | |
| } | |
| .btn-ghost:hover { background: var(--bg-sidebar); } | |
| .btn[disabled] { opacity: 0.5; cursor: not-allowed; } | |
| .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; } | |
| /* ── Inputs ─────────────────────────────────────────────────────── */ | |
| .field-group { display: flex; flex-direction: column; gap: 6px; max-width: 320px; } | |
| .field-label { font-size: 13px; font-weight: 500; color: var(--color-text); } | |
| .field { | |
| height: 40px; | |
| padding: 0 14px; | |
| font: inherit; | |
| font-size: 14px; | |
| color: var(--color-text); | |
| background: var(--color-surface); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-control); | |
| outline: none; | |
| transition: border-color 120ms ease, box-shadow 120ms ease; | |
| } | |
| .field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(232, 137, 54, 0.15); } | |
| .field::placeholder { color: var(--color-text-muted); } | |
| textarea.field { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; } | |
| .field-hint { font-size: 12px; color: var(--color-text-muted); } | |
| /* ── Cards ──────────────────────────────────────────────────────── */ | |
| .card { | |
| background: var(--color-surface); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-card); | |
| padding: 16px; | |
| min-width: 220px; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .card-title { font-size: 14px; font-weight: 600; margin: 0; } | |
| .card-meta { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } | |
| .card-body { font-size: 13px; color: var(--color-text); } | |
| /* ── Nav items ──────────────────────────────────────────────────── */ | |
| .navlist { display: flex; flex-direction: column; gap: 4px; background: var(--bg-sidebar); padding: 12px; border-radius: var(--radius-card); width: 220px; } | |
| .navitem { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--color-text); | |
| border-radius: var(--radius-control); | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .navitem:hover { background: rgba(0,0,0,0.04); } | |
| .navitem.active { background: var(--color-primary); color: #1a1a1a; } | |
| .navitem .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; } | |
| /* ── Pills / tags ───────────────────────────────────────────────── */ | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| border-radius: 999px; | |
| background: var(--bg-sidebar); | |
| color: var(--color-text); | |
| border: 1px solid var(--color-border); | |
| } | |
| .pill.primary { background: var(--color-primary); color: #1a1a1a; border-color: transparent; } | |
| .pill .n { font-weight: 600; opacity: 0.75; } | |
| /* ── Avatar ─────────────────────────────────────────────────────── */ | |
| .avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| background: var(--color-primary); | |
| color: #1a1a1a; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| /* ── Status dot ─────────────────────────────────────────────────── */ | |
| .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); } | |
| .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); } | |
| .status.ok .dot { background: #4d9a55; } | |
| /* ── Sign-in screen ─────────────────────────────────────────────── */ | |
| .signin-screen { max-width: 540px; margin: 0 auto; padding: 24px 0; } | |
| .signin-brand { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 32px; } | |
| .signin-mark { | |
| width: 80px; height: 80px; border-radius: 50%; | |
| background: var(--bg-sidebar); | |
| display: flex; align-items: center; justify-content: center; | |
| } | |
| .signin-mark-letter { font-family: var(--font-logo); font-size: 36px; color: var(--color-text); letter-spacing: 0; } | |
| .signin-logo { font-size: 32px; line-height: 1; letter-spacing: 0.05em; } | |
| .signin-card { | |
| background: var(--bg-sidebar); | |
| border-radius: 20px; | |
| padding: 32px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .signin-title { font-size: 28px; font-weight: 700; margin: 0; } | |
| .signin-sub { font-size: 16px; color: var(--color-text); margin: 0 0 8px; } | |
| .signin-field-tall { height: 40px; font-size: 14px; padding: 0 14px; background: var(--color-surface); border-color: rgba(0,0,0,0.18); } | |
| .signin-sep { | |
| display: flex; align-items: center; gap: 12px; | |
| color: var(--color-text); font-size: 14px; margin: 4px 0; | |
| } | |
| .signin-sep::before, .signin-sep::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.20); } | |
| .signin-submit { width: 100%; height: 56px; font-size: 16px; font-weight: 700; margin-top: 4px; border-radius: var(--radius-control); } | |
| .signin-foot { text-align: center; color: var(--color-text); margin: 28px 0 0; font-size: 16px; } | |
| .signin-foot a { color: var(--color-primary); font-weight: 600; text-decoration: none; margin-left: 8px; } | |
| .signin-foot a:hover { text-decoration: underline; } | |
| /* ── Demo sidebar layout ────────────────────────────────────────── */ | |
| .demo-layout { | |
| display: grid; | |
| grid-template-columns: 220px 1fr; | |
| min-height: 220px; | |
| border-radius: var(--radius-card); | |
| overflow: hidden; | |
| border: 1px solid var(--color-border); | |
| } | |
| .demo-aside { background: var(--bg-sidebar); padding: 16px; } | |
| .demo-main { background: var(--bg-content); padding: 16px; } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="sb-header"> | |
| <h1 class="sb-title">StarlingAIX — Storybook <span class="sb-status">Draft</span></h1> | |
| <p class="sb-subtitle">Catalog of base elements rendered from the current design tokens. Update tokens in <code>SKILL.md</code> first, then refresh this file.</p> | |
| </header> | |
| <main class="sb-container"> | |
| <!-- Tokens --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Tokens</h2> | |
| <div class="sb-panel"> | |
| <div class="swatch-grid"> | |
| <div class="swatch"> | |
| <div class="chip" style="background: var(--bg-sidebar);"></div> | |
| <div class="meta"><div class="name">--bg-sidebar</div><div class="val">#f1ede2</div></div> | |
| </div> | |
| <div class="swatch"> | |
| <div class="chip" style="background: var(--bg-content);"></div> | |
| <div class="meta"><div class="name">--bg-content</div><div class="val">#f5f3ee</div></div> | |
| </div> | |
| <div class="swatch"> | |
| <div class="chip" style="background: var(--color-primary);"></div> | |
| <div class="meta"><div class="name">--color-primary</div><div class="val">#e88936</div></div> | |
| </div> | |
| <div class="swatch"> | |
| <div class="chip" style="background: var(--color-surface); border-bottom: 1px solid var(--color-border);"></div> | |
| <div class="meta"><div class="name">--color-surface (provisional)</div><div class="val">#ffffff</div></div> | |
| </div> | |
| <div class="swatch"> | |
| <div class="chip" style="background: var(--color-text);"></div> | |
| <div class="meta"><div class="name">--color-text (provisional)</div><div class="val">#1a1a1a</div></div> | |
| </div> | |
| <div class="swatch"> | |
| <div class="chip" style="background: var(--color-text-muted);"></div> | |
| <div class="meta"><div class="name">--color-text-muted (provisional)</div><div class="val">#6b6557</div></div> | |
| </div> | |
| </div> | |
| <p class="sb-caption">Provisional tokens are not in <code>SKILL.md</code> yet — they exist so the storybook can render. Flag them for promotion or replacement when the user finalizes the palette.</p> | |
| </div> | |
| </section> | |
| <!-- Typography --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Typography</h2> | |
| <div class="sb-panel sb-stack"> | |
| <div> | |
| <p class="t-logo">Starling<span class="accent">AIX</span></p> | |
| <p class="sb-caption">.t-logo · DM Serif Text · 16/400 · lh 100% · ls 5%</p> | |
| </div> | |
| <div> | |
| <p class="h-display">Display heading</p> | |
| <p class="sb-caption">.h-display · 32/700</p> | |
| </div> | |
| <div> | |
| <p class="h-1">Section heading</p> | |
| <p class="sb-caption">.h-1 · 24/700</p> | |
| </div> | |
| <div> | |
| <p class="h-2">Subsection heading</p> | |
| <p class="sb-caption">.h-2 · 18/600</p> | |
| </div> | |
| <div> | |
| <p class="h-3">Label / overline</p> | |
| <p class="sb-caption">.h-3 · 14/600 · letter-spacing 0.02em</p> | |
| </div> | |
| <div> | |
| <p class="t-body">Body text — the workhorse for paragraphs and most UI copy. Stay short, direct, helpful.</p> | |
| <p class="sb-caption">.t-body · 14/400</p> | |
| </div> | |
| <div> | |
| <p class="t-small t-muted">Small muted text — timestamps, captions, helper hints.</p> | |
| <p class="sb-caption">.t-small.t-muted · 12/400</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Buttons --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Buttons</h2> | |
| <div class="sb-panel sb-row"> | |
| <div class="sb-stack"> | |
| <button class="btn btn-primary">Primary action</button> | |
| <p class="sb-caption">.btn.btn-primary</p> | |
| </div> | |
| <div class="sb-stack"> | |
| <button class="btn btn-secondary">Secondary action</button> | |
| <p class="sb-caption">.btn.btn-secondary</p> | |
| </div> | |
| <div class="sb-stack"> | |
| <button class="btn btn-ghost">Ghost action</button> | |
| <p class="sb-caption">.btn.btn-ghost</p> | |
| </div> | |
| <div class="sb-stack"> | |
| <button class="btn btn-primary" disabled>Disabled</button> | |
| <p class="sb-caption">[disabled]</p> | |
| </div> | |
| <div class="sb-stack"> | |
| <button class="btn btn-secondary btn-sm">Small action</button> | |
| <p class="sb-caption">.btn-sm modifier</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Inputs --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Inputs & form fields</h2> | |
| <div class="sb-panel sb-row"> | |
| <div class="field-group"> | |
| <label class="field-label" for="sb-text">Email</label> | |
| <input id="sb-text" class="field" type="email" placeholder="you@example.com" /> | |
| <span class="field-hint">Use the work address you signed up with.</span> | |
| </div> | |
| <div class="field-group"> | |
| <label class="field-label" for="sb-pwd">Password</label> | |
| <input id="sb-pwd" class="field" type="password" placeholder="••••••••" /> | |
| </div> | |
| <div class="field-group"> | |
| <label class="field-label" for="sb-ta">Notes</label> | |
| <textarea id="sb-ta" class="field" placeholder="Anything to capture?"></textarea> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sign-in screen --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Sign-in screen</h2> | |
| <div class="sb-panel" style="background: #ffffff;"> | |
| <div class="signin-screen"> | |
| <div class="signin-brand"> | |
| <div class="signin-mark" aria-hidden="true"> | |
| <span class="signin-mark-letter">S</span> | |
| </div> | |
| <p class="t-logo signin-logo">Starling<span class="accent">AIX</span></p> | |
| </div> | |
| <form class="signin-card" onsubmit="event.preventDefault();"> | |
| <h3 class="signin-title">Welcome back</h3> | |
| <p class="signin-sub">Sign in to your organizational brain</p> | |
| <input class="field signin-field-tall" type="text" aria-label="Username or SSO" /> | |
| <div class="signin-sep"><span>or</span></div> | |
| <div class="field-group" style="max-width: none;"> | |
| <label class="field-label">Email</label> | |
| <input class="field" type="email" /> | |
| </div> | |
| <div class="field-group" style="max-width: none;"> | |
| <label class="field-label">Password</label> | |
| <input class="field" type="password" /> | |
| </div> | |
| <button type="submit" class="btn btn-primary signin-submit">Sign in</button> | |
| </form> | |
| <p class="signin-foot">Don't have an account? <a href="#">Sign up</a></p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cards --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Cards</h2> | |
| <div class="sb-panel sb-row"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <p class="card-title">Plain card</p> | |
| <span class="card-meta">Now</span> | |
| </div> | |
| <p class="card-body">Container for any grouped content. Padding 16, radius var(--radius-card).</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <p class="card-title">Work item</p> | |
| <span class="card-meta">1d ago</span> | |
| </div> | |
| <p class="card-body">Checking out the UI.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Nav items --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Navigation</h2> | |
| <div class="sb-panel sb-row"> | |
| <div class="navlist"> | |
| <div class="navitem active"><span class="dot"></span>Surface</div> | |
| <div class="navitem">Workspace</div> | |
| <div class="navitem">Org Library</div> | |
| <div class="navitem">Approvals</div> | |
| </div> | |
| <div> | |
| <p class="sb-caption">.navlist (var(--bg-sidebar)) + .navitem · .navitem.active uses var(--color-primary)</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pills + status --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Pills, status, avatar</h2> | |
| <div class="sb-panel sb-row"> | |
| <span class="pill">Neutral</span> | |
| <span class="pill primary">Primary</span> | |
| <span class="pill">All <span class="n">12</span></span> | |
| <span class="status ok"><span class="dot"></span>Healthy</span> | |
| <span class="status"><span class="dot"></span>Draft</span> | |
| <span class="avatar">J</span> | |
| </div> | |
| </section> | |
| <!-- Layout demo --> | |
| <section class="sb-section"> | |
| <h2 class="sb-section-title">Sidebar + content layout</h2> | |
| <div class="sb-panel"> | |
| <div class="demo-layout"> | |
| <aside class="demo-aside"> | |
| <p class="t-logo" style="margin-bottom: 16px;">Starling<span class="accent">AIX</span></p> | |
| <div class="navlist" style="background: transparent; padding: 0; width: auto;"> | |
| <div class="navitem active"><span class="dot"></span>Surface</div> | |
| <div class="navitem">Workspace</div> | |
| <div class="navitem">Org Library</div> | |
| </div> | |
| </aside> | |
| <main class="demo-main"> | |
| <h3 class="h-1" style="margin-bottom: 8px;">Good morning, Jenny</h3> | |
| <p class="t-body t-muted" style="margin-bottom: 16px;">Three columns, one active card.</p> | |
| <div class="sb-row"> | |
| <div class="card" style="min-width: 160px;"> | |
| <div class="card-header"><p class="card-title">Now</p><span class="card-meta">1</span></div> | |
| <p class="card-body">checking out the UI</p> | |
| </div> | |
| <div class="card" style="min-width: 160px;"> | |
| <div class="card-header"><p class="card-title">Next</p><span class="card-meta">0</span></div> | |
| <p class="card-body t-muted">Nothing queued.</p> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment