Web CraftField Note

Design Systems for Tiny Teams

A tiny team does not need a 90-page design system. It needs repeatable decisions that keep every new page from starting over.

May 25, 20264 min readBy theProject.

Developer note

Local MDX, rendered by the public site. No backend editor required.

theProject.

Studio field notes

#Design Systems#Tailwind#React#Brand

A small studio design system should feel like a shared language, not a law book. It should answer the common questions quickly: spacing, buttons, cards, forms, states, and voice.

A tiny team token starter

Brand action

#e20074

Teaching signal

#05f2af

Quiet surface

#f4f4f6

button-contract.tsx

text

type ButtonTone = 'primary' | 'quiet' | 'danger'
 
export function toneClass(tone: ButtonTone) {
  return {
    primary: 'bg-primary text-primary-foreground',
    quiet: 'border border-border bg-background',
    danger: 'bg-destructive text-white'
  }[tone]
}

Rendering note...

Keep reading

Continue through the stack.

Browse Field Notes

Web CraftMay 28, 2026

MDX Lets a Blog Post Become a Workshop

The reason we use MDX is simple: a post can explain, demonstrate, calculate, and teach without sending the reader elsewhere.

Web CraftJun 16, 2026

The 90-Minute Website That Finally Takes Bookings on a Phone at 10pm

Most small business sites look fine on a laptop and fall apart on a phone at night. Here is the exact minimal stack and checklist we use so the next customer can actually book.

Maker LabsJun 18, 2026

The Pi That Actually Runs Something Useful in the Workshop

A Raspberry Pi 5 with a little UPS and cellular hat can do real work when the power or WiFi dies. Here is the exact boring setup we use for local jobs.