Tailwind CSS·Tailwind from utilities to design system

Build a design system

Turn loose utilities into tokens, components and a documented page.

Intermediate 24 min read Lesson 10 of 300 Challenge included

What you will be able to do

Define tokens for colour, radius, shadow and spacing.
Build three components: button, card and field.
Document every state.
Audit the page for one-off values.

In plain English

A design system is a small set of decisions applied consistently. Choose a colour palette, a type scale, spacing rhythm and component states. Document the rules so the next page does not invent a new button.

system.htmlHTML

<section class="mx-auto max-w-3xl space-y-8 p-8">
  <header>
    <h1 class="text-3xl font-semibold tracking-tight">Design system</h1>
    <p class="mt-2 text-slate-600">One button. Three states. No exceptions.</p>
  </header>
  <div class="flex flex-wrap gap-3">
    <button class="rounded-lg bg-cyan-600 px-4 py-2 font-medium text-white hover:bg-cyan-700">Primary</button>
    <button class="rounded-lg border border-slate-300 px-4 py-2 font-medium text-slate-700 hover:bg-slate-50">Secondary</button>
  </div>
</section>

Your turn

Add a field component

Medium

Define a labelled input with a consistent border, padding and focus ring.

HTML · starter

<label class="">

Check your understanding before moving on.

Knowledge checkQuestion 1

What belongs in a minimal design system?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Drill 1: Summarise — Setup and utility-first CSS

Lesson 10 of 300 · 0% of course