Buttons primary · secondary · ghost · danger

Buttons that decide.

Arrows carry meaning. Down downloads. Left goes back. Up-right ships.

Editor's noteNº 07 · b · programmatic

Four looks. Pill, lead-arrow and small modify one. Actions table

nw · revert · undo

n · raise · increase

ne · publish · convert

w · back · previous

direction semantic, not decorative motion is not the primitive

e · next · continue

sw · archive · retire

s · download · export

se · demote · defer

01 · PrimaryThe default
direction: NE

Vector (+1, −1) · ↗
Arrow exits up-and-right
Sweep floods in from down-and-left

02 · SecondaryA path for the
curious reader

Rest ink outline · ivory fill
Hover color inversion only
Use secondary to every primary

02b · GhostNo border, no fill
tertiary inside a dense surface

Rest transparent · no border
Hover sweep fills with ink
Use for tertiary actions in toolbars, modals, dense forms

02c · DangerDestructive only
direction: SE

Rest --red-fill · --on-red-fill · 1px ink border
Use confirms a destructive action, never decoration
Vector se = delete · demote

03 · BackReverse direction
arrow leads the label

Vector (−1, 0) · ←
Arrow leaves left
Sweep floods in from right

04 · DownloadData coming
off the page

Vector (0, +1) · ↓
Arrow falls
Sweep floods upward from bottom

05 · Editorial linkInline, inside prose
or after a quote

Rest 1px solid underline
Hover keeps an ink underline without motion
Never the default browser blue

06 · Product chipUI controls inside
the app only

Radius 2px only, never 999
Type IBM Plex Mono · 11pt · caps
Scope app chrome only

Set primary · secondary · ghost · danger · Arrow matches the action · Never shadow · gradient · scale

Product actions