Design System
Components

Components

Framework-agnostic HTML/CSS primitives, composed entirely from tokens. Load the two stylesheets, then write plain markup — no build step, no framework lock-in.

<!-- tokens first, then components -->
<link rel="stylesheet" href="/downloads/tokens.css">
<link rel="stylesheet" href="/downloads/components.css">

Agents: the machine-readable contracts (variants, anatomy, rules) are in components.json.

Button

The main interactive control. Small radius (3px). Primary is a light fill that inverts to ink on hover — matching the live site. Labels are sentence case; use at most one accent button per view.

Get started
<a class="btn btn--primary" href="#">Get started</a>
<button class="btn btn--ghost">Learn more</button>
<button class="btn btn--accent">One accent</button>
<button class="btn btn--primary btn--sm">Small</button>
<button class="btn btn--ghost" disabled>Disabled</button>

Card

Flat, hairline-bordered container. Elevation comes from the border — never a shadow.

FOUNDATIONSColorThe ramp, the accent, the secondary palette.GUIDEFor agentsHow Claude consumes the system.
<div class="cards">
  <a class="card card--link" href="#">
    <span class="card__k">FOUNDATIONS</span>
    <span class="card__h">Color</span>
    <span class="card__p">The ramp, the accent, the secondary palette.</span>
  </a>
</div>

Form field

Input, textarea, and select share one control style — sharp corners, hairline border, ink focus ring. The error state reuses the single accent rather than introducing a red.

<label class="field">
  <span class="field__label">Email</span>
  <input class="field__control" type="email" placeholder="you@brand.com" />
  <span class="field__hint">We'll never share it.</span>
</label>

Badge

Small status or category tag. Mono, UPPERCASE, sharp corners — deliberately not a pill (pills are for buttons only).

BETANEWV0.1DRAFT
<span class="badge">BETA</span>
<span class="badge badge--accent">NEW</span>
<span class="badge badge--solid">V0.1</span>
<span class="badge badge--outline">DRAFT</span>

Table

Hairline rules and UPPERCASE SemiBold column headers. No zebra striping — a quiet hover highlight only.

BrandGMVLift
Example Co.$5B++29%
Beloved Inc.$1.2B+19%
Ambitious Ltd.$740M+24%
<table class="table table--num">
  <thead><tr><th>Brand</th><th>GMV</th><th>Lift</th></tr></thead>
  <tbody>
    <tr><td>Example Co.</td><td>$5B+</td><td>+29%</td></tr>
  </tbody>
</table>

Stat block

A headline figure — big Light numeral over a mono label. Build hierarchy among several figures by ghosting the secondary ones, not resizing.

750+BRANDS SCALED
$5B+GMV
<div class="stat-block">
  <span class="stat-block__value">750+</span>
  <span class="stat-block__label">BRANDS SCALED</span>
</div>

Callout

Flat panel with a left hairline rule — for asides, notes, and closing statements.

One accent per context

Studio Blue appears once — a stat, a rule, a closing surface. Never a palette.

Elevation without shadow

Structure via hairlines and flat fills, not drop shadows.

<div class="callout callout--accent">
  <p class="callout__title">One accent per context</p>
  <p class="callout__body">Studio Blue appears once — a stat, a rule, a closing surface.</p>
</div>

Tag

Content category label — sentence/title case, soft radius. Distinct from the mono, UPPERCASE badge.

EnterpriseFashion & ApparelFeatured
<span class="tag">Enterprise</span>
<span class="tag tag--outline">Fashion & Apparel</span>
<span class="tag tag--accent">Featured</span>

Accordion

Expandable list built on native <details> — zero JavaScript. Hairline dividers with a +/− affordance.

Strategy

Consulting, analytics, and roadmapping for ambitious commerce brands.

Creative

Brand, art direction, and editorial design.

Technology

Headless commerce, platform engineering, and integrations.

<div class="accordion">
  <details class="accordion__item">
    <summary>Strategy</summary>
    <p class="accordion__body">Consulting, analytics, and roadmapping.</p>
  </details>
</div>

Quote

Testimonial or pull quote with an accent left-rule and mono attribution.

Domaine rebuilt our commerce stack without a dropped beat.

Michal Russ · SVP Technology
<blockquote class="quote">
  <p class="quote__text">Domaine rebuilt our commerce stack without a dropped beat.</p>
  <cite class="quote__cite">Michal Russ · SVP Technology</cite>
</blockquote>

Logo grid

Client or partner logo wall — greyed and dimmed by default, full on hover.

DomaineDomaineDomaineDomaine
<div class="logo-grid">
  <a href="#"><img src="/brand/logo-domaine.svg" alt="Client" /></a>
  …
</div>

Marquee

Horizontal auto-scrolling ticker — the office-times pattern. Duplicate the items for a seamless loop; pauses under reduced-motion.

LOS ANGELES 09:00NEW YORK 12:00AMSTERDAM 18:00LONDON 17:00LOS ANGELES 09:00NEW YORK 12:00AMSTERDAM 18:00LONDON 17:00
<div class="marquee">
  <div class="marquee__track">
    <span>LOS ANGELES 09:00</span><span>NEW YORK 12:00</span><span>AMSTERDAM 18:00</span>
    <!-- duplicate the set for a seamless loop -->
  </div>
</div>

CTA band

Full-width closing prompt pairing a display headline with an action.

Let's work together

Get in touch
<section class="cta-band">
  <h2 class="cta-band__title">Let's work together</h2>
  <a class="btn btn--primary" href="/contact">Get in touch</a>
</section>