[
  {
    "name": "Nightfall",
    "fakeUrl": "nightfall.design",
    "vibe": "Precision after dark.",
    "tags": ["dark", "developer", "precise"],
    "headingFont": "JetBrains Mono",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#0A0A0F",
    "surface": "#12121A",
    "surfaceHover": "#1A1A25",
    "border": "#1E1E2E",
    "text": "#E4E4E7",
    "textMuted": "#71717A",
    "accent": "#818CF8",
    "accentSoft": "rgba(129,140,248,0.12)",
    "radius": "12px",
    "radiusSm": "8px",
    "radiusXl": "16px",
    "shadow": "0 0 0 1px rgba(129,140,248,0.1), 0 8px 40px rgba(0,0,0,0.4)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #818CF8 0%, #C084FC 50%, #F472B6 100%)",
    "aiPromptTypography": "Use JetBrains Mono for all headings. Weight 600. Letter-spacing -0.02em. This creates a technical, precise feel — like reading a well-formatted terminal. Use Inter for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0A0A0F — near-black with a cool blue undertone. Never use pure #000000. Surface (cards, containers): #12121A — slightly lighter, creates depth through layering. "Text": #E4E4E7 — off-white, easier on the eyes than pure white. Muted "text": #71717A — for secondary info, labels, metadata. "Accent": #818CF8 — indigo-purple. Use sparingly. Buttons, links, active states, and highlights only. Accent "soft": rgba(129,140,248,0.12) — for hover backgrounds, selected states, subtle glows. "Border": #1E1E2E — barely visible. Defines edges without shouting.",
    "aiPromptShape": "Border-radius: 12px on cards and containers. 8px on buttons and inputs. 16px on modals and large panels. Never use sharp 0px corners in this system. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(129,140,248,0.1), 0 8px 40px rgba(0,0,0,0.4). This gives a subtle accent glow plus a deep drop shadow. Cards should feel like they float. Use a radial gradient with the accent color at 5-8% opacity behind hero sections for atmosphere.",
    "aiPromptRules": "This is a dark, precise, premium aesthetic. Use generous whitespace — never crowd elements. Accent color is for interactive elements only, not decoration. Hover "states": lighten borders, add a subtle accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements."
  },
  {
    "name": "Ivory",
    "fakeUrl": "ivory.design",
    "vibe": "Confidence in the details.",
    "tags": ["light", "professional", "spacious"],
    "headingFont": "Sora",
    "bodyFont": "Source Sans 3",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F6F9FC",
    "surfaceHover": "#EDF2F7",
    "border": "#E3E8EF",
    "text": "#0A2540",
    "textMuted": "#425466",
    "accent": "#635BFF",
    "accentSoft": "rgba(99,91,255,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3)",
    "shadowSm": "0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3)",
    "shadowStyle": "Layered soft",
    "gradient": "linear-gradient(135deg, #635BFF 0%, #A259FF 50%, #F24E1E 100%)",
    "aiPromptTypography": "Use Sora for all headings. Weight 700. Letter-spacing -0.03em. This creates a modern, confident feel with geometric precision. Use Source Sans 3 for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white. Clean and confident. Surface (cards, containers): #F6F9FC — an ice-blue tint. Subtle but distinct from the background. "Text": #0A2540 — very dark navy. Richer than black, more professional. Muted "text": #546E7A — slate gray-blue for secondary content. "Accent": #635BFF — vibrant purple. Used for primary buttons, links, and key highlights only. Accent "soft": rgba(99,91,255,0.08) — for hover backgrounds and selected states. "Border": #E3E8EF — soft gray. Visible but never harsh.",
    "aiPromptShape": "Border-radius: 10px on cards. 6px on buttons and inputs. 14px on modals. Borders are 1px solid. This system uses rounded but not pill-shaped elements.",
    "aiPromptDepth": "Primary "shadow": 0 2px 5px -1px rgba(50,50,93,0.12), 0 1px 3px -1px rgba(0,0,0,0.08). This is a layered, stacked shadow — multiple light sources create a realistic float effect. Cards should feel elevated but grounded. No colored glows. Depth comes from shadow stacking, not color.",
    "aiPromptRules": "This is a light, spacious, trustworthy aesthetic. Lots of whitespace. Generous padding (24px+ inside cards). The accent purple is a confident pop against the neutral palette — use it as the single point of visual energy. Text hierarchy is "critical": dark navy for headings, slate for body, soft gray for metadata."
  },
  {
    "name": "Concrete",
    "fakeUrl": "concrete.studio",
    "vibe": "Raw graphic energy.",
    "tags": ["light", "brutalist", "bold"],
    "headingFont": "Space Grotesk",
    "bodyFont": "IBM Plex Mono",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#FFFBEB",
    "surface": "#FFFFFF",
    "surfaceHover": "#FFF7D6",
    "border": "#1A1A1A",
    "text": "#1A1A1A",
    "textMuted": "#525252",
    "accent": "#DC2626",
    "accentSoft": "rgba(220,38,38,0.1)",
    "radius": "0px",
    "radiusSm": "0px",
    "radiusXl": "0px",
    "shadow": "4px 4px 0px #1A1A1A",
    "shadowSm": "2px 2px 0px #1A1A1A",
    "shadowStyle": "Hard offset",
    "gradient": "linear-gradient(135deg, #DC2626 0%, #F59E0B 50%, #1A1A1A 100%)",
    "aiPromptTypography": "Use Space Grotesk for all headings. Weight 700. Letter-spacing -0.01em. Bold, geometric, slightly aggressive. Use IBM Plex Mono for all body text. Weight 400. Line-height 1.7. The monospace body creates a raw, utilitarian feel. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFBEB — warm cream. Not pure white. Feels like paper. Surface (cards, containers): #FFFFFF — clean white against the cream. "Text": #1A1A1A — near-black. High contrast. Assertive. Muted "text": #525252 — dark gray. Still readable, still bold. "Accent": #DC2626 — pure red. Danger, energy, urgency. Use for buttons, highlights, and key elements. Accent "soft": rgba(220,38,38,0.08) — for subtle hover states. "Border": #1A1A1A — thick, dark, visible. Borders are a design element here, not a divider.",
    "aiPromptShape": "Border-radius: 0px on EVERYTHING. No rounded corners anywhere. This is the defining feature of the system. All borders are 2-3px solid black — thick enough to feel intentional. Square corners with heavy borders create a newspaper/poster aesthetic.",
    "aiPromptDepth": "Shadow: 4px 4px 0px #1A1A1A — hard offset shadow. No blur. The shadow is a solid black rectangle offset down and to the right. This is the brutalist signature. No gradients, no glows, no soft shadows anywhere.",
    "aiPromptRules": "This is raw, loud, and intentional. Every pixel should feel like it was placed with force. Thick borders. Hard shadows. High contrast. Zero radius. The red accent is aggressive and should be used boldly — large buttons, full-width highlights, thick underlines. Hover "states": invert colors (black bg, white text) rather than subtle shifts. No smooth transitions — instant state changes feel more brutalist."
  },
  {
    "name": "Linen",
    "fakeUrl": "linen.design",
    "vibe": "Editorial warmth.",
    "tags": ["light", "warm", "elegant"],
    "headingFont": "Playfair Display",
    "bodyFont": "Raleway",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FAF5F0",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5EDE6",
    "border": "#E8DDD3",
    "text": "#2D2118",
    "textMuted": "#8C7B6B",
    "accent": "#8B5E3C",
    "accentSoft": "rgba(139,94,60,0.08)",
    "radius": "20px",
    "radiusSm": "12px",
    "radiusXl": "28px",
    "shadow": "0 10px 40px rgba(45,33,24,0.08)",
    "shadowSm": "0 2px 12px rgba(45,33,24,0.04)",
    "shadowStyle": "Diffused warm",
    "gradient": "linear-gradient(135deg, #8B5E3C 0%, #C49A6C 50%, #D4A574 100%)",
    "aiPromptTypography": "Use Playfair Display for all headings. Weight 600. Letter-spacing -0.01em. This is a classic transitional serif — elegant, authoritative, editorial. Use Raleway for all body text. Weight 400. Line-height 1.7. The geometric sans-serif body provides clean contrast against the ornate headings. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FAF5F0 — warm linen. A soft cream with a pink-tan undertone. Surface (cards, containers): #FFFFFF — clean white. Creates contrast against the linen background. "Text": #2D2118 — dark espresso brown. Warmer than black. Muted "text": #8C7B6B — muted tan-brown for secondary content. "Accent": #8B5E3C — warm copper-brown. Earthy, rich, refined. Accent "soft": rgba(139,94,60,0.08) — for hover states and subtle highlights. "Border": #E8DDD0 — soft warm gray. Blends with the linen background.",
    "aiPromptShape": "Border-radius: 20px on cards and containers. 12px on buttons and inputs. 24px on modals. This system uses generous, soft rounding that feels organic and approachable. Borders are 1px solid and subtle.",
    "aiPromptDepth": "Shadow: 0 4px 24px rgba(45,33,24,0.06), 0 1px 4px rgba(45,33,24,0.04). Warm-toned shadows using brown-black instead of pure black. Shadows should feel like natural light falling on paper — diffused, gentle, warm.",
    "aiPromptRules": "This is a warm, human, editorial aesthetic. Think high-end magazine layout. Generous whitespace (120px+ between sections). Serif headings paired with sans-serif body creates classic editorial rhythm. The warm color palette should feel like candlelight on linen. No sharp edges, no harsh contrasts, no cold tones. Hover "states": gentle opacity shifts, subtle border color warm-ups. "Transitions": 0.3s ease for a relaxed, unhurried feel."
  },
  {
    "name": "Phosphor",
    "fakeUrl": "phosphor.dev",
    "vibe": "Glow in the dark.",
    "tags": ["dark", "neon", "cyberpunk"],
    "headingFont": "Fira Code",
    "bodyFont": "Fira Code",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#0C0C0C",
    "surface": "#141414",
    "surfaceHover": "#1C1C1C",
    "border": "#1A2F1A",
    "text": "#B3FFB3",
    "textMuted": "#5A8A5A",
    "accent": "#00FF88",
    "accentSoft": "rgba(0,255,136,0.08)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "6px",
    "shadow": "0 0 20px rgba(0,255,136,0.15), 0 0 60px rgba(0,255,136,0.05)",
    "shadowSm": "0 0 10px rgba(0,255,136,0.08)",
    "shadowStyle": "Neon glow",
    "gradient": "linear-gradient(135deg, #00FF88 0%, #00CC6A 50%, #009F52 100%)",
    "aiPromptTypography": "Use Fira Code for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing 0.02em. Everything is monospace. This creates the feeling of staring at a terminal. Import from Google Fonts.",
    "aiPromptColors": "Background: #0C0C0C — almost pure black. The void. Surface (cards, containers): #141414 — barely lighter. Depth through subtlety. "Text": #00FF88 — neon green. This IS the aesthetic. All primary text is green. Muted "text": rgba(0,255,136,0.5) — same green at half opacity. "Accent": #00FF88 — same neon green. In this system, the accent and text are the same color. The accent IS the text. Accent "soft": rgba(0,255,136,0.08) — faint green glow for hover states. "Border": rgba(0,255,136,0.13) — barely visible green edges.",
    "aiPromptShape": "Border-radius: 4px on cards. 2px on buttons and inputs. 6px on modals. Nearly square — terminals don't have rounded corners. Borders are 1px solid using the green-tinted border color.",
    "aiPromptDepth": "Shadow: 0 0 20px rgba(0,255,136,0.1), 0 0 0 1px rgba(0,255,136,0.1). Neon glow effect. Elements don't cast downward shadows — they emit green light. The glow radius increases on hover.",
    "aiPromptRules": "This is a neon, cyberpunk, terminal aesthetic. Everything glows. Backgrounds are pitch dark. Text is green and monospace. No other colors — this is a one-color system with the illusion of variety created through opacity levels. Buttons should feel like they're on a control panel. Hover "states": increase the glow radius and brightness. Add a subtle CRT scanline effect if possible (repeating linear gradient at 2px intervals, rgba(0,0,0,0.1)). Cursor should feel like a blinking terminal prompt."
  },
  {
    "name": "Carbon",
    "fakeUrl": "carbon.design",
    "vibe": "Nothing wasted.",
    "tags": ["light", "minimal", "monochrome"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.03em",
    "bg": "#FAFAFA",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5F5F5",
    "border": "#EAEAEA",
    "text": "#000000",
    "textMuted": "#666666",
    "accent": "#000000",
    "accentSoft": "rgba(0,0,0,0.05)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 2px 4px rgba(0,0,0,0.05)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.04)",
    "shadowStyle": "Ultra minimal",
    "gradient": "linear-gradient(135deg, #000000 0%, #333333 50%, #666666 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.04em on headings — very tight, almost touching. This creates a dense, authoritative look. Import from Google Fonts.",
    "aiPromptColors": "Background: #FAFAFA — near-white with a warm gray tint. Not pure white. Surface (cards, containers): #FFFFFF — true white. The only purely white element. "Text": #000000 — pure black. Maximum contrast. No softening. Muted "text": #666666 — medium gray for secondary content. "Accent": #000000 — black IS the accent. Buttons are black. Links are black. In this system, there is no separate accent color. Accent "soft": rgba(0,0,0,0.05) — barely-there hover backgrounds. "Border": #EAEAEA — ultra-light gray. Borders are whisper-thin dividers.",
    "aiPromptShape": "Border-radius: 8px on cards. 6px on buttons and inputs. 12px on modals. Moderate rounding — not sharp, not soft. Just enough. Borders are 1px solid and nearly invisible.",
    "aiPromptDepth": "Shadow: 0 2px 4px rgba(0,0,0,0.05). Almost invisible. Elements are defined by borders more than shadows. This is a flat system that uses spacing and borders for hierarchy instead of depth.",
    "aiPromptRules": "This is radical minimalism. Black, white, and gray only. No accent color, no gradients, no glows, no decorative elements. Every pixel must earn its place. Typography does all the heavy lifting — use size, weight, and spacing to create hierarchy instead of color. Generous whitespace (the empty space IS the design). Hover "states": barely perceptible background shifts. "Transitions": 0.15s ease — fast, crisp, responsive. If something doesn't need to be there, remove it."
  },
  {
    "name": "Hearth",
    "fakeUrl": "hearth.design",
    "vibe": "Friendly by default.",
    "tags": ["light", "warm", "approachable"],
    "headingFont": "Fraunces",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F7F6F3",
    "surfaceHover": "#EFEEEB",
    "border": "#E3E2DE",
    "text": "#37352F",
    "textMuted": "#787774",
    "accent": "#D9730D",
    "accentSoft": "rgba(217,115,13,0.08)",
    "radius": "4px",
    "radiusSm": "3px",
    "radiusXl": "8px",
    "shadow": "0 1px 3px rgba(55,53,47,0.08)",
    "shadowSm": "0 1px 2px rgba(55,53,47,0.04)",
    "shadowStyle": "Paper subtle",
    "gradient": "linear-gradient(135deg, #D9730D 0%, #CB912F 50%, #448361 100%)",
    "aiPromptTypography": "Use Fraunces for all headings. Weight 600. Letter-spacing -0.01em. Fraunces is a soft serif with personality — it feels handmade and warm without being casual. Use Inter for all body text. Weight 400. Line-height 1.7. The familiar sans-serif body keeps things readable. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean white. Surface (cards, containers): #F7F6F3 — warm gray with a beige undertone. Like recycled paper. "Text": #37352F — dark warm brown. Softer than black. Muted "text": #787774 — warm medium gray for secondary content. "Accent": #D9730D — warm orange-brown. Like autumn leaves or a campfire. Friendly, energetic, natural. Accent "soft": rgba(217,115,13,0.08) — soft orange glow for hover states. "Border": #E3E2DE — warm light gray. Blends naturally with the surface.",
    "aiPromptShape": "Border-radius: 4px on cards. 3px on buttons and inputs. 8px on modals. Slightly rounded — functional, not decorative. Borders are 1px solid and subtle.",
    "aiPromptDepth": "Shadow: 0 1px 3px rgba(0,0,0,0.04). Barely there. This is a flat, paper-like system. Depth comes from surface color stacking (white content on warm gray surface on white background), not from shadows.",
    "aiPromptRules": "This is a friendly, approachable, warm aesthetic. Think Notion crossed with a cozy coffee shop. The warm color palette should never feel corporate or cold. Orange accent is friendly and energetic — use it for primary actions, highlights, and inline links. Headings in Fraunces add personality without being distracting. Generous line-height and padding make everything feel breathable. Hover "states": warm up borders, add soft orange tint. "Transitions": 0.2s ease — smooth and calm."
  },
  {
    "name": "Canopy",
    "fakeUrl": "canopy.design",
    "vibe": "Energy from the roots.",
    "tags": ["dark", "developer", "vibrant"],
    "headingFont": "Plus Jakarta Sans",
    "bodyFont": "Plus Jakarta Sans",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#0F1714",
    "surface": "#171F1B",
    "surfaceHover": "#1E2D25",
    "border": "#1E2D25",
    "text": "#EDEDED",
    "textMuted": "#8B9E93",
    "accent": "#3ECF8E",
    "accentSoft": "rgba(62,207,142,0.1)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 0 0 1px rgba(62,207,142,0.1), 0 8px 40px rgba(0,0,0,0.4)",
    "shadowSm": "0 0 0 1px rgba(62,207,142,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #3ECF8E 0%, #2B9F6F 50%, #1A6F4F 100%)",
    "aiPromptTypography": "Use Plus Jakarta Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em on headings. This is a clean, modern geometric sans-serif that feels technical but friendly. Import from Google Fonts.",
    "aiPromptColors": "Background: #0F1714 — very dark green-black. Not pure black — there's a green undertone. Surface (cards, containers): #171F1B — slightly lighter green-black. Creates depth. "Text": #EDEDED — off-white. Clean and readable against the dark green. Muted "text": #8B9D93 — muted green-gray for secondary content. "Accent": #3ECF8E — bright emerald green. The signature color. Vibrant, alive, electric. Accent "soft": rgba(62,207,142,0.1) — soft green glow for hover states and selections. "Border": #243B2E — dark green border. Subtle but present.",
    "aiPromptShape": "Border-radius: 8px on cards. 6px on buttons and inputs. 12px on modals. Moderate rounding that feels modern and clean. Borders are 1px solid.",
    "aiPromptDepth": "Shadow: 0 0 0 1px rgba(62,207,142,0.08), 0 8px 32px rgba(0,0,0,0.3). Dual shadow — a subtle emerald ring glow plus a deep dark drop shadow. Elements should feel like they emit a faint green light.",
    "aiPromptRules": "This is a dark, vibrant, developer-friendly aesthetic. The emerald green should feel electric and alive against the near-black background. Use the green accent for buttons, links, status indicators, and success states. Everything else stays dark and neutral. The green-tinted backgrounds (not pure black) create a cohesive atmosphere — like being inside a forest canopy at night. Hover "states": increase green glow, brighten borders. "Transitions": 0.2s ease. Add subtle radial gradient with accent at 5% opacity behind hero sections for atmosphere."
  },
  {
    "name": "Ember",
    "fakeUrl": "ember.design",
    "vibe": "Warmth that moves",
    "tags": ["dark", "warm", "vibrant"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.03em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1A1A1A",
    "border": "#262626",
    "text": "#EDEDED",
    "textMuted": "#8A8A8A",
    "accent": "#FF6B3D",
    "accentSoft": "rgba(255,107,61,0.1)",
    "radius": "12px",
    "radiusSm": "8px",
    "radiusXl": "16px",
    "shadow": "0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,107,61,0.06)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Warm ambient",
    "gradient": "linear-gradient(135deg, #FF6B3D 0%, #FF3D6B 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.03em on headings — tight and confident. Inter at this weight feels engineered, not generic. The single-font approach keeps everything unified while size and weight create hierarchy. Import from Google Fonts.",
    "aiPromptColors": "Background: #0A0A0A — near-black, pure and neutral. No tint. Surface (cards, containers): #141414 — one step up, just enough to define layers. "Text": #EDEDED — soft white, never harsh. Muted "text": #8A8A8A — neutral gray for secondary content. "Accent": #FF6B3D — warm coral-orange. This is the heartbeat of the system. It radiates energy and warmth without being aggressive. Accent "soft": rgba(255,107,61,0.1) — a warm glow behind hover states and selected elements. "Border": #262626 — barely there, just enough structure.",
    "aiPromptShape": "Border-radius: 12px on cards and containers. 8px on buttons and inputs. 16px on modals. Smooth, modern rounding that feels approachable but not bubbly. Borders are 1px solid and subtle — they define space without drawing attention.",
    "aiPromptDepth": "Shadow: 0 8px 32px rgba(0,0,0,0.4) with a subtle 1px accent ring at 6% opacity. Cards float above the background with depth but stay grounded. Use the coral accent as a radial gradient at 3-5% opacity behind hero sections — it creates a warm ember glow that gives the dark interface life.",
    "aiPromptRules": "This is a dark, warm, energetic aesthetic. The coral-orange accent against near-black creates a firelight effect — intimate and alive. The warmth should feel like Framer's marketing "site": bold without being loud, dark without being cold. Use the accent color for CTAs, links, and highlights — never for large background fills. Hover "states": warm up borders, add accent glow, subtle scale(1.02). "Transitions": 0.2s ease with a confident snap. The gradient (coral to pink) is reserved for hero moments only."
  },
  {
    "name": "Prism",
    "fakeUrl": "prism.design",
    "vibe": "Light through dark glass",
    "tags": ["dark", "vibrant", "developer"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#0D0D0D",
    "surface": "#171717",
    "surfaceHover": "#1F1F1F",
    "border": "#2A2A2A",
    "text": "#F5F5F5",
    "textMuted": "#777777",
    "accent": "#FF6AE8",
    "accentSoft": "rgba(255,106,232,0.1)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 0 0 1px rgba(255,106,232,0.08), 0 12px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Prismatic glow",
    "gradient": "linear-gradient(135deg, #FF6AE8 0%, #7B61FF 50%, #00D1FF 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.03em on headings — extremely tight, dense, powerful. The heavy weight on headings creates visual authority. Inter is the workhorse here — it disappears into the content and lets the color system do the talking. Import from Google Fonts.",
    "aiPromptColors": "Background: #0D0D0D — deep black, the canvas for prismatic color. "Surface": #171717 — subtle lift for card layers. "Text": #F5F5F5 — near-white, crisp and clean. Muted "text": #777777 — medium gray, recedes cleanly. "Accent": #FF6AE8 — hot pink-magenta. Electric, futuristic, impossible to ignore. This is the primary brand color but the gradient system is equally important — elements can shift from pink through purple to cyan. Accent "soft": rgba(255,106,232,0.1) — pink mist for hover states. "Border": #2A2A2A — subtle structure against the black.",
    "aiPromptShape": "Border-radius: 10px on cards. 6px on buttons and inputs. 14px on modals. Clean, modern rounding — not as round as consumer apps, not as sharp as dev tools. Borders are 1px solid and act as containers, not decorations.",
    "aiPromptDepth": "Shadow: dual-layer — a 1px pink ring glow at 8% opacity plus a deep 12px 40px black drop shadow. This creates elements that feel like they're emitting colored light from within. The prismatic gradient (pink → purple → cyan) should appear as a background treatment behind hero sections at 5-8% opacity, creating an aurora-like atmosphere.",
    "aiPromptRules": "This is a dark, prismatic, futuristic aesthetic. The multi-color gradient system is the signature — it should feel like light refracting through dark glass. Use the gradient for hero backgrounds, accent stripes, and special moments. The pink accent is for interactive elements. The gradient is for atmosphere. Don't overuse either — the power comes from contrast against the near-black background. Hover "states": elements gain a colored glow aura. "Transitions": 0.2s ease. Think Raycast's "website": dark, confident, with bursts of iridescent color."
  },
  {
    "name": "Bubble",
    "fakeUrl": "bubble.design",
    "vibe": "Playful by default",
    "tags": ["light", "playful", "bold"],
    "headingFont": "DM Sans",
    "bodyFont": "DM Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F3F0FF",
    "surfaceHover": "#EBE5FF",
    "border": "#E2DEFF",
    "text": "#1A1139",
    "textMuted": "#6E6493",
    "accent": "#6C47FF",
    "accentSoft": "rgba(108,71,255,0.08)",
    "radius": "20px",
    "radiusSm": "12px",
    "radiusXl": "28px",
    "shadow": "0 4px 20px rgba(108,71,255,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 4px rgba(0,0,0,0.04)",
    "shadowStyle": "Tinted soft",
    "gradient": "linear-gradient(135deg, #6C47FF 0%, #D946EF 100%)",
    "aiPromptTypography": "Use DM Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. DM Sans has a geometric warmth that feels modern and approachable — it's serious enough for product UI but friendly enough for a consumer app. The rounded letterforms complement the large border-radius throughout. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean white. "Surface": #F3F0FF — a soft lavender tint. This is the key — the surfaces aren't gray, they're purple-tinted. It makes the whole interface feel alive and playful. "Text": #1A1139 — deep purple-black. Warmer and more interesting than pure black. Muted "text": #6E6493 — soft purple-gray. "Accent": #6C47FF — electric violet. Bold, confident, fun. This isn't corporate purple — it's playground purple. Accent "soft": rgba(108,71,255,0.08) — faint violet mist. "Border": #E2DEFF — lavender borders that blend into the purple-tinted surfaces.",
    "aiPromptShape": "Border-radius: 20px on cards and containers. 12px on buttons and inputs. 28px on modals and large panels. This is a VERY rounded system — the generous radius is a defining feature. Everything should feel like a soft, squeezable bubble. Pill-shaped buttons (border-radius: 999px) are encouraged for CTAs. Borders are 1px solid and tinted purple, not gray.",
    "aiPromptDepth": "Shadow: 0 4px 20px rgba(108,71,255,0.08) — a purple-tinted shadow that reinforces the color theme. No harsh black shadows. Everything floats gently. The tinted shadow is subtle but important — it makes depth feel integrated with the color system rather than bolted on.",
    "aiPromptRules": "This is a light, playful, color-saturated aesthetic. Think Arc "Browser": confident enough to use purple surfaces instead of boring gray, round enough to feel friendly, bold enough to make enterprise software feel fun. Every surface has a subtle color tint. The generous border-radius is non-negotiable — this system has no sharp corners. Hover "states": brighten the purple tint, lift with translateY(-2px), expand the tinted shadow. "Transitions": 0.25s ease with a slight bounce (ease-out). This should feel alive, springy, delightful."
  },
  {
    "name": "Coral",
    "fakeUrl": "coral.design",
    "vibe": "Tools that feel alive",
    "tags": ["light", "bold", "clean"],
    "headingFont": "Manrope",
    "bodyFont": "Manrope",
    "headingWeight": 800,
    "letterSpacing": "-0.03em",
    "bg": "#FFFFFF",
    "surface": "#F5F5F5",
    "surfaceHover": "#EEEEEE",
    "border": "#E5E5E5",
    "text": "#1D1D1D",
    "textMuted": "#999999",
    "accent": "#F24E1E",
    "accentSoft": "rgba(242,78,30,0.08)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.05)",
    "shadowStyle": "Crisp utility",
    "gradient": "linear-gradient(135deg, #F24E1E 0%, #FF7262 50%, #A259FF 100%)",
    "aiPromptTypography": "Use Manrope for ALL text — headings AND body. Weight 800 for headings (extra bold), 400 for body. Letter-spacing -0.03em on headings. Manrope's geometric precision and extreme weight range creates a powerful hierarchy — the 800-weight headings feel like statements, the 400-weight body is clean and effortless. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white. No tint, no warmth, just clean space. "Surface": #F5F5F5 — true neutral gray. No blue, no warm undertone. "Text": #1D1D1D — near-black, high contrast, assertive. Muted "text": #999999 — pure medium gray. "Accent": #F24E1E — Figma's coral-red. Energetic, warm, instantly recognizable. This is a design tool accent — it says \"create.\" Accent "soft": rgba(242,78,30,0.08) — warm glow for selections. "Border": #E5E5E5 — clean, neutral, invisible until you need it.",
    "aiPromptShape": "Border-radius: 8px on cards. 4px on buttons and inputs. 12px on modals. Moderate, functional rounding — tool-like, not decorative. This system is precise. The smaller radii (4px buttons) give interactive elements a crisp, clickable feel. Borders are 1px solid and purely structural.",
    "aiPromptDepth": "Shadow: 0 2px 8px rgba(0,0,0,0.08) with a 1px border ring at 4% opacity. Subtle, functional depth. Cards are slightly elevated but never dramatic. This is a tool aesthetic — shadows communicate hierarchy, not atmosphere. No colored glows, no tinted shadows.",
    "aiPromptRules": "This is a light, tool-grade, high-contrast aesthetic. Clean whites, neutral grays, and a single hot accent that pops. The extreme heading weight (800) paired with tight letter-spacing creates visual impact without color. The coral accent is used sparingly — primary buttons, active states, key highlights. Everything else is monochrome. Think "Figma": the design is invisible until you notice how good it feels. Hover "states": subtle background shift, crisp border appearance. "Transitions": 0.15s ease — fast, responsive, tool-like. No bouncy animations. This is precision."
  },
  {
    "name": "Ultraviolet",
    "fakeUrl": "ultraviolet.design",
    "vibe": "Deploy at midnight",
    "tags": ["dark", "developer", "vibrant"],
    "headingFont": "Satoshi",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0B0014",
    "surface": "#13082A",
    "surfaceHover": "#1A0E36",
    "border": "#2E1A54",
    "text": "#E8E0F5",
    "textMuted": "#8B7AAD",
    "accent": "#C77DFF",
    "accentSoft": "rgba(199,125,255,0.1)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 0 0 1px rgba(199,125,255,0.1), 0 8px 32px rgba(11,0,20,0.6)",
    "shadowSm": "0 2px 8px rgba(11,0,20,0.4)",
    "shadowStyle": "Violet glow",
    "gradient": "linear-gradient(135deg, #C77DFF 0%, #7B2FFF 100%)",
    "aiPromptTypography": "Use a geometric sans-serif like Satoshi or Inter for headings. Weight 700. Letter-spacing -0.02em. The heading font should feel modern and technical without being cold. Use Inter for body text. Weight 400. Line-height 1.7. The pairing keeps everything clean and developer-friendly. Import from Google Fonts.",
    "aiPromptColors": "Background: #0B0014 — near-black with a deep violet undertone. This isn't neutral dark — it's purple-dark. "Surface": #13082A — richer violet-black for card layers. "Text": #E8E0F5 — lavender-white. Softer and more atmospheric than pure white. Muted "text": #8B7AAD — dusty purple-gray. "Accent": #C77DFF — bright lilac-purple. Lighter and more vibrant than corporate purple. It feels electric. Accent "soft": rgba(199,125,255,0.1) — violet mist. "Border": #2E1A54 — visible purple border that reinforces the color story.",
    "aiPromptShape": "Border-radius: 10px on cards. 6px on buttons and inputs. 14px on modals. Clean, modern rounding. Not sharp, not soft — developer-tool appropriate. Borders are 1px solid and use the purple-tinted border color, making edges feel integrated with the overall atmosphere.",
    "aiPromptDepth": "Shadow: dual-layer — a 1px violet ring glow at 10% opacity plus a deep dark drop shadow. Elements emit a faint purple light. The backgrounds are so deeply tinted that the shadows blend into the atmosphere. Use the accent as a radial gradient at 3-5% opacity behind hero sections for a nebula effect.",
    "aiPromptRules": "This is a dark, purple-saturated, developer aesthetic. Every surface is tinted violet — backgrounds, borders, text, shadows. It should feel like a control panel in a spaceship. The purple isn't decorative — it's structural, it IS the palette. Think Railway's deploy dashboard at 2am. The accent lilac is for interactive elements and status indicators. Hover "states": brighten the violet glow, lift cards. "Transitions": 0.2s ease. The gradient (lilac to deep purple) works for hero moments and button fills."
  },
  {
    "name": "Citrus",
    "fakeUrl": "citrus.design",
    "vibe": "Bold and unapologetic",
    "tags": ["light", "bold", "playful"],
    "headingFont": "Plus Jakarta Sans",
    "bodyFont": "Plus Jakarta Sans",
    "headingWeight": 800,
    "letterSpacing": "-0.02em",
    "bg": "#FFFDF5",
    "surface": "#FFFFFF",
    "surfaceHover": "#FFF9E6",
    "border": "#FFE566",
    "text": "#1A1A1A",
    "textMuted": "#666666",
    "accent": "#FFD60A",
    "accentSoft": "rgba(255,214,10,0.15)",
    "radius": "16px",
    "radiusSm": "10px",
    "radiusXl": "24px",
    "shadow": "0 4px 16px rgba(255,214,10,0.1), 0 2px 4px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 3px rgba(0,0,0,0.05)",
    "shadowStyle": "Sunny warmth",
    "gradient": "linear-gradient(135deg, #FFD60A 0%, #FF9500 100%)",
    "aiPromptTypography": "Use Plus Jakarta Sans for ALL text — headings AND body. Weight 800 for headings (extra bold), 400 for body. Letter-spacing -0.02em. Jakarta Sans at 800 weight is thick, geometric, and loud — it demands attention. The body at 400 weight stays clean and readable. This font pairing feels like a brand that isn't afraid to be seen. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFDF5 — warm cream-white with a yellow undertone. NOT pure white — the warmth is subtle but essential. "Surface": #FFFFFF — clean white cards against the warm background create a layered depth. "Text": #1A1A1A — near-black, high contrast against the light background. Muted "text": #666666 — standard gray for secondary content. "Accent": #FFD60A — electric yellow. This is the whole personality. Bold, sunny, impossible to miss. Accent "soft": rgba(255,214,10,0.15) — yellow glow for hover states. "Border": #FFE566 — yellow-tinted borders. In this system, even the borders are on-brand.",
    "aiPromptShape": "Border-radius: 16px on cards. 10px on buttons and inputs. 24px on modals. Generously rounded throughout — this system wants to feel friendly, approachable, and huggable. Pill-shaped buttons (border-radius: 999px) work great here. Borders can be 2px solid for emphasis — the yellow borders are a feature, not just structure.",
    "aiPromptDepth": "Shadow: 0 4px 16px rgba(255,214,10,0.1) — yellow-tinted shadows that glow warm. Cards feel like they're sitting in sunlight. No dark, heavy shadows — this is an optimistic system. Depth is created through color contrast (white cards on cream background) more than shadow.",
    "aiPromptRules": "This is a bright, bold, sunshine aesthetic. The yellow accent is the star — use it confidently on buttons, highlights, and even large background sections. Black text on yellow backgrounds is a power move. This system proves SaaS doesn't need to be boring blue or safe gray. Think Lemon "Squeezy": playful, commercial, and proud of it. Hover "states": brighten the yellow glow, lift with bounce. "Transitions": 0.25s ease-out with energy. Buttons should feel like they want to be clicked. The warm cream background keeps the yellow from being garish — it all lives in the same warm family."
  },
  {
    "name": "Current",
    "fakeUrl": "current.design",
    "vibe": "Trust, engineered",
    "tags": ["light", "clean", "elegant"],
    "headingFont": "GT America",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.025em",
    "bg": "#FAFBFD",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5F7FA",
    "border": "#E1E6EF",
    "text": "#0C1B33",
    "textMuted": "#5A6B85",
    "accent": "#0066FF",
    "accentSoft": "rgba(0,102,255,0.06)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 1px 2px rgba(12,27,51,0.04), 0 4px 16px rgba(12,27,51,0.06)",
    "shadowSm": "0 1px 2px rgba(12,27,51,0.04)",
    "shadowStyle": "Layered precision",
    "gradient": "linear-gradient(135deg, #0066FF 0%, #0099FF 100%)",
    "aiPromptTypography": "Use Inter (or a premium grotesque like GT America if available) for headings. Weight 600 — medium-bold, confident without being aggressive. Letter-spacing -0.025em. Use Inter for body text. Weight 400. Line-height 1.7. This is a professional, trust-building typographic system. Nothing flashy — just extremely well-set text with perfect hierarchy. Import from Google Fonts.",
    "aiPromptColors": "Background: #FAFBFD — cool-tinted near-white. The blue undertone is almost imperceptible but sets a professional, trustworthy tone. "Surface": #FFFFFF — pure white cards for crisp contrast. "Text": #0C1B33 — deep navy-black. Far richer than #000000. This is the color of a banker's suit. Muted "text": #5A6B85 — slate blue-gray. Professional and receding. "Accent": #0066FF — pure, saturated blue. This isn't playful blue — it's institutional blue. The blue of trust, reliability, moving money. Accent "soft": rgba(0,102,255,0.06) — barely-there blue tint. "Border": #E1E6EF — cool gray with a blue kiss.",
    "aiPromptShape": "Border-radius: 10px on cards. 6px on buttons and inputs. 14px on modals. Moderate, polished rounding — professional enough for banking, modern enough for tech. Borders are 1px solid and precise. The cool-tinted borders integrate with the blue palette. Nothing feels out of place.",
    "aiPromptDepth": "Shadow: layered — 0 1px 2px at 4% and 0 4px 16px at 6%. Using navy-black (not pure black) for shadow color. This creates realistic, grounded depth. Cards feel elevated but never floating. The shadow system is about precision, not drama. No glows, no colored shadows.",
    "aiPromptRules": "This is a light, professional, trust-engineered aesthetic. Think Mercury "bank": every pixel says \"your money is safe here.\" The cool blue palette communicates reliability. The navy text communicates authority. The precise shadows communicate attention to detail. Use the blue accent exclusively for primary actions and key data. Never use it decoratively. Generous padding (32px+ inside cards), crisp borders, restrained typography. Hover "states": subtle border color shifts, faint blue tint on backgrounds. "Transitions": 0.15s ease — fast, precise, no flourish. This system earns trust through restraint."
  },
  {
    "name": "Abyss",
    "fakeUrl": "abyss.design",
    "vibe": "Premium darkness",
    "tags": ["dark", "elegant", "minimal"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#050510",
    "surface": "#0C0C1E",
    "surfaceHover": "#12122E",
    "border": "#1C1C3A",
    "text": "#E0E0F0",
    "textMuted": "#6B6B8D",
    "accent": "#6E56CF",
    "accentSoft": "rgba(110,86,207,0.1)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 0 0 1px rgba(110,86,207,0.06), 0 16px 48px rgba(5,5,16,0.6)",
    "shadowSm": "0 2px 8px rgba(5,5,16,0.4)",
    "shadowStyle": "Deep void",
    "gradient": "linear-gradient(135deg, #6E56CF 0%, #9B6DFF 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. The restraint is intentional — when the product costs $30/month, the typography doesn't need to scream. Inter at medium weight is confident, precise, and premium. It says \"this was designed by someone who knows what they're doing.\" Import from Google Fonts.",
    "aiPromptColors": "Background: #050510 — abyssal blue-black. Deeper than pure black. There's a blue shift in the darkness that creates atmosphere. "Surface": #0C0C1E — dark navy-black for card layers. The blue undertone continues through every layer. "Text": #E0E0F0 — cool lavender-white. Not warm, not pure white — slightly blue-shifted to match the atmosphere. Muted "text": #6B6B8D — blue-gray that recedes into the depth. "Accent": #6E56CF — deep, muted purple. NOT vibrant — this is elegant purple, expensive purple. It whispers, it doesn't shout. Accent "soft": rgba(110,86,207,0.1) — purple mist. "Border": #1C1C3A — deep blue border, barely visible.",
    "aiPromptShape": "Border-radius: 8px on cards. 4px on buttons and inputs. 12px on modals. Restrained, precise rounding. This system is elegant, not friendly — the tighter radii create a tool-like precision. Borders are 1px solid and disappear into the dark palette.",
    "aiPromptDepth": "Shadow: 0 16px 48px rgba(5,5,16,0.6) — massive, deep, void-like. Cards feel like they're suspended over an abyss. The 1px accent ring at 6% opacity adds the faintest purple edge. This shadow system creates a feeling of enormous depth — like looking into deep water. The darkness swallows light.",
    "aiPromptRules": "This is a dark, premium, ultra-refined aesthetic. Think "Superhuman": the kind of product that charges $30/month and you don't question it because everything feels worth it. The muted purple accent is never loud. The typography is never bold. The shadows are enormous but the surfaces are minimal. Restraint is the entire philosophy. Every element earns its existence. Hover "states": barely perceptible — a subtle border brightening, a faint purple glow at the edges. "Transitions": 0.2s ease. No bouncing, no spring, no delight. Just precision. The luxury is in the absence of noise."
  },
  {
    "name": "Pulse",
    "fakeUrl": "pulse.design",
    "vibe": "Sound you can see",
    "tags": ["dark", "bold", "vibrant"],
    "headingFont": "Outfit",
    "bodyFont": "Outfit",
    "headingWeight": 800,
    "letterSpacing": "-0.02em",
    "bg": "#121212",
    "surface": "#1A1A1A",
    "surfaceHover": "#242424",
    "border": "#2A2A2A",
    "text": "#FFFFFF",
    "textMuted": "#A7A7A7",
    "accent": "#1DB954",
    "accentSoft": "rgba(29,185,84,0.12)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 4px 24px rgba(0,0,0,0.5)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Heavy dark",
    "gradient": "linear-gradient(135deg, #1DB954 0%, #1ED760 100%)",
    "aiPromptTypography": "Use Outfit for ALL text — headings AND body. Weight 800 for headings, 400 for body. Letter-spacing -0.02em. Outfit is a geometric sans-serif with personality — the 800-weight headings feel massive and confident, like an album title or a billboard. The rounded letterforms match the green-on-black energy. Import from Google Fonts.",
    "aiPromptColors": "Background: #121212 — the signature dark gray. Not pure black. Spotify proved that #121212 is the perfect dark UI color — dark enough to feel immersive, light enough that overlaid surfaces are visible. "Surface": #1A1A1A — one step lighter for cards and containers. "Text": #FFFFFF — pure white. No softening. Against the dark gray, pure white is readable and bold. Muted "text": #A7A7A7 — medium gray for metadata and secondary info. "Accent": #1DB954 — THE green. Bold, saturated, alive. This green on dark gray is one of the most recognizable color pairings in tech. Accent "soft": rgba(29,185,84,0.12) — green glow for selections and hover states. "Border": #2A2A2A — barely visible, just structural.",
    "aiPromptShape": "Border-radius: 8px on cards. 4px on buttons and inputs. 12px on modals. Functional, moderate rounding. Not too soft (this isn't a toy), not too sharp (this isn't a spreadsheet). The radii should feel effortless — you don't notice them, which is the point. Borders are minimal and mostly replaced by shadow and surface color changes.",
    "aiPromptDepth": "Shadow: 0 4px 24px rgba(0,0,0,0.5) — heavy, dark, no frills. No colored shadows, no glows, no accent tinting. The depth system is brutally "simple": dark background, slightly lighter surface, pure black shadows. Hierarchy comes from surface stacking, not shadow complexity.",
    "aiPromptRules": "This is a dark, high-energy, content-first aesthetic. The green accent is used with discipline — primary actions, active states, progress indicators, and key highlights ONLY. It never becomes a background fill. The #121212 → #1A1A1A → #242424 surface stacking is the real design system — learn it, use it, respect it. Everything is content-forward: big bold headings, clear hierarchy, lots of breathing room. Hover "states": surface color shift to next-lighter level, no border changes. "Transitions": 0.15s ease — snappy, responsive. Think "Spotify": a billion users, the design has to work everywhere. No clever tricks. Just clarity."
  },
  {
    "name": "Clover",
    "fakeUrl": "clover.design",
    "vibe": "Commerce feels this good",
    "tags": ["light", "clean", "warm"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#F6F6F1",
    "surface": "#FFFFFF",
    "surfaceHover": "#F2F2EC",
    "border": "#E3E3D8",
    "text": "#1A1C18",
    "textMuted": "#6D6D6D",
    "accent": "#008060",
    "accentSoft": "rgba(0,128,96,0.08)",
    "radius": "12px",
    "radiusSm": "8px",
    "radiusXl": "16px",
    "shadow": "0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 1px rgba(0,0,0,0.04)",
    "shadowStyle": "Grounded natural",
    "gradient": "linear-gradient(135deg, #008060 0%, #00A67E 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. Inter is the chameleon — in this context, paired with warm backgrounds and green accents, it feels professional, approachable, and commerce-ready. The weight hierarchy (700/400) is clear without being dramatic. Import from Google Fonts.",
    "aiPromptColors": "Background: #F6F6F1 — warm off-white with a natural, slightly green-gray undertone. Like unbleached paper. This warmth is subtle but critical — it makes the entire interface feel organic and trustworthy. "Surface": #FFFFFF — clean white cards that pop against the warm background. "Text": #1A1C18 — near-black with a faint green undertone. Warm and natural. Muted "text": #6D6D6D — neutral gray for secondary content. "Accent": #008060 — Shopify green. Deep, rich, natural. This isn't neon — it's forest-floor green. Trustworthy, commercial, alive. Accent "soft": rgba(0,128,96,0.08) — soft green for hover and selected states. "Border": #E3E3D8 — warm gray that matches the background's undertone.",
    "aiPromptShape": "Border-radius: 12px on cards. 8px on buttons and inputs. 16px on modals. Comfortably rounded — friendly enough for small business owners, professional enough for enterprise. Borders are 1px solid, warm-tinted, and feel natural against the organic background.",
    "aiPromptDepth": "Shadow: layered — 0 1px 2px at 6% and 0 2px 8px at 4%. Subtle, grounded, natural. Cards sit on the surface like physical objects under soft overhead lighting. No dramatic depth, no colored shadows. The warmth of the background does more for atmosphere than any shadow could.",
    "aiPromptRules": "This is a light, warm, commerce-optimized aesthetic. Think Shopify's admin and marketing "site": it makes complex tools feel simple, professional features feel accessible, and money-related actions feel safe. The warm off-white background is the secret weapon — it turns a generic SaaS interface into something that feels organic and trustworthy. The deep green accent is for buttons, success states, and calls-to-action. It pairs perfectly with the warm neutrals. Hover "states": gentle border warming, subtle green tint on backgrounds. "Transitions": 0.2s ease — smooth and reassuring. This system builds confidence. Every pixel says \"this is going to work.\""
  },
  {
    "name": "Dune",
    "fakeUrl": "dune.design",
    "vibe": "Sand under golden light",
    "tags": ["light", "warm", "elegant"],
    "headingFont": "DM Serif Display",
    "bodyFont": "DM Sans",
    "headingWeight": 400,
    "letterSpacing": "-0.01em",
    "bg": "#F5EFE6",
    "surface": "#FFFDF8",
    "surfaceHover": "#F0E9DE",
    "border": "#DDD4C4",
    "text": "#2C2416",
    "textMuted": "#8A7D6B",
    "accent": "#C4621A",
    "accentSoft": "rgba(196,98,26,0.08)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 2px 8px rgba(44,36,22,0.06), 0 1px 2px rgba(44,36,22,0.04)",
    "shadowSm": "0 1px 2px rgba(44,36,22,0.04)",
    "shadowStyle": "Warm paper",
    "gradient": "linear-gradient(135deg, #C4621A 0%, #D4863A 100%)",
    "aiPromptTypography": "Use DM Serif Display for headings — weight 400 only (it's a single-weight font). The high-contrast serif strokes evoke letterpress printing and old-world craftsmanship. Use DM Sans for body text at weight 400. Line-height 1.7. The serif/sans pairing creates a classic editorial hierarchy — the serif commands attention, the sans disappears into reading. Import both from Google Fonts.",
    "aiPromptColors": "Background: #F5EFE6 — warm sand. Like aged linen or unbleached cotton. This isn't white pretending to be warm — it IS warm. "Surface": #FFFDF8 — barely-off-white cards that feel like thick paper stock against the sand background. "Text": #2C2416 — deep brown-black. Warmer than any neutral gray. It looks like walnut ink. Muted "text": #8A7D6B — dusty brown-gray, like dried clay. "Accent": #C4621A — burnt sienna. Rich, warm, organic. Accent "soft": rgba(196,98,26,0.08) — a terracotta whisper. "Border": #DDD4C4 — warm tan, sand-toned.",
    "aiPromptShape": "Border-radius: 6px on cards. 4px on buttons and inputs. 10px on modals. Moderate, understated rounding — elegant but not soft. This system has the restraint of a high-end stationery brand. Borders are 1px solid and warm-toned.",
    "aiPromptDepth": "Shadow: 0 2px 8px rgba(44,36,22,0.06) — warm brown shadow, not black. Cards feel like they're sitting on a wooden desk under afternoon light. No cold shadows anywhere. The depth is gentle, grounded, and natural.",
    "aiPromptRules": "This is a warm, editorial, artisan aesthetic. The serif headings are the star — let them breathe with generous margins. The burnt sienna accent is for important moments "only": links, CTAs, pull quotes. Hover "states": warm the border, shift the background toward sand. "Transitions": 0.25s ease — slow, deliberate, unhurried. This system doesn't rush."
  },
  {
    "name": "Venus",
    "fakeUrl": "venus.design",
    "vibe": "Neon after midnight",
    "tags": ["dark", "neon", "bold"],
    "headingFont": "Space Grotesk",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#09090B",
    "surface": "#131316",
    "surfaceHover": "#1C1C22",
    "border": "#27272F",
    "text": "#F4F4F5",
    "textMuted": "#71717A",
    "accent": "#F213A4",
    "accentSoft": "rgba(242,19,164,0.12)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "14px",
    "shadow": "0 0 0 1px rgba(242,19,164,0.15), 0 8px 32px rgba(0,0,0,0.5)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.4)",
    "shadowStyle": "Neon ring",
    "gradient": "linear-gradient(135deg, #F213A4 0%, #7928CA 100%)",
    "aiPromptTypography": "Use Space Grotesk for headings. Weight 700. Letter-spacing -0.03em. Space Grotesk has that geometric, retro-futuristic character — the letterforms feel like they belong on a spaceship control panel. Use Inter for body text. Weight 400. The contrast between the quirky heading font and the neutral body creates interest without chaos. Import from Google Fonts.",
    "aiPromptColors": "Background: #09090B — zinc-black. Near-pure black with the faintest cool undertone. "Surface": #131316 — one shade up, just enough for card definition. "Text": #F4F4F5 — zinc-50 white. Clean, crisp, high contrast. Muted "text": #71717A — zinc-500 gray. "Accent": #F213A4 — screaming hot pink. This is the heartbeat of the entire system. Against near-black, it glows like a neon sign. Accent "soft": rgba(242,19,164,0.12) — pink mist. "Border": #27272F — zinc-800.",
    "aiPromptShape": "Border-radius: 8px on cards. 4px on buttons and inputs. 14px on modals. Clean and modern — tight enough to feel technical but rounded enough to feel approachable. Borders are 1px solid and dark.",
    "aiPromptDepth": "Shadow: dual-layer — a 1px neon pink ring at 15% opacity plus a heavy black drop shadow. Elements look like they're lit from within by a pink LED strip. Use the hot pink as a radial gradient at 5% opacity behind hero sections for an atmospheric neon wash.",
    "aiPromptRules": "This is a dark, cyberpunk, high-energy aesthetic. The hot pink against near-black creates a nightclub atmosphere. The gradient (pink to purple) is the hero treatment — use it for primary buttons and hero backgrounds only. Hover "states": elements gain a pink glow border, subtle scale(1.02). "Transitions": 0.15s ease — fast and snappy. This system is for products that want to feel cutting-edge and rebellious."
  },
  {
    "name": "Moss",
    "fakeUrl": "moss.design",
    "vibe": "Quiet growth",
    "tags": ["light", "warm", "clean"],
    "headingFont": "Nunito Sans",
    "bodyFont": "Nunito Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.015em",
    "bg": "#F2F5F0",
    "surface": "#FFFFFF",
    "surfaceHover": "#EEF2EB",
    "border": "#D5DDD0",
    "text": "#1B2E1B",
    "textMuted": "#5E7A5E",
    "accent": "#3D7C3F",
    "accentSoft": "rgba(61,124,63,0.08)",
    "radius": "14px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 2px 8px rgba(27,46,27,0.05), 0 1px 2px rgba(27,46,27,0.03)",
    "shadowSm": "0 1px 2px rgba(27,46,27,0.03)",
    "shadowStyle": "Forest floor",
    "gradient": "linear-gradient(135deg, #3D7C3F 0%, #5BA05D 100%)",
    "aiPromptTypography": "Use Nunito Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.015em. Nunito Sans has rounded terminals and generous proportions that feel organic and human. It's the typographic equivalent of a farmers market sign — friendly but not childish. Import from Google Fonts.",
    "aiPromptColors": "Background: #F2F5F0 — sage-tinted off-white. Like morning fog over a meadow. The green undertone shifts the entire palette into nature. "Surface": #FFFFFF — clean white cards that breathe against the green-gray background. "Text": #1B2E1B — deep forest green-black. This is not neutral gray — it's GREEN-black, harmonizing the entire system. Muted "text": #5E7A5E — soft sage. "Accent": #3D7C3F — true forest green. Not emerald, not lime — FOREST. Deep, natural, alive. Accent "soft": rgba(61,124,63,0.08) — green mist. "Border": #D5DDD0 — sage-gray.",
    "aiPromptShape": "Border-radius: 14px on cards. 8px on buttons and inputs. 20px on modals. Generous, organic rounding — everything feels like a pebble or a leaf. Nature doesn't have sharp corners. Borders are 1px solid and green-tinted.",
    "aiPromptDepth": "Shadow: 0 2px 8px rgba(27,46,27,0.05) — green-tinted shadow, not black. Cards rest on the surface like leaves on water — gently, with barely any depth. The atmosphere comes from the color system, not the shadows.",
    "aiPromptRules": "This is a light, organic, nature-inspired aesthetic. Everything is green-tinted — backgrounds, text, borders, shadows. The forest green accent is for growth-related "actions": submit, confirm, publish. Hover "states": deepen the green tint, soften the border. "Transitions": 0.3s ease — slow, natural, like something growing. This system breathes."
  },
  {
    "name": "Signal",
    "fakeUrl": "signal.design",
    "vibe": "Danger looks this good",
    "tags": ["dark", "bold", "brutalist"],
    "headingFont": "Space Grotesk",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1E1E1E",
    "border": "#2A2A2A",
    "text": "#F5F5F5",
    "textMuted": "#737373",
    "accent": "#FACC15",
    "accentSoft": "rgba(250,204,21,0.1)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 0 0 1px #2A2A2A, 0 4px 12px rgba(0,0,0,0.5)",
    "shadowSm": "0 1px 3px rgba(0,0,0,0.4)",
    "shadowStyle": "Hard industrial",
    "gradient": "linear-gradient(135deg, #FACC15 0%, #EAB308 100%)",
    "aiPromptTypography": "Use Space Grotesk for headings. Weight 700. Letter-spacing -0.02em. The geometric quirks of Space Grotesk give the industrial palette personality — without it, black and yellow would feel like a construction sign. Use Inter for body text. Weight 400. Import from Google Fonts.",
    "aiPromptColors": "Background: #0A0A0A — near-black. The darkest canvas for maximum contrast. "Surface": #141414 — barely lighter, defining card boundaries. "Text": #F5F5F5 — near-white, high contrast. Muted "text": #737373 — neutral gray. "Accent": #FACC15 — electric yellow. Caution tape yellow. It DEMANDS attention on the black background. One of the highest-contrast accent pairings possible. Accent "soft": rgba(250,204,21,0.1) — golden glow. "Border": #2A2A2A — barely visible structure.",
    "aiPromptShape": "Border-radius: 4px on cards. 2px on buttons and inputs. 8px on modals. Tight, industrial rounding — almost sharp. This system is a machine, not a toy. The small radii create a utilitarian, tool-like feel.",
    "aiPromptDepth": "Shadow: border-ring (1px solid #2A2A2A) plus a 4px 12px drop shadow. Functional, not decorative. The depth system communicates layer hierarchy, not atmosphere. No colored glows, no accent in shadows.",
    "aiPromptRules": "This is a dark, high-contrast, industrial aesthetic. Black and yellow is the color language of warnings and heavy machinery — it implies power and consequence. Use yellow for PRIMARY ACTIONS ONLY. Black text on yellow buttons creates maximum clickability. Hover "states": yellow brightens, border appears. "Transitions": 0.1s ease — instant, mechanical."
  },
  {
    "name": "Petal",
    "fakeUrl": "petal.design",
    "vibe": "Software for humans",
    "tags": ["light", "playful", "elegant"],
    "headingFont": "Plus Jakarta Sans",
    "bodyFont": "Plus Jakarta Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FEFCFB",
    "surface": "#FFFFFF",
    "surfaceHover": "#FFF5F2",
    "border": "#F5E6E0",
    "text": "#2D1F1A",
    "textMuted": "#9B8580",
    "accent": "#E8674A",
    "accentSoft": "rgba(232,103,74,0.08)",
    "radius": "16px",
    "radiusSm": "10px",
    "radiusXl": "24px",
    "shadow": "0 4px 16px rgba(45,31,26,0.05), 0 1px 3px rgba(45,31,26,0.03)",
    "shadowSm": "0 1px 3px rgba(45,31,26,0.03)",
    "shadowStyle": "Soft bloom",
    "gradient": "linear-gradient(135deg, #E8674A 0%, #F09080 100%)",
    "aiPromptTypography": "Use Plus Jakarta Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. Jakarta Sans is geometric but warm — the rounded characters feel like they're smiling at you. At 700 weight the headings are bold but never aggressive. This font says \"we made this for real people.\" Import from Google Fonts.",
    "aiPromptColors": "Background: #FEFCFB — the warmest possible near-white. There's a blush-pink tint so subtle you'd only notice it if you put pure white next to it. "Surface": #FFFFFF — pure white cards with soft warm borders. "Text": #2D1F1A — deep warm brown. Not black, not gray — brown. Like coffee or dark chocolate. Muted "text": #9B8580 — dusty rose-brown. "Accent": #E8674A — soft coral-red. Warm, inviting, energetic without being aggressive. The color of a sunset reflected in clay. Accent "soft": rgba(232,103,74,0.08) — a peach whisper. "Border": #F5E6E0 — blush-tan.",
    "aiPromptShape": "Border-radius: 16px on cards. 10px on buttons and inputs. 24px on modals. Very generous rounding — everything feels pillowy and approachable. Pill-shaped buttons (border-radius: 999px) encouraged for CTAs. Borders are 1px solid and barely-there warm tones.",
    "aiPromptDepth": "Shadow: 0 4px 16px rgba(45,31,26,0.05) — warm brown-tinted shadow. So subtle you feel it more than see it. Cards float just barely above the surface. The entire depth system is gentle.",
    "aiPromptRules": "This is a light, warm, consumer-friendly aesthetic. The coral accent is warm and approachable — use it for primary actions, hearts, and positive confirmations. Never use harsh reds or cold blues. Hover "states": blush the background, lift with translateY(-1px). "Transitions": 0.3s ease-out with a slight bounce — springy, alive, delightful."
  },
  {
    "name": "Fathom",
    "fakeUrl": "fathom.design",
    "vibe": "Depth you can feel",
    "tags": ["dark", "elegant", "cool"],
    "headingFont": "Manrope",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.025em",
    "bg": "#0A1628",
    "surface": "#111F36",
    "surfaceHover": "#182A45",
    "border": "#1E3455",
    "text": "#E2EAF4",
    "textMuted": "#7A92B0",
    "accent": "#38A2FF",
    "accentSoft": "rgba(56,162,255,0.1)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 8px 32px rgba(10,22,40,0.5), 0 0 0 1px rgba(56,162,255,0.06)",
    "shadowSm": "0 2px 8px rgba(10,22,40,0.4)",
    "shadowStyle": "Ocean depth",
    "gradient": "linear-gradient(135deg, #38A2FF 0%, #0070E0 100%)",
    "aiPromptTypography": "Use Manrope for headings. Weight 700. Letter-spacing -0.025em. Manrope is geometric with enough personality to feel premium — the slightly condensed proportions create a modern, confident presence. Use Inter for body text. Weight 400. Line-height 1.7. Import from Google Fonts.",
    "aiPromptColors": "Background: #0A1628 — deep ocean navy. Not neutral dark — BLUE dark. Like looking into deep water at night. "Surface": #111F36 — one layer up, still deeply blue. Every surface lives in the blue spectrum. "Text": #E2EAF4 — blue-tinted white, like moonlight on water. Muted "text": #7A92B0 — steel blue-gray. "Accent": #38A2FF — bright ocean blue. Clear, trustworthy, alive. Against the deep navy, it reads as a beacon. Accent "soft": rgba(56,162,255,0.1) — blue underwater glow. "Border": #1E3455 — deep blue borders.",
    "aiPromptShape": "Border-radius: 10px on cards. 6px on buttons and inputs. 14px on modals. Smooth, modern rounding. The shapes feel fluid, like water-smoothed stones. Borders are 1px solid and use the deep blue border color.",
    "aiPromptDepth": "Shadow: 0 8px 32px rgba(10,22,40,0.5) with a faint 1px blue accent ring. Cards feel submerged — like looking through layers of deep water. Use the accent blue as a radial gradient at 3% opacity behind hero sections for an underwater bioluminescence effect.",
    "aiPromptRules": "This is a dark, immersive, deep-blue aesthetic. Every pixel is tinted navy. It should feel like diving into the ocean — the deeper you scroll, the more absorbed you become. The bright blue accent is a lifeline — use it for navigation, active states, and primary actions. Never warm tones. Hover "states": brighten the blue tint, add a faint accent glow. "Transitions": 0.2s ease — smooth like a current."
  },
  {
    "name": "Bronze",
    "fakeUrl": "bronze.design",
    "vibe": "Forged in fire",
    "tags": ["dark", "warm", "elegant"],
    "headingFont": "DM Serif Display",
    "bodyFont": "Inter",
    "headingWeight": 400,
    "letterSpacing": "0em",
    "bg": "#12100E",
    "surface": "#1C1916",
    "surfaceHover": "#252220",
    "border": "#352F28",
    "text": "#E8E0D4",
    "textMuted": "#8A8074",
    "accent": "#C8956C",
    "accentSoft": "rgba(200,149,108,0.1)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 8px 32px rgba(18,16,14,0.5), 0 0 0 1px rgba(200,149,108,0.08)",
    "shadowSm": "0 2px 8px rgba(18,16,14,0.4)",
    "shadowStyle": "Warm forge",
    "gradient": "linear-gradient(135deg, #C8956C 0%, #A0714A 100%)",
    "aiPromptTypography": "Use DM Serif Display for headings. Weight 400 (single weight). The high-contrast serifs feel like engraved metal or luxury packaging — they belong on a whiskey label or a private banking interface. Use Inter for body text. Weight 400. The serif/sans pairing creates old-meets-new tension. Import from Google Fonts.",
    "aiPromptColors": "Background: #12100E — near-black with a warm amber undertone. Like the inside of a jewelry box. "Surface": #1C1916 — warm dark brown-black. Cards feel like dark leather. "Text": #E8E0D4 — warm cream-white. Muted "text": #8A8074 — warm stone gray. "Accent": #C8956C — brushed bronze. Not gold (too flashy), not brown (too dull). Bronze is warm, rich, and earned. It says old money. Accent "soft": rgba(200,149,108,0.1) — bronze mist. "Border": #352F28 — dark warm brown.",
    "aiPromptShape": "Border-radius: 6px on cards. 4px on buttons and inputs. 10px on modals. Restrained, refined rounding. Luxury doesn't need to be soft — it needs to be precise. The tight radii feel like machined metal edges.",
    "aiPromptDepth": "Shadow: 0 8px 32px with warm dark shadows plus a 1px bronze ring at 8% opacity. Cards feel like they're sitting on dark marble lit by candlelight. The bronze ring adds a faint metallic edge to elevated elements.",
    "aiPromptRules": "This is a dark, warm, luxury aesthetic. Think private members' clubs, premium spirits, high-end financial products. The bronze accent is never used in large fills — it's a highlight, an edge, a glint. The serif headings command respect. Hover "states": bronze border appears, background warms slightly. "Transitions": 0.25s ease — measured, confident. This system whispers wealth."
  },
  {
    "name": "Gazette",
    "fakeUrl": "gazette.design",
    "vibe": "Headlines that matter",
    "tags": ["light", "editorial", "bold"],
    "headingFont": "Playfair Display",
    "bodyFont": "Source Sans 3",
    "headingWeight": 900,
    "letterSpacing": "-0.02em",
    "bg": "#FAF8F5",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5F2EE",
    "border": "#D6D0C8",
    "text": "#1A1A1A",
    "textMuted": "#6E6E6E",
    "accent": "#B22234",
    "accentSoft": "rgba(178,34,52,0.06)",
    "radius": "2px",
    "radiusSm": "1px",
    "radiusXl": "4px",
    "shadow": "0 1px 3px rgba(0,0,0,0.06)",
    "shadowSm": "0 1px 1px rgba(0,0,0,0.04)",
    "shadowStyle": "Newsprint",
    "gradient": "linear-gradient(135deg, #B22234 0%, #D4394B 100%)",
    "aiPromptTypography": "Use Playfair Display for headings. Weight 900 (black). Letter-spacing -0.02em. At black weight, Playfair's high-contrast serifs become dramatic — thick strokes command the page like broadsheet headlines. Use Source Sans 3 for body text. Weight 400. Line-height 1.75. The contrast between the opulent serif and the utilitarian sans is classic newspaper DNA. Import from Google Fonts.",
    "aiPromptColors": "Background: #FAF8F5 — warm newsprint off-white. Slightly yellowed, like quality paper. "Surface": #FFFFFF — clean white for article cards. "Text": #1A1A1A — near-black, dense, serious. Newspaper text is never gray — it's ink-black for authority. Muted "text": #6E6E6E — secondary info, bylines, dates. "Accent": #B22234 — deep editorial red. The red of breaking news banners, of The Economist. Muted, serious, institutional. Accent "soft": rgba(178,34,52,0.06). "Border": #D6D0C8 — warm gray column rules.",
    "aiPromptShape": "Border-radius: 2px on cards. 1px on buttons. 4px on modals. Near-sharp everywhere. Newspapers don't have rounded corners. The tight radius is a nod to the printed page. Use horizontal rules (1px borders) to separate sections like column lines.",
    "aiPromptDepth": "Shadow: 0 1px 3px rgba(0,0,0,0.06) — barely there. This system is FLAT by design. Depth comes from typographic hierarchy, not spatial layers. Bold headlines create depth through scale.",
    "aiPromptRules": "This is a light, editorial, high-authority aesthetic. Playfair at weight 900 is the entire personality — it makes any content feel important. The red accent is ONLY for breaking/important indicators. Content is king — margins are wide (60-80ch line length), line-height generous, images large. Hover "states": subtle underline animations on links. "Transitions": 0.15s ease. This system respects the reader."
  },
  {
    "name": "Hologram",
    "fakeUrl": "hologram.design",
    "vibe": "Future rendered now",
    "tags": ["dark", "vibrant", "playful"],
    "headingFont": "Outfit",
    "bodyFont": "Inter",
    "headingWeight": 800,
    "letterSpacing": "-0.03em",
    "bg": "#0C0B12",
    "surface": "#16141F",
    "surfaceHover": "#1F1D2B",
    "border": "#2A2838",
    "text": "#F0EFF5",
    "textMuted": "#7E7C8E",
    "accent": "#A855F7",
    "accentSoft": "rgba(168,85,247,0.1)",
    "radius": "14px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 0 0 1px rgba(168,85,247,0.08), 0 12px 40px rgba(12,11,18,0.6)",
    "shadowSm": "0 4px 12px rgba(12,11,18,0.4)",
    "shadowStyle": "Prismatic haze",
    "gradient": "linear-gradient(135deg, #A855F7 0%, #EC4899 50%, #F97316 100%)",
    "aiPromptTypography": "Use Outfit for headings. Weight 800. Letter-spacing -0.03em. Outfit at extreme weight is geometric, modern, and punchy — it holds its own against the intense gradient system. Use Inter for body text. Weight 400. The neutral body prevents the aesthetic from becoming overwhelming. Import from Google Fonts.",
    "aiPromptColors": "Background: #0C0B12 — deep violet-black. The purple undertone ties the dark surfaces to the gradient accent system. "Surface": #16141F — violet-tinted dark for cards. "Text": #F0EFF5 — cool lavender-white. Muted "text": #7E7C8E — purple-gray. "Accent": #A855F7 — bright purple, the anchor of a multi-color gradient system. The REAL accent is the "gradient": purple → pink → orange. This iridescent shift is the entire brand. Accent "soft": rgba(168,85,247,0.1). "Border": #2A2838 — dark purple-gray.",
    "aiPromptShape": "Border-radius: 14px on cards. 8px on buttons and inputs. 20px on modals. Generous rounding that complements the flowing gradients — hard corners would fight the organic color movement.",
    "aiPromptDepth": "Shadow: 12px 40px deep dark shadow with a faint 1px purple ring. Use the purple-pink-orange gradient as a background treatment at 5-8% opacity behind hero sections. Apply backdrop-filter: blur(40px) on surfaces over the gradient for a frosted glass effect.",
    "aiPromptRules": "This is a dark, gradient-heavy, futuristic aesthetic. The multi-color gradient (purple → pink → orange) is the star — use it for hero backgrounds, text gradients on headlines, and CTA buttons. But NEVER on more than one element per viewport. The gradient is a spotlight, not a flood. Hover "states": elements gain a faint gradient border. "Transitions": 0.2s ease. Think holographic credit cards — the color shifts as you move."
  },
  {
    "name": "Remedy",
    "fakeUrl": "remedy.design",
    "vibe": "Care in every pixel",
    "tags": ["light", "clean", "minimal"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.015em",
    "bg": "#F7FAFB",
    "surface": "#FFFFFF",
    "surfaceHover": "#F0F7F7",
    "border": "#D8E8E8",
    "text": "#0F2830",
    "textMuted": "#5B7A7F",
    "accent": "#0891B2",
    "accentSoft": "rgba(8,145,178,0.06)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 1px 3px rgba(15,40,48,0.04), 0 4px 16px rgba(15,40,48,0.03)",
    "shadowSm": "0 1px 2px rgba(15,40,48,0.03)",
    "shadowStyle": "Clinical soft",
    "gradient": "linear-gradient(135deg, #0891B2 0%, #06B6D4 100%)",
    "aiPromptTypography": "Use Inter for ALL text. Weight 600 for headings (semibold, not bold), 400 for body. Letter-spacing -0.015em. Inter at moderate weights communicates competence without aggression — essential for healthcare. Line-height 1.75 for body text — generous, easy to scan. Import from Google Fonts.",
    "aiPromptColors": "Background: #F7FAFB — cool teal-tinted near-white. Like scrubbed tile or clean linen. "Surface": #FFFFFF — pure white for maximum clarity. "Text": #0F2830 — deep teal-black. Authoritative without being intimidating. Muted "text": #5B7A7F — teal-gray. "Accent": #0891B2 — clean teal/cyan. Not blue (too corporate), not green (too environmental) — teal sits between, suggesting expertise and care. Accent "soft": rgba(8,145,178,0.06). "Border": #D8E8E8 — cool teal-gray.",
    "aiPromptShape": "Border-radius: 10px on cards. 6px on buttons and inputs. 14px on modals. Clean, professional rounding. Accessible without being childish. Borders are 1px solid and teal-tinted.",
    "aiPromptDepth": "Shadow: dual-layer, extremely subtle. Using teal-black for shadow color. The depth system is restrained — cards barely float. Too much depth feels dramatic; healthcare design should feel calm and grounded.",
    "aiPromptRules": "This is a light, clinical, trust-focused aesthetic. Every design decision should reduce anxiety. The teal accent is calming and professional. Success states use green, warning uses amber, error uses soft red — never harsh. Typography is clear and scannable. Hover "states": faint teal tint, subtle border shift. "Transitions": 0.2s ease — smooth, predictable. Accessibility is non-negotiable: 4.5:1 contrast minimum."
  },
  {
    "name": "Pavilion",
    "fakeUrl": "pavilion.design",
    "vibe": "Geometry is luxury",
    "tags": ["light", "elegant", "bold"],
    "headingFont": "Josefin Sans",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "0.04em",
    "bg": "#FDFCFA",
    "surface": "#FFFFFF",
    "surfaceHover": "#F8F6F2",
    "border": "#D4CCBC",
    "text": "#1A1814",
    "textMuted": "#7A7468",
    "accent": "#1A1814",
    "accentSoft": "rgba(26,24,20,0.06)",
    "radius": "0px",
    "radiusSm": "0px",
    "radiusXl": "0px",
    "shadow": "0 2px 12px rgba(26,24,20,0.06)",
    "shadowSm": "0 1px 3px rgba(26,24,20,0.04)",
    "shadowStyle": "Deco crisp",
    "gradient": "linear-gradient(135deg, #1A1814 0%, #3D3830 100%)",
    "aiPromptTypography": "Use Josefin Sans for headings. Weight 700. Letter-spacing 0.04em — POSITIVE tracking. While every other seed uses tight tracking, Pavilion uses WIDE tracking. Josefin Sans with generous letter-spacing evokes Art Deco hotel lobbies, high-fashion magazines, and 1920s geometric elegance. The thin, elegant uppercase letterforms with wide spacing create unmistakable luxury. Use Inter for body text. Weight 400. Import from Google Fonts.",
    "aiPromptColors": "Background: #FDFCFA — warm cream-white, like heavy stock paper. "Surface": #FFFFFF — crisp white cards. "Text": #1A1814 — warm near-black, almost espresso. Muted "text": #7A7468 — warm stone gray. "Accent": #1A1814 — the text color IS the accent. In this system, black is the luxury. There's no bright color — refinement is monochrome. Accent "soft": rgba(26,24,20,0.06). "Border": #D4CCBC — warm gold-gray, like antique brass tarnish.",
    "aiPromptShape": "Border-radius: 0px on EVERYTHING. Sharp corners are the signature. Art Deco is geometric — circles, triangles, and hard lines. No rounding. Borders are 1px solid and can be decorative — double borders, geometric frames, and thin gold-toned rules are encouraged.",
    "aiPromptDepth": "Shadow: 0 2px 12px rgba(26,24,20,0.06) — whisper-light, warm. Depth comes from geometric "layering": overlapping shapes, thin lines that define planes, and the contrast between cream background and white surfaces. No heavy shadows.",
    "aiPromptRules": "This is a light, Art Deco, geometric luxury aesthetic. UPPERCASE headings with wide tracking are the signature. Thin horizontal rules (1px) divide sections. Geometric shapes (chevrons, diamonds) can accent the layout. The monochrome palette means texture and typography do all the work. Hover "states": thin border appears, subtle warm shift. "Transitions": 0.3s ease — slow and stately. Think The Great Gatsby meets Swiss minimalism."
  },
  {
    "name": "Retro",
    "fakeUrl": "retro.design",
    "vibe": "The future we imagined",
    "tags": ["dark", "warm", "developer"],
    "headingFont": "IBM Plex Mono",
    "bodyFont": "IBM Plex Sans",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#1C1917",
    "surface": "#292524",
    "surfaceHover": "#3A3533",
    "border": "#44403C",
    "text": "#FAFAF9",
    "textMuted": "#A8A29E",
    "accent": "#FB923C",
    "accentSoft": "rgba(251,146,60,0.1)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 4px 12px rgba(28,25,23,0.4), 0 0 0 1px rgba(68,64,60,0.5)",
    "shadowSm": "0 2px 4px rgba(28,25,23,0.3)",
    "shadowStyle": "Warm terminal",
    "gradient": "linear-gradient(135deg, #FB923C 0%, #F97316 100%)",
    "aiPromptTypography": "Use IBM Plex Mono for headings. Weight 600. Letter-spacing -0.01em. IBM Plex Mono evokes the golden age of computing — mainframes, punch cards, green phosphor screens — but modernized. The monospace headings make everything feel like a control panel readout. Use IBM Plex Sans for body text. Weight 400. The Plex family pairing keeps everything in the IBM design DNA. Import from Google Fonts.",
    "aiPromptColors": "Background: #1C1917 — stone-900. Warm, dark, like aged wood or dark leather. Not cold, not blue — WARM dark. "Surface": #292524 — stone-800. Cards feel like hardware panels. "Text": #FAFAF9 — stone-50, warm white. Muted "text": #A8A29E — stone-400, warm gray. "Accent": #FB923C — warm orange. Like amber indicator lights on vintage hardware. Against the warm darks it creates a retro-computing atmosphere — vacuum tubes, old status LEDs. Accent "soft": rgba(251,146,60,0.1) — amber mist. "Border": #44403C — stone-700, visible and structural.",
    "aiPromptShape": "Border-radius: 4px on cards. 2px on buttons and inputs. 8px on modals. Tight, functional rounding. Hardware doesn't have generous curves — it has precise, machined edges. The small radii create a technical, retro-industrial feel. Borders are 1px solid and clearly visible.",
    "aiPromptDepth": "Shadow: 0 4px 12px warm dark shadow with a 1px border ring. Elements feel like physical hardware buttons or display panels — raised and tactile. The warm shadow color maintains the cozy atmosphere. No neon glows — depth is physical, not emissive.",
    "aiPromptRules": "This is a dark, warm, retro-computing aesthetic. Think 1970s IBM terminals redesigned today. The monospace headings create the entire character. The amber orange is for active states and primary actions — like lit-up buttons on vintage hardware. Use visible borders and grid lines. Hover "states": border brightens, background warms. "Transitions": 0.15s ease — responsive, mechanical. This system respects its engineering heritage."
  },
  {
    "name": "Amethyst",
    "fakeUrl": "amethyst.design",
    "vibe": "Royal confidence in quiet rooms",
    "tags": ["light", "clean", "elegant"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.03em",
    "bg": "#F8F7F6",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5F3F8",
    "border": "#E8E5ED",
    "text": "#1A0A2E",
    "textMuted": "#6B6180",
    "accent": "#635BFF",
    "accentSoft": "rgba(99,91,255,0.08)",
    "radius": "12px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 2px 8px rgba(99,91,255,0.06), 0 1px 2px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 3px rgba(0,0,0,0.04)",
    "shadowStyle": "Soft violet lift",
    "gradient": "linear-gradient(135deg, #635BFF 0%, #8B83FF 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.03em on headings gives them a tight, premium feel. This is the Stripe "aesthetic": Inter at this weight feels like money — precise, trustworthy, and quietly powerful. The type does the heavy lifting while everything else stays minimal. Import from Google Fonts.",
    "aiPromptColors": "Background: #F8F7F6 — warm off-white with a barely-there lavender undertone. Not sterile, not cold. "Surface": #FFFFFF — pure white cards that create clean separation from the warm background. "Text": #1A0A2E — deep purple-black, not true black. This subtle purple tint ties the text to the accent and creates a cohesive color story. Muted "text": #6B6180 — dusty purple-gray for secondary content. "Accent": #635BFF — the iconic indigo-violet. Confident, modern, and instantly recognizable as a premium product. Accent "soft": rgba(99,91,255,0.08) — a whisper of violet for hover states and selected elements. "Border": #E8E5ED — light purple-gray that feels intentional, not default.",
    "aiPromptShape": "Border-radius: 12px on cards, 8px on buttons and inputs, 20px on modals and large containers. This rounding is confident — modern enough to feel current, restrained enough to feel professional. Borders are 1px solid and subtle, using the purple-tinted gray to reinforce the color system.",
    "aiPromptDepth": "Shadow: layered approach — 0 2px 8px with a subtle violet tint at 6% plus 0 1px 2px neutral at 4%. Cards float gently above the surface with a hint of the accent color in their shadow, creating a subtle luminosity. The violet shadow tint is the secret weapon — it ties the depth system to the brand.",
    "aiPromptRules": "This is a light, premium, fintech-adjacent aesthetic. Think Stripe's marketing "site": every pixel earns its place. The warm off-white background avoids the clinical feel of pure white while the deep purple accent conveys trust and sophistication. Use the accent sparingly — CTAs, links, and key interactive elements only. Hover states should warm borders toward the accent and add the violet glow. "Transitions": 0.2s cubic-bezier(0.4, 0, 0.2, 1) — smooth with a confident ease-out. White space is sacred here; let content breathe."
  },
  {
    "name": "Wavelength",
    "fakeUrl": "wavelength.design",
    "vibe": "Deep space developer energy",
    "tags": ["dark", "vibrant", "developer"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0D1117",
    "surface": "#161B22",
    "surfaceHover": "#1C2333",
    "border": "#30363D",
    "text": "#E6EDF3",
    "textMuted": "#8B949E",
    "accent": "#238636",
    "accentSoft": "rgba(35,134,54,0.12)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(48,54,61,0.5)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Terminal depth",
    "gradient": "linear-gradient(135deg, #238636 0%, #2EA043 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. This is a developer-first aesthetic where Inter feels like a UI system font — functional, familiar, trustworthy to engineers. The bold 700 weight on headings creates clear hierarchy in dense information layouts. Import from Google Fonts.",
    "aiPromptColors": "Background: #0D1117 — the exact dark navy-black of a code editor. Not pure black — the slight blue undertone makes it livable for hours of reading. "Surface": #161B22 — one shade lighter for cards, panels, and elevated containers. "Text": #E6EDF3 — cool white with a blue tint that matches the background's undertone. Muted "text": #8B949E — blue-gray for secondary content, comments, metadata. "Accent": #238636 — strong, saturated green. This is the color of success, merges, and primary actions. Accent "soft": rgba(35,134,54,0.12) — green glow for selected states. "Border": #30363D — visible but not dominant, the backbone of the layout structure.",
    "aiPromptShape": "Border-radius: 6px on everything. Tight, functional, no-nonsense. This is developer tooling — the radius says 'I'm a UI element, not a toy.' Borders are 1px solid and load-bearing — they define the grid structure that makes dense data scannable.",
    "aiPromptDepth": "Shadow: 0 8px 24px rgba(0,0,0,0.4) with a 1px border ring. Deep, grounding shadows that anchor floating elements like dropdowns and modals against the dark background. The border ring at 50% opacity is critical — it defines edges that shadows alone can't in dark themes.",
    "aiPromptRules": "This is the GitHub dark mode aesthetic — built for developers who live in code. Dense information, clear hierarchy, functional color usage. Green means go/success/primary action. Yellow means caution. Red means danger/destructive. The color system is semantic, not decorative. Hover "states": lighten background by one shade, never change the accent. "Transitions": 150ms ease — fast and functional. Every element should feel like it belongs in a code review tool."
  },
  {
    "name": "Canvas",
    "fakeUrl": "canvas.design",
    "vibe": "Thoughtful tools for thinking",
    "tags": ["light", "clean", "warm"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F7F7F5",
    "surfaceHover": "#F0F0EE",
    "border": "#E3E2DE",
    "text": "#1A1A1A",
    "textMuted": "#787774",
    "accent": "#2383E2",
    "accentSoft": "rgba(35,131,226,0.08)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.03)",
    "shadowStyle": "Paper gentle",
    "gradient": "linear-gradient(135deg, #2383E2 0%, #5BA3F5 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. This is the Notion "approach": Inter is the workhorse that disappears, letting content be the star. At weight 700 for headings, it's bold enough to create hierarchy without shouting. The system relies on size variation (32px → 16px → 14px) more than weight for visual rhythm. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white. This is a document-first interface where the canvas needs to be invisible. "Surface": #F7F7F5 — warm off-white for sidebars, panels, and card backgrounds. The warmth is critical — it prevents the all-white interface from feeling clinical. "Text": #1A1A1A — near-black, warm. Muted "text": #787774 — warm gray for metadata, timestamps, breadcrumbs. "Accent": #2383E2 — clear, trustworthy blue. This is the blue of links, CTAs, and interactive elements. Not too saturated, not too bright — it's workmanlike. Accent "soft": rgba(35,131,226,0.08) — light blue wash for selected items. "Border": #E3E2DE — warm gray borders that feel like pencil lines on paper.",
    "aiPromptShape": "Border-radius: 8px on cards, 4px on buttons and inputs (tighter for inline elements), 12px on modals. The radius is moderate — approachable for everyday users but not bubbly. Borders are light and warm, creating structure that feels like ruled paper.",
    "aiPromptDepth": "Shadow: layered at 0 1px 3px and 0 4px 12px, both very subtle. This interface is about flatness — depth is used sparingly to indicate modals, dropdowns, and popovers. The page itself should feel like a sheet of "paper": mostly flat, with content creating the visual interest.",
    "aiPromptRules": "This is the Notion aesthetic — tools that feel like documents. The interface should disappear so users can focus on their content. Blue accent for interactive elements only — never decorative. Hover "states": warm the background slightly, show borders that were previously invisible. The design should feel like a smart "notebook": organized, warm, and infinitely flexible. "Transitions": 200ms ease — smooth enough to feel polished, fast enough not to impede."
  },
  {
    "name": "Inkwell",
    "fakeUrl": "inkwell.design",
    "vibe": "Serif elegance meets dark mode",
    "tags": ["dark", "elegant", "editorial"],
    "headingFont": "Playfair Display",
    "bodyFont": "Inter",
    "headingWeight": 400,
    "letterSpacing": "-0.01em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1C1C1C",
    "border": "#2A2A2A",
    "text": "#E8E4DF",
    "textMuted": "#9A958E",
    "accent": "#C8B8A0",
    "accentSoft": "rgba(200,184,160,0.1)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,184,160,0.05)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.4)",
    "shadowStyle": "Deep warm glow",
    "gradient": "linear-gradient(135deg, #C8B8A0 0%, #DED0BC 100%)",
    "aiPromptTypography": "Use Playfair Display for headings — weight 400 (regular) is all you need. The serif letterforms carry enough visual weight at large sizes. Letter-spacing -0.01em, very tight. Use Inter weight 400 for body text. This contrast between an ornate serif heading and a clean sans body creates an editorial hierarchy — like a luxury magazine published in code. Playfair's high contrast strokes glow on dark backgrounds. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0A0A0A — deep black with no color cast. "Surface": #141414 — charcoal for cards and panels. "Text": #E8E4DF — warm cream-white, never harsh. This warmth is critical — it pairs with the gold accent to create a candlelit atmosphere. Muted "text": #9A958E — warm stone gray. "Accent": #C8B8A0 — muted gold/champagne. This is luxury without excess — think aged brass, not shiny gold. It's warm, sophisticated, and rare in digital design. Accent "soft": rgba(200,184,160,0.1) — a warm amber glow for selected states. "Border": #2A2A2A — minimal, nearly invisible borders that let the content float.",
    "aiPromptShape": "Border-radius: 4px — nearly sharp. This is a sharp, editorial aesthetic where precise corners match the serif typography. Rounded corners would undermine the gravitas. Borders are minimal — the design relies on spacing and color contrast to define structure, not lines.",
    "aiPromptDepth": "Shadow: 0 8px 32px rgba(0,0,0,0.5) with a barely-there gold ring at 5% opacity. Deep shadows that create dramatic depth, like pools of darkness between elevated elements. The gold accent should appear as a subtle radial gradient at 3% opacity behind hero sections, creating a warm hearth effect.",
    "aiPromptRules": "This is a dark editorial luxury aesthetic — like Resend's marketing site or a high-end publication. The serif heading on a dark background creates instant sophistication. The champagne gold accent is for emphasis, not abundance — use it on headings, links, and the occasional decorative element. Body text stays neutral. Hover "states": warm borders toward gold, add subtle text color shift. "Transitions": 300ms ease — slower, more deliberate, matching the editorial pace."
  },
  {
    "name": "Terraform",
    "fakeUrl": "terraform.design",
    "vibe": "Infrastructure built with care",
    "tags": ["dark", "bold", "developer"],
    "headingFont": "JetBrains Mono",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "0em",
    "bg": "#1A1040",
    "surface": "#221850",
    "surfaceHover": "#2A2060",
    "border": "#3D2E7A",
    "text": "#E8E0FF",
    "textMuted": "#9B8FCC",
    "accent": "#A78BFA",
    "accentSoft": "rgba(167,139,250,0.12)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 8px 32px rgba(26,16,64,0.6), 0 0 0 1px rgba(167,139,250,0.08)",
    "shadowSm": "0 2px 12px rgba(26,16,64,0.4)",
    "shadowStyle": "Cosmic purple depth",
    "gradient": "linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%)",
    "aiPromptTypography": "Use JetBrains Mono for headings — weight 700. This monospace font signals 'developer tool' immediately. At bold weight and larger sizes it becomes a statement, not just a code font. Letter-spacing 0em — monospace fonts handle their own spacing. Use Inter weight 400 for body text. The mono/sans pairing creates a clear "hierarchy": headings feel like terminal commands, body text reads smoothly. Import both from Google Fonts.",
    "aiPromptColors": "Background: #1A1040 — deep purple-navy. Not black, not blue — this specific hue feels like deep space with a cosmic tint. "Surface": #221850 — slightly lighter purple for cards and elevated elements. "Text": #E8E0FF — lavender-white that matches the purple environment perfectly. Muted "text": #9B8FCC — medium purple-gray for secondary content. "Accent": #A78BFA — vibrant lilac/violet. This is the hero color — it glows against the dark purple background with electric energy. Accent "soft": rgba(167,139,250,0.12) — purple glow for hover and focus states. "Border": #3D2E7A — visible purple border that reinforces the color story.",
    "aiPromptShape": "Border-radius: 8px on cards, 4px on code blocks and inputs, 12px on modals. Functional radius that balances approachability with the technical aesthetic. Code blocks should have tighter radius (4px) to feel like terminal windows.",
    "aiPromptDepth": "Shadow: 0 8px 32px with a deep purple tint — the shadows here aren't black, they're ultra-dark purple. This creates a cohesive depth where even the shadows reinforce the color theme. Add a purple accent ring at 8% opacity for that characteristic glow. Use radial gradients of the accent at 5% for hero section atmosphere.",
    "aiPromptRules": "This is a developer-focused aesthetic with personality — think Railway or Supabase's dark mode. The deep purple background separates it from the sea of plain black developer tools. The monospace headings signal 'we speak your language' while the violet accent adds energy. Use the accent for CTAs, active states, and code syntax highlighting. Hover "states": brighten borders, add purple glow. "Transitions": 150ms ease — snappy and responsive."
  },
  {
    "name": "Porcelain",
    "fakeUrl": "porcelain.design",
    "vibe": "Editorial clarity on cream",
    "tags": ["light", "warm", "editorial"],
    "headingFont": "Playfair Display",
    "bodyFont": "Lora",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#F5F0EA",
    "surface": "#FFFFFF",
    "surfaceHover": "#FAF7F2",
    "border": "#E0D8CE",
    "text": "#2C2419",
    "textMuted": "#8A7E6E",
    "accent": "#1A1A1A",
    "accentSoft": "rgba(26,26,26,0.06)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 1px 3px rgba(44,36,25,0.06), 0 2px 8px rgba(44,36,25,0.04)",
    "shadowSm": "0 1px 2px rgba(44,36,25,0.04)",
    "shadowStyle": "Warm paper rest",
    "gradient": "linear-gradient(135deg, #2C2419 0%, #4A3F30 100%)",
    "aiPromptTypography": "Use Playfair Display for headings — weight 700. The high-contrast serif with its elegant ball terminals creates a luxury editorial feel. Use Lora for body text — weight 400. Lora is the perfect reading "serif": comfortable at small sizes, warm, and never stiff. This serif-on-serif pairing says 'long-form content worth reading' — like The New Yorker online. Letter-spacing -0.01em on headings only. Import both from Google Fonts.",
    "aiPromptColors": "Background: #F5F0EA — warm cream, like aged linen paper. This warmth is the foundation of the entire aesthetic — it turns a website into a reading experience. "Surface": #FFFFFF — white cards that provide clean reading containers against the warm background. "Text": #2C2419 — deep warm brown-black. Not true black — the warm tint ties everything together. Muted "text": #8A7E6E — warm stone for dates, bylines, captions. "Accent": #1A1A1A — near-black is the accent here. On this warm canvas, black elements become the focal points. Accent "soft": rgba(26,26,26,0.06) — subtle darkening for hover states. "Border": #E0D8CE — warm borders that feel like pencil marks on cream paper.",
    "aiPromptShape": "Border-radius: 4px — almost sharp. Editorial design demands precision and authority. Soft, rounded corners would undercut the seriousness. The 4px radius adds just enough softening to not feel brutal. Borders are warm and fine — 1px solid, acting as elegant dividers between content sections.",
    "aiPromptDepth": "Shadow: very subtle — 0 1px 3px with warm brown tint. This is almost flat design with the barest whisper of depth. Cards should feel like they're resting on the paper, not floating above it. Think physical "media": a magazine page doesn't cast shadows, it just exists.",
    "aiPromptRules": "This is a warm editorial aesthetic — the Maison Margiela web approach. Content-first, typography-driven, decoration-free. The warm cream background is the soul of this system — never replace it with white. Black is used for "emphasis": headlines, CTAs, and horizontal rules. Photos should be the only full-color elements. Hover "states": darken backgrounds gently, underline links. "Transitions": 250ms ease — measured and deliberate, like turning a page."
  },
  {
    "name": "Voltage",
    "fakeUrl": "voltage.design",
    "vibe": "Neon hits midnight asphalt",
    "tags": ["dark", "neon", "bold"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 800,
    "letterSpacing": "-0.03em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1A1A1A",
    "border": "#262626",
    "text": "#F0F0F0",
    "textMuted": "#777777",
    "accent": "#A6FF00",
    "accentSoft": "rgba(166,255,0,0.1)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "14px",
    "shadow": "0 4px 20px rgba(166,255,0,0.08), 0 0 0 1px rgba(166,255,0,0.06)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Neon edge glow",
    "gradient": "linear-gradient(135deg, #A6FF00 0%, #CCFF66 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 800 (Extra Bold) for headings — this is the heaviest weight that still looks controlled. Letter-spacing -0.03em pulls the letters tight, creating dense, impactful headlines. Body at 400. The extreme weight contrast (800 vs 400) creates dramatic hierarchy. At this weight, Inter becomes a display font — muscular and unapologetic. Import from Google Fonts.",
    "aiPromptColors": "Background: #0A0A0A — pure black canvas that lets the neon scream. "Surface": #141414 — barely-there card backgrounds. "Text": #F0F0F0 — bright white that holds its own against the accent. Muted "text": #777777 — gray for secondary info. "Accent": #A6FF00 — electric lime/chartreuse neon. This color DEMANDS attention. It vibrates against black with an almost physical intensity. Use it sparingly or it will overwhelm. Accent "soft": rgba(166,255,0,0.1) — toxic green glow for interactive states. "Border": #262626 — dark, invisible until you need them.",
    "aiPromptShape": "Border-radius: 8px on cards, 4px on buttons (tighter for clickability), 14px on hero elements. The radius is moderate — the neon accent provides all the personality; the shapes stay grounded.",
    "aiPromptDepth": "Shadow: 0 4px 20px with a neon green tint at 8%. Cards don't just float — they glow. The neon accent bleeds into the shadows, creating a sci-fi atmosphere. Add the accent as a radial gradient at 3-5% behind key sections for an ambient toxic glow effect.",
    "aiPromptRules": "This is a high-energy dark aesthetic — think Stryds or gaming-adjacent tech brands. The neon lime accent on black creates maximum visual impact. "CRITICAL": use the neon accent for buttons, links, and highlights ONLY — never for backgrounds or large areas, or it becomes unreadable. Text on accent-colored buttons should be black (#0A0A0A), not white. Hover "states": intensify the neon glow, add a subtle pulse animation. "Transitions": 150ms ease — fast and electric."
  },
  {
    "name": "Glacier",
    "fakeUrl": "glacier.design",
    "vibe": "Ice blue precision tools",
    "tags": ["light", "cool", "clean"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#F8FAFC",
    "surface": "#FFFFFF",
    "surfaceHover": "#F1F5F9",
    "border": "#E2E8F0",
    "text": "#0F172A",
    "textMuted": "#64748B",
    "accent": "#0EA5E9",
    "accentSoft": "rgba(14,165,233,0.08)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 1px 3px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.03)",
    "shadowSm": "0 1px 2px rgba(15,23,42,0.04)",
    "shadowStyle": "Cool crisp lift",
    "gradient": "linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. Inter at 600 weight is the sweet spot — authoritative without being heavy. This is the Tailwind CSS documentation "aesthetic": clean, scannable, and professional. Type should guide the eye without demanding attention. Import from Google Fonts.",
    "aiPromptColors": "Background: #F8FAFC — cool blue-tinted off-white. Just enough blue to feel crisp and professional. "Surface": #FFFFFF — clean white cards. "Text": #0F172A — deep navy-black. The blue undertone creates a cohesive cool palette throughout. Muted "text": #64748B — slate blue-gray for descriptions and metadata. "Accent": #0EA5E9 — sky blue. Bright, clear, and optimistic. This blue feels like open sky — expansive and trustworthy. Accent "soft": rgba(14,165,233,0.08) — gentle blue wash for selected states. "Border": #E2E8F0 — cool gray-blue borders that reinforce the slate theme.",
    "aiPromptShape": "Border-radius: 8px on cards, 6px on buttons and inputs, 12px on modals. Functional and modern. Not too soft, not too sharp — it's the goldilocks radius for professional SaaS tools.",
    "aiPromptDepth": "Shadow: subtle layered shadows with a slate-blue tint. 0 1px 3px at 6% and 0 4px 12px at 3%. Cool and controlled — these shadows add just enough depth to distinguish layers without adding drama.",
    "aiPromptRules": "This is a cool, professional, documentation-grade aesthetic. Think Tailwind CSS or Vercel's docs. Every element earns its place through utility, not decoration. The sky blue accent is for links, focus states, and primary CTAs. Avoid using it for decorative purposes. Code blocks should use a darker background (#0F172A or #1E293B) with syntax highlighting. Hover "states": cool gray background shifts, blue border appearances. "Transitions": 150ms ease — fast and functional."
  },
  {
    "name": "Parchment",
    "fakeUrl": "parchment.design",
    "vibe": "Handwritten notes on linen",
    "tags": ["light", "warm", "minimal"],
    "headingFont": "Lora",
    "bodyFont": "Source Sans 3",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FFFDF8",
    "surface": "#FFFFFF",
    "surfaceHover": "#FDF9F0",
    "border": "#E8E0D0",
    "text": "#33302A",
    "textMuted": "#8C8478",
    "accent": "#C4841D",
    "accentSoft": "rgba(196,132,29,0.08)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 1px 4px rgba(51,48,42,0.05), 0 2px 8px rgba(51,48,42,0.03)",
    "shadowSm": "0 1px 2px rgba(51,48,42,0.04)",
    "shadowStyle": "Natural paper rest",
    "gradient": "linear-gradient(135deg, #C4841D 0%, #D4A03A 100%)",
    "aiPromptTypography": "Use Lora for headings — weight 600 (SemiBold). Lora is the ideal reading "serif": warm, open, and incredibly legible at all sizes. Use Source Sans 3 for body text — weight 400. This serif/sans pairing creates a classic editorial "hierarchy": the serif demands attention for titles, the sans provides comfortable reading for long-form content. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFDF8 — the softest warm white, like sunlight on paper. "Surface": #FFFFFF — clean white for content cards. "Text": #33302A — warm dark brown, never cold black. This warm tone makes reading feel like a physical book. Muted "text": #8C8478 — stone/clay gray. "Accent": #C4841D — warm amber/honey gold. This is autumn in a hex code — warm, rich, and inviting. It catches the eye without screaming. Accent "soft": rgba(196,132,29,0.08) — a subtle golden glow for highlights. "Border": #E8E0D0 — warm tan borders like tea-stained paper edges.",
    "aiPromptShape": "Border-radius: 6px — modest and understated. This design favors content over container decoration. The subtle rounding softens without being noticeable — you'd only notice if it were missing. Borders are light, warm, and used sparingly.",
    "aiPromptDepth": "Shadow: whisper-light — 0 1px 4px at 5% opacity. Elements rest on the surface like objects on a desk. No floating, no drama — just gentle physical presence. The warm tint in the shadows ties them to the background color.",
    "aiPromptRules": "This is a warm, literary aesthetic — like a beautifully designed blog or long-form publication. The honey gold accent is for links, pull quotes, and highlighted text. The warm background turns screen reading into a cozy experience. Photography should be warm and natural. Hover "states": gentle background warming, gold underline reveal. "Transitions": 250ms ease — unhurried, like settling into a good book."
  },
  {
    "name": "Tundra",
    "fakeUrl": "tundra.design",
    "vibe": "Arctic minimalism breathing space",
    "tags": ["light", "minimal", "cool"],
    "headingFont": "Outfit",
    "bodyFont": "Outfit",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#FAFBFC",
    "surface": "#FFFFFF",
    "surfaceHover": "#F4F5F7",
    "border": "#DFE1E6",
    "text": "#172B4D",
    "textMuted": "#6B778C",
    "accent": "#0052CC",
    "accentSoft": "rgba(0,82,204,0.07)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 1px 2px rgba(23,43,77,0.04), 0 3px 10px rgba(23,43,77,0.03)",
    "shadowSm": "0 1px 1px rgba(23,43,77,0.03)",
    "shadowStyle": "Arctic crisp",
    "gradient": "linear-gradient(135deg, #0052CC 0%, #2684FF 100%)",
    "aiPromptTypography": "Use Outfit for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. Outfit is a geometric sans-serif that feels more designed than Inter while staying neutral. Its open letterforms ensure readability in data-dense interfaces. The 600 weight provides authority without bulk. Import from Google Fonts.",
    "aiPromptColors": "Background: #FAFBFC — the coolest possible off-white without feeling blue. "Surface": #FFFFFF — clean white cards. "Text": #172B4D — deep navy that's softer than black, more authoritative than gray. Muted "text": #6B778C — slate blue-gray for secondary content. "Accent": #0052CC — classic product blue. Trustworthy, professional, universally understood as 'interactive.' Accent "soft": rgba(0,82,204,0.07) — gentle blue highlights. "Border": #DFE1E6 — cool gray that defines structure without drawing attention.",
    "aiPromptShape": "Border-radius: 6px — tight and professional. This radius says 'productivity tool' — friendly enough for daily use, structured enough for complex interfaces. Borders are 1px solid, cool-toned, and structural.",
    "aiPromptDepth": "Shadow: minimal — 0 1px 2px with cool navy tint. Depth is functional here, used only for dropdowns, modals, and tooltips. The main interface is nearly flat. Cards are defined by borders, not shadows.",
    "aiPromptRules": "This is a professional productivity tool aesthetic — think Atlassian Jira or Confluence. The navy-on-white palette is optimized for long work sessions. Blue accent for primary actions and navigation highlights. Data-dense layouts should use the border system heavily to create visual grids. Hover "states": cool gray background fill, blue border accent. "Transitions": 150ms ease — fast and predictable."
  },
  {
    "name": "Compass",
    "fakeUrl": "compass.design",
    "vibe": "Navigate complex data simply",
    "tags": ["light", "clean", "bold"],
    "headingFont": "Plus Jakarta Sans",
    "bodyFont": "Plus Jakarta Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F9FAFB",
    "surfaceHover": "#F3F4F6",
    "border": "#E5E7EB",
    "text": "#111827",
    "textMuted": "#6B7280",
    "accent": "#4F46E5",
    "accentSoft": "rgba(79,70,229,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.04)",
    "shadowStyle": "Clean structured",
    "gradient": "linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)",
    "aiPromptTypography": "Use Plus Jakarta Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. Plus Jakarta Sans has a geometric warmth — its round letter shapes feel modern and welcoming while maintaining readability in dense dashboard layouts. At 700 weight, headings feel solid and trustworthy. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white for maximum contrast and cleanliness. "Surface": #F9FAFB — cool off-white for panels, sidebars, and secondary areas. "Text": #111827 — deep blue-black from the gray scale. Muted "text": #6B7280 — balanced gray. "Accent": #4F46E5 — indigo. Deeper and more sophisticated than standard blue, indigo feels like a premium product color. It's authoritative without being cold. Accent "soft": rgba(79,70,229,0.08) — light indigo wash. "Border": #E5E7EB — standard cool gray borders.",
    "aiPromptShape": "Border-radius: 10px on cards, 6px on buttons, 16px on modal containers. This radius is the modern SaaS sweet spot — rounded enough to feel current, tight enough for data tables and forms.",
    "aiPromptDepth": "Shadow: layered — 0 1px 3px at 6% and 0 4px 16px at 4%. Clean, cool, and functional. Shadows create clear elevation "levels": flat for inline content, slight lift for cards, strong lift for modals.",
    "aiPromptRules": "This is a clean SaaS dashboard aesthetic — think a modern analytics platform or project management tool. The white background with indigo accent creates a professional canvas for complex data. Indigo works for primary actions, navigation active states, and data visualization primary color. Secondary visualization "colors": complement with teal (#14B8A6) and amber (#F59E0B). Hover "states": gray background fill, indigo border. "Transitions": 150ms ease — fast for productivity."
  },
  {
    "name": "Midnight",
    "fakeUrl": "midnight.design",
    "vibe": "Financial data under glass",
    "tags": ["dark", "elegant", "minimal"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 500,
    "letterSpacing": "-0.01em",
    "bg": "#0B0F19",
    "surface": "#111827",
    "surfaceHover": "#1F2937",
    "border": "#1F2937",
    "text": "#F9FAFB",
    "textMuted": "#9CA3AF",
    "accent": "#10B981",
    "accentSoft": "rgba(16,185,129,0.1)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(31,41,55,0.8)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.3)",
    "shadowStyle": "Glass panel float",
    "gradient": "linear-gradient(135deg, #10B981 0%, #34D399 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 500 (Medium) for headings, 400 for body. Letter-spacing -0.01em. The medium weight heading is intentional — in financial interfaces, screaming headlines feel amateur. Medium weight says 'confident, not desperate.' The subtle weight difference (500 vs 400) creates hierarchy through density rather than impact. Import from Google Fonts.",
    "aiPromptColors": "Background: #0B0F19 — deep navy-black, the color of a Bloomberg terminal at midnight. "Surface": #111827 — dark slate for cards and data panels. "Text": #F9FAFB — clean white. Muted "text": #9CA3AF — cool gray for labels and secondary data. "Accent": #10B981 — emerald green. This is the color of money, growth, and positive movement. In a financial context, it reads instantly as 'good.' Accent "soft": rgba(16,185,129,0.1) — green glow for positive data highlights. "Border": #1F2937 — slate borders that define data containers.",
    "aiPromptShape": "Border-radius: 8px on cards, 6px on inputs and buttons, 12px on modals. Functional radius — this is data-first design where shape doesn't compete with numbers.",
    "aiPromptDepth": "Shadow: 0 4px 16px rgba(0,0,0,0.4) plus a 1px border ring. Cards should feel like frosted glass panels — slightly elevated, with visible edges. The border ring is essential for defining card boundaries in the dark theme.",
    "aiPromptRules": "This is a dark fintech/financial data aesthetic — think Fey or Superhuman's dark mode. The emerald green accent should be used for primary actions AND positive financial indicators. Use #EF4444 (red) for negative/loss indicators. The design should feel like a premium dashboard — information-dense but never cluttered. Charts and data visualizations are first-class citizens. Hover "states": surface brightening, green glow on actionable items. "Transitions": 100ms ease — instant, like real-time data."
  },
  {
    "name": "Matrix",
    "fakeUrl": "matrix.design",
    "vibe": "Terminal green on void black",
    "tags": ["dark", "developer", "neon"],
    "headingFont": "JetBrains Mono",
    "bodyFont": "JetBrains Mono",
    "headingWeight": 700,
    "letterSpacing": "0em",
    "bg": "#0D0D0D",
    "surface": "#151515",
    "surfaceHover": "#1D1D1D",
    "border": "#2A2A2A",
    "text": "#E0E0E0",
    "textMuted": "#666666",
    "accent": "#00FF88",
    "accentSoft": "rgba(0,255,136,0.08)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 4px 16px rgba(0,255,136,0.04), 0 0 0 1px rgba(0,255,136,0.08)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.3)",
    "shadowStyle": "Terminal glow",
    "gradient": "linear-gradient(135deg, #00FF88 0%, #00CC6A 100%)",
    "aiPromptTypography": "Use JetBrains Mono for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing 0em — monospace handles its own spacing. This is a full-monospace design system — every character aligns to a grid, every line has equal weight. JetBrains Mono is the most readable monospace font available, with increased x-height and distinctive letterforms. The all-mono approach creates a hacker/terminal aesthetic that's unmistakable. Import from Google Fonts.",
    "aiPromptColors": "Background: #0D0D0D — near-black terminal background. "Surface": #151515 — slightly elevated panels. "Text": #E0E0E0 — standard terminal text brightness. Muted "text": #666666 — dimmed terminal gray for comments and metadata. "Accent": #00FF88 — phosphor green. The classic terminal color — bright, electric, and instantly recognizable as 'developer.' This green should feel like it's emitting light. Accent "soft": rgba(0,255,136,0.08) — subtle green screen glow. "Border": #2A2A2A — dark grid lines that create a terminal-like structure.",
    "aiPromptShape": "Border-radius: 4px — tight and technical. Terminal windows aren't soft — they're precise tools. The 4px adds just enough rounding to feel like a modern terminal emulator rather than a raw xterm. Borders at 1px form the grid backbone.",
    "aiPromptDepth": "Shadow: green-tinted glow at 4% opacity — cards don't cast shadows, they emit light. The green accent ring at 8% creates a phosphor screen effect around elevated elements. No neutral shadows — everything is tinted with the terminal green.",
    "aiPromptRules": "This is a full terminal/hacker aesthetic — think Warp terminal or classic cyberpunk. ALL text is monospace. The green accent is for interactive elements, success states, and data highlights. Use #FF5555 for errors, #FFFF55 for warnings, #55FFFF for info — classic terminal ANSI colors. Hover "states": green border glow, text color shift toward the accent. Animations should feel like typewriter effects — characters appearing sequentially. "Transitions": 100ms linear — no easing, instant state changes like a terminal."
  },
  {
    "name": "Lavender",
    "fakeUrl": "lavender.design",
    "vibe": "Soft power in pastel purple",
    "tags": ["light", "elegant", "playful"],
    "headingFont": "DM Sans",
    "bodyFont": "DM Sans",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#F8F5FF",
    "surface": "#FFFFFF",
    "surfaceHover": "#F0EBFF",
    "border": "#E2D9F3",
    "text": "#1A1033",
    "textMuted": "#7E6B99",
    "accent": "#7C5CFC",
    "accentSoft": "rgba(124,92,252,0.08)",
    "radius": "14px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 2px 12px rgba(124,92,252,0.08), 0 1px 3px rgba(0,0,0,0.03)",
    "shadowSm": "0 1px 4px rgba(124,92,252,0.06)",
    "shadowStyle": "Soft lilac bloom",
    "gradient": "linear-gradient(135deg, #7C5CFC 0%, #B794F6 100%)",
    "aiPromptTypography": "Use DM Sans for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. DM Sans has a gentle geometric quality — its letter shapes are round and open, creating a friendly, approachable tone that complements the soft purple palette. At 600 weight it's authoritative without being aggressive. Import from Google Fonts.",
    "aiPromptColors": "Background: #F8F5FF — the softest lavender-tinted white. This sets the emotional tone for the entire interface — calm, creative, slightly feminine. "Surface": #FFFFFF — clean white cards. "Text": #1A1033 — deep purple-black. Muted "text": #7E6B99 — medium purple-gray. "Accent": #7C5CFC — vivid purple-violet. Vibrant enough to pop, refined enough to feel premium. Accent "soft": rgba(124,92,252,0.08) — light purple wash. "Border": #E2D9F3 — lavender borders that match the background tint.",
    "aiPromptShape": "Border-radius: 14px on cards, 8px on buttons, 20px on modals. Notably rounded — this system embraces softness. The generous radius creates a friendly, modern feel reminiscent of iOS design language brought to web.",
    "aiPromptDepth": "Shadow: purple-tinted at 8% opacity — 0 2px 12px. Every shadow carries a whisper of the accent color. This creates a dreamy, cohesive feel where depth itself is part of the color system. Cards feel like they're floating on a lavender cloud.",
    "aiPromptRules": "This is a soft, creative, modern aesthetic — think Phantom wallet's light mode or creative SaaS tools. The lavender background is the signature — it transforms a generic interface into something with personality. Purple accent for CTAs and interactive elements. The softness shouldn't read as weakness — pair it with bold typography and clear hierarchy. Hover "states": deepen the purple tint, add gentle scale(1.01). "Transitions": 200ms cubic-bezier(0.4, 0, 0.2, 1) — smooth and refined."
  },
  {
    "name": "Confetti",
    "fakeUrl": "confetti.design",
    "vibe": "Learning feels like celebration",
    "tags": ["light", "playful", "vibrant"],
    "headingFont": "DM Sans",
    "bodyFont": "DM Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F8F7FF",
    "surfaceHover": "#EEEAFF",
    "border": "#E0DEFF",
    "text": "#1A1A2E",
    "textMuted": "#6B6B8D",
    "accent": "#4F35DC",
    "accentSoft": "rgba(79,53,220,0.08)",
    "radius": "20px",
    "radiusSm": "12px",
    "radiusXl": "28px",
    "shadow": "0 4px 16px rgba(79,53,220,0.08), 0 1px 3px rgba(0,0,0,0.03)",
    "shadowSm": "0 2px 6px rgba(79,53,220,0.06)",
    "shadowStyle": "Soft jubilant",
    "gradient": "linear-gradient(135deg, #4F35DC 0%, #7C5CFC 100%)",
    "aiPromptTypography": "Use DM Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.01em. DM Sans has a rounded, friendly geometry that works perfectly for educational and creative platforms. At 700 weight, headings feel bold and encouraging — like a cheerful teacher. The font carries energy without being childish. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — white for clarity and openness. "Surface": #F8F7FF — the softest violet tint for cards and sections. "Text": #1A1A2E — deep navy-purple for readable contrast. Muted "text": #6B6B8D — purple-gray. "Accent": #4F35DC — vibrant blue-purple. This color is energetic and creative — it invites interaction without intimidation. Accent "soft": rgba(79,53,220,0.08) — light purple highlights. "Border": #E0DEFF — lavender borders that feel joyful.",
    "aiPromptShape": "Border-radius: 20px on cards — very round. 12px on buttons. 28px on modals and hero sections. This is the most generous radius in the system — shapes feel bubbly, touchable, and fun. Every element looks like it wants to be tapped.",
    "aiPromptDepth": "Shadow: purple-tinted at 8% — 0 4px 16px. Gentle and warm. Cards feel like they're gently hovering, waiting to be interacted with. The purple shadow tint creates a cohesive, warm atmosphere.",
    "aiPromptRules": "This is the SuperHi playful education aesthetic — colorful blocks, bold shapes, and joyful interactions. The purple accent is primary, but splash in secondary colors for "variety": #F97316 (orange) for highlights, #10B981 (green) for success, #F43F5E (pink) for featured. Geometric shapes (circles, triangles) can be used as decorative background elements at 5% opacity. Hover "states": bounce with scale(1.03), color brightening. "Transitions": 250ms cubic-bezier(0.34, 1.56, 0.64, 1) — playful bounce."
  },
  {
    "name": "Blueprint",
    "fakeUrl": "blueprint.design",
    "vibe": "Architectural plans become product",
    "tags": ["light", "bold", "brutalist"],
    "headingFont": "Space Grotesk",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#FFFFFF",
    "surface": "#F5F5F5",
    "surfaceHover": "#EBEBEB",
    "border": "#000000",
    "text": "#000000",
    "textMuted": "#555555",
    "accent": "#0066FF",
    "accentSoft": "rgba(0,102,255,0.08)",
    "radius": "2px",
    "radiusSm": "2px",
    "radiusXl": "4px",
    "shadow": "4px 4px 0px #000000",
    "shadowSm": "2px 2px 0px #000000",
    "shadowStyle": "Hard offset graphic",
    "gradient": "linear-gradient(135deg, #0066FF 0%, #3388FF 100%)",
    "aiPromptTypography": "Use Space Grotesk for headings — weight 700. Space Grotesk is a geometric sans with a technological edge — its distinctive 'g' and sharp angles feel like architectural drafting. At bold weight with tight letter-spacing, it creates impactful, structured headlines. Use Inter weight 400 for body. The contrast between the angular heading font and neutral body font creates a bold hierarchy. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white. "Surface": #F5F5F5 — light gray for panels. "Text": #000000 — pure black. No softening, no navy, no warm tints. This is high-contrast brutalist design. Muted "text": #555555 — dark gray. "Accent": #0066FF — electric blue. Bold, saturated, and unapologetic. Against black and white, this blue is the only color in the system and it demands attention. Accent "soft": rgba(0,102,255,0.08) — light blue wash. "Border": #000000 — bold black borders. 2px or thicker. These are architectural lines, not subtle dividers.",
    "aiPromptShape": "Border-radius: 2px — nearly sharp. This is brutalist design — corners are precise, intentional, and uncompromising. Borders are bold (2px solid black) and structural — they create a grid system that's visible and deliberate.",
    "aiPromptDepth": "Shadow: 4px 4px 0px #000000 — hard offset shadows. No blur, no softness. This is a graphic design approach where shadows are decorative elements, not simulations of physics. The hard shadow adds dimensionality while maintaining the brutalist grid.",
    "aiPromptRules": "This is a brutalist/architectural aesthetic — think NextJS conference branding or early-web revival. High contrast, bold typography, geometric precision. The blue accent is the only color — use it for links, active states, and brand moments. Grid lines should be visible — borders ARE the design. Hover "states": inverse colors (blue background, white text), hard shadow shift. "Transitions": 0ms or 100ms — instant or nearly instant. Brutalist design doesn't ease into anything."
  },
  {
    "name": "Sakura",
    "fakeUrl": "sakura.design",
    "vibe": "Spring blossoms on clean paper",
    "tags": ["light", "warm", "elegant"],
    "headingFont": "Lora",
    "bodyFont": "Nunito Sans",
    "headingWeight": 500,
    "letterSpacing": "-0.01em",
    "bg": "#FFFBF7",
    "surface": "#FFFFFF",
    "surfaceHover": "#FFF5EE",
    "border": "#F0E0D6",
    "text": "#2D2420",
    "textMuted": "#8C7B70",
    "accent": "#E85D75",
    "accentSoft": "rgba(232,93,117,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "16px",
    "shadow": "0 2px 8px rgba(232,93,117,0.06), 0 1px 3px rgba(45,36,32,0.04)",
    "shadowSm": "0 1px 3px rgba(45,36,32,0.03)",
    "shadowStyle": "Warm petal soft",
    "gradient": "linear-gradient(135deg, #E85D75 0%, #F5909E 100%)",
    "aiPromptTypography": "Use Lora for headings — weight 500 (Medium). Lora's warm, contemporary serifs feel literary and gentle. At medium weight, headings have substance without heaviness — like an invitation to read. Use Nunito Sans weight 400 for body text — its rounded terminals create warmth that matches Lora's character. Together they create a warm editorial pairing. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFBF7 — creamy warm white with a rosy undertone. Like high-quality stationery. "Surface": #FFFFFF — white cards. "Text": #2D2420 — warm dark brown. Muted "text": #8C7B70 — warm stone gray. "Accent": #E85D75 — dusty rose/coral pink. Warm, inviting, and memorable. This pink isn't childish — it's sophisticated, like dried flower petals. Accent "soft": rgba(232,93,117,0.08) — the faintest blush for highlighted areas. "Border": #F0E0D6 — warm peach-tinted borders that feel handmade.",
    "aiPromptShape": "Border-radius: 10px on cards, 6px on buttons, 16px on feature sections. Moderately rounded — warm and approachable without being bubbly. The shapes complement the warm color palette.",
    "aiPromptDepth": "Shadow: 0 2px 8px with a pink tint at 6% — barely there. The rose-tinted shadows create a unified warmth. This is a design that feels like it's bathed in golden hour light.",
    "aiPromptRules": "This is a warm, inviting, feminine-but-not-girly aesthetic. The dusty rose accent on cream creates a sophisticated warmth that works for wellness, editorial, and creative brands. The serif headings add gravitas to the soft palette. Pink accent for CTAs, highlights, and featured content. Use sparingly — the warmth of the background does most of the emotional work. Hover "states": deepen the rosy tint, gentle border warming. "Transitions": 250ms ease — gentle and natural."
  },
  {
    "name": "Meridian",
    "fakeUrl": "meridian.design",
    "vibe": "Fresh mint over deep navy",
    "tags": ["dark", "cool", "vibrant"],
    "headingFont": "Plus Jakarta Sans",
    "bodyFont": "Plus Jakarta Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0B1120",
    "surface": "#131D33",
    "surfaceHover": "#1B2844",
    "border": "#253654",
    "text": "#EEF2F6",
    "textMuted": "#7E92AD",
    "accent": "#0AF395",
    "accentSoft": "rgba(10,243,149,0.1)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 6px 24px rgba(11,17,32,0.7), 0 0 0 1px rgba(10,243,149,0.06)",
    "shadowSm": "0 2px 8px rgba(11,17,32,0.5)",
    "shadowStyle": "Deep sea glow",
    "gradient": "linear-gradient(135deg, #0AF395 0%, #3BFFC0 100%)",
    "aiPromptTypography": "Use Plus Jakarta Sans for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. Plus Jakarta Sans has the geometric warmth that prevents a dark mint-themed interface from feeling sterile. At 700 weight, headings are bold and confident — they compete well with the electric green accent. Import from Google Fonts.",
    "aiPromptColors": "Background: #0B1120 — deep navy-blue, like the ocean at night. "Surface": #131D33 — slightly lighter navy for cards. "Text": #EEF2F6 — cool blue-white. Muted "text": #7E92AD — blue-gray. "Accent": #0AF395 — electric mint green. This color is alive — it glows against the navy like bioluminescence. It's impossible to ignore, which makes it perfect for CTAs and active states. Accent "soft": rgba(10,243,149,0.1) — mint glow for hover backgrounds. "Border": #253654 — visible blue borders.",
    "aiPromptShape": "Border-radius: 10px on cards, 6px on buttons, 14px on modals. Modern and approachable — the rounded shapes soften the intensity of the neon accent.",
    "aiPromptDepth": "Shadow: deep navy shadows at 70% — cards sink into the dark background with significant depth. The mint accent ring at 6% creates a signature glow on card edges. Use the accent as a radial gradient at 4% for atmospheric hero sections.",
    "aiPromptRules": "This is the SaaSpo/data-gallery aesthetic — dark navy with electric green that says 'live data, real-time, always fresh.' The mint accent is for primary CTAs and positive indicators. Use #FF6B6B for errors. Text on mint-colored buttons should be dark (#0B1120), not white. The mint should feel like it's casting light onto nearby surfaces. Hover "states": brighten surface, intensify green glow. "Transitions": 150ms ease — fast and responsive."
  },
  {
    "name": "Fossil",
    "fakeUrl": "fossil.design",
    "vibe": "Ancient type meets modern grid",
    "tags": ["light", "editorial", "warm"],
    "headingFont": "Merriweather",
    "bodyFont": "Source Sans 3",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#F4F1EC",
    "surface": "#FFFFFF",
    "surfaceHover": "#F0EDE6",
    "border": "#D9D3C7",
    "text": "#282420",
    "textMuted": "#807868",
    "accent": "#B85C38",
    "accentSoft": "rgba(184,92,56,0.08)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 2px 6px rgba(40,36,32,0.06), 0 1px 2px rgba(40,36,32,0.04)",
    "shadowSm": "0 1px 2px rgba(40,36,32,0.04)",
    "shadowStyle": "Warm earth rest",
    "gradient": "linear-gradient(135deg, #B85C38 0%, #D4845E 100%)",
    "aiPromptTypography": "Use Merriweather for headings — weight 700 (Bold). Merriweather at bold weight feels like a newspaper masthead — authoritative and time-tested. Its generous x-height ensures readability at all sizes. Use Source Sans 3 weight 400 for body — a neutral sans that reads beautifully for long-form content. Import both from Google Fonts.",
    "aiPromptColors": "Background: #F4F1EC — warm stone/sandstone. "Surface": #FFFFFF — white cards. "Text": #282420 — deep warm brown-black. Muted "text": #807868 — warm clay gray. "Accent": #B85C38 — burnt sienna/terracotta. This is an earthen, architectural color — warm, grounded, and sophisticated. Accent "soft": rgba(184,92,56,0.08) — warm orange tint. "Border": #D9D3C7 — warm sandstone borders.",
    "aiPromptShape": "Border-radius: 6px — understated. The editorial serif typography demands correspondingly mature shapes. Nothing too soft or playful.",
    "aiPromptDepth": "Shadow: minimal warm shadows at 6% — elements rest naturally on the warm surface. The warm tint in shadows makes them feel like natural light falling on paper.",
    "aiPromptRules": "This is a warm editorial/magazine aesthetic with an earthy palette. The terracotta accent feels like a clay studio — creative, handmade, authentic. Use the accent for pull quotes, links, and CTAs. The serif headings provide authority while the warm palette provides comfort. Photographs should be warm-toned. Hover "states": gentle background warming, terracotta underlines. "Transitions": 250ms ease — measured and editorial."
  },
  {
    "name": "Aurora",
    "fakeUrl": "aurora.design",
    "vibe": "Northern lights on dark horizon",
    "tags": ["dark", "vibrant", "bold"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#080B16",
    "surface": "#0F1320",
    "surfaceHover": "#171C2E",
    "border": "#1F2540",
    "text": "#F0F0F0",
    "textMuted": "#7C8198",
    "accent": "#D946EF",
    "accentSoft": "rgba(217,70,239,0.1)",
    "radius": "12px",
    "radiusSm": "8px",
    "radiusXl": "16px",
    "shadow": "0 8px 32px rgba(8,11,22,0.8), 0 0 0 1px rgba(217,70,239,0.06)",
    "shadowSm": "0 2px 12px rgba(8,11,22,0.5)",
    "shadowStyle": "Neon purple bloom",
    "gradient": "linear-gradient(135deg, #D946EF 0%, #8B5CF6 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.03em for tight, impactful headlines. On this dark, vibrant canvas, Inter at bold weight provides the neutral backbone that lets the magenta accent be the star. Import from Google Fonts.",
    "aiPromptColors": "Background: #080B16 — the deepest blue-black, like space. "Surface": #0F1320 — dark navy panels. "Text": #F0F0F0 — clean white. Muted "text": #7C8198 — blue-gray. "Accent": #D946EF — electric magenta/fuchsia. This color is a showstopper — it demands attention with radioactive intensity. On the near-black background, it glows like a neon sign. Accent "soft": rgba(217,70,239,0.1) — magenta haze. "Border": #1F2540 — dark blue borders.",
    "aiPromptShape": "Border-radius: 12px on cards, 8px on buttons, 16px on modals. Rounded enough to feel modern and approachable, balancing the intensity of the neon accent.",
    "aiPromptDepth": "Shadow: deep black shadows plus a magenta glow ring. The accent should bleed into nearby surfaces — use radial gradients of the magenta at 3-5% behind hero sections. Cards near the accent color should pick up a subtle magenta tint in their shadows.",
    "aiPromptRules": "This is a high-energy dark aesthetic with dramatic neon. The magenta → violet gradient is the hero — use it for hero backgrounds, CTAs, and special callouts. The gradient should feel like a northern lights effect — flowing and luminous. For variety, combine with teal (#06B6D4) as a secondary accent. Text on magenta should be white. Hover "states": intensify glow, add subtle color shift. "Transitions": 200ms ease — smooth enough to show off the color transitions."
  },
  {
    "name": "Phantom",
    "fakeUrl": "phantom.design",
    "vibe": "Crypto elegance in purple glass",
    "tags": ["dark", "elegant", "cool"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#09080D",
    "surface": "#12111A",
    "surfaceHover": "#1A1824",
    "border": "#2A2736",
    "text": "#EEEDF2",
    "textMuted": "#8B89A0",
    "accent": "#AB9FF2",
    "accentSoft": "rgba(171,159,242,0.1)",
    "radius": "16px",
    "radiusSm": "10px",
    "radiusXl": "24px",
    "shadow": "0 8px 32px rgba(9,8,13,0.8), 0 0 0 1px rgba(171,159,242,0.06)",
    "shadowSm": "0 2px 12px rgba(9,8,13,0.5)",
    "shadowStyle": "Spectral violet float",
    "gradient": "linear-gradient(135deg, #AB9FF2 0%, #C4B8FF 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. Inter's neutrality lets the color palette carry the personality. At 600 weight on the dark purple background, headings feel solid but not heavy — matching the refined cryptocurrency aesthetic. Import from Google Fonts.",
    "aiPromptColors": "Background: #09080D — near-black with a purple undertone. "Surface": #12111A — dark purple-charcoal for cards. "Text": #EEEDF2 — soft lavender-white. Muted "text": #8B89A0 — purple-gray. "Accent": #AB9FF2 — soft lilac purple. Not aggressive — this purple is refined and premium. It feels like a luxury product, not a gaming app. Accent "soft": rgba(171,159,242,0.1) — a gentle purple aura. "Border": #2A2736 — dark purple borders.",
    "aiPromptShape": "Border-radius: 16px on cards, 10px on buttons, 24px on modals. Very rounded — creating a glass-like, mobile-app feel. Cards should look like frosted glass panels floating in space.",
    "aiPromptDepth": "Shadow: deep dark shadows plus a lilac glow ring at 6%. Use glass morphism "effects": surfaces should have slight blur (backdrop-filter: blur(20px)) with semi-transparency. The purple accent creates a soft ambient glow.",
    "aiPromptRules": "This is the Phantom wallet aesthetic — premium crypto/web3 with purple glass surfaces. The lilac accent is for interactive elements and brand moments. Glass morphism is encouraged — use semi-transparent surfaces with backdrop-blur for a futuristic feel. Gradients should be subtle and ambient. Hover "states": brighten glass surfaces, intensify purple glow. "Transitions": 200ms cubic-bezier(0.4, 0, 0.2, 1) — smooth and premium."
  },
  {
    "name": "Helios",
    "fakeUrl": "helios.design",
    "vibe": "Gradient warmth radiates outward",
    "tags": ["dark", "warm", "vibrant"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0D0A1A",
    "surface": "#161230",
    "surfaceHover": "#1E1940",
    "border": "#2A244A",
    "text": "#F5F0FF",
    "textMuted": "#9B90B8",
    "accent": "#F472B6",
    "accentSoft": "rgba(244,114,182,0.1)",
    "radius": "14px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 8px 32px rgba(13,10,26,0.7), 0 0 0 1px rgba(244,114,182,0.06)",
    "shadowSm": "0 2px 12px rgba(13,10,26,0.5)",
    "shadowStyle": "Pink nebula glow",
    "gradient": "linear-gradient(135deg, #F472B6 0%, #818CF8 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.02em. The gradient accent is the star — Inter provides the neutral stage for the pink-to-purple color story to shine. Bold headings hold their own against the vibrant gradient. Import from Google Fonts.",
    "aiPromptColors": "Background: #0D0A1A — ultra-deep purple-black. "Surface": #161230 — dark violet panels. "Text": #F5F0FF — soft lavender-white. Muted "text": #9B90B8 — purple-gray. "Accent": #F472B6 — warm pink. This pink feels different on the deep purple background — it glows with neon warmth. The pink-to-indigo gradient is the signature. Accent "soft": rgba(244,114,182,0.1) — pink haze. "Border": #2A244A — deep purple borders.",
    "aiPromptShape": "Border-radius: 14px on cards, 8px on buttons, 20px on hero elements. Generously rounded to create a modern, inviting feel against the deep dark background.",
    "aiPromptDepth": "Shadow: deep purple shadows at 70%. The pink accent creates radial glow effects at 4% behind hero elements. Use the pink→purple gradient as a background blur effect at low opacity for atmosphere.",
    "aiPromptRules": "This is a vibrant dark gradient aesthetic — the HealthyTogether approach with pink-to-purple energy. The gradient (pink → indigo) is the hero — use it for hero sections, CTAs, and decorative elements. On dark backgrounds, this gradient creates a nebula/aurora effect. Text on gradient backgrounds should be white. Single-color accent usage should default to the pink. Hover "states": intensify glow, slight scale. "Transitions": 200ms ease — smooth and energetic."
  },
  {
    "name": "Monolith",
    "fakeUrl": "monolith.design",
    "vibe": "Stark black and white contrast",
    "tags": ["light", "brutalist", "bold"],
    "headingFont": "Space Grotesk",
    "bodyFont": "Space Grotesk",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#FFFFFF",
    "surface": "#F5F5F5",
    "surfaceHover": "#EEEEEE",
    "border": "#000000",
    "text": "#000000",
    "textMuted": "#444444",
    "accent": "#FF0000",
    "accentSoft": "rgba(255,0,0,0.06)",
    "radius": "2px",
    "radiusSm": "2px",
    "radiusXl": "2px",
    "shadow": "6px 6px 0px #000000",
    "shadowSm": "3px 3px 0px #000000",
    "shadowStyle": "Brutalist hard drop",
    "gradient": "linear-gradient(135deg, #FF0000 0%, #CC0000 100%)",
    "aiPromptTypography": "Use Space Grotesk for ALL text — headings AND body. Weight 700 for headings, 400 for body. Letter-spacing -0.03em for headings. Space Grotesk everywhere creates a unified, opinionated typographic voice. Its geometric letterforms feel like they were designed for posters — bold, direct, unafraid. Import from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white. "Surface": #F5F5F5 — light gray. "Text": #000000 — pure black. Maximum contrast. Muted "text": #444444 — dark gray. "Accent": #FF0000 — pure red. Not coral, not crimson — pure RGB red. This is a brutalist "choice": raw, aggressive, impossible to ignore. Use it sparingly for maximum impact. "Border": #000000 — heavy black borders (2-3px). These borders ARE the design.",
    "aiPromptShape": "Border-radius: 2px — razor sharp. Borders are 2-3px solid black. This is poster design on the web — hard edges, visible structure, no softening.",
    "aiPromptDepth": "Shadow: 6px 6px 0px #000000 — large, hard, zero-blur offset. These shadows are graphic elements, not depth simulations. They create a stacked-paper effect that feels like screen printing.",
    "aiPromptRules": "This is a maximalist brutalist aesthetic — high contrast, bold typography, graphic elements. The pure red accent is used for emphasis, danger, and urgency — it's the alarm color in an otherwise black-and-white world. Use it for links, CTAs, and callouts only. Thick black borders create the grid. Uppercase text with tight letter-spacing for labels. Hover "states": color inversion, shadow position shift. "Transitions": 0ms — instant state changes. Brutalism is decisive."
  },
  {
    "name": "Vortex",
    "fakeUrl": "vortex.design",
    "vibe": "Spinning data into meaning",
    "tags": ["dark", "cool", "developer"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#09090B",
    "surface": "#18181B",
    "surfaceHover": "#27272A",
    "border": "#3F3F46",
    "text": "#FAFAFA",
    "textMuted": "#A1A1AA",
    "accent": "#E11D48",
    "accentSoft": "rgba(225,29,72,0.1)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(63,63,70,0.5)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.3)",
    "shadowStyle": "Zinc deep panel",
    "gradient": "linear-gradient(135deg, #E11D48 0%, #F43F5E 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. Inter on the zinc dark palette feels like a modern dashboard framework — neutral, professional, and scalable. The 600 weight provides just enough emphasis for headings without overwhelming data. Import from Google Fonts.",
    "aiPromptColors": "Background: #09090B — zinc black, the neutral dark from Tailwind's zinc scale. "Surface": #18181B — zinc 900. "Text": #FAFAFA — zinc 50. Muted "text": #A1A1AA — zinc 400. "Accent": #E11D48 — rose 600. This red-pink is passionate and urgent — it creates a striking contrast against the cold zinc palette. Accent "soft": rgba(225,29,72,0.1) — subtle rose glow. "Border": #3F3F46 — zinc 700 for visible structure.",
    "aiPromptShape": "Border-radius: 8px on cards, 6px on buttons, 12px on modals. Standard modern radius — functional and clean. Borders are 1px solid, visible on the dark background.",
    "aiPromptDepth": "Shadow: 0 4px 16px rgba(0,0,0,0.5) with a zinc border ring. Dark, neutral shadows that create clear layering. The zinc gray tones provide a systematic depth scale.",
    "aiPromptRules": "This is a dark zinc-palette aesthetic with a hot rose accent — like a modern Tailwind-based dashboard. The zinc scale provides 10 levels of gray that create systematic depth. The rose accent is for primary actions, error states, and metrics that need attention. Use #22C55E for success. Hover "states": zinc step-up, rose border glow on actionable elements. "Transitions": 150ms ease — snappy and modern."
  },
  {
    "name": "Sable",
    "fakeUrl": "sable.design",
    "vibe": "Dark oak and burnished brass",
    "tags": ["dark", "warm", "elegant"],
    "headingFont": "Cormorant Garamond",
    "bodyFont": "Inter",
    "headingWeight": 500,
    "letterSpacing": "0em",
    "bg": "#110E0A",
    "surface": "#1A1610",
    "surfaceHover": "#231E16",
    "border": "#2E2820",
    "text": "#E8DFD0",
    "textMuted": "#998B78",
    "accent": "#C9A86C",
    "accentSoft": "rgba(201,168,108,0.1)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 6px 24px rgba(17,14,10,0.7), 0 0 0 1px rgba(201,168,108,0.04)",
    "shadowSm": "0 2px 8px rgba(17,14,10,0.5)",
    "shadowStyle": "Brass candlelight",
    "gradient": "linear-gradient(135deg, #C9A86C 0%, #DFC08A 100%)",
    "aiPromptTypography": "Use Cormorant Garamond for headings — weight 500 (Medium). Cormorant at medium weight has incredible contrast between thick and thin strokes — at large sizes on dark backgrounds, it shimmers like etched brass. Use Inter weight 400 for body text. This pairing creates a dramatic "contrast": ornate serif for emphasis, clean sans for communication. Import both from Google Fonts.",
    "aiPromptColors": "Background: #110E0A — dark espresso brown. Not black — this warm dark brown creates a fundamentally different atmosphere from neutral black. "Surface": #1A1610 — slightly lighter mahogany. "Text": #E8DFD0 — warm cream. Muted "text": #998B78 — warm taupe. "Accent": #C9A86C — muted gold/brass. This is OLD gold — patinated, warm, and refined. Not flashy new gold, but the gold of heirloom jewelry. Accent "soft": rgba(201,168,108,0.1) — amber glow. "Border": #2E2820 — warm brown borders.",
    "aiPromptShape": "Border-radius: 6px — understated. The serif typography demands restrained shapes. The warmth comes from color, not from rounded corners.",
    "aiPromptDepth": "Shadow: warm brown shadows at 70% — enveloping and atmospheric. The gold accent ring at 4% creates a candlelit edge glow. Use the gold as a radial gradient at 3% behind hero elements for a warm hearth effect.",
    "aiPromptRules": "This is a dark luxury warm aesthetic — like a private members' club rendered in pixels. The espresso background with brass accents creates an atmosphere of established wealth and taste. Gold accent for headlines, links, and premium indicators. The serif headings are for display text and names only — never use them for UI labels. Hover "states": warm border glow, gentle gold shimmer. "Transitions": 350ms ease — slow, considered, luxurious."
  },
  {
    "name": "Quartz",
    "fakeUrl": "quartz.design",
    "vibe": "Crystal clarity in soft pink",
    "tags": ["light", "elegant", "playful"],
    "headingFont": "DM Sans",
    "bodyFont": "DM Sans",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#FDF2F8",
    "surface": "#FFFFFF",
    "surfaceHover": "#FCE7F3",
    "border": "#F9D3E7",
    "text": "#1C1917",
    "textMuted": "#78716C",
    "accent": "#EC4899",
    "accentSoft": "rgba(236,72,153,0.08)",
    "radius": "14px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 2px 12px rgba(236,72,153,0.06), 0 1px 3px rgba(0,0,0,0.03)",
    "shadowSm": "0 1px 4px rgba(236,72,153,0.04)",
    "shadowStyle": "Rose crystal lift",
    "gradient": "linear-gradient(135deg, #EC4899 0%, #F472B6 100%)",
    "aiPromptTypography": "Use DM Sans for ALL text — headings AND body. Weight 600 for headings, 400 for body. Letter-spacing -0.02em. DM Sans's rounded geometric shapes complement the pink palette without feeling childish. The 600 weight keeps headings grounded and professional. Import from Google Fonts.",
    "aiPromptColors": "Background: #FDF2F8 — rose-tinted white. "Surface": #FFFFFF — clean white. "Text": #1C1917 — warm near-black. Muted "text": #78716C — warm stone. "Accent": #EC4899 — vibrant pink. Not a pastel — this pink has energy and confidence. It's the pink of modern tech brands, not Valentine's cards. Accent "soft": rgba(236,72,153,0.08) — gentle pink wash. "Border": #F9D3E7 — soft rose borders.",
    "aiPromptShape": "Border-radius: 14px on cards, 8px on buttons, 20px on modals. Generously rounded to match the soft color palette. Elements should feel smooth and touchable.",
    "aiPromptDepth": "Shadow: pink-tinted at 6% opacity. Gentle, warm shadows that make cards feel like they're floating on a rose-colored cloud. The pink tint creates cohesion between shadow and accent.",
    "aiPromptRules": "This is a modern pink SaaS aesthetic — confident and contemporary. The pink is NOT decorative — it's the primary interactive color for buttons, links, and active states. The rose-tinted background sets the emotional tone. Pair with warm neutrals for text and borders. Photography should be warm and inviting. Hover "states": deepen pink tint, gentle border warming. "Transitions": 200ms ease — smooth and refined."
  },
  {
    "name": "Slate",
    "fakeUrl": "slate.design",
    "vibe": "Intelligent tools quiet power",
    "tags": ["dark", "minimal", "clean"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 500,
    "letterSpacing": "-0.01em",
    "bg": "#111111",
    "surface": "#191919",
    "surfaceHover": "#222222",
    "border": "#2E2E2E",
    "text": "#E5E5E5",
    "textMuted": "#8B8B8B",
    "accent": "#3B82F6",
    "accentSoft": "rgba(59,130,246,0.1)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(46,46,46,0.5)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Neutral deep float",
    "gradient": "linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%)",
    "aiPromptTypography": "Use Inter for ALL text — headings AND body. Weight 500 (Medium) for headings, 400 for body. Letter-spacing -0.01em. The medium weight is intentional — it creates a subtle hierarchy that feels confident, not loud. This is the Raycast/Arc aesthetic where the interface should feel intelligent and effortless. Import from Google Fonts.",
    "aiPromptColors": "Background: #111111 — neutral dark gray. "Surface": #191919 — slightly elevated. "Text": #E5E5E5 — soft white. Muted "text": #8B8B8B — mid-gray. "Accent": #3B82F6 — standard blue. Clean, trustworthy, and universally understood. On the dark neutral background, this blue feels calm and focused. Accent "soft": rgba(59,130,246,0.1) — soft blue highlight. "Border": #2E2E2E — subtle dark borders.",
    "aiPromptShape": "Border-radius: 10px on cards, 6px on buttons and inputs, 14px on modals. Modern and balanced — the radius feels current without being trendy.",
    "aiPromptDepth": "Shadow: 0 4px 20px rgba(0,0,0,0.4) with a border ring at 50%. The border ring is more important than the shadow on this dark background. Depth comes from the combination of subtle surface color shifts and border visibility.",
    "aiPromptRules": "This is a quiet dark SaaS aesthetic — the tool that gets out of your way. Blue accent for interactive elements, but used sparingly. The interface should feel like it was designed by someone who values restraint. Empty states, loading states, and error states all deserve careful design attention. Hover "states": surface brightening, blue border appearance. "Transitions": 150ms cubic-bezier(0.4, 0, 0.2, 1) — fast and polished."
  },
  {
    "name": "Harvest",
    "fakeUrl": "harvest.design",
    "vibe": "Golden hour creative studio",
    "tags": ["light", "warm", "bold"],
    "headingFont": "Playfair Display",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FFFCF5",
    "surface": "#FFFFFF",
    "surfaceHover": "#FFF8EC",
    "border": "#F0E4CC",
    "text": "#1F1A10",
    "textMuted": "#8A7D62",
    "accent": "#E8720C",
    "accentSoft": "rgba(232,114,12,0.08)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 2px 8px rgba(232,114,12,0.06), 0 1px 3px rgba(31,26,16,0.04)",
    "shadowSm": "0 1px 3px rgba(31,26,16,0.03)",
    "shadowStyle": "Golden warm rest",
    "gradient": "linear-gradient(135deg, #E8720C 0%, #F59E0B 100%)",
    "aiPromptTypography": "Use Playfair Display for headings — weight 700 (Bold). Playfair at bold weight is dramatic and confident — its high-contrast strokes create impactful headlines that pair beautifully with the warm amber palette. Use Inter weight 400 for body — the serif/sans contrast creates a strong editorial hierarchy. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFCF5 — warm golden-white, like sunlit parchment. "Surface": #FFFFFF — clean white cards. "Text": #1F1A10 — dark warm brown. Muted "text": #8A7D62 — warm olive. "Accent": #E8720C — burnt orange. This is the color of autumn harvest — warm, rich, and full of energy. It's amber with intensity. Accent "soft": rgba(232,114,12,0.08) — subtle amber wash. "Border": #F0E4CC — golden borders.",
    "aiPromptShape": "Border-radius: 8px on cards, 6px on buttons, 12px on modals. Moderate rounding — the serif headlines carry the personality while shapes stay grounded.",
    "aiPromptDepth": "Shadow: amber-tinted at 6% — warm and subtle. The golden tint in shadows reinforces the warm atmosphere. Cards feel lit by golden-hour sunlight.",
    "aiPromptRules": "This is a warm editorial-meets-product aesthetic. The serif/orange combination feels like a premium creative studio or artisan marketplace. The burnt orange is for CTAs, featured content, and pricing highlights. Photography should be warm-toned and aspirational. The golden background warmth is the foundation — never replace it with neutral white. Hover "states": warm the background, add amber glow. "Transitions": 200ms ease — warm and confident."
  },
  {
    "name": "Zenith",
    "fakeUrl": "zenith.design",
    "vibe": "Peak simplicity peak function",
    "tags": ["light", "minimal", "developer"],
    "headingFont": "Fira Code",
    "bodyFont": "Inter",
    "headingWeight": 500,
    "letterSpacing": "0em",
    "bg": "#FFFFFF",
    "surface": "#F6F6F6",
    "surfaceHover": "#EEEEEE",
    "border": "#DDDDDD",
    "text": "#171717",
    "textMuted": "#737373",
    "accent": "#171717",
    "accentSoft": "rgba(23,23,23,0.05)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "8px",
    "shadow": "0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03)",
    "shadowSm": "0 1px 1px rgba(0,0,0,0.04)",
    "shadowStyle": "Whisper minimal",
    "gradient": "linear-gradient(135deg, #171717 0%, #3A3A3A 100%)",
    "aiPromptTypography": "Use Fira Code for headings — weight 500 (Medium). Fira Code in display sizes on a light background creates a distinctly developer feel without being heavy. Its programming ligatures add visual interest to technical headings. Use Inter weight 400 for body — the mono heading / sans body pairing says 'developer documentation.' Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — pure white. "Surface": #F6F6F6 — light gray for code blocks and panels. "Text": #171717 — near-black. Muted "text": #737373 — medium gray. "Accent": #171717 — black as accent. Fully monochromatic. This is a docs-first interface where color would be a distraction. "Border": #DDDDDD — light gray structure.",
    "aiPromptShape": "Border-radius: 6px — tight and functional. Developer documentation needs efficient, compact layouts. Code blocks at 6px feel like embedded terminal windows.",
    "aiPromptDepth": "Shadow: almost invisible — 0 1px 3px at 5%. This is flat design that owns its flatness. Depth comes from background color differences between surface levels, not from shadows.",
    "aiPromptRules": "This is a developer documentation aesthetic — clean, monochromatic, and focused on content. The monospace headings and pure black/white palette create a reading-optimized experience. Code blocks should be prominent with gray backgrounds and syntax highlighting. Links are underlined. Buttons are outlined. Zero decoration. Hover "states": gray fills, underline reveals. "Transitions": 100ms ease — instant and functional."
  },
  {
    "name": "Velvet",
    "fakeUrl": "velvet.design",
    "vibe": "Plush darkness with golden threads",
    "tags": ["dark", "elegant", "warm"],
    "headingFont": "Lora",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#0E0B16",
    "surface": "#16122A",
    "surfaceHover": "#1D1838",
    "border": "#2A2444",
    "text": "#EDE8F5",
    "textMuted": "#9A90B5",
    "accent": "#E8B931",
    "accentSoft": "rgba(232,185,49,0.1)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 8px 32px rgba(14,11,22,0.7), 0 0 0 1px rgba(232,185,49,0.04)",
    "shadowSm": "0 2px 12px rgba(14,11,22,0.5)",
    "shadowStyle": "Gilded purple depth",
    "gradient": "linear-gradient(135deg, #E8B931 0%, #F0D060 100%)",
    "aiPromptTypography": "Use Lora for headings — weight 600 (SemiBold). Lora's warm, modern serifs feel sumptuous on the dark purple background — each letterform catches the imagined golden light. Use Inter weight 400 for body. This serif/sans pairing creates a theatrical "hierarchy": Lora headlines perform, Inter body text supports. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0E0B16 — deep purple-black, like crushed velvet. "Surface": #16122A — dark plum panels. "Text": #EDE8F5 — lavender-white. Muted "text": #9A90B5 — dusty purple. "Accent": #E8B931 — rich gold. Not muted brass, not flashy neon — this is theatrical gold. It glows against the purple like stage lighting on velvet curtains. Accent "soft": rgba(232,185,49,0.1) — golden aura. "Border": #2A2444 — deep purple borders.",
    "aiPromptShape": "Border-radius: 10px on cards, 6px on buttons, 14px on modals. Moderate rounding — refined but not overly soft. The elegance comes from color and typography, not from shape.",
    "aiPromptDepth": "Shadow: deep purple shadows at 70% with a gold accent ring at 4%. Cards emerge from the purple darkness with a subtle golden edge glow. The gold should be used as a radial gradient at 3% behind premium or featured content.",
    "aiPromptRules": "This is a theatrical luxury dark aesthetic — think premium membership tiers, creative platforms, or music apps. The purple + gold palette is inherently luxurious. Use gold for premium indicators, featured content, and primary CTAs. The serif headings at display sizes create a cinematic feel. Don't overuse the gold — it's the precious accent in an otherwise restrained system. Hover "states": gold border glow, surface warming. "Transitions": 300ms ease — slow and deliberate."
  },
  // ── Scraped seeds (staging) ──────────────────────────────────
  {
    "name": "Dispatch",
    "fakeUrl": "dispatch.design",
    "vibe": "The startup publication that became a product",
    "tags": ["light", "editorial", "serif", "startup"],
    "headingFont": "Instrument Serif",
    "bodyFont": "Nunito Sans",
    "headingWeight": 400,
    "letterSpacing": "-0.025em",
    "bg": "#FFFFFF",
    "surface": "#F8FAFC",
    "surfaceHover": "#F1F5F9",
    "border": "#E2E8F0",
    "text": "#0F172A",
    "textMuted": "#6B7280",
    "accent": "#5179F0",
    "accentSoft": "#EEF1FE",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.06)",
    "shadowStyle": "Featherweight lift",
    "gradient": "linear-gradient(135deg, #5179F0 0%, #7C3AED 100%)",
    "aiPromptTypography": "Headings: Instrument Serif at weight 400 with -0.025em letter-spacing. This is the move that makes your app look like it's been written up in a publication — Instrument Serif has this editorial warmth that Inter will never have, and at weight 400 it lands with confidence instead of effort. "Body": Nunito Sans at weight 500 for everything else. Rounded and friendly. The contrast between the serif headline and the geometric-rounded body creates genuine hierarchy without trying too hard.",
    "aiPromptColors": "Background: #FFFFFF. "Surface": #F8FAFC — a barely-there blue-gray that separates cards from the page without adding a second background color. "Text": #0F172A — deep slate, not black. Muted "text": #6B7280 for secondary content and metadata. "Accent": #5179F0 — confident indigo-blue. Not Stripe, not Tailwind, but lives in that neighborhood. Accent "soft": #EEF1FE for hover states. "Border": #E2E8F0 — slate-200, light and structural.",
    "aiPromptShape": "Border-radius: 8px on cards and inputs, 4px on badges and tags, 16px on modals and floating panels. Restrained rounding — modern without the puffy startup look. Buttons get 6px. The goal is crisp containers that feel intentional.",
    "aiPromptDepth": "Shadow: 0 1px 3px rgba(0,0,0,0.08) plus 0 1px 2px -1px rgba(0,0,0,0.06) — featherweight, almost invisible lift. Cards should feel like they're sitting on the page, not floating above it. No glow, no color in the shadow.",
    "aiPromptRules": "Editorial-meets-product aesthetic. White space is the primary design element. Serif headlines anchor the page with authority; everything else defers to them. Use the accent only on CTAs, active states, and links. Transitions at 0.15s ease-out. If you're reaching for a gradient, use it only on the primary CTA button or a single hero element, never as a background."
  },
  {
    "name": "Command",
    "fakeUrl": "command.design",
    "vibe": "The launcher. Dark, fast, surgical.",
    "tags": ["dark", "developer", "minimal", "monochrome"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#07080A",
    "surface": "#101111",
    "surfaceHover": "#181A1E",
    "border": "#222526",
    "text": "#F3F3F8",
    "textMuted": "#78787C",
    "accent": "#FFC233",
    "accentSoft": "#1F1A0D",
    "radius": "12px",
    "radiusSm": "6px",
    "radiusXl": "20px",
    "shadow": "0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(84,84,84,0.2)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Command depth",
    "gradient": "linear-gradient(135deg, #FFC233 0%, #FF6B6B 50%, #56C2FF 100%)",
    "aiPromptTypography": "Inter at weight 600 with -0.02em letter-spacing throughout. No font switching — Inter does everything here. The discipline is in the "sizing": big contrast between hero text and body copy, minimal variation in between. Weight does the hierarchy work. On a background this dark, Inter at 600 looks carved.",
    "aiPromptColors": "Background: #07080A — not #000000, not #111111. Exactly this. It has just enough color temperature to feel intentional. "Surface": #101111 for cards. Surface "hover": #181A1E. "Border": #222526 — the hairline that defines space without demanding attention. "Text": #F3F3F8 — cool off-white. "Muted": #78787C. "Accent": #FFC233 — the Raycast yellow. Warm, confident, unexpected on this background. Accent "soft": #1F1A0D for hover states.",
    "aiPromptShape": "Border-radius: 12px on panels and cards (their app-radius), 6px on inputs and buttons, 20px on modals. The rounding is generous for a dark dev tool — it softens what could feel brutal. Buttons use 8px. Every container should feel like it belongs in an OS, not a website.",
    "aiPromptDepth": "Shadow: layered — 0 8px 32px rgba(0,0,0,0.5) for elevation plus 0 0 0 1px rgba(84,84,84,0.2) as a border substitute. On dark backgrounds, shadows define depth through contrast rather than blur. Inner elements use 0 2px 8px rgba(0,0,0,0.3). No colored glows unless you're highlighting the accent.",
    "aiPromptRules": "This is OS-native dark. Every element should feel like it belongs in a system utility, not a startup landing page. Maximum "density": don't waste space with decorative padding. The yellow accent earns its appearance — use it only on the single most important interactive element per screen. Transitions at 0.1s — faster than you think. Monospace font for any data display."
  },
  {
    "name": "Terminal",
    "fakeUrl": "terminal.design",
    "vibe": "Developer terminal made beautiful. Warm dark.",
    "tags": ["dark", "developer", "warm-dark", "premium"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 400,
    "letterSpacing": "-0.025em",
    "bg": "#121212",
    "surface": "#1A1A1A",
    "surfaceHover": "#222222",
    "border": "#2A2A2A",
    "text": "#FFFFFF",
    "textMuted": "#868584",
    "accent": "#E3E2E0",
    "accentSoft": "#231F1E",
    "radius": "12px",
    "radiusSm": "6px",
    "radiusXl": "50px",
    "shadow": "0 4px 24px rgba(0,0,0,0.4)",
    "shadowSm": "0 1px 4px rgba(0,0,0,0.3)",
    "shadowStyle": "Terminal lift",
    "gradient": "linear-gradient(135deg, #E3E2E0 0%, #AFAEAC 100%)",
    "aiPromptTypography": "Inter at weight 400 with -0.025em letter-spacing on headings. The light weight at large size is the move — it creates this editorial quality on a dark background, like someone pressed the text into the screen rather than projecting it. Body runs at weight 400 too. The warmth comes from the color palette, not the typeface.",
    "aiPromptColors": "Background: #121212 — warm dark, not cold dark. There's a subtle difference between #07080A (cool) and #121212 (neutral-warm) and this site lives in the warm lane. "Surface": #1A1A1A. Surface "hover": #222222. "Text": pure #FFFFFF. "Muted": #868584 — warm gray, not cool. "Border": #2A2A2A — subtle separation on dark backgrounds. "Accent": #E3E2E0 — almost white, just warm enough.",
    "aiPromptShape": "Border-radius: 12px on cards, 6px on tags and inputs, 50px on CTA buttons (full pill). The pill CTA is the signature move — it communicates confidence and modernity. Don't use pill on every button, only the hero CTA. Everything else stays at 12px.",
    "aiPromptDepth": "Shadow: 0 4px 24px rgba(0,0,0,0.4) — substantial but not dramatic. Dark backgrounds need more shadow depth than light ones to create the same perceived lift. Subtle border steps on surfaces do more work than shadows on this palette.",
    "aiPromptRules": "Warm-dark is different from cold-dark. The warmth comes from the gray tones — #868584 has a slight red/brown undertone versus the blue-tinged grays of colder dark UIs. Use the pill CTA exactly once per major section. The near-white accent on near-black background creates maximum contrast with minimum noise. Keep copy sparse — this aesthetic rewards restraint."
  },
  {
    "name": "Velocity",
    "fakeUrl": "velocity.design",
    "vibe": "Ship fast. The productivity tool aesthetic done right.",
    "tags": ["dark", "developer", "productivity", "purple"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 500,
    "letterSpacing": "-0.022em",
    "bg": "#08090A",
    "surface": "#0F1011",
    "surfaceHover": "#191D20",
    "border": "#2A2E33",
    "text": "#F7F8F8",
    "textMuted": "#86848D",
    "accent": "#7070FF",
    "accentSoft": "#151527",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "16px",
    "shadow": "0px 3px 12px rgba(0,0,0,0.09)",
    "shadowSm": "0px 1px 4px -1px rgba(0,0,0,0.09)",
    "shadowStyle": "Precision depth",
    "gradient": "linear-gradient(92.88deg, #BE05FF 9.16%, #A954FF 43.89%, #A771FF 64.72%)",
    "aiPromptTypography": "Inter Variable at weight 500 (their custom medium weight) with -0.022em letter-spacing. This is the tightest, most disciplined typography system on this list — every size step is precisely defined, every weight is deliberate. At hero scale (4.5rem) use -0.022em tracking. At body scale (0.9375rem) use -0.011em. The font settings include cv01 and ss03 OpenType features — apply font-feature-settings: 'cv01','ss03' for authentic Linear typography.",
    "aiPromptColors": "Background: #08090A — the marketing dark. "Surface": #0F1011 for the app panel feel. Surface "hover": #191D20. "Border": #2A2E33 — solid, precise. "Text": #F7F8F8 — near white, slightly warm. "Muted": #86848D — warm gray with a subtle purple undertone from the brand. "Accent": #7070FF — the Linear purple. Symmetrical hue, no red or blue lean. Accent "soft": #151527. The gradient is their "signature": diagonal purple from #BE05FF to #A771FF.",
    "aiPromptShape": "Border-radius: 8px standard, 6px on inputs and small elements, 16px on modals. The app itself uses 12px for the main container radius. This is a system that never does anything by accident — every radius is a decision. Buttons are pill-shaped (9999px) using --radius-rounded.",
    "aiPromptDepth": "Linear's shadow system is famously subtle — 0px 3px 12px rgba(0,0,0,0.09). On near-black backgrounds, shadows are barely visible; depth comes from surface color steps instead. Use border (1px solid #2A2E33) as the primary depth signal, shadow as secondary.",
    "aiPromptRules": "This is the gold standard for developer-tool dark UI. Every element should feel intentional — no decorative anything. The purple accent appears only when something is interactive, selected, or branded. Apply font-feature-settings for authentic typography. Speed is visual — fast transitions (0.1s), crisp edges, no softness. The gradient lives only in the most branded moments."
  },
  {
    "name": "Kindling",
    "fakeUrl": "kindling.design",
    "vibe": "Warm email marketing energy. The opposite of cold SaaS.",
    "tags": ["light", "warm", "marketing", "email"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.014em",
    "bg": "#FFFFFF",
    "surface": "#FAFAF9",
    "surfaceHover": "#F5F5F4",
    "border": "#E7E5E4",
    "text": "#1C1917",
    "textMuted": "#57534E",
    "accent": "#F97316",
    "accentSoft": "#FEF3EB",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.04)",
    "shadowStyle": "Warm lift",
    "gradient": "linear-gradient(135deg, #F97316 0%, #FBBF24 100%)",
    "aiPromptTypography": "Inter at weight 600 with -0.014em letter-spacing on headings. Clean and confident without being aggressive. Body runs at weight 400. The warmth here is entirely in the color system — the typography is neutral, letting the Stone palette carry the personality.",
    "aiPromptColors": "Background: #FFFFFF — pure white, no apology. "Surface": #FAFAF9 — Stone 50, the warmest near-white. Surface "hover": #F5F5F4 — Stone 100. "Text": #1C1917 — Stone 900. This is brown-black, not blue-black. It has warmth in the darkest tone. "Muted": #57534E — Stone 600. "Border": #E7E5E4 — Stone 200. "Accent": #F97316 — orange-500. Warm, energetic, marketing-forward. Accent "soft": #FEF3EB for hover states.",
    "aiPromptShape": "Border-radius: 8px on cards, 4px on tags, 16px on modals. Clean and understated — let the warm palette do the personality work, not aggressive rounding.",
    "aiPromptDepth": "Shadow: barely-there. 0 1px 3px rgba(0,0,0,0.06) — warm surfaces don't need much. Cards feel like they're resting, not floating. Borders do more depth work than shadows in this system.",
    "aiPromptRules": "The entire personality is in the Stone palette. Stone neutrals have warmth; Gray neutrals are cold. Never swap in a gray from another system — the brown-black text on warm white is the thing that makes this feel different from a generic SaaS template. Orange accent earns its appearance on primary CTAs only. Everything else is warm neutral."
  },
  {
    "name": "Keystone",
    "fakeUrl": "keystone.design",
    "vibe": "Identity infrastructure. Clean, precise, slightly purple.",
    "tags": ["light", "developer", "auth", "purple"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#F7F7F8",
    "surface": "#FFFFFF",
    "surfaceHover": "#F0F0F2",
    "border": "#E4E4E7",
    "text": "#131316",
    "textMuted": "#5E5F6E",
    "accent": "#6C47FF",
    "accentSoft": "#F2EFFE",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.04)",
    "shadowStyle": "Surface definition",
    "gradient": "linear-gradient(135deg, #6C47FF 0%, #5DE3FF 100%)",
    "aiPromptTypography": "Inter/Geist at weight 700 with -0.03em letter-spacing on headings. Aggressive tracking — this is tighter than most. Body at weight 400 with -0.01em. The heavy weight + tight tracking combination reads as precise and authoritative. This is authentication infrastructure; it needs to feel serious.",
    "aiPromptColors": "Background: #F7F7F8 — barely-gray white, just enough to make pure white cards pop. "Surface": #FFFFFF. Surface "hover": #F0F0F2. "Text": #131316 — near black with a very slight purple undertone that ties to the accent. "Muted": #5E5F6E — cool gray-purple. "Border": #E4E4E7 — cool light gray. "Accent": #6C47FF — Clerk's signature violet-purple. Strong, trustworthy, modern. Accent "soft": #F2EFFE. The gradient runs purple to cyan.",
    "aiPromptShape": "Border-radius: 8px on cards and inputs, 4px on tags, 16px on modals and overlays. The component library uses tight rounding — nothing puffy. Buttons at 6px. Focus states use the purple accent with a subtle outer ring.",
    "aiPromptDepth": "Shadow: 0 1px 3px rgba(0,0,0,0.06) plus 0 0 0 1px rgba(0,0,0,0.04) ring — this is the technique that gives Clerk components their defined, card-like quality without dramatic shadow. The 1px ring acts as a permanent focus state at rest.",
    "aiPromptRules": "Developer trust through precision. Every pixel should feel like it was placed, not generated. The off-white background (#F7F7F8) is intentional — pure white is for cards, not pages. Purple accent is used "sparingly": CTAs, active states, brand moments only. The slight purple tint in the text and muted colors unifies the palette subliminally. Code blocks use a dark surface (#212126) inside the light layout."
  },
  {
    "name": "Merchant",
    "fakeUrl": "merchant.design",
    "vibe": "Next household name energy. Commerce-scale dark.",
    "tags": ["dark", "ecom", "minimal", "monochrome"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 400,
    "letterSpacing": "0em",
    "bg": "#000000",
    "surface": "#02090A",
    "surfaceHover": "#0D1617",
    "border": "#1A1A1A",
    "text": "#FFFFFF",
    "textMuted": "#8C8C8C",
    "accent": "#95BF46",
    "accentSoft": "#0F1307",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "9999px",
    "shadow": "0 4px 16px rgba(0,0,0,0.5)",
    "shadowSm": "0 1px 4px rgba(0,0,0,0.4)",
    "shadowStyle": "Commerce depth",
    "gradient": "linear-gradient(135deg, #95BF46 0%, #50A050 100%)",
    "aiPromptTypography": "Inter at weight 400 — no heroics. The restraint is the point. On pure black, light-weight sans-serif at large scale reads like it was cut into the background rather than printed on it. No letter-spacing, no tracking games. Body runs at the same weight and family. The hierarchy comes entirely from size, not decoration.",
    "aiPromptColors": "Background: #000000 — exactly black. Surface for "cards": #02090A — near-invisible step up with a trace of blue-green. "Border": #1A1A1A — subtle hairlines on black. "Text": #FFFFFF. "Muted": #8C8C8C. "Accent": #95BF46 — Shopify green. Use it sparingly; this is near-monochrome and the green hits hard when it appears.",
    "aiPromptShape": "Border-radius: 4px on cards and inputs — almost square. Rectangular containers signal reliability, not delight. CTA buttons get 9999px — full pill. The contrast between square cards and pill buttons is the signature move. Don't round everything; the tension is intentional.",
    "aiPromptDepth": "On pure black, shadow is barely visible. Use 0 4px 16px rgba(0,0,0,0.5) for elevated panels. Subtle borders do more work than shadows in this system.",
    "aiPromptRules": "This is commerce at scale. Everything communicates capability, not personality. The green accent earns its one appearance per page — primary CTA only. No decorative gradients in the layout. The pill CTA on square-radius cards is the signature — use it exactly as described. If you add a second color, you've broken the system."
  },
  {
    "name": "Atelier",
    "fakeUrl": "atelier.design",
    "vibe": "Warm knowledge infrastructure. Ivory, clay, and a serif body that earns it.",
    "tags": ["light", "warm", "editorial", "ai"],
    "headingFont": "Inter",
    "bodyFont": "Lora",
    "headingWeight": 700,
    "letterSpacing": "0em",
    "bg": "#FAF9F5",
    "surface": "#F0EEE6",
    "surfaceHover": "#E8E6DC",
    "border": "#E8E6DC",
    "text": "#141413",
    "textMuted": "#5E5D59",
    "accent": "#D97757",
    "accentSoft": "#F8F0EB",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px rgba(20,20,19,0.06)",
    "shadowSm": "0 1px 2px rgba(20,20,19,0.04)",
    "shadowStyle": "Ivory lift",
    "gradient": "linear-gradient(135deg, #D97757 0%, #E3DACC 100%)",
    "aiPromptTypography": "Headings: Inter at weight 700. "Body": Lora — a serif. This is the signature move. Serif body text on warm ivory reads like a research paper, not a SaaS marketing page. The contrast between neutral sans headline and warm serif body is all the personality this system needs. Import Lora from Google Fonts.",
    "aiPromptColors": "Background: #FAF9F5 — ivory-light. Not white. "Surface": #F0EEE6 — ivory-medium. Surface "hover": #E8E6DC — ivory-dark. "Text": #141413 — brown-black, not blue-black. "Accent": #D97757 — clay. Terra cotta with confidence. "Muted": #5E5D59 — slate-light, warm gray. Every color has a warm undertone; don't mix in any cool neutrals.",
    "aiPromptShape": "Border-radius: 8px on cards, 4px on small elements, 16px on large panels. Pill buttons (100vw) for primary CTAs only. Tasteful, not aggressive.",
    "aiPromptDepth": "Shadow is barely there — 0 1px 3px rgba(20,20,19,0.06). The ivory tone steps create depth on their own. No colored shadows.",
    "aiPromptRules": "Warmth is the entire thesis. The serif body is non-negotiable — it's what makes this unlike every other light SaaS template. Clay accent appears once per major section. Transitions at 0.2s ease — deliberate, not snappy. Never break the warm tone by introducing a cool neutral."
  },
  {
    "name": "Safari",
    "fakeUrl": "safari.design",
    "vibe": "Olive sage analytics. The anti-white-background SaaS.",
    "tags": ["light", "warm", "analytics", "olive"],
    "headingFont": "IBM Plex Sans",
    "bodyFont": "IBM Plex Sans",
    "headingWeight": 800,
    "letterSpacing": "-0.012em",
    "bg": "#EEEFE9",
    "surface": "#E5E7E0",
    "surfaceHover": "#D8DAD0",
    "border": "#C8CAC0",
    "text": "#222320",
    "textMuted": "#73756B",
    "accent": "#F54E00",
    "accentSoft": "#ECEAE2",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px rgba(34,35,32,0.08)",
    "shadowSm": "0 1px 2px rgba(34,35,32,0.05)",
    "shadowStyle": "Olive lift",
    "gradient": "linear-gradient(135deg, #F54E00 0%, #F7A501 100%)",
    "aiPromptTypography": "IBM Plex Sans at weight 800 — the heaviest heading weight in the catalog. On olive background it lands with real authority. The slightly technical character of IBM Plex at extreme weight on a nature-toned background is a combination that exists nowhere else. Body at weight 400, same family.",
    "aiPromptColors": "Background: #EEEFE9 — warm sage. Not gray, not green, not beige. "Surface": #E5E7E0. "Border": #C8CAC0. "Text": #222320 — very dark warm near-black with olive undertone. "Muted": #73756B — warm sage gray. "Accent": #F54E00 — PostHog orange. Energetic and warm, unexpected against the sage palette.",
    "aiPromptShape": "Border-radius: 8px standard. 4px for tags. 16px for modals. The color system does all the personality work; shape stays conventional.",
    "aiPromptDepth": "Shadows are warm-tinted — rgba(34,35,32,0.08) with the same olive undertone as the text. Color-step from bg to surface to border creates enough depth without heavy shadow.",
    "aiPromptRules": "Never use a neutral gray — every gray must have a warm/olive undertone. IBM Plex at 800 is the typography signature; don't dilute it. Orange accent is a hot coal on mossy ground — use it precisely, once per view."
  },
  {
    "name": "Specter",
    "fakeUrl": "specter.design",
    "vibe": "Dark publishing platform. The lime accent that breaks the internet.",
    "tags": ["dark", "editorial", "bold", "lime"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.03em",
    "bg": "#15171A",
    "surface": "#1F2937",
    "surfaceHover": "#293545",
    "border": "#343F44",
    "text": "#FFFFFF",
    "textMuted": "#738A94",
    "accent": "#D1FF19",
    "accentSoft": "#262E1C",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 8px 24px rgba(0,0,0,0.4)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.3)",
    "shadowStyle": "Dark editorial lift",
    "gradient": "linear-gradient(135deg, #D1FF19 0%, #009C7E 100%)",
    "aiPromptTypography": "Inter at weight 700 with -0.03em letter-spacing — tight, decisive. Publishing-platform "typography": confident enough to hold the page without decoration. Body at weight 400, standard tracking.",
    "aiPromptColors": "Background: #15171A — Ghost's exact base. Not quite black, slight cool-dark undertone. "Surface": #1F2937. "Border": #343F44 — dark teal-gray. "Text": #FFFFFF. "Muted": #738A94 — cool gray with blue-green tint. "Accent": #D1FF19 — lime. Electric. The only color in the palette.",
    "aiPromptShape": "Border-radius: 6px — slightly tighter than typical. 4px on small elements, 12px on larger panels. Editorial feel, not consumer-friendly.",
    "aiPromptDepth": "Shadow: 0 8px 24px rgba(0,0,0,0.4) — dark backgrounds need substantial depth. Surface color steps handle most of the layering.",
    "aiPromptRules": "The lime accent is a single bright note in a dark room — primary CTA only, one per screen. The gradient (lime → teal) for hero moments only. This aesthetic rewards "minimalism": fewer elements, more space, better contrast."
  },
  {
    "name": "Folio",
    "fakeUrl": "folio.design",
    "vibe": "Warm parchment developer tool. The anti-SaaS-blue light theme.",
    "tags": ["light", "warm", "developer", "minimal"],
    "headingFont": "Inter",
    "bodyFont": "Inter",
    "headingWeight": 400,
    "letterSpacing": "-0.01em",
    "bg": "#F7F7F4",
    "surface": "#EFEFEC",
    "surfaceHover": "#E8E8E5",
    "border": "#DDDDD8",
    "text": "#26251E",
    "textMuted": "#706F65",
    "accent": "#2563EB",
    "accentSoft": "#F1F3F8",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 1px 3px rgba(38,37,30,0.06)",
    "shadowSm": "0 1px 2px rgba(38,37,30,0.04)",
    "shadowStyle": "Parchment lift",
    "gradient": "linear-gradient(135deg, #2563EB 0%, #7C3AED 100%)",
    "aiPromptTypography": "Inter at weight 400 — deliberately light for a heading. On warm parchment, 400-weight headings read like text that belongs to the surface. No aggressive tracking. The most understated typography in the catalog.",
    "aiPromptColors": "Background: #F7F7F4 — warm parchment. Not white. "Text": #26251E — brown-black. The warm text on warm background creates a paper-like reading experience. "Muted": #706F65 — warm gray. "Border": #DDDDD8 — warm light gray. "Accent": #2563EB — clean blue that provides contrast without fighting the warm palette.",
    "aiPromptShape": "Border-radius: 8px throughout. Shape language is conventional; the color system creates all the personality.",
    "aiPromptDepth": "Shadow has warm undertones — rgba(38,37,30,0.06). Barely visible. Borders do more depth work than shadows.",
    "aiPromptRules": "Never break the warmth. Every neutral must lean warm — no cool grays, no blue-tinted whites. Blue accent on interactive elements and links only — it's the one cool note in a warm composition. Weight 400 headings only; heavier breaks the paper-like quality."
  },
  {
    "name": "Hive",
    "fakeUrl": "hive.design",
    "vibe": "Bold dark email platform. Clash Grotesk + Satoshi + lime CTA. Unforgettable.",
    "tags": ["dark", "bold", "email", "lime"],
    "headingFont": "Clash Display",
    "bodyFont": "Satoshi",
    "headingWeight": 700,
    "letterSpacing": "0em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1E1E1E",
    "border": "#232323",
    "text": "#FFFFFF",
    "textMuted": "#9D9D9D",
    "accent": "#CAFF45",
    "accentSoft": "#1C2211",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "16px",
    "shadow": "0 8px 32px rgba(0,0,0,0.6)",
    "shadowSm": "0 2px 8px rgba(0,0,0,0.4)",
    "shadowStyle": "Bold dark",
    "gradient": "linear-gradient(135deg, #CAFF45 0%, #00E5A0 100%)",
    "aiPromptTypography": "Headings: Clash Display at weight 700 — the most distinctive font in the catalog. Geometric, confident, slightly editorial. "Body": Satoshi at weight 400 — the humanist counterpart that softens what would otherwise be aggressive. Both fonts must be imported from Fontshare (api.fontshare.com).",
    "aiPromptColors": "Background: #0A0A0A — rich near-black. "Surface": #141414. Muted "text": #9D9D9D. "Border": #232323. "Accent": #CAFF45 — yellow-lime. On near-black this reads as neon without the cyberpunk baggage.",
    "aiPromptShape": "Border-radius: 8px on cards, 4px on tags, 16px on modals. Font and color doing all the personality work.",
    "aiPromptDepth": "Heavy shadows on dark backgrounds — 0 8px 32px rgba(0,0,0,0.6). Borders define surfaces. The bg → surface step (#0A0A0A → #141414) is subtle but critical for card differentiation.",
    "aiPromptRules": "Clash Display and Satoshi must be imported from Fontshare. Lime accent on exactly one element per view — primary CTA only. Put it on two things and it loses all power. The gradient (lime → mint) for hero sections only. This system is loud; resist adding more color."
  },

  {
    "name": "Start Menu",
    "fakeUrl": "startmenu.exe",
    "vibe": "Click Start. Click anything. Just click.",
    "tags": ["light", "retro", "system"],
    "headingFont": "Archivo",
    "bodyFont": "IBM Plex Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#EDEDEF",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5F5F7",
    "border": "#C6C6C8",
    "text": "#1D1D1F",
    "textMuted": "#6E6E73",
    "accent": "#0066CC",
    "accentSoft": "rgba(0,102,204,0.08)",
    "radius": "2px",
    "radiusSm": "1px",
    "radiusXl": "4px",
    "shadow": "3px 3px 0px #C6C6C8",
    "shadowSm": "2px 2px 0px #D1D1D3",
    "shadowStyle": "Hard system",
    "gradient": "linear-gradient(180deg, #0066CC 0%, #3399FF 100%)",
    "aiPromptTypography": "Use Archivo for headings — industrial, geometric, reads like a modern system UI font with weight behind it. Weight 700. "Body": IBM Plex Sans at 400 — utilitarian and clean, built for interfaces. Both from Google Fonts.",
    "aiPromptColors": "Background: #EDEDEF — soft system gray, modern and livable. "Surface": #FFFFFF — white cards lift off the gray. "Text": #1D1D1F — near-black. "Accent": #0066CC — a refined, confident blue that nods to title bars without screaming retro. "Border": #C6C6C8 — defines structure without harshness.",
    "aiPromptShape": "Border-radius: 2px — barely rounded, almost boxy. This is intentional restraint. Borders are 1px solid. Elements should feel like system panels — structured, grid-aligned, utilitarian.",
    "aiPromptDepth": "Shadow: 3px 3px 0px #C6C6C8 — hard offset, no blur. Cards feel physically placed, like dialog windows. Every element has a tangible, clickable weight to it.",
    "aiPromptRules": "Modern system UI energy inspired by Windows 95. Structured gray backgrounds, white surface cards, hard-offset shadows. The blue accent is confident and singular — use for primary actions only. Everything aligns to a grid. Precision over flair.",
    "collection": "wayback"
  },
  {
    "name": "Guestbook",
    "fakeUrl": "guestbook.geo",
    "vibe": "Under construction since '97.",
    "tags": ["dark", "expressive", "neon"],
    "headingFont": "Rubik",
    "bodyFont": "Space Mono",
    "headingWeight": 700,
    "letterSpacing": "0em",
    "bg": "#12082E",
    "surface": "#1C1045",
    "surfaceHover": "#261658",
    "border": "#362272",
    "text": "#E4DCFF",
    "textMuted": "#9B8CCE",
    "accent": "#00E88F",
    "accentSoft": "rgba(0,232,143,0.12)",
    "radius": "0px",
    "radiusSm": "0px",
    "radiusXl": "2px",
    "shadow": "0 0 20px rgba(0,232,143,0.15)",
    "shadowSm": "0 0 10px rgba(0,232,143,0.1)",
    "shadowStyle": "Neon glow",
    "gradient": "linear-gradient(135deg, #00E88F 0%, #7B61FF 50%, #FF6EC7 100%)",
    "aiPromptTypography": "Use Rubik for headings — chunky, geometric, approachable but with personality. Weight 700. "Body": Space Mono at 400 — monospaced, raw, reads like source code pasted into a personal homepage. Both from Google Fonts.",
    "aiPromptColors": "Background: #12082E — deep rich indigo, not flat dark blue. "Surface": #1C1045 — purple-shifted dark. "Text": #E4DCFF — lavender white, soft on the eyes. "Accent": #00E88F — modern neon green, refined but electric. "Border": #362272 — visible purple edge.",
    "aiPromptShape": "Border-radius: 0px — sharp edges everywhere. This is DIY energy, raw HTML spirit. Borders are 1px solid purple. Nothing is polished. Monospace body text reinforces the hand-coded feel.",
    "aiPromptDepth": "Shadow: 0 0 20px rgba(0,232,143,0.15) — soft neon glow, not overwhelming. Elements emit light against the deep indigo. The glow is atmospheric, not aggressive.",
    "aiPromptRules": "Deep indigo canvas with neon green accents. Inspired by Geocities but refined — the chaos is in the spirit, not the execution. Monospace body, chunky headings, sharp edges. The green glow is the personality — use it on interactive elements and borders. Keep surfaces dark and layered.",
    "collection": "wayback"
  },
  {
    "name": "Keyword",
    "fakeUrl": "keyword.net",
    "vibe": "You've got mail.",
    "tags": ["light", "warm", "portal"],
    "headingFont": "DM Serif Display",
    "bodyFont": "Inter",
    "headingWeight": 400,
    "letterSpacing": "0em",
    "bg": "#FAFAF7",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5F0E8",
    "border": "#E0D5C5",
    "text": "#1A2744",
    "textMuted": "#607088",
    "accent": "#E8960C",
    "accentSoft": "rgba(232,150,12,0.1)",
    "radius": "6px",
    "radiusSm": "4px",
    "radiusXl": "10px",
    "shadow": "0 2px 8px rgba(0,0,0,0.08)",
    "shadowSm": "0 1px 3px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft warm",
    "gradient": "linear-gradient(135deg, #1A2744 0%, #3B6CB5 50%, #E8960C 100%)",
    "aiPromptTypography": "Use DM Serif Display for headings — warm, authoritative, a modern editorial serif that evokes portal-era mastheads. Weight 400 (DM Serif only has one weight, it's naturally bold). "Body": Inter at 400 — clean and modern. The serif/sans contrast creates trust.",
    "aiPromptColors": "Background: #FAFAF7 — warm off-white. "Surface": #FFFFFF — clean white cards. "Text": #1A2744 — deep navy. "Accent": #E8960C — warm amber/gold, the portal-era highlight color modernized. "Border": #E0D5C5 — warm sand. "Muted": #607088 — slate.",
    "aiPromptShape": "Border-radius: 6px — slightly rounded, not aggressive. Borders are 1px solid in the warm sand tone. Sections feel like organized content modules with clear hierarchy.",
    "aiPromptDepth": "Shadow: 0 2px 8px rgba(0,0,0,0.08) — soft, grounded. Cards sit naturally on the warm background. Depth is subtle — this is about warmth and trust, not drama.",
    "aiPromptRules": "Warm portal energy, modernized. Navy text on warm cream with amber accents. The serif headings carry authority while Inter body keeps things readable. Gold/amber accent is for the primary CTA — one warm pop against the cool navy. Think friendly, trustworthy, organized.",
    "collection": "wayback"
  },
  {
    "name": "Top 8",
    "fakeUrl": "mytop8.page",
    "vibe": "Thanks for the add.",
    "tags": ["dark", "expressive", "bold"],
    "headingFont": "Syne",
    "bodyFont": "JetBrains Mono",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0E0E12",
    "surface": "#19191F",
    "surfaceHover": "#232329",
    "border": "#2D2D35",
    "text": "#F2E8F8",
    "textMuted": "#8A7F96",
    "accent": "#E91E8C",
    "accentSoft": "rgba(233,30,140,0.12)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 0 24px rgba(233,30,140,0.15), 0 4px 16px rgba(0,0,0,0.4)",
    "shadowSm": "0 0 12px rgba(233,30,140,0.1)",
    "shadowStyle": "Pink glow",
    "gradient": "linear-gradient(135deg, #E91E8C 0%, #8B5CF6 50%, #0E0E12 100%)",
    "aiPromptTypography": "Use Syne for headings — expressive, geometric, with that creative-rebel personality. Weight 700. "Body": JetBrains Mono at 400 — monospaced, reads like custom CSS from someone who taught themselves to code. The contrast is intentional.",
    "aiPromptColors": "Background: #0E0E12 — near-black with a purple undertone. "Surface": #19191F — dark cards with depth. "Text": #F2E8F8 — slightly purple-tinted white. "Accent": #E91E8C — modernized hot pink, electric but controlled. "Border": #2D2D35 — subtle.",
    "aiPromptShape": "Border-radius: 4px — minimal rounding. This isn't cute — it's expressive. Borders are 1px solid. Elements should feel layered and personal, not corporate-grid.",
    "aiPromptDepth": "Shadow: 0 0 24px rgba(233,30,140,0.15) — pink ambient glow. Cards feel lit from within. The glow combined with deep dark background creates an intimate, late-night creative energy.",
    "aiPromptRules": "Dark canvas, hot pink glow, monospace body — this is custom-profile energy modernized. Syne headings bring personality without novelty. The pink accent is for interactive elements and highlights — it's the single expressive color against the dark. Everything should feel like someone's carefully curated digital space.",
    "collection": "wayback"
  },
  {
    "name": "Skip Intro",
    "fakeUrl": "skipintro.swf",
    "vibe": "Loading... 97%.",
    "tags": ["dark", "cinematic", "bold"],
    "headingFont": "Urbanist",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "0.08em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1E1E1E",
    "border": "#282828",
    "text": "#FAFAFA",
    "textMuted": "#707070",
    "accent": "#FF4D00",
    "accentSoft": "rgba(255,77,0,0.1)",
    "radius": "2px",
    "radiusSm": "0px",
    "radiusXl": "4px",
    "shadow": "0 8px 32px rgba(0,0,0,0.6)",
    "shadowSm": "0 4px 12px rgba(0,0,0,0.4)",
    "shadowStyle": "Deep cinematic",
    "gradient": "linear-gradient(135deg, #FF4D00 0%, #FF7A00 50%, #FFB800 100%)",
    "aiPromptTypography": "Use Urbanist for headings — geometric, wide, cinematic at large sizes. Weight 700. Letter-spacing 0.08em — wide-tracked like a title card. "Body": Inter at 400 — clean, invisible, lets the headings own the room. Wide letter-spacing on headings is mandatory.",
    "aiPromptColors": "Background: #0A0A0A — deep black. "Surface": #141414 — barely-there card layer. "Text": #FAFAFA — bright white. "Accent": #FF4D00 — vivid orange, like a loading bar on a Flash splash page. "Muted": #707070 — mid-gray. "Border": #282828 — whisper-dark.",
    "aiPromptShape": "Border-radius: 2px — almost nothing. Precise, cinematic. Borders are 1px solid, barely visible. Everything is full-bleed, edge-to-edge.",
    "aiPromptDepth": "Shadow: 0 8px 32px rgba(0,0,0,0.6) — deep and dramatic. Elements emerge from pure darkness. This is theatrical — everything floats in the void.",
    "aiPromptRules": "Flash-era agency portfolio, modernized. Black canvas, orange accent, wide-tracked uppercase headings. The orange is for one element per section — the CTA, the progress indicator, the hero accent. Wide letter-spacing on Urbanist headings gives that splash-screen title energy. Everything feels like it's about to animate.",
    "collection": "wayback"
  },
  {
    "name": "Beta",
    "fakeUrl": "forever.beta",
    "vibe": "Invite only. Forever in beta.",
    "tags": ["light", "friendly", "rounded"],
    "headingFont": "Plus Jakarta Sans",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FCFCFC",
    "surface": "#F4F9F4",
    "surfaceHover": "#E8F5E8",
    "border": "#D0E4D0",
    "text": "#1A3320",
    "textMuted": "#5A7A62",
    "accent": "#22C55E",
    "accentSoft": "rgba(34,197,94,0.08)",
    "radius": "14px",
    "radiusSm": "8px",
    "radiusXl": "20px",
    "shadow": "0 4px 12px rgba(34,197,94,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(34,197,94,0.06)",
    "shadowStyle": "Green tint",
    "gradient": "linear-gradient(180deg, #22C55E 0%, #16A34A 100%)",
    "aiPromptTypography": "Use Plus Jakarta Sans for headings — friendly, rounded, modern. Weight 700. "Body": Inter at 400 — the universal readable body. Jakarta gives warmth and optimism that Inter alone can't deliver.",
    "aiPromptColors": "Background: #FCFCFC — near-white. "Surface": #F4F9F4 — green-tinted white, barely there but it shifts the whole mood. "Text": #1A3320 — dark forest green. "Accent": #22C55E — the green button. Every Web 2.0 startup had this exact color on their CTA. "Border": #D0E4D0 — soft green-gray.",
    "aiPromptShape": "Border-radius: 14px on cards, 8px on buttons, 20px on modals. Very rounded — the era that discovered border-radius and went all in. Borders are 1px solid and soft.",
    "aiPromptDepth": "Shadow: 0 4px 12px rgba(34,197,94,0.08) — tinted green, barely visible. Cards have a subtle lift with the slightest color in their shadow. Friendly, not dramatic.",
    "aiPromptRules": "Web 2.0 optimism, modernized. Green accent on the primary CTA, always. Rounded everything. The green-tinted surfaces give the whole system a fresh, optimistic glow. Dark green text is warm and natural. Nothing is dark or moody — this is perpetual beta, perpetual hope.",
    "collection": "wayback"
  },
  {
    "name": "Poke",
    "fakeUrl": "poke.blue",
    "vibe": "What's on your mind?",
    "tags": ["light", "social", "clean"],
    "headingFont": "Outfit",
    "bodyFont": "Inter",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F0F2F5",
    "surfaceHover": "#E4E6EB",
    "border": "#CED0D4",
    "text": "#1C1E21",
    "textMuted": "#65676B",
    "accent": "#1877F2",
    "accentSoft": "rgba(24,119,242,0.08)",
    "radius": "8px",
    "radiusSm": "6px",
    "radiusXl": "12px",
    "shadow": "0 1px 2px rgba(0,0,0,0.08)",
    "shadowSm": "0 1px 1px rgba(0,0,0,0.05)",
    "shadowStyle": "Card flat",
    "gradient": "linear-gradient(135deg, #1877F2 0%, #42A5F5 100%)",
    "aiPromptTypography": "Use Outfit for headings — geometric, modern, clean. Weight 600 — confident but not heavy. "Body": Inter at 400 — neutral, invisible, the content is the design. The fonts should never compete with what's being said.",
    "aiPromptColors": "Background: #FFFFFF — white. "Surface": #F0F2F5 — the specific social-feed gray. "Text": #1C1E21 — near-black. "Muted": #65676B — timestamp gray. "Accent": #1877F2 — that blue. Links, buttons, every interactive element. "Border": #CED0D4 — soft separator.",
    "aiPromptShape": "Border-radius: 8px — rounded but functional, not decorative. Borders are 1px solid light gray. Everything is a card. Cards stack in a vertical feed.",
    "aiPromptDepth": "Shadow: 0 1px 2px rgba(0,0,0,0.08) — barely there. Depth comes from surface color layering, not elevation. Cards are flat on the feed. Maximum two levels of depth.",
    "aiPromptRules": "Clean social-network energy. White, gray, blue. The content IS the design — zero decoration. That specific blue is for every interactive element. Surface layering (white → gray) creates card structure. The design should be completely invisible until you interact with it.",
    "collection": "wayback"
  },
  {
    "name": "Bookshelf",
    "fakeUrl": "bookshelf.app",
    "vibe": "Real leather. Real stitching.",
    "tags": ["light", "textured", "warm"],
    "headingFont": "Lora",
    "bodyFont": "DM Sans",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FAF4EA",
    "surface": "#FFFFFF",
    "surfaceHover": "#F5EFE3",
    "border": "#DDD0BA",
    "text": "#2C1810",
    "textMuted": "#7A6550",
    "accent": "#2563EB",
    "accentSoft": "rgba(37,99,235,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 2px 8px rgba(44,24,16,0.08), 0 1px 3px rgba(44,24,16,0.06)",
    "shadowSm": "0 1px 4px rgba(44,24,16,0.06)",
    "shadowStyle": "Warm layered",
    "gradient": "linear-gradient(135deg, #8B6547 0%, #DDD0BA 50%, #2563EB 100%)",
    "aiPromptTypography": "Use Lora for headings — a warm, brushed serif that feels like embossed leather. Weight 700. "Body": DM Sans at 400 — clean geometric sans that grounds the warmth. Serif headings + sans body creates a premium editorial feel.",
    "aiPromptColors": "Background: #FAF4EA — warm linen, light enough to feel clean. "Surface": #FFFFFF — white cards pop cleanly against the warm background. "Text": #2C1810 — deep espresso brown. "Accent": #2563EB — a clear blue that cuts through all the warmth — the one cool note. "Border": #DDD0BA — sand/parchment.",
    "aiPromptShape": "Border-radius: 10px — softly rounded, handcrafted feel. Borders are 1px solid in the sand tone. Elements feel like physical objects placed on a warm surface.",
    "aiPromptDepth": "Shadow: warm-tinted, rgba(44,24,16,0.08). Cards feel grounded on a desk, not floating. The shadow color is warm brown, not neutral gray — this keeps the shadow in the same tonal family as the background.",
    "aiPromptRules": "Skeuomorphic warmth, modernized. Linen background, white cards, brown text, blue interactive accent. The blue is the single cool-toned element — toggles, links, CTAs. Everything else is warm. Serif headings give weight without stuffiness. This should feel like a premium app that respects its materials.",
    "collection": "wayback"
  },
  {
    "name": "140",
    "fakeUrl": "oneforty.co",
    "vibe": "Retweet if you agree.",
    "tags": ["light", "social", "airy"],
    "headingFont": "DM Sans",
    "bodyFont": "Inter",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F7F9FA",
    "surfaceHover": "#EDF1F4",
    "border": "#DEE5EB",
    "text": "#0F1419",
    "textMuted": "#536471",
    "accent": "#1D9BF0",
    "accentSoft": "rgba(29,155,240,0.08)",
    "radius": "16px",
    "radiusSm": "10px",
    "radiusXl": "24px",
    "shadow": "0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.03)",
    "shadowStyle": "Featherlight",
    "gradient": "linear-gradient(135deg, #1D9BF0 0%, #6BC0F7 100%)",
    "aiPromptTypography": "Use DM Sans for headings — geometric, confident, clean. Weight 700. "Body": Inter at 400 — the universal default. Together they're invisible in the best way — content is the entire show.",
    "aiPromptColors": "Background: #FFFFFF — white. "Surface": #F7F9FA — lightest possible gray-blue. "Text": #0F1419 — near-black. "Muted": #536471 — blue-gray for timestamps, handles, metadata. "Accent": #1D9BF0 — sky blue. Links, buttons, verification badges. "Border": #DEE5EB — barely visible.",
    "aiPromptShape": "Border-radius: 16px on cards, 10px on buttons, 24px on modals. Very rounded — pill-shaped buttons, circular avatars. Soft and approachable shape language throughout.",
    "aiPromptDepth": "Shadow: 0 1px 3px rgba(0,0,0,0.04) — featherlight. Almost no shadow at all. Depth comes from surface color steps, not elevation. The design is nearly flat.",
    "aiPromptRules": "Bird-app energy. Sky blue, white, airy. Everything is a card in a vertical timeline. The blue accent is singular and consistent. Ultra-rounded shapes. Minimal shadows. Generous padding. The design should feel like pure content with the lightest possible chrome around it.",
    "collection": "wayback"
  },
  {
    "name": "Reblog",
    "fakeUrl": "reblog.me",
    "vibe": "Source: unknown.",
    "tags": ["light", "editorial", "muted"],
    "headingFont": "EB Garamond",
    "bodyFont": "Source Serif 4",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#F8F5F0",
    "surface": "#FFFFFF",
    "surfaceHover": "#F2EDE6",
    "border": "#DDD5C8",
    "text": "#1A1A1A",
    "textMuted": "#6B6460",
    "accent": "#2E4057",
    "accentSoft": "rgba(46,64,87,0.06)",
    "radius": "3px",
    "radiusSm": "2px",
    "radiusXl": "6px",
    "shadow": "0 1px 4px rgba(0,0,0,0.04)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.03)",
    "shadowStyle": "Paper flat",
    "gradient": "linear-gradient(135deg, #2E4057 0%, #5B8CB5 100%)",
    "aiPromptTypography": "Use EB Garamond for headings — refined editorial serif. Weight 700. "Body": Source Serif 4 at 400 — a warm reading serif. Double-serif pairing is intentional — this is the art internet, long-form reading, not a dashboard.",
    "aiPromptColors": "Background: #F8F5F0 — warm paper. "Surface": #FFFFFF — clean cards on warm paper. "Text": #1A1A1A — near-black, high contrast for reading. "Muted": #6B6460 — warm gray. "Accent": #2E4057 — dark slate navy, intellectual and quiet. "Border": #DDD5C8 — parchment edge.",
    "aiPromptShape": "Border-radius: 3px — barely rounded. Almost square. Editorial restraint. Borders are 1px and soft. Cards have generous internal padding — this is a reading experience first.",
    "aiPromptDepth": "Shadow: 0 1px 4px rgba(0,0,0,0.04) — paper-flat. Nearly zero elevation. Posts feel like pages, not floating cards.",
    "aiPromptRules": "Art-blog energy. Double-serif typography. Muted, warm, editorial. The accent navy whispers — it doesn't shout. Large images, generous whitespace, long-form text. No bright colors, no flashy interactions. Content is the entire experience. If it feels like a SaaS dashboard, start over.",
    "collection": "wayback"
  },
  {
    "name": "Millennium",
    "fakeUrl": "y2k.future",
    "vibe": "The future is translucent.",
    "tags": ["light", "futuristic", "playful"],
    "headingFont": "Space Grotesk",
    "bodyFont": "Work Sans",
    "headingWeight": 700,
    "letterSpacing": "0.01em",
    "bg": "#F0EAFF",
    "surface": "#FFFFFF",
    "surfaceHover": "#EBE4FE",
    "border": "#D4C8F0",
    "text": "#1E0A4E",
    "textMuted": "#6B55A0",
    "accent": "#00C2FF",
    "accentSoft": "rgba(0,194,255,0.1)",
    "radius": "20px",
    "radiusSm": "12px",
    "radiusXl": "28px",
    "shadow": "0 4px 20px rgba(0,194,255,0.12), 0 2px 6px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 10px rgba(0,194,255,0.08)",
    "shadowStyle": "Candy glow",
    "gradient": "linear-gradient(135deg, #FF6EC7 0%, #00C2FF 50%, #7C5CFC 100%)",
    "aiPromptTypography": "Use Space Grotesk for headings — geometric, slightly quirky, futuristic but legible. Weight 700. Letter-spacing 0.01em. "Body": Work Sans at 400 — grounded and clean against the playful headings.",
    "aiPromptColors": "Background: #F0EAFF — clean lavender. "Surface": #FFFFFF — white cards on lavender. "Text": #1E0A4E — deep purple. "Accent": #00C2FF — electric cyan, the Y2K signature. "Border": #D4C8F0 — soft purple. The palette is candy-bright but controlled.",
    "aiPromptShape": "Border-radius: 20px on cards, 12px on buttons, 28px on modals. Ultra-rounded, bubbly. Everything feels like smooth translucent plastic.",
    "aiPromptDepth": "Shadow: 0 4px 20px rgba(0,194,255,0.12) — cyan-tinted glow. Cards catch light like translucent iMac plastic. The colored shadow is the signature — it makes everything feel candy-coated.",
    "aiPromptRules": "Y2K millennium energy. Lavender, cyan, pink gradient. Ultra-rounded, bubbly. White cards on lavender background keep it clean despite the playful palette. The gradient (pink → cyan → purple) is for hero sections only. Deep purple text grounds the candy colors. Optimistic, futuristic, fun.",
    "collection": "wayback"
  },
  {
    "name": "Valencia",
    "fakeUrl": "valencia.film",
    "vibe": "No filter needed.",
    "tags": ["light", "warm", "editorial"],
    "headingFont": "Cormorant Garamond",
    "bodyFont": "Nunito Sans",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FDFAF5",
    "surface": "#F8F0E4",
    "surfaceHover": "#F0E6D5",
    "border": "#E0D0B8",
    "text": "#2C1E10",
    "textMuted": "#8A7058",
    "accent": "#D63384",
    "accentSoft": "rgba(214,51,132,0.08)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 2px 8px rgba(44,30,16,0.06)",
    "shadowSm": "0 1px 3px rgba(44,30,16,0.04)",
    "shadowStyle": "Warm matte",
    "gradient": "linear-gradient(135deg, #F77737 0%, #D63384 50%, #833AB4 100%)",
    "aiPromptTypography": "Use Cormorant Garamond for headings — elegant, high-contrast serif with gallery energy. Weight 600. "Body": Nunito Sans at 400 — soft rounded sans that pairs warmly with the editorial serif.",
    "aiPromptColors": "Background: #FDFAF5 — warm cream. "Surface": #F8F0E4 — parchment. "Text": #2C1E10 — deep espresso. "Muted": #8A7058 — warm mid-brown. "Accent": #D63384 — modern pink-magenta, the filtered-photo signature color. "Border": #E0D0B8 — picture-frame tan.",
    "aiPromptShape": "Border-radius: 4px — barely rounded, almost square. Photos and cards should feel like prints — sharp edges, film-stock energy. Borders are 1px solid in the tan/frame tone.",
    "aiPromptDepth": "Shadow: warm-tinted, rgba(44,30,16,0.06). Matte, grounded. No glossy highlights. Cards feel like photos sitting on a desk.",
    "aiPromptRules": "Filtered-photo energy. Warm cream backgrounds, espresso text, pink-magenta accent. The gradient (orange → pink → purple) is for accent overlays only. Serif headings bring editorial weight. The whole system should feel warm, analog, and slightly nostalgic — like everything has been through a gentle filter.",
    "collection": "wayback"
  },
  // ── BATCH "2": 20 brand-ripped seeds (March 2026) ──
  {
    "name": "Homestead",
    "fakeUrl": "homestead.app",
    "vibe": "Warmth on arrival.",
    "tags": ["light", "warm", "rounded"],
    "headingFont": "Figtree",
    "bodyFont": "Karla",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#FFF8F6",
    "surfaceHover": "#FFF0EC",
    "border": "#EDDDD0",
    "text": "#1A1A1A",
    "textMuted": "#717171",
    "accent": "#FF385C",
    "accentSoft": "rgba(255,56,92,0.08)",
    "radius": "12px",
    "radiusSm": "8px",
    "radiusXl": "16px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #FF385C 0%, #FF607D 100%)",
    "aiPromptTypography": "Use Figtree for all headings. Weight 700. Letter-spacing -0.02em. This creates a warm, rounded feel that matches the brand's character. Use Karla for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #FFF8F6. "Text": #1A1A1A. Muted "text": #717171 — for secondary info, labels, metadata. "Accent": #FF385C — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(255,56,92,0.08) — for hover backgrounds and selected states. "Border": #EDDDD0.",
    "aiPromptShape": "Border-radius: 12px on cards and containers. 8px on buttons and inputs. 16px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, warm, rounded aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Spectrum",
    "fakeUrl": "spectrum.chat",
    "vibe": "Where your people are.",
    "tags": ["dark", "bold", "vibrant"],
    "headingFont": "Red Hat Display",
    "bodyFont": "Red Hat Text",
    "headingWeight": 800,
    "letterSpacing": "-0.02em",
    "bg": "#1E1F22",
    "surface": "#2B2D31",
    "surfaceHover": "#35373C",
    "border": "#3F4147",
    "text": "#F2F3F5",
    "textMuted": "#B5BAC1",
    "accent": "#5865F2",
    "accentSoft": "rgba(88,101,242,0.12)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 0 0 1px rgba(88,101,242,0.1), 0 8px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #5865F2 0%, #7984F5 100%)",
    "aiPromptTypography": "Use Red Hat Display for all headings. Weight 800. Letter-spacing -0.02em. This creates a bold, vibrant feel that matches the brand's character. Use Red Hat Text for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #1E1F22 — deep, immersive base. Surface (cards, containers): #2B2D31. "Text": #F2F3F5. Muted "text": #B5BAC1 — for secondary info, labels, metadata. "Accent": #5865F2 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(88,101,242,0.12) — for hover backgrounds and selected states. "Border": #3F4147.",
    "aiPromptShape": "Border-radius: 8px on cards and containers. 4px on buttons and inputs. 12px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(88,101,242,0.1), 0 8px 40px rgba(0,0,0,0.5). Cards should feel like they float above a deep surface. Use a radial gradient with the accent at 5-8% opacity for atmospheric depth. Small shadow for buttons and "inputs": 0 0 0 1px rgba(255,255,255,0.06).",
    "aiPromptRules": "This is a dark, bold, vibrant aesthetic inspired by real-world brand design. Dark backgrounds create focus. Accent color is for interactive elements only. Use generous whitespace. Hover "states": brighten borders, add accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Aperture",
    "fakeUrl": "aperture.studio",
    "vibe": "Say it, don't type it.",
    "tags": ["light", "clean", "vibrant"],
    "headingFont": "Bricolage Grotesque",
    "bodyFont": "Mulish",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#FFFFFF",
    "surface": "#F7F7F7",
    "surfaceHover": "#F7F7F7",
    "border": "#E2E4E8",
    "text": "#101214",
    "textMuted": "#6B7280",
    "accent": "#1868DB",
    "accentSoft": "rgba(24,104,219,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #1868DB 0%, #4686E2 100%)",
    "aiPromptTypography": "Use Bricolage Grotesque for all headings. Weight 600. Letter-spacing -0.02em. This creates a clean, vibrant feel that matches the brand's character. Use Mulish for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F7F7F7. "Text": #101214. Muted "text": #6B7280 — for secondary info, labels, metadata. "Accent": #1868DB — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(24,104,219,0.08) — for hover backgrounds and selected states. "Border": #E2E4E8.",
    "aiPromptShape": "Border-radius: 10px on cards and containers. 6px on buttons and inputs. 14px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, clean, vibrant aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Ledger",
    "fakeUrl": "ledger.finance",
    "vibe": "Money, meet calm.",
    "tags": ["light", "elegant", "warm"],
    "headingFont": "Albert Sans",
    "bodyFont": "Spectral",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F4FAF6",
    "surfaceHover": "#F4FAF6",
    "border": "#D4E8DB",
    "text": "#0D4029",
    "textMuted": "#5C7C68",
    "accent": "#1DB954",
    "accentSoft": "rgba(29,185,84,0.08)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #1DB954 0%, #4AC776 100%)",
    "aiPromptTypography": "Use Albert Sans for all headings. Weight 700. Letter-spacing -0.01em. This creates a elegant, warm feel that matches the brand's character. Use Spectral for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F4FAF6. "Text": #0D4029. Muted "text": #5C7C68 — for secondary info, labels, metadata. "Accent": #1DB954 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(29,185,84,0.08) — for hover backgrounds and selected states. "Border": #D4E8DB.",
    "aiPromptShape": "Border-radius: 8px on cards and containers. 4px on buttons and inputs. 12px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, elegant, warm aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Gondola",
    "fakeUrl": "gondola.dev",
    "vibe": "Deploy to the edge.",
    "tags": ["light", "bold", "vibrant"],
    "headingFont": "Fraunces",
    "bodyFont": "Barlow",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F7F7F7",
    "surfaceHover": "#F7F7F7",
    "border": "#E0DCEC",
    "text": "#281950",
    "textMuted": "#6B5C8A",
    "accent": "#6E3FA5",
    "accentSoft": "rgba(110,63,165,0.08)",
    "radius": "6px",
    "radiusSm": "2px",
    "radiusXl": "10px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #6E3FA5 0%, #8B65B7 100%)",
    "aiPromptTypography": "Use Fraunces for all headings. Weight 600. Letter-spacing -0.01em. This creates a bold, vibrant feel that matches the brand's character. Use Barlow for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F7F7F7. "Text": #281950. Muted "text": #6B5C8A — for secondary info, labels, metadata. "Accent": #6E3FA5 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(110,63,165,0.08) — for hover backgrounds and selected states. "Border": #E0DCEC.",
    "aiPromptShape": "Border-radius: 6px on cards and containers. 2px on buttons and inputs. 10px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, bold, vibrant aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Bulletin",
    "fakeUrl": "bulletin.press",
    "vibe": "The world this week.",
    "tags": ["light", "editorial", "bold"],
    "headingFont": "Schibsted Grotesk",
    "bodyFont": "Bitter",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FFFDF5",
    "surface": "#FFF8E7",
    "surfaceHover": "#FFF1D0",
    "border": "#E8DCC8",
    "text": "#1D1D1B",
    "textMuted": "#6B6B6B",
    "accent": "#E3120B",
    "accentSoft": "rgba(227,18,11,0.08)",
    "radius": "2px",
    "radiusSm": "2px",
    "radiusXl": "6px",
    "shadow": "0 1px 3px rgba(0,0,0,0.08)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.05)",
    "shadowStyle": "Flat editorial",
    "gradient": "linear-gradient(135deg, #E3120B 0%, #E9413C 100%)",
    "aiPromptTypography": "Use Schibsted Grotesk for all headings. Weight 700. Letter-spacing -0.01em. This creates a editorial, bold feel that matches the brand's character. Use Bitter for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFDF5 — clean foundation. Surface (cards, containers): #FFF8E7. "Text": #1D1D1B. Muted "text": #6B6B6B — for secondary info, labels, metadata. "Accent": #E3120B — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(227,18,11,0.08) — for hover backgrounds and selected states. "Border": #E8DCC8.",
    "aiPromptShape": "Border-radius: 2px on cards and containers. 2px on buttons and inputs. 6px on modals and large panels. All borders are 2px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 1px 3px rgba(0,0,0,0.08). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 1px 2px rgba(0,0,0,0.05).",
    "aiPromptRules": "This is a light, editorial, bold aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Broadsheet",
    "fakeUrl": "broadsheet.ink",
    "vibe": "Creativity, catalogued.",
    "tags": ["light", "editorial", "playful"],
    "headingFont": "Syne",
    "bodyFont": "Crimson Text",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F7F7F7",
    "surfaceHover": "#F7F7F7",
    "border": "#E0E0E0",
    "text": "#1A1A1A",
    "textMuted": "#6B6B6B",
    "accent": "#FF5C00",
    "accentSoft": "rgba(255,92,0,0.08)",
    "radius": "4px",
    "radiusSm": "2px",
    "radiusXl": "8px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #FF5C00 0%, #FF7D33 100%)",
    "aiPromptTypography": "Use Syne for all headings. Weight 700. Letter-spacing -0.01em. This creates a editorial, playful feel that matches the brand's character. Use Crimson Text for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F7F7F7. "Text": #1A1A1A. Muted "text": #6B6B6B — for secondary info, labels, metadata. "Accent": #FF5C00 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(255,92,0,0.08) — for hover backgrounds and selected states. "Border": #E0E0E0.",
    "aiPromptShape": "Border-radius: 4px on cards and containers. 2px on buttons and inputs. 8px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, editorial, playful aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Tideline",
    "fakeUrl": "tideline.bank",
    "vibe": "Banking, but make it fresh.",
    "tags": ["light", "clean", "cool"],
    "headingFont": "Onest",
    "bodyFont": "Lexend",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#F2F8F3",
    "surface": "#FFFFFF",
    "surfaceHover": "#E8F4EA",
    "border": "#D4E8D9",
    "text": "#091723",
    "textMuted": "#5C7A6B",
    "accent": "#00A4DB",
    "accentSoft": "rgba(0,164,219,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #00A4DB 0%, #33B6E2 100%)",
    "aiPromptTypography": "Use Onest for all headings. Weight 700. Letter-spacing -0.02em. This creates a clean, cool feel that matches the brand's character. Use Lexend for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #F2F8F3 — clean foundation. Surface (cards, containers): #FFFFFF. "Text": #091723. Muted "text": #5C7A6B — for secondary info, labels, metadata. "Accent": #00A4DB — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(0,164,219,0.08) — for hover backgrounds and selected states. "Border": #D4E8D9.",
    "aiPromptShape": "Border-radius: 10px on cards and containers. 6px on buttons and inputs. 14px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, clean, cool aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Banknote",
    "fakeUrl": "banknote.io",
    "vibe": "European precision.",
    "tags": ["light", "minimal", "cool"],
    "headingFont": "Josefin Sans",
    "bodyFont": "Public Sans",
    "headingWeight": 600,
    "letterSpacing": "0em",
    "bg": "#FFFFFF",
    "surface": "#F7F7F7",
    "surfaceHover": "#F7F7F7",
    "border": "#E5E5E5",
    "text": "#1A1A1A",
    "textMuted": "#696969",
    "accent": "#36A18B",
    "accentSoft": "rgba(54,161,139,0.08)",
    "radius": "6px",
    "radiusSm": "2px",
    "radiusXl": "10px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #36A18B 0%, #5EB4A2 100%)",
    "aiPromptTypography": "Use Josefin Sans for all headings. Weight 600. Letter-spacing 0em. This creates a minimal, cool feel that matches the brand's character. Use Public Sans for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F7F7F7. "Text": #1A1A1A. Muted "text": #696969 — for secondary info, labels, metadata. "Accent": #36A18B — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(54,161,139,0.08) — for hover backgrounds and selected states. "Border": #E5E5E5.",
    "aiPromptShape": "Border-radius: 6px on cards and containers. 2px on buttons and inputs. 10px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, minimal, cool aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Darkpool",
    "fakeUrl": "darkpool.exchange",
    "vibe": "Markets never sleep.",
    "tags": ["dark", "bold", "neon"],
    "headingFont": "Archivo",
    "bodyFont": "Overpass",
    "headingWeight": 800,
    "letterSpacing": "-0.02em",
    "bg": "#0A0E12",
    "surface": "#141A20",
    "surfaceHover": "#1E262E",
    "border": "#1E2A34",
    "text": "#E8ECF0",
    "textMuted": "#7C8B9A",
    "accent": "#00C805",
    "accentSoft": "rgba(0,200,5,0.12)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 0 0 1px rgba(0,200,5,0.1), 0 8px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #00C805 0%, #33D337 100%)",
    "aiPromptTypography": "Use Archivo for all headings. Weight 800. Letter-spacing -0.02em. This creates a bold, neon feel that matches the brand's character. Use Overpass for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0A0E12 — deep, immersive base. Surface (cards, containers): #141A20. "Text": #E8ECF0. Muted "text": #7C8B9A — for secondary info, labels, metadata. "Accent": #00C805 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(0,200,5,0.12) — for hover backgrounds and selected states. "Border": #1E2A34.",
    "aiPromptShape": "Border-radius: 8px on cards and containers. 4px on buttons and inputs. 12px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(0,200,5,0.1), 0 8px 40px rgba(0,0,0,0.5). Cards should feel like they float above a deep surface. Use a radial gradient with the accent at 5-8% opacity for atmospheric depth. Small shadow for buttons and "inputs": 0 0 0 1px rgba(255,255,255,0.06).",
    "aiPromptRules": "This is a dark, bold, neon aesthetic inspired by real-world brand design. Dark backgrounds create focus. Accent color is for interactive elements only. Use generous whitespace. Hover "states": brighten borders, add accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Scarlet",
    "fakeUrl": "scarlet.notes",
    "vibe": "Write it down. Right now.",
    "tags": ["light", "warm", "clean"],
    "headingFont": "Lexend",
    "bodyFont": "Cabin",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#FFF8F7",
    "surfaceHover": "#FFF0EE",
    "border": "#E8D9DA",
    "text": "#2D2020",
    "textMuted": "#888080",
    "accent": "#DD4C4F",
    "accentSoft": "rgba(221,76,79,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #DD4C4F 0%, #E47072 100%)",
    "aiPromptTypography": "Use Lexend for all headings. Weight 600. Letter-spacing -0.01em. This creates a warm, clean feel that matches the brand's character. Use Cabin for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #FFF8F7. "Text": #2D2020. Muted "text": #888080 — for secondary info, labels, metadata. "Accent": #DD4C4F — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(221,76,79,0.08) — for hover backgrounds and selected states. "Border": #E8D9DA.",
    "aiPromptShape": "Border-radius: 10px on cards and containers. 6px on buttons and inputs. 14px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, warm, clean aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Evergreen",
    "fakeUrl": "evergreen.money",
    "vibe": "Money without borders.",
    "tags": ["light", "clean", "cool"],
    "headingFont": "Public Sans",
    "bodyFont": "Source Serif 4",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F5FAF0",
    "surfaceHover": "#EBF5E2",
    "border": "#D4E6C4",
    "text": "#163300",
    "textMuted": "#4A6B33",
    "accent": "#9FE870",
    "accentSoft": "rgba(159,232,112,0.08)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #9FE870 0%, #B2ED8D 100%)",
    "aiPromptTypography": "Use Public Sans for all headings. Weight 600. Letter-spacing -0.01em. This creates a clean, cool feel that matches the brand's character. Use Source Serif 4 for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F5FAF0. "Text": #163300. Muted "text": #4A6B33 — for secondary info, labels, metadata. "Accent": #9FE870 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(159,232,112,0.08) — for hover backgrounds and selected states. "Border": #D4E6C4.",
    "aiPromptShape": "Border-radius: 8px on cards and containers. 4px on buttons and inputs. 12px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, clean, cool aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Manuscript",
    "fakeUrl": "manuscript.dev",
    "vibe": "The editor, evolved.",
    "tags": ["light", "elegant", "developer"],
    "headingFont": "Rubik",
    "bodyFont": "Libre Baskerville",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FFFFFF",
    "surface": "#F5F4F0",
    "surfaceHover": "#EDECE6",
    "border": "#DDDCD6",
    "text": "#1A1914",
    "textMuted": "#7C7B73",
    "accent": "#8B5CF6",
    "accentSoft": "rgba(139,92,246,0.08)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #8B5CF6 0%, #A27DF8 100%)",
    "aiPromptTypography": "Use Rubik for all headings. Weight 700. Letter-spacing -0.01em. This creates a elegant, developer feel that matches the brand's character. Use Libre Baskerville for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F5F4F0. "Text": #1A1914. Muted "text": #7C7B73 — for secondary info, labels, metadata. "Accent": #8B5CF6 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(139,92,246,0.08) — for hover backgrounds and selected states. "Border": #DDDCD6.",
    "aiPromptShape": "Border-radius: 8px on cards and containers. 4px on buttons and inputs. 12px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, elegant, developer aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Circadian",
    "fakeUrl": "circadian.health",
    "vibe": "Your body knows.",
    "tags": ["dark", "elegant", "cool"],
    "headingFont": "Urbanist",
    "bodyFont": "Nunito",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#0C0F14",
    "surface": "#161B24",
    "surfaceHover": "#1E2530",
    "border": "#242D3A",
    "text": "#E4E8EE",
    "textMuted": "#8894A6",
    "accent": "#3860BE",
    "accentSoft": "rgba(56,96,190,0.12)",
    "radius": "14px",
    "radiusSm": "10px",
    "radiusXl": "18px",
    "shadow": "0 0 0 1px rgba(56,96,190,0.1), 0 8px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #3860BE 0%, #6080CB 100%)",
    "aiPromptTypography": "Use Urbanist for all headings. Weight 600. Letter-spacing -0.02em. This creates a elegant, cool feel that matches the brand's character. Use Nunito for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0C0F14 — deep, immersive base. Surface (cards, containers): #161B24. "Text": #E4E8EE. Muted "text": #8894A6 — for secondary info, labels, metadata. "Accent": #3860BE — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(56,96,190,0.12) — for hover backgrounds and selected states. "Border": #242D3A.",
    "aiPromptShape": "Border-radius: 14px on cards and containers. 10px on buttons and inputs. 18px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(56,96,190,0.1), 0 8px 40px rgba(0,0,0,0.5). Cards should feel like they float above a deep surface. Use a radial gradient with the accent at 5-8% opacity for atmospheric depth. Small shadow for buttons and "inputs": 0 0 0 1px rgba(255,255,255,0.06).",
    "aiPromptRules": "This is a dark, elegant, cool aesthetic inspired by real-world brand design. Dark backgrounds create focus. Accent color is for interactive elements only. Use generous whitespace. Hover "states": brighten borders, add accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Mainframe",
    "fakeUrl": "mainframe.sh",
    "vibe": "The terminal, reimagined.",
    "tags": ["dark", "developer", "minimal"],
    "headingFont": "Overpass",
    "bodyFont": "Space Mono",
    "headingWeight": 600,
    "letterSpacing": "-0.01em",
    "bg": "#121212",
    "surface": "#1A1A1A",
    "surfaceHover": "#242424",
    "border": "#2A2A2A",
    "text": "#E0E0E0",
    "textMuted": "#808080",
    "accent": "#01C38E",
    "accentSoft": "rgba(1,195,142,0.12)",
    "radius": "8px",
    "radiusSm": "4px",
    "radiusXl": "12px",
    "shadow": "0 0 0 1px rgba(1,195,142,0.1), 0 8px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #01C38E 0%, #34CFA5 100%)",
    "aiPromptTypography": "Use Overpass for all headings. Weight 600. Letter-spacing -0.01em. This creates a developer, minimal feel that matches the brand's character. Use Space Mono for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #121212 — deep, immersive base. Surface (cards, containers): #1A1A1A. "Text": #E0E0E0. Muted "text": #808080 — for secondary info, labels, metadata. "Accent": #01C38E — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(1,195,142,0.12) — for hover backgrounds and selected states. "Border": #2A2A2A.",
    "aiPromptShape": "Border-radius: 8px on cards and containers. 4px on buttons and inputs. 12px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(1,195,142,0.1), 0 8px 40px rgba(0,0,0,0.5). Cards should feel like they float above a deep surface. Use a radial gradient with the accent at 5-8% opacity for atmospheric depth. Small shadow for buttons and "inputs": 0 0 0 1px rgba(255,255,255,0.06).",
    "aiPromptRules": "This is a dark, developer, minimal aesthetic inspired by real-world brand design. Dark backgrounds create focus. Accent color is for interactive elements only. Use generous whitespace. Hover "states": brighten borders, add accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Webhook",
    "fakeUrl": "webhook.run",
    "vibe": "Background jobs, foreground results.",
    "tags": ["light", "developer", "vibrant"],
    "headingFont": "Instrument Serif",
    "bodyFont": "Albert Sans",
    "headingWeight": 400,
    "letterSpacing": "0em",
    "bg": "#FFFFFF",
    "surface": "#F7F7F7",
    "surfaceHover": "#F7F7F7",
    "border": "#E2E4E9",
    "text": "#1A1A2E",
    "textMuted": "#6B6B80",
    "accent": "#A855F7",
    "accentSoft": "rgba(168,85,247,0.08)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #A855F7 0%, #B977F9 100%)",
    "aiPromptTypography": "Use Instrument Serif for all headings. Weight 400. Letter-spacing 0em. This creates a developer, vibrant feel that matches the brand's character. Use Albert Sans for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFFFF — clean foundation. Surface (cards, containers): #F7F7F7. "Text": #1A1A2E. Muted "text": #6B6B80 — for secondary info, labels, metadata. "Accent": #A855F7 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(168,85,247,0.08) — for hover backgrounds and selected states. "Border": #E2E4E9.",
    "aiPromptShape": "Border-radius: 10px on cards and containers. 6px on buttons and inputs. 14px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, developer, vibrant aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Sovereign",
    "fakeUrl": "sovereign.pay",
    "vibe": "Infrastructure you trust.",
    "tags": ["dark", "elegant", "precise"],
    "headingFont": "Noto Serif Display",
    "bodyFont": "Work Sans",
    "headingWeight": 600,
    "letterSpacing": "-0.02em",
    "bg": "#0A2540",
    "surface": "#0F3052",
    "surfaceHover": "#153D66",
    "border": "#1A4A7A",
    "text": "#E6F0FA",
    "textMuted": "#8AACCC",
    "accent": "#635BFF",
    "accentSoft": "rgba(99,91,255,0.12)",
    "radius": "10px",
    "radiusSm": "6px",
    "radiusXl": "14px",
    "shadow": "0 0 0 1px rgba(99,91,255,0.1), 0 8px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #635BFF 0%, #827CFF 100%)",
    "aiPromptTypography": "Use Noto Serif Display for all headings. Weight 600. Letter-spacing -0.02em. This creates a elegant, precise feel that matches the brand's character. Use Work Sans for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0A2540 — deep, immersive base. Surface (cards, containers): #0F3052. "Text": #E6F0FA. Muted "text": #8AACCC — for secondary info, labels, metadata. "Accent": #635BFF — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(99,91,255,0.12) — for hover backgrounds and selected states. "Border": #1A4A7A.",
    "aiPromptShape": "Border-radius: 10px on cards and containers. 6px on buttons and inputs. 14px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(99,91,255,0.1), 0 8px 40px rgba(0,0,0,0.5). Cards should feel like they float above a deep surface. Use a radial gradient with the accent at 5-8% opacity for atmospheric depth. Small shadow for buttons and "inputs": 0 0 0 1px rgba(255,255,255,0.06).",
    "aiPromptRules": "This is a dark, elegant, precise aesthetic inspired by real-world brand design. Dark backgrounds create focus. Accent color is for interactive elements only. Use generous whitespace. Hover "states": brighten borders, add accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Stillness",
    "fakeUrl": "stillness.space",
    "vibe": "Be kind to your mind.",
    "tags": ["light", "warm", "rounded"],
    "headingFont": "Cabin",
    "bodyFont": "Raleway",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#FFFBF5",
    "surface": "#FFF5E8",
    "surfaceHover": "#FFEDD4",
    "border": "#F0DCC0",
    "text": "#2D2520",
    "textMuted": "#7A6B5C",
    "accent": "#F47D31",
    "accentSoft": "rgba(244,125,49,0.08)",
    "radius": "16px",
    "radiusSm": "12px",
    "radiusXl": "20px",
    "shadow": "0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)",
    "shadowSm": "0 2px 6px rgba(0,0,0,0.06)",
    "shadowStyle": "Soft layered",
    "gradient": "linear-gradient(135deg, #F47D31 0%, #F6975A 100%)",
    "aiPromptTypography": "Use Cabin for all headings. Weight 700. Letter-spacing -0.01em. This creates a warm, rounded feel that matches the brand's character. Use Raleway for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #FFFBF5 — clean foundation. Surface (cards, containers): #FFF5E8. "Text": #2D2520. Muted "text": #7A6B5C — for secondary info, labels, metadata. "Accent": #F47D31 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(244,125,49,0.08) — for hover backgrounds and selected states. "Border": #F0DCC0.",
    "aiPromptShape": "Border-radius: 16px on cards and containers. 12px on buttons and inputs. 20px on modals and large panels. All borders are 1px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 2px 6px rgba(0,0,0,0.06).",
    "aiPromptRules": "This is a light, warm, rounded aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Wire",
    "fakeUrl": "wire.report",
    "vibe": "Data drives everything.",
    "tags": ["light", "editorial", "bold"],
    "headingFont": "Barlow",
    "bodyFont": "EB Garamond",
    "headingWeight": 700,
    "letterSpacing": "-0.01em",
    "bg": "#F2F2F2",
    "surface": "#FFFFFF",
    "surfaceHover": "#F8F8F8",
    "border": "#DDDDDD",
    "text": "#121212",
    "textMuted": "#666666",
    "accent": "#000000",
    "accentSoft": "rgba(0,0,0,0.08)",
    "radius": "2px",
    "radiusSm": "2px",
    "radiusXl": "6px",
    "shadow": "0 1px 3px rgba(0,0,0,0.08)",
    "shadowSm": "0 1px 2px rgba(0,0,0,0.05)",
    "shadowStyle": "Flat editorial",
    "gradient": "linear-gradient(135deg, #000000 0%, #333333 100%)",
    "aiPromptTypography": "Use Barlow for all headings. Weight 700. Letter-spacing -0.01em. This creates a editorial, bold feel that matches the brand's character. Use EB Garamond for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #F2F2F2 — clean foundation. Surface (cards, containers): #FFFFFF. "Text": #121212. Muted "text": #666666 — for secondary info, labels, metadata. "Accent": #000000 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(0,0,0,0.08) — for hover backgrounds and selected states. "Border": #DDDDDD.",
    "aiPromptShape": "Border-radius: 2px on cards and containers. 2px on buttons and inputs. 6px on modals and large panels. All borders are 2px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 1px 3px rgba(0,0,0,0.08). Cards have a subtle lift. Depth is controlled and grounded. Small shadow for buttons and "inputs": 0 1px 2px rgba(0,0,0,0.05).",
    "aiPromptRules": "This is a light, editorial, bold aesthetic inspired by real-world brand design. Clean backgrounds let typography and color do the work. Use generous whitespace. Hover "states": darken surface, subtle lift, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  },
  {
    "name": "Blacktop",
    "fakeUrl": "blacktop.style",
    "vibe": "Culture moves fast.",
    "tags": ["dark", "bold", "editorial"],
    "headingFont": "Bitter",
    "bodyFont": "Figtree",
    "headingWeight": 700,
    "letterSpacing": "-0.02em",
    "bg": "#0A0A0A",
    "surface": "#141414",
    "surfaceHover": "#1E1E1E",
    "border": "#2A2A2A",
    "text": "#F0F0F0",
    "textMuted": "#8A8A8A",
    "accent": "#FF0000",
    "accentSoft": "rgba(255,0,0,0.12)",
    "radius": "0px",
    "radiusSm": "2px",
    "radiusXl": "4px",
    "shadow": "0 0 0 1px rgba(255,0,0,0.1), 0 8px 40px rgba(0,0,0,0.5)",
    "shadowSm": "0 0 0 1px rgba(255,255,255,0.06)",
    "shadowStyle": "Accent glow",
    "gradient": "linear-gradient(135deg, #FF0000 0%, #FF3333 100%)",
    "aiPromptTypography": "Use Bitter for all headings. Weight 700. Letter-spacing -0.02em. This creates a bold, editorial feel that matches the brand's character. Use Figtree for all body text. Weight 400. Line-height 1.7. Import both from Google Fonts.",
    "aiPromptColors": "Background: #0A0A0A — deep, immersive base. Surface (cards, containers): #141414. "Text": #F0F0F0. Muted "text": #8A8A8A — for secondary info, labels, metadata. "Accent": #FF0000 — the signature color. Use for buttons, links, active states, and key highlights only. Accent "soft": rgba(255,0,0,0.12) — for hover backgrounds and selected states. "Border": #2A2A2A.",
    "aiPromptShape": "Border-radius: 0px on cards and containers. 2px on buttons and inputs. 4px on modals and large panels. Sharp corners everywhere — brutalist precision. All borders are 2px solid using the border color.",
    "aiPromptDepth": "Primary "shadow": 0 0 0 1px rgba(255,0,0,0.1), 0 8px 40px rgba(0,0,0,0.5). Cards should feel like they float above a deep surface. Use a radial gradient with the accent at 5-8% opacity for atmospheric depth. Small shadow for buttons and "inputs": 0 0 0 1px rgba(255,255,255,0.06).",
    "aiPromptRules": "This is a dark, bold, editorial aesthetic inspired by real-world brand design. Dark backgrounds create focus. Accent color is for interactive elements only. Use generous whitespace. Hover "states": brighten borders, add accent glow, translateY(-2px) on cards. "Transitions": 0.2s ease on all interactive elements. The gradient is for accent decorations only, not backgrounds."
  }
]