Surface
Live preview
subtle
base
elevated
When to use Surface
Use a surface to group related content visually without imposing a layout. Three elevation variants give one canonical answer per hierarchy level.
| Variant | When to use |
|---|---|
| Subtle | Background sections — sidebars, side panels, secondary content regions |
| Base | In-flow cards — record summaries, list items with structure |
| Elevated | Above-page layers — modals, dropdowns, popovers, toasts |
Composition
Surface is a primitive — author your own card, panel, dialog by
composing the surface variant with appropriate inner spacing,
typography, and structure. The substrate does not ship a
Card component because every "card" pattern in production is
slightly different; the Surface primitive plus prose-rendering
discipline is more durable than 47 specific card variants.
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.