Kindling Coffee Co./Dashboard
Next.js | Tailwind | Recharts45 min buildView Brief ↗
← Back to Demo

kindling-design-brief-v2.jsonc

Design specification for Kindling Coffee Co. CRM Dashboard · AD-5 Creative · v2.0

// The full JSONC brief drives every design decision in this demo:

  • colors — 42 tokens (surfaces, brand, text, accents, semantic, structural)
  • typography — DM Serif Display (headings) + DM Sans (body), 18-step scale
  • framing — Option 3 bordered container, 44px meta bar, tech stack callouts
  • layout — 220px sidebar, 64px topbar, fluid content, 4 responsive breakpoints
  • components — GlassCard, StatCard, Sidebar, Topbar, Dropdown, Badge, Toggle specs
  • motion — FadeUp, AnimatedNumber, spring drawer, skeleton loading, page transitions
  • pages — 6 pages: Dashboard, Blends, Orders, Customers, Sales, Settings
  • sampleData — 8 blends, 8 orders, 10 customers, 12-month revenue data

// Artifact source: kindling-interactive-demo.jsx (1064 lines, working prototype)

// Build time: 45 minutes · Stack: Next.js 15 + Tailwind CSS v3 + Recharts

The full JSONC brief is available in the project repository at kindling-design-brief-v2.jsonc