Contents Purpose Anatomy Variants States Tokens Used Accessibility Behavior Platform Notes Component: empty-state Purpose Communicate that a view or section has no content, with optional call to action. Anatomy icon — optional, large decorative icon (centered) heading — optional, brief title description — required, explanation text action — optional, a button (use .btn component) Variants Class Visual Usage empty-state Base — centered column layout, generous spacing Standard empty view Single variant. Content dictates the visual — the component just provides centered layout + spacing. States None. Display-only. Tokens Used --font-serif, --text-base, --text-md --leading-relaxed --space-4, --space-8 --color-text-primary, --color-text-secondary, --color-text-tertiary Accessibility Heading should use appropriate level for page hierarchy (typically <h2> or <h3>) Icon is decorative — use aria-hidden="true" on the SVG If the empty state contains an action, it must be keyboard-accessible (handled by btn component) The description text explains what to do — keep it concise and actionable Behavior Layout: display: flex, flex-direction: column, align-items: center, text-align: center Spacing: gap: var(--space-4) between elements, padding: var(--space-8) or more Icon: --icon-md (20px) or larger (32px via explicit sizing), color: var(--color-text-tertiary) Heading: font-serif, text-md, text-primary Description: font-serif, text-base, text-secondary, max-width 40ch Action slot: just render a .btn inside, no special styling needed Platform Notes Web: CSS in @layer components. One file: empty-state.css. macOS: Map to a centered placeholder view or SwiftUI ContentUnavailableView.