Style guide sample — Tailwind component reference

Tokens

Defined once in tailwind.config.js. A developer never types a hex code.

Color

primary-600#2249c4 · main actions
primary-500#2f5fe8 · focus rings, links
ink-900#16181d · headings, body
ink-500#6b7280 · secondary text
success-700#1a7a45 · valid, confirmed
danger-700#b42323 · errors, destructive
warning-800#8a5a10 · caution notices
ink-100#f3f4f6 · subtle surfaces

Text colors are chosen to pass WCAG AA on their intended backgrounds: ink-900 and ink-700 on white, white on primary-600, danger-700 and success-700 on their 100 tints.

Type scale

Display text-display · 36px / 1.15

Section title text-title · 22px / 1.3

Body — course descriptions, form labels, table cells. text-base · 16px / 1.5

Supporting — help text, metadata, captions. text-sm · 14px / 1.43

Spacing & radius

Tailwind's 4px scale, unchanged. Controls share one radius token, rounded-ctl (8px), so buttons and inputs always match.

Buttons

Three variants. Focus is always visible, disabled is always announced, loading keeps the label.

disabled · loading (aria-busy, label stays visible)

Tab to any button to see the focus ring. It is part of the component, not left to the browser.

<!-- Primary -->
<button class="inline-flex items-center gap-2 rounded-ctl bg-primary-600 px-4 py-2.5
  text-sm font-medium text-white hover:bg-primary-700
  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
  disabled:opacity-50 disabled:cursor-not-allowed">
  Enroll student
</button>

Forms & validation

Every field has a real label. Errors are tied to their field with aria-describedby, so screen readers announce them too.

Student name

Default — click in to see focus.

Guardian email

Enter a full email address, like name@school.edu.

Student ID

ID found — Grade 9, Lincoln campus.

District

Disabled — set by the district admin.

Course

Enrollment type

Full semester Audit only

<!-- Field with error -->
<label for="email" class="block text-sm font-medium">Guardian email</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-msg"
  class="mt-1.5 w-full rounded-ctl border-2 border-danger-700 px-3.5 py-2.5 text-sm
  focus:outline-none focus:ring-2 focus:ring-danger-700">
<p id="email-msg" class="mt-1.5 text-[13px] font-medium text-danger-700">
  Enter a full email address, like name@school.edu.
</p>

Cards & lists

The same card holds a course, a teacher or an announcement. One pattern, reused.

Algebra I

Open · 6 seats

Linear equations through quadratics. Placement test required.

Teacher: R. Vasquez
Schedule: Mon–Thu, Period 2
Enrolled: 26 / 32 enrolled

Introduction to Biology

Waitlist

Cells to ecosystems, with a weekly lab block.

Teacher: J. Okafor
Schedule: Tue & Thu, Period 4
Enrolled: 32 / 32 enrolled

Grid

Content sits in a 4 / 8 / 12 column grid: single column on phones, two at sm, three at md. Resize the window to watch it reflow.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">…</div>