Buttons, KPI tiles, cards, tags, alerts — every size, intent, and state laid out for review. When you're building something new and need to know "what does the dark variant look like next to the orange one?" this is the answer. Pairs with Brand Tokens and Chart Primitives.
Three sizes (sm / md / lg) × four intents (primary / accent / ghost / disabled).
Default / large / dark / accent variants. Mix delta indicators.
Default / accent (left-border highlight) / dark.
Six intents for taxonomy, status, and emphasis. Use sparingly.
Three intents — info (blue), success (green), warn (orange).
Every variant defined in CSS at the top of the file. Copy the markup pattern + the CSS rule. Pair with /brand-tokens/ for the underlying token system.
Reference page when building a new view. "I need a kpi tile + a few tags + an alert" — open this, grab the markup. Onboard new design contributors with one link.
Form variants (inputs, selects, checkboxes), modal variants, navigation states, empty states, loading states, error states.