Tone, size, and interaction states
<div className="flex flex-col gap-[var(--space-4)]">
<div className="flex flex-wrap gap-[var(--space-2)]">
<Button tone="primary" variant="primary">
Primary tone
</Button>
<Button tone="accent" variant="primary">
Accent tone
</Button>
<Button tone="info" variant="ghost">
Info ghost
</Button>
<Button tone="danger" variant="primary">
Danger primary
</Button>
<Button disabled>Disabled</Button>
</div>
<div className="flex flex-wrap items-center gap-[var(--space-2)]">
<Button size="sm">
<Plus />
Small
</Button>
<Button size="md">
<Plus />
Medium
</Button>
<Button size="lg">
<Plus />
Large
</Button>
<Button size="xl">
<Plus />
Extra large
</Button>
</div>
<div className="flex flex-wrap gap-[var(--space-2)]">
<Button>Default</Button>
<Button className="bg-[--hover]">Hover</Button>
<Button className="ring-2 ring-[var(--focus)]">Focus</Button>
<Button className="bg-[--active]">Active</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "ghost" | — | |
| tone | "primary" | "accent" | "info" | "danger" | — | |
| size | "sm" | "md" | "lg" | "xl" | — | |
| loading | boolean | false |
State
<Button>Default</Button><Button className="bg-[--hover]">Hover</Button><Button className="ring-2 ring-[var(--focus)]">Focus</Button><Button className="bg-[--active]">Active</Button><Button disabled>Disabled</Button><Button loading>Loading</Button>No page placements yet. This component is available across Planner.
Size, variant, and state coverage
<div className="flex flex-col gap-[var(--space-4)]">
<div className="flex flex-wrap gap-[var(--space-2)]">
<IconButton size="sm" variant="ghost" aria-label="Add item sm">
<Plus />
</IconButton>
<IconButton size="md" variant="ghost" aria-label="Add item md">
<Plus />
</IconButton>
<IconButton size="lg" variant="ghost" aria-label="Add item lg">
<Plus />
</IconButton>
<IconButton size="xl" variant="ghost" aria-label="Add item xl">
<Plus />
</IconButton>
<IconButton size="md" variant="secondary" aria-label="Add item secondary">
<Plus />
</IconButton>
<IconButton size="md" variant="primary" aria-label="Add item primary">
<Plus />
</IconButton>
</div>
<div className="flex flex-wrap gap-[var(--space-2)]">
<IconButton aria-label="Default">
<Plus />
</IconButton>
<IconButton className="bg-[--hover]" aria-label="Hover">
<Plus />
</IconButton>
<IconButton className="ring-2 ring-[var(--focus)]" aria-label="Focus">
<Plus />
</IconButton>
<IconButton
className="bg-[--active]"
aria-pressed
aria-label="Active"
>
<Plus />
</IconButton>
<IconButton disabled aria-label="Disabled">
<Plus />
</IconButton>
<IconButton loading aria-label="Loading">
<Plus />
</IconButton>
</div>
<div className="flex flex-wrap gap-[var(--space-2)]">
<IconButton variant="primary" aria-label="Primary">
<Plus />
</IconButton>
<IconButton
className="bg-[--hover] shadow-[var(--shadow-neon-strong)]"
variant="primary"
aria-label="Primary hover"
>
<Plus />
</IconButton>
<IconButton
className="bg-[--active] shadow-[var(--shadow-inset-contrast),var(--shadow-neon-soft)]"
variant="primary"
aria-label="Primary active"
aria-pressed
>
<Plus />
</IconButton>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "ghost" | — | Visual treatment of the button. Choose "ghost", "secondary", or "primary". |
| size | "sm" | "md" | "lg" | "xl" | — | |
| loading | boolean | false |
State
<IconButton aria-label="Default">
<Plus />
</IconButton><IconButton className="bg-[--hover]" aria-label="Hover">
<Plus />
</IconButton><IconButton className="ring-2 ring-[var(--focus)]" aria-label="Focus">
<Plus />
</IconButton><IconButton
className="bg-[--active]"
aria-label="Active"
aria-pressed
>
<Plus />
</IconButton><IconButton disabled aria-label="Disabled">
<Plus />
</IconButton><IconButton loading aria-label="Loading">
<Plus />
</IconButton><IconButton variant="primary" aria-label="Primary">
<Plus />
</IconButton><IconButton
className="bg-[--hover] shadow-[var(--shadow-neon-strong)]"
variant="primary"
aria-label="Primary hover"
>
<Plus />
</IconButton><IconButton
className="bg-[--active] shadow-[var(--shadow-inset-contrast),var(--shadow-neon-soft)]"
variant="primary"
aria-label="Primary active"
aria-pressed
>
<Plus />
</IconButton>No page placements yet. This component is available across Planner.
Inline segmented action with pressed and loading states
<div className="flex flex-wrap gap-[var(--space-2)]">
<SegmentedButton>Default</SegmentedButton>
<SegmentedButton className="[--hover:var(--seg-hover-base)] bg-[--hover] text-[hsl(var(--foreground))] [text-shadow:0_0_calc(var(--space-2)-var(--spacing-0-5))_hsl(var(--accent)/0.25)]">Hover</SegmentedButton>
<SegmentedButton selected>Active</SegmentedButton>
<SegmentedButton className="ring-2 ring-[--theme-ring] ring-offset-0 outline-none">Focus-visible</SegmentedButton>
<SegmentedButton disabled>Disabled</SegmentedButton>
<SegmentedButton as="a" href="#" disabled>Disabled link</SegmentedButton>
<SegmentedButton loading>Loading</SegmentedButton>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | |
| href | string | — | |
| selected | boolean | false | |
| loading | boolean | false | |
| disabled | boolean | false |
State
<SegmentedButton>Default</SegmentedButton><SegmentedButton className="[--hover:var(--seg-hover-base)] bg-[--hover] text-[hsl(var(--foreground))] [text-shadow:0_0_calc(var(--space-2)-var(--spacing-0-5))_hsl(var(--accent)/0.25)]">Hover</SegmentedButton><SegmentedButton selected>Active</SegmentedButton><SegmentedButton className="ring-2 ring-[--theme-ring] ring-offset-0 outline-none">Focus-visible</SegmentedButton><SegmentedButton disabled>Disabled</SegmentedButton><SegmentedButton as="a" href="#" disabled>Disabled link</SegmentedButton><SegmentedButton loading>Loading</SegmentedButton>No page placements yet. This component is available across Planner.
Search Planner's color, state, spacing, radius, typography, shadow, motion, and z-index tokens. Copy any token for quick use in new surfaces.
Swatches, overlays, gradients, and semantic colors shared across Planner.
--accent
292 90% 43%--accent-2
192 90% 30%--accent-3
192 90% 32%--accent-foreground
0 0% 100%--accent-overlay
hsl(var(--accent))--accent-soft
292 90% 30%--active
hsl(var(--foreground) / 0.12)--aurora-g
var(--accent-2)--aurora-g-light
color-mix(in oklab, hsl(var(--accent-2)) 37.5%, white)--aurora-p
var(--accent)--aurora-p-light
color-mix(in oklab, hsl(var(--accent)) 37.5%, white)--background
246 35% 7%--border
252 20% 22%--btn-bg
transparent--btn-fg
hsl(var(--foreground))--card
248 30% 10%--card-foreground
var(--foreground)--card-hairline
hsl(var(--border))--card-overlay-scanlines
repeating-linear-gradient(
to bottom,
hsl(var(--foreground) / 0.035) 0,
hsl(var(--foreground) / 0.035) var(--spacing-0-25),
transparent var(--spacing-0-5),
transparent calc(var(--spacing-0-5) + var(--spacing-0-25))
)--danger
0 84% 60%--edge-iris
conic-gradient(
from 180deg,
hsl(262 83% 58% / 0),
hsl(262 83% 58% / 0.7),
hsl(var(--accent-3) / 0.7),
hsl(320 85% 60% / 0.7),
hsl(262 83% 58% / 0)
)--focus
hsl(var(--ring))--foreground
260 20% 96%--glow
292 95% 52%--glow-active
hsl(var(--glow))--glow-soft
var(--accent) / 0.25--glow-strong
var(--ring) / 0.55--hardstuck-background
165 60% 3%--hardstuck-border
165 40% 22%--hardstuck-foreground
160 12% 95%--hero-divider-blur
calc(var(--spacing-1) * 1.5)--highlight
0 0% 100%--hover
hsl(var(--foreground) / 0.08)--icon-fg
247 100% 77%--input
250 22% 12%--lav-deep
320 85% 60%--lg-black
var(--background)--lg-cyan
var(--accent-2)--lg-pink
var(--lav-deep)--lg-violet
var(--ring)--line
var(--border)--muted
248 26% 14%--muted-foreground
250 15% 70%--neon
var(--glow)--neon-soft
hsl(var(--neon))--noir-background
350 70% 4%--noir-border
350 40% 22%--noir-foreground
0 0% 92%--panel
var(--card)--pillar-comms-end
312 88% 66%--pillar-comms-start
286 90% 68%--pillar-positioning-end
220 90% 66%--pillar-positioning-start
190 90% 66%--pillar-tempo-end
284 85% 65%--pillar-tempo-start
260 85% 70%--pillar-trading-end
318 85% 66%--pillar-trading-start
292 85% 72%--pillar-vision-end
192 75% 60%--pillar-vision-start
157 70% 55%--pillar-wave-end
198 90% 62%--pillar-wave-start
257 90% 70%--primary
262 83% 58%--primary-foreground
0 0% 100%--primary-soft
262 83% 18%--review-result-loss-gradient
linear-gradient(
90deg,
hsl(var(--danger) / 0.24),
hsl(var(--primary) / 0.2)
)--review-result-win-gradient
linear-gradient(
90deg,
hsl(var(--success) / 0.22),
hsl(var(--accent) / 0.18)
)--ring
262 83% 65%--ring-contrast
hsl(var(--ring))--ring-muted
248 20% 22%--seg-active-base
hsl(var(--card))--seg-active-grad
linear-gradient(
90deg,
hsl(var(--primary-soft) / 0.85),
hsl(var(--accent-soft) / 0.85),
hsl(var(--accent-2) / 0.8)
)--shadow-color
262 83% 58%--shell-max
var(--shell-width)--shell-width
1280px--success
160 70% 45%--success-glow
160 70% 35% / 0.6--success-soft
var(--success) / 0.2--surface
248 24% 12%--surface-2
248 24% 16%--surface-streak
240 16% 12%--surface-vhs
210 27% 6%--team-blue
200 100% 60%--team-red
0 85% 60%--text
var(--foreground)--text-on-accent
hsl(var(--foreground))--theme-ring
hsl(var(--ring))--tone-bot
195 75% 56%--tone-jg
152 52% 44%--tone-mid
265 72% 62%--tone-sup
320 72% 60%--tone-top
38 92% 60%--warning
43 96% 56%--warning-soft
var(--warning) / 0.1--warning-soft-strong
var(--warning) / 0.2State opacities and utility helpers for disabled, loading, and hidden surfaces.
--disabled
0.5--loading
0.6--visually-hidden-top
-9999pxSpacing scale, gutters, and control dimensions for layout rhythm.
--control-h
var(--control-h-md)--control-h-lg
48px--control-h-md
40px--control-h-sm
32px--control-h-xl
56px--control-h-xs
24px--control-px
var(--spacing-3)--hairline-w
1px--header-stack
calc(var(--spacing-8) + var(--spacing-4))--space-1
var(--spacing-1)--space-2
var(--spacing-2)--space-3
var(--spacing-3)--space-4
var(--spacing-4)--space-5
var(--spacing-5)--space-6
var(--spacing-6)--space-7
var(--spacing-7)--space-8
var(--spacing-8)--spacing-0-125
calc(var(--spacing-1) / 8)--spacing-0-25
calc(var(--spacing-1) / 4)--spacing-0-5
calc(var(--spacing-1) / 2)--spacing-0-75
calc(var(--spacing-1) * 0.75)--spacing-1
4px--spacing-2
8px--spacing-3
12px--spacing-4
16px--spacing-5
24px--spacing-6
32px--spacing-7
48px--spacing-8
64pxCorner radii applied to cards, surfaces, and interactive controls.
--control-radius
var(--radius-xl)--radius-2xl
24px--radius-full
9999px--radius-lg
12px--radius-md
8px--radius-xl
16pxFont sizes and weight tokens that shape headings and UI text.
--control-fs
var(--font-ui)--font-body
19px--font-label
12px--font-size-md
var(--font-body)--font-title
24px--font-title-lg
30px--font-ui
15px--font-weight-bold
800Elevation, outline, and glow shadows for surfaces and interactions.
--btn-primary-active-shadow
inset 0 0 0 calc(var(--space-1) / 4)
hsl(var(--accent) / 0.6)--btn-primary-hover-shadow
0 calc(var(--space-1) / 2) calc(var(--space-3) / 2)
calc(-1 * var(--space-1) / 4) hsl(var(--accent) / 0.25)--pillar-comms-shadow
300 80% 36% / 0.35--pillar-positioning-shadow
205 85% 35% / 0.35--pillar-tempo-shadow
270 80% 35% / 0.35--pillar-trading-shadow
292 85% 38% / 0.35--pillar-vision-shadow
170 70% 30% / 0.35--pillar-wave-shadow
258 90% 38% / 0.35--shadow
0 10px 30px hsl(250 30% 2% / 0.35)--shadow-badge
inset 0 var(--hairline-w) 0 hsl(var(--foreground) / 0.06),
0 0 0 var(--hairline-w) hsl(var(--card-hairline) / 0.35),
0 var(--spacing-3) var(--spacing-4) hsl(var(--shadow-color) / 0.18)--shadow-control
inset 0 var(--spacing-1) var(--spacing-2) 0 rgb(0 0 0 / 0.06),
0 0 0 var(--hairline-w) hsl(var(--border) / 0.12)--shadow-control-hover
0 var(--spacing-1) var(--spacing-2) hsl(var(--shadow-color) / 0.3)--shadow-dropdown
0 12px 40px hsl(var(--shadow-color) / 0.55)--shadow-glow-current
0 0 var(--spacing-2) currentColor--shadow-glow-lg
0 0 var(--spacing-5) var(--glow-active)--shadow-glow-md
0 0 var(--spacing-4) var(--glow-active)--shadow-glow-sm
0 0 var(--spacing-2) var(--glow-active)--shadow-glow-xl
0 var(--spacing-2) var(--spacing-6) var(--glow-active)--shadow-inset-contrast
inset 0 0 0 var(--hairline-w) var(--ring-contrast)--shadow-inset-hairline
inset 0 0 0 var(--hairline-w) hsl(var(--card-hairline))--shadow-nav-active
0 0 0 var(--hairline-w) hsl(var(--ring) / 0.35),
0 var(--spacing-2) var(--spacing-6) hsl(var(--ring) / 0.2)--shadow-neo
calc(var(--spacing-3)) calc(var(--spacing-3)) var(--spacing-5)
hsl(var(--panel) / 0.72),
calc(var(--spacing-3) * -1) calc(var(--spacing-3) * -1) var(--spacing-5)
hsl(var(--foreground) / 0.06)--shadow-neo-inset
inset var(--spacing-1) var(--spacing-1) var(--spacing-3)
hsl(var(--panel) / 0.85),
inset calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-3)
hsl(var(--foreground) / 0.08)--shadow-neo-sm
calc(var(--spacing-1)) calc(var(--spacing-1)) calc(var(--spacing-2))
hsl(var(--panel) / 0.72),
calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) calc(var(--spacing-2))
hsl(var(--foreground) / 0.06)--shadow-neo-soft
0 var(--spacing-1) var(--spacing-3) calc(var(--spacing-1) * -1)
hsl(var(--shadow-color))--shadow-neo-strong
var(--spacing-4) var(--spacing-4) var(--spacing-6) hsl(var(--panel) / 0.72),
calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1) var(--spacing-6)
hsl(var(--foreground) / 0.08)--shadow-neon
0 0 var(--space-1) hsl(var(--neon) / 0.55),
0 0 calc(var(--space-3) - var(--space-1) / 2) hsl(var(--neon) / 0.35),
0 0 calc(var(--space-4) + var(--space-1) / 2) hsl(var(--neon) / 0.2)--shadow-neon-soft
0 0 var(--spacing-2) var(--neon),
0 0 var(--spacing-4) var(--neon-soft)--shadow-neon-strong
0 0 var(--spacing-3) var(--neon),
0 0 var(--spacing-5) var(--neon-soft)--shadow-outline-faint
0 0 0 var(--hairline-w) hsl(var(--border) / 0.08)--shadow-outline-subtle
0 0 0 var(--hairline-w) hsl(var(--border) / 0.12)--shadow-ring
0 0 var(--spacing-3) hsl(var(--ring))Durations and easing curves for animated transitions.
--dur-chill
220ms--dur-quick
140ms--dur-slow
420ms--ease-out
cubic-bezier(0.16, 1, 0.3, 1)--ease-snap
cubic-bezier(0.2, 0.8, 0.2, 1)