Shape scales define the corner radius of surfaces and components. Norbielink uses a rounded, approachable aesthetic — with pill shapes for interactive elements and progressively larger radii for containers.
None
0px
shape.none
Extra Small
4px
shape.xs
Small
8px
shape.sm
Medium
12px
shape.md
Large
16px
shape.lg
Full (Pill)
9999px
shape.full
Shape tokens
Always reference tokens — never hard-code raw radius values in product code.
| Token | Value | Used for |
|---|---|---|
shape.none | 0px | Table rows, flat surfaces (no rounding) |
shape.xs | 4px | Sort icons, small inline chips |
shape.sm | 8px | Buttons (medium/small), input fields, dropdowns |
shape.md | 12px | Marketplace tiles, color swatches, avatar images |
shape.lg | 16px | Cards, modals, feature cards, example containers |
shape.xl | 24px | Large containers, hero sections |
shape.full | 9999px | Buttons (primary large), nav items (active pill), badges, search bar, avatar circles |
Shape in context
How each shape scale appears in real components.
Primary Button
shape.full (pill)
NorbieLink Tour
Explore features
Feature Card
shape.lg (16px)
🏠
Gen. Liability
Marketplace Tile
shape.md (12px)
Job Title
Input Field
shape.sm (8px)
PRO
Badge
shape.full (pill)
Marketplace
Active Nav Item
shape.full (pill)