design

name: design description: "MaybeCat design system — psychedelic tarot maximalism. Use when adding UI elements, changing colors, modifying visual styling, typography, layout, glow effects, backgrounds, or making ANY design decision for MaybeCat. Covers colors, shapes, components, Figma MCP, Plasmic codegen."

MaybeCat Design System

Psychedelic tarot maximalism. Gold foil tarot decks meets Celestial Seasonings warmth. REAL cat photos, never illustrations.

Reference Files

The Gradient

linear-gradient(135deg, #EC4899 0%, #F472B6 20%, #FBBF24 50%, #F59E0B 80%, #D97706 100%)

Quick Color Reference

Typography

• Headlines: Cinzel Decorative, Georgia, serif
• Body/Buttons: Georgia, serif
• Never: sans-serif, system fonts

CRITICAL RULES

Rule 0: ASK BEFORE ANY FRONT-FACING CREATIVE DECISION

Icons, images, copy, visual design, anything the user or visitors will SEE — explain what you plan to do, give options, and get user approval BEFORE generating or implementing. No exceptions. Backend/config/URL fixes are fine to just do. Creative choices are NOT. Show the user the result and get approval before wiring anything up.

Rule 1: ONE CHANGE AT A TIME

Make ONE visual change. Review. Then next change if needed. NEVER change multiple spacing/color/effect values at once.

Rule 2: PRESERVE THE VIBE

If a fix requires making things more muted or "cleaner" — STOP. Find another way. The maximalist energy IS the brand.

Rule 3: BOLD IN COLOR, RESTRAINED IN TECHNIQUE

• Colors, decoration, ornament → go big. Saturated, vivid, unapologetic.
• Text effects, shadows, strokes → go precise. Invisible craft.
• A bold gold necklace is maximalist. A gold necklace crusted in rhinestones is tacky. Same gold, different restraint.
• "Bolder" means bolder PRESENCE, not heavier effects.

Rule 4: JEWELRY, NOT ARMOR

Text should feel like gold leaf on a tarot card — luminous, precise, effortless. NOT stamped metal or neon signage. If someone notices "oh, there's an outline" — it's too heavy. The shadow exists to make the text pop, not to be seen itself.

Rule 5: BRAND ASSET CONSISTENCY

All brand assets (icons, og:image, share cards, favicons) must be pixel-perfect derivatives of the live site, not approximations or recreations.

• NEVER recreate brand elements from scratch — capture them from the live rendered site (Puppeteer, screenshot, etc.)
• NEVER generate brand logos/wordmarks with AI image tools — they will not match the actual CSS rendering
• The source of truth is the live site. Assets are captured FROM it, not inspired BY it.
• Every derivative asset must be visually compared side-by-side with the live site before approval.
• Icon sizes (180, 192, 512) are crops/resizes of the same high-res capture — not separate renders.

Typography on Gradients

The logo exception: "Maybe Cat" uses dark brown #78350F with gold offset shadow 2px 2px 0 #FBBF24 — deliberate two-tone carnival/tarot lettering. Don't flatten to cream.

Text Shadow: The Outline Technique

// Standard outline for text on gradients
textShadow: [
  '-1px -1px 0 #78350F',
  ' 1px -1px 0 #78350F',
  '-1px  1px 0 #78350F',
  ' 1px  1px 0 #78350F',
  ' 0 2px 4px rgba(0,0,0,0.3)'
].join(', ')

• 1px offsets for ALL text sizes — stays crisp, not blobby
• Dark brown #78350F for the outline — on-brand
• Never use WebkitTextStroke — bloats letterforms
• One soft drop shadow for depth. Warm glow optional for hero/logo only.

Visual Philosophy

What We ARE

• Maximalist decorative flourishes
• Gold foil / metallic luxe energy
• Hot pink as a power color
• Mystical but LOUD and vibrant
• Ornate mandalas, vines, botanical elements
• Organic, curved, flowing shapes

What We Are NOT

• Muted, parchment, sepia, vintage
• Minimalist, corporate, clean
• Illustrated characters (REAL cat photos only)
• Rectangles, boxy, PowerPoint layouts
• Rigid grids, sharp 90° corners

Shape Language

Think: Indian miniature paintings, Mughal architecture, Buddhist mandalas, Asian textile patterns.

• Curves over corners
• Ornate over minimal
• Decorative over functional
• See shapes.md for implementation techniques

Decorative Elements

Gemini Integration

Claude orchestrates, Gemini generates design artifacts. Available tools:

Quality gate: Always validate Gemini output against this design system before implementing.

Before Shipping Checklist

• Colors still BOLD (not muted)?
• Feels like a tarot deck, not a wellness app?
• Enough decorative detail?
• Gradient flows hot pink → gold?
• Screenshot-worthy?
• Text readable with proper contrast?
• Text effects invisible at a glance?
• Text on gradient uses cream (#FEF3C7), not dark brown?
• Typography feels leafed on, not stamped/outlined?

Project IDs