Design System · v1.6

Tiny Wire

A minimal, warm-neutral design system with a single cobalt accent, built for dense operational interfaces. Two fonts, 186 tokens in three tiers, 35 documented components, and a token layer that swaps cleanly between light and dark. The numbers on this page are rendered from the source, not typed.

Why this system exists

Most of the work I do lives behind NDAs — operational tools, internal control panels, monitoring dashboards. Tiny Wire is the public-safe twin: same constraints, same warm density, built so the process of designing and maintaining a system is visible without leaking a single line of client UI. I build prototypes on it and fold what they teach me back in.

Read the audit to see what shipping and maintaining a system actually looks like — 31 findings with IDs, fixed or deferred with a reason, and no class removed since the first public release.

Foundations

Colors, type, spacing, radius, shadows, animation — and every token, rendered from the source.

Components

35 documented components, full state matrix.

Patterns

Dashboard, data table, settings, login, empty.

Audit v1.6

Release notes, findings, decisions, and how I audit.

Quick start

For a plain HTML page: two stylesheet links, no build step. Building a React or Tailwind app? Take tokens.css only — Consuming Tiny Wire says why.

1. Add fonts to your <head>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400..700&family=DM+Sans:wght@400..600&display=swap" rel="stylesheet">

2. Link the stylesheets

<link rel="stylesheet" href="lib/globals.css">      <!-- tokens + reset + base -->
<link rel="stylesheet" href="lib/components.css">   <!-- all component styles -->

3. Use the components

<button class="btn btn-primary">Apply changes</button>

<div class="card">
  <div class="card-title">Section title</div>
  <p class="card-desc">Card content goes here.</p>
</div>

4. Enable dark mode (optional)

// Toggle the data-theme attribute on <html>
document.documentElement.setAttribute('data-theme', 'dark');

// Or remove it for light mode
document.documentElement.removeAttribute('data-theme');

5. Access tokens from JS

import tokens from './lib/tokens.js'

const brand = tokens.colors.light.brand        // '#2F4BA6'
const base  = tokens.typography.fontSize.base  // 13
const radius = tokens.borderRadius.md          // '8px'

Principles

The constraints that keep Tiny Wire coherent — what gets in, and what doesn't. Each one is true of the current release; when one stops being true, it changes here.

Dense by default

Built for operational tools — dashboards, monitoring, control panels. Base text size is 13px. 32px controls. Tight 4-12px spacing scale. Every pixel earns its place.

Warm, not cold

Neutrals lean warm (#F7F4F3 surface, #1E1918 ink). Brand and interaction are one cobalt; green is reserved for success and trust, so it reads as a verdict. Status colors stay muted — danger is orange-red, warning a disciplined amber.

Two fonts, total

Bricolage Grotesque for display + numerics. DM Sans for everything else. No utility fonts, no fallback piles. Both load from Google Fonts in a single request.

Tokens first

Every color, size, radius, shadow, and duration is a CSS custom property. Components consume tokens — they don't define them. Dark mode is a token swap, not a parallel stylesheet.

What's in the repo

lib/ is five files, and which ones you take depends on your profile. The one list — each file, what it is, who takes it — is in Consuming Tiny Wire, so it can't drift from this page. docs/ is this site; consumers don't need it.

Ready to build? Jump to Components for the full library, or Foundations for the token reference.