Radius & Shadows

Rounded corners and restrained shadows contribute to the warm, non-clinical feel described in the Visual Identity Direction. Corners are softened but not fully rounded (that would read as playful); shadows are subtle and use warm-toned alpha, not harsh black.

Token source: tokens/primitive/radius.json, tokens/primitive/shadow.json

Border Radius

Token	Value	Usage
`primitive.radius.none`	0	Sharp edges (rare)
`primitive.radius.sm`	4px	Badges, tags
`primitive.radius.md`	8px	Buttons, inputs, cards
`primitive.radius.lg`	12px	Large cards, sections
`primitive.radius.xl`	20px	Feature cards, modals
`primitive.radius.full`	9999px	Pills, circular avatars

Visual reference

none

sm 4px

md 8px

lg 12px

xl 20px

full

Box Shadows

Shadows provide elevation cues. They use low-opacity black to stay neutral across both light and dark themes. The overall effect is soft and unobtrusive — no hard drop shadows.

Token	Value	Usage
`primitive.shadow.sm`	`0 1px 2px rgba(0,0,0,0.05)`	Subtle lift — tags, badges
`primitive.shadow.md`	`0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)`	Cards, article cards
`primitive.shadow.lg`	`0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)`	Dropdowns, sticky header
`primitive.shadow.xl`	`0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)`	Modals, overlays

Visual reference

sm

md

lg

xl

Opacity

Used for disabled states and de-emphasized elements. Defined in tokens/primitive/opacity.json.

Token	Value	Usage
`primitive.opacity.disabled`	0.4	Disabled buttons, inputs
`primitive.opacity.muted`	0.6	De-emphasized elements
`primitive.opacity.hover`	0.8	Hover overlays
`primitive.opacity.visible`	1	Default — fully visible

Shadows in context

shadow.sm

Tags, pills, subtle lift

shadow.md

Default card elevation

shadow.lg

Dropdowns, sticky headers

shadow.xl

Modals, overlays