The afternoon version

Most of the value, very little of the work

Published design systems are enormous because they come from companies with dedicated teams and thousands of screens. The version that helps a solo designer or a three-person team is about one per cent of that, and it takes an afternoon.

Here is the whole thing.

Step 1: the token file

One CSS file. No build step, no tooling, works everywhere.

:root {
  /* neutrals */
  --grey-50:  oklch(0.98 0.004 255);
  --grey-100: oklch(0.95 0.006 255);
  --grey-200: oklch(0.90 0.008 255);
  --grey-400: oklch(0.72 0.010 255);
  --grey-600: oklch(0.54 0.012 255);
  --grey-800: oklch(0.32 0.010 255);
  --grey-900: oklch(0.20 0.008 255);

  /* brand */
  --brand-300: oklch(0.75 0.12 255);
  --brand-500: oklch(0.55 0.18 255);
  --brand-700: oklch(0.42 0.16 255);

  /* semantic */
  --colour-text:       var(--grey-900);
  --colour-text-muted: var(--grey-600);
  --colour-surface:    white;
  --colour-raised:     var(--grey-50);
  --colour-border:     var(--grey-200);
  --colour-action:     var(--brand-500);
  --colour-danger:     oklch(0.52 0.19 28);

  /* space */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 1rem;
  --space-4: 1.5rem;  --space-5: 2rem;    --space-6: 3rem;

  /* type */
  --text-sm: 0.8125rem; --text-md: 1rem;
  --text-lg: 1.25rem;   --text-xl: 1.75rem; --text-2xl: 2.5rem;
  --leading-tight: 1.2; --leading-normal: 1.55;

  /* form */
  --radius-sm: 4px; --radius-md: 8px; --radius-full: 999px;
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --dur-fast: 150ms; --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

That is roughly thirty decisions. Every one of them came from an earlier block in this course: the lightness ramp, the spacing scale, the modular type scale, two radius values, one shadow agreeing about the light, one duration.

Step 2: six components

Not sixty. These six cover the overwhelming majority of what a small product or a set of marketing pages needs:

1. Button — three variants, two sizes, all six states.
2. Text field — with label, hint and error.
3. Card — surface, padding, optional media slot.
4. Heading set — three levels, with space above and below defined.
5. Link — in-text and standalone.
6. Badge or tag — because every product grows one.

Specify each with the state table from the previous lesson. Two hours.

Step 3: rebuild one real screen using only these

This is the step that makes the exercise worth doing, and the step people skip.

Take an existing screen and rebuild it using nothing but the tokens and the six components. You will immediately discover:

• Values you need that are not in the scale, which are either missing tokens or accidental values in the original.
• Components you need that are not in the six, which tells you what the seventh should be.
• Places where the original screen used four greys where the system offers two, and looks no worse for the reduction.

The third finding is the common one, and it is the system paying for itself on its first day.

The tools, and what they cost

For the tokens and components: a text editor and a browser. Nothing else is required, and a single HTML page showing every component in every state is a perfectly respectable component gallery.

For visual design files:

• Penpot — open source, free, self-hostable, with components and design tokens. The genuine free alternative.
• Figma — free tier with limits on files and version history; the industry default and what job advertisements name.
• Inkscape — excellent for vector artwork, not a UI design tool.
• Sketch is paid and macOS only; Adobe XD has been discontinued.

For a rendered component gallery: Storybook is the named industry tool and is free and open source. A hand-written HTML page does the same job for a small project with none of the setup.

Step 4: write down the six rules you keep

One short page, and it matters more than it looks. The tokens say what values exist; this says how they are used.

A realistic example:

1. Body text is --text-md at --leading-normal, capped at 34em.
2. One primary action per view. Everything else is secondary or ghost.
3. Space between groups is at least three times the space inside them.
4. Interactive targets are at least 44px, with 8px between neighbours.
5. Any colour-carried meaning also has an icon or a word.
6. Motion is 150-300ms, ease-out, and respects reduced-motion.

Every one of those is a decision from an earlier block, written down so it does not have to be re-argued. Six lines is the right length: a page of forty rules will not be read, and these six catch most of what goes wrong.

What this does not require

No build step. No framework. No component library dependency. No design tool subscription.

That is worth stating plainly, because the visible ecosystem around design systems is expensive and elaborate, and it can make the whole activity look like something that needs funding. It does not. A stylesheet of custom properties, six components written in plain HTML and CSS, an HTML page showing them, and six rules in a text file is a complete and genuinely useful design system, and it runs on a laptop that cannot install anything.

What you have not built

Be clear about the boundary. An afternoon produces tokens and six components. It does not produce contribution guidelines, a versioning policy, a deprecation process, cross-platform token generation, usage analytics or a governance model.

You do not need any of those yet, and the last lesson in this block is about recognising when you do.