Elevation & Radius

Two systems that work together to create depth and visual hierarchy. Elevation lifts elements off the page with shadows. Radius softens edges and creates personality.

Elevation

Five elevation levels using layered shadows. Each level creates clear visual hierarchy through depth perception.

Elevation Scale

Dark Mode Adaptation

Shadows increase opacity in dark mode for visibility:

Light Mode:

--elevation-2: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08);

Dark Mode:

--elevation-2: 0 2px 8px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.24);

Opacity increases ~2× to maintain perceived depth on dark backgrounds.

Elevation Levels

Elevation 0 (Flat) - Page backgrounds, inline content, text

Elevation 1 (Subtle) - Cards at rest, table rows, list items

Elevation 2 (Default) - Card hover states, navigation bars, toolbars

Elevation 3 (Raised) - Dropdowns, tooltips, popovers, floating buttons

Elevation 4 (Floating) - Modals, dialogs, important notifications

Motion Pairing

Elevation should animate with position changes:

.card {
  box-shadow: var(--elevation-1);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-2px);
}

Radius

Seven border radius values from sharp to pill. Border radius creates visual softness and guides attention.

Radius Scale

Language Adaptation

Border radius adapts to language personality:

• Consumer (12px): Friendly and rounded - Cards 12px, buttons 8px
• Merchant (6px): Efficient and subtle - Cards 6px, buttons 4px
• Courier (8px): Balanced and practical - Cards 8px, buttons 6px

Radius Values

• None (0px): Tables, dividers, technical interfaces - Precise and structured
• XS-SM (2-4px): Merchant interfaces, badges - Efficient and professional
• MD (8px): Default buttons, inputs, cards - Balanced and modern
• XL-2XL (16-24px): Consumer interfaces, marketing cards - Friendly and approachable
• Full (9999px): Avatars, pills, tags - Soft and organic

Nested Radius

Inner elements use smaller radius to maintain optical consistency.

Rule: Subtract 4px from outer radius for inner elements.

Examples:

• Outer 16px → Inner 12px
• Outer 12px → Inner 8px
• Outer 8px → Inner 4px

Usage in Code

Elevation

/* Direct elevation */
box-shadow: var(--elevation-2);

/* With Tailwind config */
box-shadow: var(--elevation-3);

Tailwind Classes:

<div className="shadow-lg">Card with elevation</div>
<div className="shadow-2xl">Modal with high elevation</div>

Radius

Tailwind Classes:

• rounded-none - Sharp corners
• rounded-sm - Minimal rounding
• rounded-md - Default rounding
• rounded-lg - Large rounding
• rounded-xl - Extra large rounding
• rounded-2xl - Maximum rounding
• rounded-full - Fully rounded (pills and circles)

Combining Elevation + Radius

Cards, modals, and containers use both elevation and radius together:

<div className="rounded-xl shadow-lg">
  Card with friendly radius and subtle elevation
</div>

<div className="rounded-lg shadow-2xl">
  Modal with balanced radius and high elevation
</div>

Language-specific combinations:

• Consumer: Large radius (12-16px) + Subtle elevation (1-2)
• Merchant: Small radius (4-6px) + Minimal elevation (0-1)
• Courier: Medium radius (8px) + Moderate elevation (1-2)

Accessibility

Both elevation and radius are decorative. Never rely solely on shadows or rounded corners to communicate state or hierarchy:

✅ Good: Shadow + border + background color change

❌ Bad: Shadow or radius change only for hover state

Ensure sufficient contrast at corners where radius meets background.