Shape System

Shapes

Border radii, border widths, opacity scale, and z-index stack. The design system uses only two radii values — maximising geometric consistency across all surfaces.

Border Radius

Two values only. No in-between rounding — this enforces a strict brutalist geometry.

Sharp

var(--radius-layout) 0px Cards, containers, modals — brutalist right angles

Full pill

var(--radius-indicator) 9999px Badges, tags, status indicators

Border Widths

Three widths map to three distinct UI states: structure, interaction, and focus.

1px

var(--border-width-layout) Structural container borders, dividers, grid lines

2px

var(--border-width-interactive) Focused or active states of interactive elements

3px

var(--border-width-focus) Keyboard focus rings — always uses focus color token

Opacity Scale

12-step numeric scale. Three semantic aliases map to specific scale stops. Background of demo squares is orange-50 to make opacity visible.

0.05

0.1

0.2

0.3

0.4 disabled

0.5

0.6

0.7 overlay

0.8

0.9

Semantic Opacity Roles

opacity.overlay Modal/drawer backdrops — dims page content

0.70 --opacity-overlay

opacity.disabled Disabled UI elements — still readable, clearly unavailable

0.40 --opacity-disabled

opacity.hover Hover fill layer over icons or containers

0.10 --opacity-hover

Z-Index Stack

Seven layers with fixed gap of 100 between each intentional stacking context.

500 toast Notification toasts, always on top

400 modal Dialog, drawer, sheet panels

300 overlay Dimmer / scrim behind modal/drawer

200 sticky Sticky headers, floating table headers

100 dropdown Dropdowns, popover menus, date pickers

0 base Default document flow; no explicit stacking

-1 hide Intentionally hidden layer below stacking context

z-index.hide Intentionally hidden layer below stacking context

-1 --z-hide

z-index.base Default document flow; no explicit stacking

0 --z-base

z-index.dropdown Dropdowns, popover menus, date pickers

100 --z-dropdown

z-index.sticky Sticky headers, floating table headers

200 --z-sticky

z-index.overlay Dimmer / scrim behind modal/drawer

300 --z-overlay

z-index.modal Dialog, drawer, sheet panels

400 --z-modal

z-index.toast Notification toasts, always on top

500 --z-toast