Local UI primitives used across the site — buttons, type, fields, and surfaces.
Actions
Buttons cover primary actions, quieter controls, and lightweight links.
Variants
Primary for commitment, ghost for low emphasis, destructive for irreversible actions.
Sizes
Four sizes cover compact controls through more prominent CTAs.
Links
LinkButton keeps inline and outbound actions aligned with the rest of the system.
Typography
Text primitives define hierarchy and tone while staying tied to semantic color tokens.
Variants
Display hierarchy, body copy, semantic emphasis, and monospace utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Sizes
Copy sizes remain compact and editorial rather than oversized.
Body text in xs
xsBody text in sm
smBody text in base
baseBody text in lg
lgForms
Inputs compose around labels, validation, and grouped controls.
Label and field
Fields handle layout for native controls too.
Field also supports native controls such as checkboxes.
Inputs
Plain fields with helper text.
Short helper text keeps the field self-explanatory.
Input group
Grouped controls keep related actions attached to the input.
Feedback
Loading states keep flows communicative without visual noise.
Loading
Use the loader for active work and skeleton lines for content still resolving.
Surfaces
Calm containers for content and media.
Surfaces and media
Frame content blocks or muted supporting areas.
System preview
Balanced neutrals, compact type, and restrained emphasis.
Local imports
Consume primitives from the app UI barrel.