Design system.

Workflow

Change it once.

One file holds every value. Edit it, rebuild, and both this page and the website update together.

1. 01

   Edit

   Change a value in tokens/tokens.json.

2. 02

   Build

   Run python3 tokens/build.py. It writes web/tokens.css and web/design-system/tokens.js.

3. 03

   Review

   Check this page and the homepage in the browser.

4. 04

   Commit

   python3 tokens/build.py --check must pass before you commit.

Logo

The SB. monogram.

Uppercase S and B in Inter Tight Black, interlocked with B on top, followed by a yellow period. The gap between the letters is a real cut-out, so the mark sits cleanly on any background.

Use

• Clear space: at least the period's diameter on every side.
• Minimum size: 20px tall on screen, 15mm wide in print. Smaller than that, use the app icon or favicon.
• App icon: mark height 36% of the tile. Favicon: 42% for legibility at 16px.

Don't

• Stretch or squash the mark.
• Recolour the letters, or turn the period anything but yellow (except the one-colour variants).
• Fill the gap between S and B, or add outlines, shadows or effects.
• Retype the logo in a font. Always use the supplied files.

Colour

Ink, yellow, paper.

Mostly Ink and Paper, with yellow kept for the period and small accents. In code, use the semantic tokens; brand and neutral tokens are the palette they point to. Click any token to copy its variable.

Typography

Inter Tight, heavy at the top.

One family across the site, the same one the logo is drawn from. Headings are Black and tightly tracked; body text stays Regular. Use the .text-* classes rather than setting sizes by hand.

Spacing

A 4px scale.

The token name times 4 is the size in pixels: --space-8 = 32px.

Radius

Soft corners.

Layout

Container and breakpoints.

Motion

Quick and quiet.

Motion only gives feedback, such as a 2px lift on hover. Nothing moves on its own, and everything respects prefers-reduced-motion.

Components

Building blocks.

These are live: they use the same components.css as the website.

Button

<a class="btn">…</a>  .btn-ghost  .btn-small  .btn-large

Labels

.kicker  .eyebrow > .dot  .badge  .badge-live

Heading with period

<h2 class="text-h2">Small steps<span class="period">.</span></h2>

Card, tile, step

.card > .card-icon   .tile  .tile-empty   .step > .step-num

Voice

Say it short.

The site is in American English for now. Sound like a small team that ships, not an agency selling.