foundations
Radius, elevation and borders
Wolf's register is operational, not consumer-cute. Borders define surfaces by default; shadows earn their place only when a surface is actually floating above content.
Read the full specRadius scale
Literal values — no calc() derivation. Every rounded element picks one token. Nested corners must be smaller than their parent, never equal or larger.
- xsInline tags at 10px text
- smSmall badges, pills
- mdDefault input radius
- lgCanonical — buttons, cards
- xlLarger cards, hero media
- 2xlOversized containers
- 3xlPills, avatar fallback
- fullCircular — avatars, toggles
<div className="rounded-lg border"> { /* 3.2px canonical */ } </div>
<div className="rounded-xl border"> { /* 6px for modals */ } </div>Shadow scale — reference only
Every step renders on white. Use the legend below to see which steps are allowed at rest and which are reserved for actually-floating surfaces.
- --shadow-xsSubtle lift on tinted backgroundForbidden at rest on static surfaces
- --shadow-smButton at rest, sticky headerAllowed for the use above
- --shadow-mdPopover, dropdown, tooltipAllowed for the use above
- --shadow-lgDropdown menu (large lists)Allowed for the use above
- --shadow-xlDialog, modal, alert-dialogAllowed for the use above
- --shadow-2xlMarketing hero card — forbidden for WolfForbidden at rest on static surfaces
Sparing-shadow policy
If the surface is definitely clickable, or definitely floating above other content, a shadow earns its place. Otherwise: border only.
Border only
Static informational card
No elevation. The edge is defined by a 1px border on --border. This is the Wolf default.
Avoid — shadow at rest
Static card with shadow
Reads as generic SaaS template. The shadow is decorative — it adds no signal. Replace with a border.
Border weights
One weight per surface. Nested borders are forbidden — if a card is bordered, its internal fields aren't.
- hairlineFine table row dividers (DPR ≥ 2 only)
- defaultCards, inputs, dividers
- emphasisedFocused inputs, active states, selection
- boldHeavy UI emphasis — rare
No double borders
When Element A has a border and contains Element B with a border, one of them must be removed. Visual weight stacks badly otherwise.
Correct — field has no border inside card
Wrong — nested borders
Composed — static vs interactive vs floating
Three canonical surface types. The only difference is how they communicate affordance.
Static
Border only
Informational content. Never elevates, even on hover.
Interactive
Lift on hover
Links, navigable cards. Shadow-sm only on hover — never at rest.
Floating
Dialog · shadow-xl
Modals and popovers. Genuine elevation above the page.