Velour Design System v1
A design system that lets your team ship 10 brand-perfect pages a week — Lovable-ready, fully documented, owned by your in-house team. Tokens, components, and prompt patterns built from your existing visual language, then formalized for scale.
⚙️
Tech Stack
Figma library + Tokens Studio
Style Dictionary (JSON / CSS / TS export)
Lovable workspace with synced primitives
Shopify Storefront API hooks
Storybook documentation site
🧠
Core Technologies
- Tokens Studio — W3C design tokens · single source of truth
- Style Dictionary — Export tokens to JSON · CSS · TypeScript
- Lovable — Synced component primitives · prompt library
- Figma — Library + variants + Code Connect
- Shopify — Storefront API · headless integration
📦
V1 Deliverables
✓
Brand audit (current site + mobile app)
V1✓
Foundation tokens (color · type · spacing · motion · radius · shadow)
V1✓
32-component Lovable-ready library
V1✓
8 ecommerce page modules (Hero · Grid · Editorial split · Lookbook · USP · Newsletter · Story · CTA)
V1✓
Lovable workspace setup + naming conventions + handoff documentation
V1✓
6 page recipe templates with approval gates
V1✓
Internal documentation site (this)
V1✓
Team onboarding workshop (half-day)
V1→
Email template kit (campaign · transactional · retention)
V2→
Mobile app component parity
V2→
CRO experiment template library
V2→
Multi-region / multi-currency variants (EU · UK · US · APAC)
V2→
Agency partner onboarding kit
V2🏛
Architecture Layers
FOUNDATIONS
W3C design tokens · Tokens Studio · Style Dictionary export to JSON/CSS/TS · single source of truth
COMPONENTS
Lovable workspace + Figma library + Storybook · same primitives across all surfaces
MODULES
Pre-built page sections · combine into recipes · reusable across campaigns and seasons
WORKFLOW
Lovable prompt library · approval gates · brand-compliance QA · publication checklist
OPS
Token-sync GitHub Action · Lovable → Shopify webhook · changelog · agency onboarding