Empty State Card

Updated 2 weeks ago

Style

Visual design rationale for the empty state card component.

Token Mapping

ElementToken
Border{semantic.border-subtle}
Background{semantic.surface-default}
Title text{semantic.ink-primary}
Body text{semantic.ink-secondary}
Inline links{semantic.interactive-primary}

Structure

The card border is dashed, not solid — a deliberate visual signal that distinguishes "empty by design" from a normal bordered surface (e.g. Surface), which uses a solid border.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.