Tokens and components used across the prototype. Every component here maps 1:1 to the Figma component spec in DESIGN_SPEC.md.
Primary
#111111
bg/brand · headers, hero, secondary buttons
Secondary
#DC2626
bg/action · primary CTAs, links, focus
Accent
#DC2626
bg/accent · Pro subscription
Background
#FAFAF9
bg/page
Card
#FFFFFF
bg/card
Main text
#111111
text/primary
Secondary text
#737373
text/secondary
Border
#E7E5E4
border/default
Radius hierarchy: inputs 10, menus 14, cards 18, stages and panels 24, buttons and chips fully rounded. Spacing: 4-pt scale (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80).
As it should appear on receipts.
Enter a valid email, like name@company.com.
Please accept the terms to continue.
Heads up
Payment successful
Bundle updated
Couldn’t log you in
PKR 700 6 products
PKR 700 9 products
Try a broader search term or remove a filter.
Something went wrong on our side.
1. Browse → bundle → products
Open any card, then “View all” / scroll to products and open one.
2. Login → return to bundle
Click “Buy bundle”, log in, land back on the same bundle.
3. Sign up → account created → continue
Create account, then “Continue to Newsletter Growth System”.
4. Bundle A → related bundle B
Scroll to Related bundles and open one — content swaps fully.
5. Search → filter → detail → back to results
Open a result, then “Back to results” restores query + filters.
6. Invalid login / signup → fix → continue
Submit empty, or use wrong-password / taken@stackwise.co.
State: library loading
State: library error
State: empty search
Gated dashboard (logged out)