Golden rules are non-negotiable guardrails. Shape language defines how corners, padding, and density scale from micro UI (small) through components (medium) to page sections (big).
Always apply — regardless of shape scale.
UI uses bg-surface, text-foreground, border-border, bg-accent — never raw neutrals or hex in components.
See colors →@tabler/icons-react everywhere. Sized by tier (size-3–size-8), stroke 2, currentColor.
See iconography →Buttons, inputs, dialogs from @wisihe/ui-react. No one-off copies of the same pattern.
See components →Icon-only controls get aria-label on the button. Decorative SVGs get aria-hidden. Respect prefers-reduced-motion.
See motion →Say what happened and what to do next. No hype, no blame-the-user jokes.
See tone-of-voice →Three scales of corner radius, padding, and presence. Pick the scale that matches the UI element's job — not its importance. Token values live on the Layout page.
Small shape
Nested content block
Micro surfaces — dense, tight, pill-like
Corners stay subtle. Use full radius only for pills and circular controls — not for card-sized boxes.
Avoid: Avoid rounded-2xl, heavy padding, or section-scale shadows on micro UI.
ChipTagFacet labelIcon buttonBadge
Medium shape
Nested content block
Components — the default card and control language
This is the workhorse scale. Most interactive blocks use rounded-xl, border-border, and p-4.
Avoid: Do not mix medium cards with small-radius inputs in the same component group.
Content cardButtonSearch fieldList rowDo/don’t row
Big shape
Nested content block
Sections — page regions and marketing shells
Big shapes frame content — they should appear once or twice per viewport, not on every list item.
Avoid: Avoid big radius on chips or nested medium cards — nest medium inside big, not the reverse.
Hero panelDesign-system introModal shellFeature bandSidebar card
Match corner radius and padding to the shape scale. Nest small inside medium inside big — child corners stay equal or tighter than the parent.
Do
Don't
Do
Project
Don't
Project
Do
Hero band
Don't
Hero band
Do
Don't