Tokens & base styles
The whole system in one stylesheet: colour variables for both themes, the Tailwind bridge, base type, and the component classes every other entry leans on.
Typography scale
One family, two weights. Sizes are set in pixels through Tailwind's arbitrary values so the scale is exact, and every heading is tracked −3%.
Radius & spacing
Three radii, nested: 12px for the container, 8px for what sits inside it, 6px for chips. Spacing walks a 4px grid.
The accent gradient
Cyan #42E5F5 into mint #B0FCB5. It lives on primary buttons, progress fills and one line of hero text — everything else stays quiet so it can point.
Button
Primary wears the gradient, ghost is a surface with a hairline, danger is the ghost tinted rose. Three sizes and a loading state that keeps its width.
Icon button
A square ghost button for a single glyph. Always labelled — the icon is the picture, the aria-label is the name.
Button group
Ghost buttons fused into one strip. Used for view switches and paged controls where the options are peers.
Text input
Label above, help or error below. The field is a surface with a hairline that turns accent when it has focus and rose when it's wrong.
Textarea
The text input, taller. Resizes vertically only, so a long paste never widens the layout.
Select
A native <select> in the field chrome, with a drawn chevron. Native means keyboard, mobile and screen readers all work for free.
Checkbox
A native checkbox drawn as a 16px chip: hairline when off, accent-filled with a dark tick when on. The label is the hit area.
Radio group
Rows in a panel, one selected. The whole row is the target and the chosen row lifts on an accent border.
Switch
A 36×20 track with a 16px knob. The knob is positioned with left/translate on a single axis, so it lands exactly on both ends in every browser.
Segmented control
A row of chips where exactly one is selected — the confidence tap before an answer. Selected is a solid accent fill with dark ink.
Search field
A rounded field with a glass on the left, a clear button when there's text, and an optional shortcut hint on the right.
Panel / Card
The container: bg-surface, hairline, 12px radius, a soft drop shadow. Optional header row and a recessed slot inside for anything that should read as a well.
Stat tile
A number with a name. Built so it never overflows: min-w-0 on every column, overflow-wrap:anywhere on the value, and a tabular-nums figure that doesn't jitter.
Modal / Dialog
A native <dialog> in a panel: backdrop blur, Escape closes, focus is trapped by the browser, and the page behind is inert.
Drawer
A panel sliding in from the right over a dimmed page. Same <dialog> bones as the modal, different geometry.
Tooltip
A small dark label that appears above its trigger on hover or focus. Pure CSS — no positioning library, no portal.
Top bar
Sticky, translucent, blurred. Logo left, pill nav in the middle, account on the right — the active pill tints accent.
Sidebar
Grouped links down the left. Section overlines, rows that light on hover, an accent bar on the active row.
Tabs
Underline tabs on a hairline. The active tab is ink with an accent underline; the rest are muted and warm on hover.
Breadcrumb
Where you are, as a path. Ancestors are muted links, the current page is ink and not a link.
Pagination
Previous, a window of page numbers with ellipses, next. The current page is a solid accent chip.
Toast
A short note that appears bottom-right, says what happened, and leaves on its own. Ships with the stack that owns the queue.
Inline alert
A tinted box that stays on the page: info, success, warn, danger. The tint is 7% of the tone so the text keeps its contrast.
Progress bar
Accent light sitting in a groove, with a label and a count above it. A sweep glides along the filled part so a slow job still looks alive.
Skeleton
The shape of the content before the content: pulsing surface blocks in the layout the real thing will take. A line, a block, and a whole card.
Empty state
Nothing here yet, said well: a drawn glyph, a title, one line of why, and the one button that fixes it.
Success panel
The quiet "you did it": an accent ring with a tick, the headline, what was earned as chips, and the way onward. No confetti.
Table
A sticky header over rows that scroll under it. No zebra striping — a hairline per row is enough — and every numeric column is right-aligned in tabular figures.
Key-value list
A definition list that reads as two columns on a wide screen and stacks on a narrow one. Long values wrap instead of pushing the layout.
Badge & chip
The smallest label: a tinted 6px chip in one of the semantic tones, optionally with a status dot or in the mono face to match an inline code chip.
Avatar & stack
Initials on a tint derived from the name, so two people are never the same colour by accident. The stack overlaps them with a ring of the page behind.
Pricing table
Three columns with the middle one lifted on an accent ring, and a row of one-time add-ons underneath. Every column pins its button to the bottom so uneven feature lists don't leave a CTA floating.
Hero
An eyebrow, one headline with a single gradient phrase in it, a line of prose, two buttons and a strip of proof. The accent appears exactly once.
Feature grid
Three across on desktop, one on a phone. Each cell is a panel with a drawn glyph, a title and two lines — and .lift, so a linked cell rises under the pointer.
FAQ accordion
Native <details> rows divided by hairlines. No JavaScript, no state, no aria wiring — the browser already knows how a disclosure works.
Footer
The mark and a line about what this is on the left, three short link columns on the right, and a legal strip under a hairline.
Auth form
One panel that is both sign-in and sign-up. The mode toggle is a segmented pair at the top; only the confirm field and the footer copy change.
Settings section
A titled group of rows, each one a label, a line of description, and the control on the right. The row is the unit — it wraps rather than crushing the control.
Dashboard shell
The frame everything else sits in: a sticky top bar, a sidebar that becomes a slide-over under lg, and a content column that scrolls on its own.
Onboarding stepper
Numbered steps joined by a rail that fills as you go. Done steps carry a tick, the current one is a solid accent disc, the rest are hairline outlines.
Terminal chrome
The surface every code-shaped thing lives in: three pixel traffic lights, a centred filename, a right-hand slot for a line count or a copy button, and a screen that keeps its night palette in both themes.