Component Recipes
Recipes describe how component states should consume semantic design tokens. They are the bridge between raw tokens and reusable component implementations.
Button Recipe
Button variants, sizes, loading, disabled, full-width, and accessory states should resolve through action fill, foreground, border, radius, spacing, and label tokens.
Input Recipe
Inputs should use surface, foreground, placeholder, border, focus, disabled, danger, radius, spacing, and body text tokens consistently across value, placeholder, error, disabled, multiline, and size states.
Status Recipe
Status messaging should use the semantic status token family so alerts, toasts, badges, and future banners share the same informational, success, warning, and danger language.
Info
Informational status.
Success
Completed successfully.
Warning
Review before release.
Danger
Resolve this issue.
Compact status
Use compact status messaging inside dense layouts.
Info
Success
Warning
Error
Surface Recipe
Surface and elevation recipes should separate canvas, base, muted, raised, bordered, radius, spacing, and elevation tokens so hierarchy stays consistent across cards, sheets, dialogs, and popovers.
Base surface
Muted surface
Lit panel
Raised card
Outlined card