Shadows in the Alius Design System are used sparingly to express spatial relationships between layers. They are a functional tool, not a decorative element.

Design Principles

  • Documentation pages minimize strong shadows — the reading experience should feel flat and structured, not layered and distracting
  • Tool interfaces prefer borders and layering — shadows are secondary to clear borders and background color differentiation
  • Shadows express spatial relationships, not decoration — a shadow means “this element sits above the content below it”
  • Avoid overuse — excessive shadow depth creates visual noise and reduces the impact of genuinely elevated elements

Shadow Scale

Level 0 — No Shadow (Border Only)

  • Use for: Cards resting on the page, table rows, list items, content sections
  • Treatment: Use borders (1px, neutral color) to define edges
  • Rationale: Most content lives at the same elevation as the page — borders provide sufficient separation

Level 1 — Slight Float

  • Use for: Hovered cards, highlighted items, subtle call-to-action containers
  • Treatment: Very subtle shadow, barely perceptible — just enough to signal that the element has lifted slightly
  • Rationale: A gentle lift indicates interactivity or emphasis without overwhelming the layout

Level 2 — Dropdown / Tooltip

  • Use for: Dropdown menus, tooltips, popover panels, autocomplete suggestions
  • Treatment: Moderate shadow, clearly visible but not heavy — indicates a layer floating above the page
  • Rationale: Transient UI elements that overlay content need clear separation from the base layer

Level 3 — Modal

  • Use for: Modal dialogs, confirmation dialogs, large overlays, drawer panels
  • Treatment: Prominent shadow that clearly separates the modal from the background
  • Rationale: Modals demand user attention and must visually break away from the page content behind them

Level 4 — Important Overlay

  • Use for: Critical notifications, system-level alerts, full-screen overlays, spotlight elements
  • Treatment: Strongest shadow in the system — conveys maximum elevation and urgency
  • Rationale: Reserved for elements that require immediate attention and sit above all other content

Usage Guidelines

  • Default to Level 0 (no shadow) for most page elements
  • Use borders before shadows for separation
  • Apply shadows consistently — the same component type should always use the same shadow level
  • Shadows should be consistent across light and dark modes (adjust opacity, not structure)
  • Never combine multiple shadow levels on nested elements — this creates visual confusion