min-width:322px;max-width:1024px;
A quick reference for the core visual tokens used in this design system: typography, color palette, radii, spacing and elevation.
font-size: 1.5–2.25rem · font-weight: 700
font-size: 1.125–1.25rem · font-weight: 600
Default body copy for paragraphs, helper text and labels.
font-size: 0.875–1rem · font-weight: 400–500
Used for small annotations, code-like labels and meta information.
font-size: 0.75rem · font-weight: 400
Solid border, no shadow. Used for most surfaces.
Light shadow on focus/hover or interactive cards.
Outer padding on the page shell uses Tailwind spacing `p-4` on mobile and constrained width (`max-w-[1024px]`) on desktop.
Major blocks (cards, panels) typically use `p-6` with vertical gaps of `gap-4` or `gap-6` between elements.
Dock, pill menus and filters use compact horizontal padding (`px-3`–`px-4`) and tight gaps (`gap-2`–`gap-3`) to feel dense but readable.
A catalogue of reusable UI building blocks — buttons, menus, inputs, cards and more — that can be composed into higher-level patterns and flows.
Use cards to group related content, actions or statistics into a single, tappable unit.
This variant works well for secondary or less prominent information in a layout.
Opinionated, ready-to-use layouts that combine components and styles into real product flows such as sign-in forms, filters, dashboards and navigation.
Combines card, input, toggle and primary/secondary buttons to collect an email address, optional consent and submit the form.
Uses inputs, selects, button groups and chips to filter a list of content or data.
Demonstrates using the file tree menu, horizontal nav and cards to create a simple dashboard-like layout.
