DESIGN.md — Tailwind CSS

Overview

Tailwind's own design system practices what it preaches — utility-driven, carefully scaled, and optimized for developer documentation. A slate-to-cyan palette reflects technical precision paired with a friendly, approachable accent.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#06B6D4	Primary accent (cyan-500)
color-bg	#0F172A	Dark background (slate-900)
color-sky	#38BDF8	Links, highlights (sky-400)
color-text	#F8FAFC	Primary text (slate-50)
color-muted	#334155	Borders, muted elements (slate-700)

Typography

Role	Family	Size	Weight
Display	Inter	48px	800
Heading	Inter	30px	700
Body	Inter	16px	400
Code	Fira Code	14px	400

Components

Code Block

• Dark bg #1E293B, cyan syntax highlights
• Copy button top-right
• Language tab indicator

Documentation Nav

• Left sidebar, collapsible sections
• Active item with cyan left border
• Search input at top (Cmd+K)

Color Swatch Grid

• 11-step scale per color (50-950)
• Hover shows hex value + copy
• Grid layout with rounded corners

Do's and Don'ts

Do

• Use the slate scale for all neutral tones
• Pair cyan accent with sky blue for depth
• Show code examples for every component

Don't

• Don't use warm gray scales — always slate
• Don't use text smaller than 14px in docs
• Don't hide the code — it's the product