Components / Buttons
Buttons
The primary action element. All button labels use Oswald in uppercase with architectural
letter-spacing. Corners are always rounded-sm — never
rounded-full. Hover state is opacity only — no scale, no color shift.
Preview
Variants
| Variant | Preview | |
|---|---|---|
| default | | Primary page action — one per view max |
| secondary | | Secondary actions, filter controls |
| outline | | Tertiary actions, paired with primary |
| ghost | | Low-emphasis actions, nav items, inline |
| link | | Inline text actions, 'read more' patterns |
| destructive | | Irreversible actions — delete, remove, cancel |
States
Light Surface
Dark Surface
Design Tokens
| Token | CSS Variable | Value | Usage |
|---|---|---|---|
| Background | --primary | #800020 | Primary button bg |
| Text | --primary-foreground | #FCFCE9 | Primary button text |
| Border radius | --radius-sm | 6px | Architectural corners |
| Font | --font-display | Oswald | All button labels |
| Letter spacing | tracking-[0.12em] | 0.12em | Uppercase label spacing |
Usage Guidelines
✓ One primary per view
Each screen or section has at most one primary button. It marks the single most important action.
✓ Oswald uppercase labels
All button text uses Oswald, uppercase, tracking-[0.12em]. Never sentence case, never Instrument Serif.
✓ Architectural corners
rounded-sm (6px) always. The system uses architectural corners throughout — no rounded-full on interactive elements.
✓ Opacity on hover only
Hover state is opacity: 0.9. No scale transform, no background color shift, no shadow change.
✗ Full-pill buttons
rounded-full is decorative. Button corners are always rounded-sm. This is non-negotiable.
✗ Gradient button backgrounds
The AI gradient is never used as a button background. Primary buttons use --primary only.
Accessibility
All buttons render as <button> elements — never <div> or <span>.
Disabled buttons use the disabled attribute — not just visual styling — so screen readers announce the state.
Focus ring: 2px solid --ring (burgundy light / champagne dark) with 2px offset. WCAG 2.2 AA compliant.
Icon-only buttons must include aria-label. Use the VisuallyHidden component for screen-reader-only labels.