Design System · v1.3 Just shipped

Tiny Wire

A minimal, warm-neutral design system with a single cobalt accent, built for dense operational interfaces. Two fonts, a three-tier token architecture, ~30 reusable components, and a token layer that swaps cleanly between light and dark.

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.

Read the audit to see what shipping and maintaining a system actually looks like — 16 findings, 14 fixes, 0 breaking changes across four releases.

Foundations

Colors, type, spacing, radius, shadows, animation.

Components

28 atoms and composites, full state matrix.

Patterns

Dashboard, data table, settings, login, empty.

Audit v1.3

Release notes, findings, and how I think about maintenance.

Quick start

Drop two CSS files into your project. No build step, no framework lock-in. Works in any HTML, React, Vue, or static site.

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.

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 is forest green, not corporate blue. Status colors are muted and earthy — danger is orange-red, warning is brown.

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

Three files in lib/ are all you need. The rest is docs.

File	Purpose	Size
lib/globals.css	Token definitions (light + dark), reset, base typography, keyframes, animation utilities.	~10 KB
lib/components.css	All 28 components. Each consumes tokens — no hardcoded values.	~38 KB
lib/tokens.js	Same tokens, exported as a JS object. Use in scripts, theme builders, generators.	~3 KB
docs/	This documentation site. Not required for consumers.	—

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