Guideline-Oriented Recipes
Problem
You want to apply Sigil's design intensity guidelines (onboard, bolder, quieter, delight) in real component compositions.
Solution
Use component variants and semantic color tokens together with layout primitives. Each recipe below demonstrates one design intensity pattern.
Onboard: First-Run Empty State
Bolder: High-Impact Primary Action
Delight: Friendly Completion Moment
Pitfalls
- Delight animations must check
prefers-reduced-motion— always provide a no-motion fallback path. - Avoid combining multiple semantic colors in a single bolder CTA block; pick one primary action color per card.
- Onboard states should have exactly one recommended next action; two equal-weight primary actions reduce click-through.