Component breakdown
Magic Button
The Magic Button documented the way a design system documents a component: every type and state side by side, how icons sit, how it is styled, and the measures and spacing behind it. Everything below is the live component, not a picture of it.
Buttons
Magic button
High emphasis. The primary action of the page; should appear once per page.
Enabled
Hover / Focus
Disabled
Outline button
Medium emphasis. Secondary actions next to a magic button.
Enabled
Hover / Focus
Disabled
Ghost button
Low emphasis. Less pronounced actions and inline links.
Enabled
Hover / Focus
Disabled
Leading vs trailing icons
Use an icon when it tells the button’s purpose faster than words. Leading is the default, as it is easier to scan. The exception is next / continue, where a trailing arrow makes more directional sense.
Variable width
Loading / Done
Styling
Magic button
Label
Size: 14px · Weight: 500
Colour: Foreground
Align: Centre
Container
Fill: Background · padding-box
Stroke: 1.5 · conic-gradient
Corner radius: Full
Glow
Same conic-gradient
Inset: −6 · Blur: 12
Pulse: 2s · Spin: 3s
Outline button
Label
Size: 14px · Weight: 500
Colour: Foreground
Align: Centre
Container
Fill: Background → Muted on hover
Stroke: 1.5 · conic-gradient
Corner radius: Full
Ghost button
Label
Size: 14px · Weight: 500
Colour: Foreground
Underline: 2px gradient
Container
Fill: None → Muted on hover
Stroke: None
Corner radius: Full
Size & Spacing
Size
height: 44px;
min-width: 128px;
Padding
padding: 0 24px;
Icon spacing
gap: 8px;
icon: 16 × 16px;
gap: 8px;
leading is the default placement
Glow
inset: -6px;
filter: blur(12px);
leave at least 16px of clear space around it