Build a fully functioning frontend demo app called Tastestack - a tool that helps founders build a visual swipe file, extract their brand DNA using AI, and export a portable brand kit to AI builders like Claude Code, Lovable, and Cursor.
This is a demo with pre-populated dummy data. No backend, no authentication, no real AI calls. Everything runs client-side. The app should feel like a real, polished product that someone can click through and understand the full vision. The user is "already logged in" as a fake user (Alex Chen).
Design System Visual Style: Dark Luxe Minimalism This is a design tool for design-conscious founders. The UI itself must demonstrate good taste. Premium, dark, minimal.
Colors Background: #09090B (near-black) Surface/cards: #18181B Elevated surface: #27272A Borders: #3F3F46 (subtle) Primary text: #FAFAFA (near-white) Secondary text: #A1A1AA (muted) Accent: #A78BFA (soft violet - signals creativity) Accent hover: #C4B5FD Success: #34D399 Typography Headings and body: Inter (clean, geometric, modern) Monospace (code previews): JetBrains Mono Use a Major Third (1.250) type scale for harmonious sizing Component Styling Cards: dark surface background, subtle border, rounded-xl corners (12px). On hover: slight scale up (1.02), border glow in violet accent color, elevated shadow Generous whitespace everywhere - gap-6 between cards, comfortable page padding Subtle glass morphism on sidebar and modal overlays (backdrop-blur) Smooth micro-interactions: buttons scale slightly on press, toggles animate, numbers count up on page load App Layout Persistent Shell (all pages) Sidebar (left, 240px wide, collapsible to 64px icon-only): Tastestack logo at top Navigation items with icons: Dashboard, Swipe File, Brand DNA, Brand Kit Active route has violet left border + subtle background fill "Save New" button prominently placed as CTA with violet background Collapse/expand toggle at bottom Top bar (across the top of content area): Search input (searches inspiration items) "Save" button (opens save modal) Fake user avatar and name "Alex Chen" Content area: renders the current page below the topbar Pages
Sections:
Stats row: 4 stat cards in a row, numbers animate/count up on mount: "38 Saves" (total inspiration items) "12 Tags" (unique tags used) "87% DNA Confidence" (brand DNA confidence score) "5 Color Palette" (colors in primary palette) Recent Saves: Horizontal scrolling strip showing the 8 most recently saved inspiration items as compact cards. Each card shows thumbnail image, title, and date. Clickable to navigate to detail view. Brand DNA Summary: A compact card showing the aesthetic archetype name ("The Refined Technologist"), tagline ("Precision meets warmth"), top 5 colors as small swatches, and a "View Full Analysis" button linking to Brand DNA page. Quick Actions: 3 action cards - "Save Inspiration" (opens save modal), "View Brand DNA" (links to DNA page), "Export Brand Kit" (links to export page). Each has an icon, title, and short description. 2. Swipe File (/swipe-file) The hero feature. A visual masonry grid of all saved inspiration.
Components:
Page header: Title "Swipe File", subtitle "Your curated visual inspiration", item count badge Filter bar: Horizontal row of filter tag chips (e.g., "minimal", "dark-ui", "bold-type", "gradient", "editorial", "saas", "e-commerce"). Clicking a tag toggles it active (violet highlight). Multiple tags can be active (AND filter). Show a search input that filters by title/tags/source. Active filters shown as removable chips. View toggle: Grid view (default) or list view Sort dropdown: Sort by "Date Added" (default), "Relevance", "Color" Masonry grid: Cards arranged in a masonry/Pinterest-style layout (3-4 columns). Each card shows: Full-width image (various aspect ratios - this is why masonry matters) Title overlay at bottom (on hover or always visible) Source domain badge (e.g., "dribbble.com") 2-3 tag chips On hover: scale up slightly, show violet border glow, reveal "View" button Clicking navigates to detail view Pre-populate with 35-40 inspiration items spanning different aesthetics. Use placeholder images from Unsplash or similar. Items should include things like:
SaaS product landing pages (Linear, Vercel, Stripe aesthetic) Dribbble shots (UI design, typography posters) Brand identities (luxury brands, tech startups) Editorial layouts (magazines, blogs) Product photography Architecture/interior design Each item has these fields:
{ id: string, title: string (e.g., "Linear App Homepage"), sourceUrl: string, sourceDomain: string (e.g., "linear.app"), sourceType: "website" | "dribbble" | "behance" | "twitter" | "pinterest" | "upload", imageUrl: string, tags: string[] (e.g., ["dark-ui", "minimal", "developer-tools"]), savedAt: ISO date string, notes: string (optional user note), analysis: { dominantColors: [{ hex, name, percentage }] (3-5 colors), mood: string[] (e.g., ["focused", "premium", "technical"]), visualWeight: "light" | "balanced" | "heavy", typographyStyle: string (e.g., "geometric sans-serif"), layoutPattern: string (e.g., "centered hero with grid sections") } } 3. Inspiration Detail (/swipe-file/:id) Full detail view when clicking an inspiration card.
Layout:
Large image taking up ~60% width Right panel with metadata: Title, source domain (linked), date saved User notes (editable textarea) Tags as chips (with + button to add more) Extracted Colors: Row of color swatches with hex codes and names Mood: Mood descriptor chips (e.g., "focused", "premium") Typography: Detected style and weight Layout Pattern: Description of the visual layout Related Items carousel at the bottom: 4-6 items with similar tags/colors, shown as compact cards. Clickable. Back button to return to swipe file grid 4. Brand DNA (/brand-dna) The "wow" page. Shows AI-extracted patterns across all saved inspiration. All data is pre-computed dummy data but should animate in to feel alive.
Sections:
Overview bar: Summary stats across the top:
Items Analyzed: 38 (animated counter) Confidence Score: 87% (animated circular progress) Last Analyzed: "2 hours ago" Dominant Style: "Dark Minimalism" Color Palette (most important section):
Primary Colors (top 5): Large swatches in a row. Each shows: color block, hex code, color name (e.g., "Midnight Blue"), percentage bar showing frequency across saves. Animate the percentage bars filling in. Accent Colors (3-4): Smaller swatches, same format Neutral Colors (3-4): Background and text colors detected Harmony description: Text like "Your palette gravitates toward deep, cool tones with strategic warm accents. The dominant midnight blues create authority, while violet accents add creative energy." Typography Instincts:
Primary style detected: "Geometric Sans-Serif" with confidence bar Secondary style: "Humanist Serif" with confidence bar Preferred weights: chips showing "Medium", "Bold" Size contrast: "Moderate" Recommended fonts: 3-4 font cards, each showing the font name rendered in that font (or a description), the category, and why it matches (e.g., "Inter - Matches your preference for geometric clarity") Visual Tone:
6-7 tone descriptor chips with weight/size indicating strength. E.g., "Sophisticated" (large, bold), "Minimal" (large), "Technical" (medium), "Warm" (medium), "Bold" (small), "Refined" (small). Could be a simple weighted list or a visual word cloud effect. Contrast level: "High" with visual indicator Whitespace preference: "Generous" with visual indicator Summary text: "Your visual language speaks to technical sophistication with intentional warmth..." Aesthetic Signature (the wow moment):
A premium-looking card with a subtle gradient border (violet to transparent) Archetype name: "The Refined Technologist" Tagline: "Precision meets warmth" Description: "Your aesthetic signature blends Swiss design precision with contemporary digital warmth. You're drawn to tools and brands that feel both powerful and approachable - dark interfaces with strategic color, generous whitespace, and typography that commands attention without shouting." Influences: chips for "Dieter Rams", "Swiss Design", "Japanese Minimalism" Keywords: chips for "precision", "clarity", "depth", "craft", "intention" All sections should animate in with staggered reveals as the user scrolls or on page load.