/ step 01 — style foundation
Pick your design style
This sets the visual DNA for the rest of the wizard.
/classic5
/expressive5
/refined5
/specialized4
/curated palettes12
/typeface pairings10
/button systems9
/card patterns9
/corner radius6
/spacing rhythm4
/shadow & depth6
/gradient usage6
/layout language6
/navigation patterns
/form inputs6
/notification patterns4
/modals & dialogs4
/loading states6
/surface texture6
/motion character6
/color modes3
/product archetype12
/sections to include17
/hero pattern9
/tone of voice8
/brand details
The product or company name that appears in the nav, hero, and footer.
One sentence. What you do, in plain language. Shows up in the hero subhead.
/ live preview
AppName
Build something amazing
/features pattern9
/pricing pattern9
/cta pattern9
/faq pattern7
/social proof pattern9
/dashboard archetype12
/primary data pattern10
/app shell structure8
/empty state pattern7
/sign-in pattern7
/settings page pattern8
/filter pattern8
/navigation detail
/form pattern8
/icon system12
/framework + styling15
/contrast pairs
/preferences
Reduced motion
Honor
prefers-reduced-motion. Disables non-essential animations.Visible focus rings
Always show keyboard focus state. Required for WCAG 2.4.7.
Color-blind safe
Don't rely on color alone for state. Add icons or patterns.
/ focus ring preview
/empty state pattern8
/error state pattern7
/chart palette8
/pagination pattern8
/ coming soon
This step is being built
The shell, routing, and state are wired up. Come back for the next build pass to see this step live.
spark-design-spec.md
/send to model