Design system

Reusable primitives from src/ui/. New UI elements land here first, then ship in landings and global chrome.

Typography

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Lead paragraph for section intros.

Body text for descriptions and supporting copy.

Muted text for secondary details.

Label text

Actions

Standard props: color and variant. All colors come from pipetype-theme.css.

Primary

Secondary

Accent

Warning

Destructive

Neutral

Cards

Primary

Card content uses theme tokens for surface and border.

Secondary

Card content uses theme tokens for surface and border.

Accent

Card content uses theme tokens for surface and border.

Warning

Card content uses theme tokens for surface and border.

Destructive

Card content uses theme tokens for surface and border.

Neutral

Card content uses theme tokens for surface and border.

Warning card

Soft warning surface for callouts.

Outline card

Tags

PrimarySecondaryAccentWarningDestructiveNeutral
Section labelSection labelSection label
SolidOutlineGhostSoft

Points