Seb Labs Design System · v3

Editorial calm on Finift Pearl.

Seb Labs builds open-weight decision models: context in, a calibrated probability distribution out, in one forward pass. One Lapis monolith per screen, malachite means Seb, warm stone means competitors, gold means the single thing to look at.

01 · How agents and engineers use this system

Follow the rules.
Verify before shipping.

Read design-system/README.md first, use existing tokens and .sl-* components unchanged, and run the automated verifier.

Step 01

Does it need to exist?

Fewer elements beat better elements. Strip decorative badges, secondary kickers, and unmotivated borders before styling.

Step 02

Use tokens & components

Pull colours, spacing, and radii from app/design-tokens.css (synced with design-system/tokens.json) and patterns from design-system/components/.

Step 03

Assign semantic colour roles

malachite = Seb (us), them / them-deep = competitors, gold = one focal highlight per view, canvas = Finift Pearl ground.

Step 04

Run the automated check

Execute npm run check:design for static token/CSS/source verification and npm run check:design:live for 1440px & 390px DOM audits.

Agent verification commands · scripts/check-design-system.mjsExit code 0 required

# 1. Fast static check (tokens sync, 11px floor, no ALL-CAPS, calm motion, voice, SVG fonts)
npm run check:design

# 2. Full live Playwright DOM & responsive audit across all key routes (1440x900 & 390x844)
npm run check:design:live

# 3. Re-extract deck & brand kit SVGs with subset embedded WOFF2 fonts
python3 scripts/extract-infographics.py

02 · Colour roles & dual-theme tokens

Two themes.
Strict semantic roles.

Every page uses Pearl (:root). At most one block per viewport uses Lapis ([data-theme="lapis"]).

The 3-hue chart rule

Max three hues in any chart: malachite for Seb, them + them-deep for every competitor, and at most one gold callout. There is no red, amethyst, or indigo in charts.

The gold budget

At most one gold element per view (plus the top/northstar mosaic ribbon). On Kopyttse, gold belongs on the antlers and tip nodes only—never gold card borders or outlines.

Contrast & mark vs. ink tokens

malachite, them, and gold are mark colours for bars and dots. For text on Pearl, always use malachite-ink, them-ink (on white surface), or ink-muted.

Token	Pearl (page · :root)	Lapis (monolith · [data-theme="lapis"])	Semantic role & contrast notes
`--canvas`--lapis-canvas	`#F4F3EE`	`#0E172A`	Page ground. Pearl for every page; lapis only inside the one dark monolith per viewport (hero console, one dark section, northstar).
`--canvas-deep`--lapis-canvas-deep	`#EDECE5`	`#1E1B4B`	Alternate band behind a full-width section on pearl; on lapis the gradient partner of canvas (155deg canvas to canvas-deep).
`--surface`--lapis-surface	`#FFFFFF`	`#16213E`	Cards, chart beds, tables and code panels set on canvas.
`--stone`--lapis-stone	`#EAE8DF`	`#1E294B`	Hover fill, chart tracks, quiet chips. Never text.
`--border`--lapis-border	`#D8D5C8`	`#2E365A`	Hairline dividers and card edges. Decorative only: never the sole boundary of a control (pair with fill or ink).
`--ink`--lapis-ink	`#0E172A`	`#F4F3EE`	Headlines, body copy and numbers on canvas and surface.
`--ink-muted`--lapis-ink-muted	`#586477`	`#AEBBD0`	Secondary copy, captions, footnotes, axis labels on canvas and surface (5.4:1 pearl, 8.2:1 lapis surface).
`--malachite`--lapis-malachite	`#0D9488`	`#2DD4BF`	US: Seb bars, the winning option, Seb data points, status dots. A mark colour: 3.4:1 on pearl, so never body text there.
`--malachite-ink`--lapis-malachite-ink	`#0F766E`	`#5EEAD4`	Text in the brand colour: eyebrows, italic headline accents, links, Seb labels and Seb numbers (4.9:1 pearl, 12:1 lapis). Also the primary button fill on pearl.
`--on-malachite`--lapis-on-malachite	`#FFFFFF`	`#0E172A`	Text on a malachite-ink (pearl) or malachite (lapis) fill, e.g. the primary button.
`--malachite-tint`--lapis-malachite-tint	`rgba(13,148,136,0.08)`	`rgba(45,212,191,0.14)`	The Seb column in a comparison table, the selected tab or scenario, the 'ours' tag.
`--gold`--lapis-gold	`#C59B27`	`#E5B842`	HIGHLIGHT: at most one element per view (a key number, a rule, the small diamond) plus Kopyttse's antlers. Never outlines, body text or a competitor series.
`--gold-ink`--lapis-gold-ink	`#8A6B16`	`#E5B842`	Gold as text, when the one highlight is a word or number (4.5:1 pearl, 9.6:1 lapis).
`--them`--lapis-them	`#A8A29E`	`#475569`	THEM: every competitor and baseline bar, dot or ring. A mark colour (2.5:1); label it with them-ink.
`--them-deep`--lapis-them-deep	`#78716C`	`#64748B`	A second competitor series when two must be told apart (e.g. Clef 27B vs Clef-flash 9B). Lightness, not hue, separates them.
`--them-ink`--lapis-them-ink	`#78716C`	`#94A3B8`	Competitor labels and values. 4.8:1 on surface (white), 4.3:1 on pearl canvas: on canvas use ink-muted instead. 7:1 on lapis.
`--focus-ring`--lapis-focus-ring	`#6366F1`	`#818CF8`	3px outline, 5px offset, on every focus-visible control (4:1 pearl, 6:1 lapis). The only indigo left in the system.
`--selection`--lapis-selection	`#0D9488`	`#0D9488`	::selection background, with white text.

03 · Typography & 11px web floor

Three families.
Eleven named roles.

Cormorant Garamond for display headlines and hero metrics, Plus Jakarta Sans for UI and copy, JetBrains Mono for tabular data and code.

fonts/CormorantGaramond.woff2Cormorant Garamond Weight 300 700 · normal

fonts/CormorantGaramond-Italic.woff2Cormorant Garamond ItalicWeight 300 700 · italic

fonts/PlusJakartaSans.woff2Plus Jakarta Sans Weight 200 800 · normal

fonts/JetBrainsMono.woff2JetBrains Mono Weight 100 800 · normal

Display roles

"Cormorant Garamond", Georgia, serif

display-xl80px / 0.96 · w600 · -0.045em

The one hero headline per page (site h1, clamp 66-91px). Italic + malachite-ink for the accent phrase.

Instant, calibrated judgment.

display-l52px / 1.04 · w600 · -0.045em

Section headlines (site h2, clamp 42-60px). Two lines max.

Some moments call for a decision.

metric50px / 1.1 · w600 · -0.04em

The one hero number in a metrics band, chart or slide. Unit set at half size beside it.

59.16

panel-title37px / 1.1 · w600

Headline inside a benchmark panel or slide card.

Small model. Serious judgment.

Text roles

"Plus Jakarta Sans", Arial, sans-serif

heading21px / 1.35 · w700 · -0.035em

Card and article headings (site h3).

Decide, don't narrate.

body14px / 1.8 · w400

Running copy, ink-muted on canvas. Keep lines near 65 characters.

Context goes in. A complete probability distribution comes out.

body-s12px / 1.7 · w400

Card copy and dense descriptions.

Route a ticket. Gate a tool call.

eyebrow12px / 1.4 · w600

One section note above a headline, sentence case, malachite-ink. Never ALL CAPS.

The Seb Labs mission

label11px / 1.4 · w600

Buttons, tabs, nav, badges. The web floor: nothing smaller.

Developer console

Data roles

"JetBrains Mono", ui-monospace, monospace

data11px / 1.5 · w500

Probabilities, latencies, table cells, chart values. Always tabular-nums.

0.9642 21.7 ms p50

code13px / 1.7 · w400

Code blocks and inline commands.

claude mcp add --transport http seblabs

04 · Space, radius & elevation

Surface and border,
not drop shadows.

Hierarchy comes from canvas, surface, and 1px solid var(--border). Only the Lapis monolith carries --shadow-monolith.

Spacing scale (`--space-1` to `--space-8`)

--space-14px

Icon-to-label, badge inner gap.

--space-28px

Inside chips and tight label stacks.

--space-312px

Bar label to track; list rows.

--space-416px

Grid gap between sibling cards; phone side gutter minimum; console dot-grid pitch.

--space-524px

Card and console padding.

--space-636px

Benchmark panel padding; metrics-band column inset.

--space-748px

Desktop side gutter (wrap = min(1240px, 100% - 96px)); heading to content.

--space-8104px

Vertical rhythm between page sections.

Radius & elevation tokens

3px

--radius-xs

Chart bars, tracks, the 'ours' tag.

4px

--radius-s

Badges, release pill, nav CTA.

5px

--radius-m

Buttons, inputs, selects, segmented controls.

8px

--radius-l

Cards, benchmark explorer, icon tiles.

12px

--radius-xl

The lapis monolith (hero console). Nothing else.

--shadow-monolith: 0 28px 65px -45px #0E172A

Only the lapis monolith. Cards use border, never shadow.

--shadow-none: none

Everything else: hierarchy comes from canvas / surface / border, not elevation.

05 · Canonical component catalog (14 components)

Live specimens.
Copyable markup.

Rendered directly from design-system/components/*/preview.html and bundle.css.

Layout

SectionHeading

design-system/components/SectionHeading/

The head of every page section: one eyebrow, one display headline, an optional short note.

Evidence over eloquence

A small model.
A measurable difference.

Accuracy is a distribution, too. Explore the strengths, comparisons, and tradeoffs.

Provide: an sl-eyebrow span (sentence case, malachite-ink), an h2 in display-l with at most one italic em turn, and an optional p note (two lines, right-aligned column, ink-muted).
Nothing else above a section's content: no icons, badges or buttons in the head.
Headline two lines max with text-wrap: balance.

View HTML markup (SectionHeading)

<div class="sl" style="padding:28px;background:var(--canvas)">
  <div class="sl-section-head"><div><span class="sl-eyebrow">Evidence over eloquence</span><h2>A small model.<br><em>A measurable difference.</em></h2></div><p>Accuracy is a distribution, too. Explore the strengths, comparisons, and tradeoffs.</p></div>
</div>

Actions

Button

design-system/components/Button/

Buttons start an action or open the console; one primary per view.

Get $5 in free credits Try the playground

Build with Seb

Provide: class="sl-button sl-button--primary|--secondary" on an <a> or <button>, a sentence-case label, and a trailing arrow span (↗ external, → next, ↓ download) with aria-hidden="true".
Primary: malachite-ink fill with on-malachite text on pearl; on lapis the fill is malachite with lapis text.
Secondary: transparent with a border edge, stone on hover.
Radius radius-m, label 12px 600 Jakarta. Never gold, never a gradient, never two primaries side by side.

View HTML markup (Button)

<div class="sl" style="display:flex;gap:21px;flex-wrap:wrap;padding:20px;background:var(--canvas)">
  <a class="sl-button sl-button--primary" href="#">Get $5 in free credits <span aria-hidden="true">↗</span></a>
  <a class="sl-button sl-button--secondary" href="#">Try the playground <span aria-hidden="true">↗</span></a>
  <div data-theme="lapis" style="background:var(--canvas);padding:12px;border-radius:var(--radius-l)"><a class="sl-button sl-button--primary" href="#">Build with Seb <span aria-hidden="true">↗</span></a></div>
</div>

Labels

Badge

design-system/components/Badge/

Badges state a fact about the thing beside them (release, status, model).

Meet Seb-9B-v2 Streamable HTTP · available #1 at 9B Decision Index 0.3 public

Provide: class="sl-badge" with a short sentence-case label; add sl-badge--ours only for a Seb result; an optional leading sl-badge__dot for live status.
Neutral by default (surface, border, ink). Never gold, indigo or amethyst badges.
11px 600, radius-s. One badge per line item.

View HTML markup (Badge)

<div class="sl" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:20px;background:var(--canvas)">
  <span class="sl-badge"><span class="sl-badge__dot"></span>Meet Seb-9B-v2</span>
  <span class="sl-badge">Streamable HTTP · available</span>
  <span class="sl-badge sl-badge--ours">#1 at 9B</span>
  <span class="sl-badge">Decision Index 0.3 public</span>
</div>

Surfaces

Monolith

design-system/components/Monolith/

The lapis monolith is the one dark object on a screen: the hero console, a dark section, the northstar.

The decision engineΔ^K-1

Context in. A complete probability distribution out, in one forward pass.

Provide: a wrapper with data-theme="lapis" and class="sl-monolith", an optional sl-monolith__bar title row and an sl-monolith__body.
At most one per viewport. Never alternate dark and light sections.
radius-xl, shadow-monolith, a 16px dot grid. Border is border (lapis), never gold.
Kopyttse may stand directly inside it; never in a framed tile inside it.

View HTML markup (Monolith)

<div class="sl" style="padding:20px;background:var(--canvas)">
  <div data-theme="lapis" class="sl-monolith">
    <div class="sl-monolith__bar"><span><span class="sl-badge__dot" style="display:inline-block;margin-right:8px"></span>The decision engine</span><span style="font:500 11px var(--font-mono);color:var(--gold)">Δ<sup>K-1</sup></span></div>
    <div class="sl-monolith__body" style="font:400 14px/1.8 var(--font-sans);color:var(--ink-muted)">Context in. A complete probability distribution out, in one forward pass.</div>
  </div>
</div>

Data

ProbabilityRow

design-system/components/ProbabilityRow/

The signature: one row per option, the winner in malachite, the rest in them, values summing to 1.

Look up payment record0.9642

Answer from memory0.0216

Escalate to a person0.0142

Σ pᵢ = 1.0000 · Illustrative distribution

Provide: per option a label, a value with 4 decimals (or a percent with 2), and style="width:<p*100>%" on sl-prob__fill; mark the argmax row sl-prob--winner.
Add sl-prob__sum (Σ pᵢ = 1.0000) and, if values are not live, the words "Illustrative distribution".
Values in data (mono, tabular). Track 4px stone. Growth animation 0.45s; none under reduced motion.

View HTML markup (ProbabilityRow)

<div class="sl" data-theme="lapis" style="padding:24px;background:var(--canvas)">
  <div class="sl-prob sl-prob--winner"><div class="sl-prob__head"><span>Look up payment record</span><span class="sl-data">0.9642</span></div><div class="sl-prob__track"><span class="sl-prob__fill" style="width:96.42%"></span></div></div>
  <div class="sl-prob"><div class="sl-prob__head"><span>Answer from memory</span><span class="sl-data">0.0216</span></div><div class="sl-prob__track"><span class="sl-prob__fill" style="width:2.16%"></span></div></div>
  <div class="sl-prob"><div class="sl-prob__head"><span>Escalate to a person</span><span class="sl-data">0.0142</span></div><div class="sl-prob__track"><span class="sl-prob__fill" style="width:1.42%"></span></div></div>
  <div class="sl-prob__sum">Σ pᵢ = 1.0000 · Illustrative distribution</div>
</div>

Data

ComparisonBar

design-system/components/ComparisonBar/

Horizontal bars comparing Seb with competitors on one metric.

Seb-9B-v2ours59.16

Jev 1.1357.96

Clef 27B61.71

Provide: rows of label + value + sl-compare__fill width on one shared scale (state the axis 0-100 or the unit); Seb's row gets sl-compare__row--ours and the sl-tag-ours tag.
Seb malachite; every competitor them (a second competitor family them-deep). No other hues, at most one gold callout.
Label directly; no legend. Sort as the story needs, and keep honest wins and losses (a bigger model that leads keeps its lead).

View HTML markup (ComparisonBar)

<div class="sl" style="padding:24px;background:var(--surface)">
  <div class="sl-compare">
    <div class="sl-compare__row sl-compare__row--ours"><div class="sl-compare__head"><span>Seb-9B-v2<span class="sl-tag-ours">ours</span></span><span class="sl-data">59.16</span></div><div class="sl-compare__track"><span class="sl-compare__fill" style="width:59.16%"></span></div></div>
    <div class="sl-compare__row"><div class="sl-compare__head"><span>Jev 1.13</span><span class="sl-data">57.96</span></div><div class="sl-compare__track"><span class="sl-compare__fill" style="width:57.96%"></span></div></div>
    <div class="sl-compare__row"><div class="sl-compare__head"><span>Clef 27B</span><span class="sl-data">61.71</span></div><div class="sl-compare__track"><span class="sl-compare__fill" style="width:61.71%;background:var(--them-deep)"></span></div></div>
  </div>
</div>

Data

MetricBand

design-system/components/MetricBand/

A row of up to four hero numbers under the hero, divided by hairlines.

59.16Decision Index 0.337 suites · public index

21.7msMedian decision latencyBF16 · RTX PRO 6000

244/sSingle-GPU throughputNVFP4 · batched decisions

9BParameters. Open weights.Text, structured state & vision

Provide: per cell a strong number in metric with an optional half-size unit span, a b label and a small source line (ink-muted).
Numbers in ink, never coloured; the source line is mandatory ("37 suites · public index").
Collapses to two columns at tablet and one at phone.

View HTML markup (MetricBand)

<div class="sl" style="padding:20px 28px;background:var(--canvas)">
  <div class="sl-metrics">
    <div><strong>59.16</strong><b>Decision Index 0.3</b><small>37 suites · public index</small></div>
    <div><strong>21.7<span>ms</span></strong><b>Median decision latency</b><small>BF16 · RTX PRO 6000</small></div>
    <div><strong>244<span>/s</span></strong><b>Single-GPU throughput</b><small>NVFP4 · batched decisions</small></div>
    <div><strong>9<span>B</span></strong><b>Parameters. Open weights.</b><small>Text, structured state &amp; vision</small></div>
  </div>
</div>

Data

SimplexStage

design-system/components/SimplexStage/

The Δ^(K−1) probability simplex stage: visualises a calibrated distribution over K options in one forward pass.

Provide: div.sl-simplex inside a Lapis monolith (data-theme="lapis"), with vertex labels context (top), options[] (bottom-left), probabilities (bottom-right), and 0 generated tokens centred below the base edge.
Geometry rule: the bottom edge of the triangle (y = 200 in a 240px stage) must stay at least 18px above the 0 generated tokens label; never let a line slice through text.
Kopyttse or a single gold argmax point sits at the centroid/winner coordinates inside the simplex.

View HTML markup (SimplexStage)

<div class="sl" data-theme="lapis" style="padding:20px;background:var(--canvas)">
  <div class="sl-simplex">
    <svg viewBox="0 0 460 210" aria-hidden="true">
      <path d="M230 24 64 172 396 172Z" fill="rgba(45,212,191,.06)" stroke="#2E365A" stroke-width="1.2"/>
      <line x1="230" y1="24" x2="230" y2="122" stroke="#2E365A" stroke-dasharray="3 4"/>
      <line x1="64" y1="172" x2="230" y2="122" stroke="#2E365A" stroke-dasharray="3 4"/>
      <line x1="396" y1="172" x2="230" y2="122" stroke="#2E365A" stroke-dasharray="3 4"/>
      <circle cx="230" cy="24" r="4" fill="#AEBBD0"/>
      <circle cx="64" cy="172" r="4" fill="#2DD4BF"/>
      <circle cx="396" cy="172" r="4" fill="#2DD4BF"/>
      <circle cx="230" cy="122" r="6" fill="#E5B842"/>
      <text x="230" y="13" text-anchor="middle" fill="#AEBBD0" font-family="var(--font-mono)" font-size="11">context</text>
      <text x="64" y="190" text-anchor="middle" fill="#AEBBD0" font-family="var(--font-mono)" font-size="11">options[]</text>
      <text x="396" y="190" text-anchor="middle" fill="#AEBBD0" font-family="var(--font-mono)" font-size="11">probabilities</text>
      <text x="230" y="202" text-anchor="middle" fill="#5EEAD4" font-family="var(--font-mono)" font-size="11">0 generated tokens · Δ^(K−1)</text>
    </svg>
  </div>
</div>

Data

FigureCard

design-system/components/FigureCard/

Framed research figure card for charts, Pareto frontiers, and benchmark tables.

First-tier routing · 17 public suites

Seb-9B-v2 in front of Claude Opus 5.5

−51% cost at τ = 0.80

Seb-9B-v2 → Opus cascade (τ = 0.80)ours0.838 · $0.49×

Always Claude Opus 5.50.836 · $1.00×

At τ = 0.80, Seb answers 53% of requests locally in ~22 ms and forwards uncertain cases to Opus.

Provide: figure.sl-figure (surface on canvas, 1px solid var(--border), radius-l), a div.sl-figure__head with span.sl-eyebrow, h3, and optional span.sl-badge, a div.sl-figure__stage (minimum 32px padding, centred content), and a figcaption.sl-figure__caption below.
Never place footnotes inside the SVG chart; set limitations and methodology in sl-figure__caption (12px/1.7 ink-muted) below the stage.
Max three hues inside any chart: malachite (Seb), them / them-deep (competitors), and at most one gold callout.

View HTML markup (FigureCard)

<div class="sl" style="padding:20px;background:var(--canvas)">
  <figure class="sl-figure">
    <div class="sl-figure__head">
      <div><span class="sl-eyebrow">First-tier routing · 17 public suites</span><h3>Seb-9B-v2 in front of Claude Opus 5.5</h3></div>
      <span class="sl-badge sl-badge--ours">−51% cost at τ = 0.80</span>
    </div>
    <div class="sl-figure__stage">
      <div class="sl-compare">
        <div class="sl-compare__row sl-compare__row--ours"><div class="sl-compare__head"><span>Seb-9B-v2 → Opus cascade (τ = 0.80)<span class="sl-tag-ours">ours</span></span><span class="sl-data">0.838 · $0.49×</span></div><div class="sl-compare__track"><span class="sl-compare__fill" style="width:83.8%"></span></div></div>
        <div class="sl-compare__row"><div class="sl-compare__head"><span>Always Claude Opus 5.5</span><span class="sl-data">0.836 · $1.00×</span></div><div class="sl-compare__track"><span class="sl-compare__fill" style="width:83.6%;background:var(--them-deep)"></span></div></div>
      </div>
    </div>
    <figcaption class="sl-figure__caption">At τ = 0.80, Seb answers 53% of requests locally in ~22 ms and forwards uncertain cases to Opus.</figcaption>
  </figure>
</div>

Data

DataTable

design-system/components/DataTable/

Tabular-nums benchmark and comparison table with inline visual tracks.

Model	Public rows	p50 latency
Seb-9B-v2 ours	0.798	21.7 ms
Claude Haiku 4.5	0.795	~480 ms
Jev 1.13 (hosted)	0.791	~310 ms

Provide: table.sl-table inside a surface card (radius-l, 1px solid var(--border)).
Sentence case in every <th> header; never ALL-CAPS. Numeric columns right-aligned or set in sl-data (11px mono, tabular-nums).
Mark Seb's column or row with is-ours (malachite-tint background, malachite-ink text); competitors use them-ink and them / them-deep bars.

View HTML markup (DataTable)

<div class="sl" style="padding:20px;background:var(--canvas)">
  <div class="sl-table-wrap">
    <table class="sl-table">
      <thead><tr><th>Model</th><th>Public rows</th><th>p50 latency</th><th>Distribution</th></tr></thead>
      <tbody>
        <tr class="is-ours"><td>Seb-9B-v2 <span class="sl-tag-ours">ours</span></td><td class="sl-data">0.798</td><td class="sl-data">21.7 ms</td><td><span class="sl-table__bar"><i style="width:79.8%;background:var(--malachite)"></i></span></td></tr>
        <tr><td>Claude Haiku 4.5</td><td class="sl-data">0.795</td><td class="sl-data">~480 ms</td><td><span class="sl-table__bar"><i style="width:79.5%;background:var(--them-deep)"></i></span></td></tr>
        <tr><td>Jev 1.13 (hosted)</td><td class="sl-data">0.791</td><td class="sl-data">~310 ms</td><td><span class="sl-table__bar"><i style="width:79.1%;background:var(--them)"></i></span></td></tr>
      </tbody>
    </table>
  </div>
</div>

Surfaces

CodePanel

design-system/components/CodePanel/

Dark Lapis code panel for terminal commands, API requests, and MCP snippets.

cURLPythonTypeScriptPOST /api/v1/systemone

curl https://seblabs.dev/api/v1/systemone \
  -H "Authorization: Bearer $SEB_API_KEY" \
  -d '{"context":"Order #418 refund check","options":["Look up payment record","Escalate"]}'

Returns a calibrated probability distribution in one forward pass.

Provide: div.sl-code (data-theme="lapis"), a div.sl-code__bar with language tabs or command title on the left and a copy button or runtime note on the right, a <pre><code> body (13px/1.7 var(--font-mono)), and an optional p.sl-code__note footer.
Ground is Lapis canvas (#0E172A), border 1px solid var(--border) (#2E365A), radius radius-l (8px), no shadow.
Counts as the view's Lapis object when standalone; never place two separate dark panels side by side.

View HTML markup (CodePanel)

<div class="sl" style="padding:20px;background:var(--canvas)">
  <div data-theme="lapis" class="sl-code">
    <div class="sl-code__bar"><span class="sl-code__tab is-active">cURL</span><span class="sl-code__tab">Python</span><span class="sl-code__tab">TypeScript</span><span class="sl-code__meta">POST /api/v1/systemone</span></div>
    <pre><code>curl https://seblabs.dev/api/v1/systemone \
  -H "Authorization: Bearer $SEB_API_KEY" \
  -d '{"context":"Order #418 refund check","options":["Look up payment record","Escalate"]}'</code></pre>
    <p class="sl-code__note">Returns a calibrated probability distribution in one forward pass.</p>
  </div>
</div>

Layout

JournalCard

design-system/components/JournalCard/

Editorial lab-notebook and artifact card used on the home page and `/posts`.

Research · Note 01 59.16 DI 0.3 · 21.7 ms

Seb-9B-v2: decisions on your own hardware.

Benchmarks across 37 public suites, confidence-routed first-tier cascades in front of Claude Opus (−51% cost), and simulated robotics.

Read research note

Provide: a.sl-journal-card (surface on canvas, 1px solid var(--border), radius-l), a div.sl-journal-card__meta with span.sl-badge + span.sl-data, an h3 in Cormorant Garamond (text-wrap: balance), a summary <p>, and a footer span.sl-journal-card__cta separated by a stone hairline.
Use → for internal journal notes, ↗ for external links, and ↓ for downloadable PDFs.
Hover transitions border to malachite over 0.15s; never add drop shadows.

View HTML markup (JournalCard)

<div class="sl" style="padding:20px;background:var(--canvas)">
  <a class="sl-journal-card" href="#">
    <div class="sl-journal-card__meta">
      <span class="sl-badge sl-badge--ours">Research · Note 01</span>
      <span class="sl-data">59.16 DI 0.3 · 21.7 ms</span>
    </div>
    <h3>Seb-9B-v2: decisions on your own hardware.</h3>
    <p>Benchmarks across 37 public suites, confidence-routed first-tier cascades in front of Claude Opus (−51% cost), and simulated robotics.</p>
    <span class="sl-journal-card__cta"><span>Read research note</span><span aria-hidden="true">→</span></span>
  </a>
</div>

Iconography

IconTile

design-system/components/IconTile/

A 44px tile holding one line icon: 24px grid, 1.5px stroke, round caps, currentColor.

Provide: span.sl-icon-tile wrapping an inline <svg viewBox="0 0 24 24"> drawn to the spec (no fills, no emoji, no Unicode glyphs).
Tint fill malachite-tint with malachite-ink icon; never tint and border and colour together.
Use for use-case cards (software, markets, machines) and feature lists.

View HTML markup (IconTile)

<div class="sl" style="display:flex;gap:16px;padding:22px;background:var(--canvas)">
  <span class="sl-icon-tile" title="Software that acts"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 6h9M5 12h6M5 18h9"/><path d="M15 9l3 3-3 3"/></svg></span>
  <span class="sl-icon-tile" title="Markets in context"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 19h16"/><path d="M5 15l4-5 4 3 6-7"/><path d="M15 6h4v4"/></svg></span>
  <span class="sl-icon-tile" title="Machines that respond"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="6" cy="18" r="2"/><path d="M7.5 16.5L12 10l5 2"/><circle cx="12" cy="10" r="1.5"/><path d="M17 12l2-4M17 12l3 1"/></svg></span>
</div>

Ornament

MosaicRibbon

design-system/components/MosaicRibbon/

The 7px Malachite-Lapis-Gold mosaic band: the brand's one ornament.

Top of page and the northstar section only.

Provide: an empty div.sl-ribbon spanning the full width.
Only at the very top of a page and on the northstar section; on slides the top edge only (both edges on the first and last slide).
Fixed colours (lapis 16, malachite 16, gold 8, pearl 8 px); never recolour or thicken it.

View HTML markup (MosaicRibbon)

<div class="sl" style="padding:16px;background:var(--canvas);display:grid;gap:12px"><div class="sl-ribbon"></div><div style="font:400 12px var(--font-sans);color:var(--ink-muted)">Top of page and the northstar section only.</div></div>

06 · Kopyttse, the Silver-Hoof Fawn

One master drawing.
Four operational states.

Never recolour Kopyttse, never add gold borders around its frame, and never place it in a tile-in-a-tile. Use at most twice per page.

Master medallion

source/brand/assets/kopyttse_hf_avatar.svg

Round medallion, gold on antlers and tip nodes only. Source for favicon, app icon, hero simplex, and northstar.

State 01 · Argmax lock

public/assets/kopyttse_state_01.svg

Winning option locked in (p ≥ 0.70), benchmark wins, calibrated response cards.

State 02 · NVFP4 reflex

public/assets/kopyttse_state_02.svg

Sub-25 ms single-pass latency and high-throughput batched decision workloads.

State 03 · Causal guard

public/assets/kopyttse_state_03.svg

Seb-9B-Fin point-in-time financial evaluation and regime-shift protection.

State 04 · System-2 handoff

public/assets/kopyttse_state_04.svg

Escalation to a slower reasoning model or human when the probability distribution is near a tie.

07 · Ship checklist & automated gates

Every page, slide, PDF,
and pull request.

Run npm run check:design and npm run check:design:live to validate these rules before finishing any visual change.

One Lapis monolith & one gold element

At most one dark Lapis monolith and one gold element in any viewport. Never alternate dark and light sections.

Enforced

Strict 3-hue chart semantics

Seb is always malachite (#0D9488 / #2DD4BF), competitors are always them (#A8A29E / #78716C), and at most one gold callout. No red, indigo, or amethyst in charts.

Enforced

11px web floor & sentence case

No text below 11px on web (10.5px on slides). Sentence case everywhere: headings, buttons, eyebrows, badges, table headers. Zero ALL-CAPS strips.

Enforced

Honest geometry & unclipped charts

No clipped or overflowing text; simplex triangle edges never cross text labels; charts centred with at least 32px padding.

Enforced

Calm, non-distorting motion

Bars grow over 0.4–0.45s ease; transitions 0.15s. Never use scroll-coupled animation-timeline or looping infinite ambient animations. Respect prefers-reduced-motion.

Enforced

Embedded SVG fonts & Kopyttse integrity

Every SVG rendered via <img> embeds subset WOFF2 fonts via scripts/extract-infographics.py. Kopyttse never has gold outlines or tile-in-tile framing.

Enforced

Verified at 1440px and 390px

Zero horizontal overflow, 3px solid focus-ring with 5px offset on all interactive controls, validated by npm run check:design:live.

Enforced

Follow the rules.Verify before shipping.

Does it need to exist?

Use tokens & components

Assign semantic colour roles

Run the automated check

Two themes.Strict semantic roles.

Three families.Eleven named roles.

Display roles

Text roles

Data roles

Surface and border,not drop shadows.

Spacing scale (--space-1 to --space-8)

Radius & elevation tokens

Live specimens.Copyable markup.

SectionHeading

A small model.A measurable difference.

Button

Badge

Monolith

ProbabilityRow

ComparisonBar

MetricBand

SimplexStage

FigureCard

Seb-9B-v2 in front of Claude Opus 5.5

DataTable

CodePanel

JournalCard

Seb-9B-v2: decisions on your own hardware.

IconTile

MosaicRibbon

One master drawing.Four operational states.

Master medallion

State 01 · Argmax lock

State 02 · NVFP4 reflex

State 03 · Causal guard

State 04 · System-2 handoff

Every page, slide, PDF,and pull request.

One Lapis monolith & one gold element

Strict 3-hue chart semantics

11px web floor & sentence case

Honest geometry & unclipped charts

Calm, non-distorting motion

Embedded SVG fonts & Kopyttse integrity

Verified at 1440px and 390px

Follow the rules.
Verify before shipping.

Two themes.
Strict semantic roles.

Three families.
Eleven named roles.

Surface and border,
not drop shadows.

Spacing scale (`--space-1` to `--space-8`)

Live specimens.
Copyable markup.

A small model.
A measurable difference.

One master drawing.
Four operational states.

Every page, slide, PDF,
and pull request.