Design System Skill

Purpose: Start frontend projects at v5.0 quality, not v1.0. Avoid AI-generated aesthetics (gradients, emojis, purple everywhere). Create elegant, functional, professional designs from the first iteration.

Learned from: Patas4Land (5 iterations → 1 should be enough)

---

🎯 Mission

Never again:

• ❌ Purple gradients + emojis everywhere
• ❌ Text-9xl headlines (too big)
• ❌ Invented mysterious brand voices
• ❌ 5 design iterations to get it right

Always:

• ✅ Professional, elegant, functional from v1.0
• ✅ v5.0 = animations (p5.js, three.js, creative coding)
• ✅ Discovery questions BEFORE designing
• ✅ Study references FIRST

---

📋 Phase 1: Discovery (MANDATORY)

Before writing a single line of code, ask:

Product Understanding

1. What does this product/service ACTUALLY do?

   • In plain words, no marketing speak
   • Example: "It's a foot pic marketplace" (not "anonymous desire platform")

2. Who are the competitors?

   • Get URLs of 2-3 direct competitors
   • Study their layout, copy tone, features

3. What's unique/differentiating?

   • Ethical angle? (7% reforestation)
   • Tech advantage? (Telegram bot automation)
   • Pricing? (90% to seller)

Business Model

1. How does money flow?

   • Fees, commissions, pricing
   • Example: 90% seller, 3% platform, 7% charity

2. What's the user journey?

   • How do users sign up?
   • How do they use the product?
   • What's the core action? (upload, buy, browse)

Brand & Voice

1. What's the brand voice?

   • Professional? Edgy? Playful? Minimalist?
   • Show references or examples

2. Any must-have mentions?

   • Token? ($PATAS on Monad)
   • Contract address?
   • Social impact? (reforestation)

Technical Constraints

1. Platform priorities?

   • Mobile-first? Desktop-first? Both?
   • Dark mode only? Light? Both?

2. Any existing brand assets?

   • Logo? Colors? Fonts?

3. Timeline & scope?

   • MVP or fully polished?
   • Any features can wait for v2?

---

🎨 Phase 2: Style Definition

Typography Scale (Tailwind)

Headlines:

Mobile:  text-4xl (36px) - text-5xl (48px)
Desktop: text-5xl (48px) - text-7xl (72px)
MAX:     text-8xl (96px) for hero only

❌ NEVER: text-9xl (128px) unless explicitly requested

Body Text:

Mobile:  text-base (16px)
Desktop: text-lg (18px) - text-xl (20px)

❌ NEVER: text-2xl for body copy

Labels/Meta:

text-xs (12px) - text-sm (14px)
tracking-[0.2em] - tracking-[0.3em] for uppercase

Hierarchy:

H1: text-5xl → text-7xl (mobile → desktop)
H2: text-4xl → text-5xl
H3: text-2xl → text-3xl
Body: text-base → text-lg
Meta: text-xs → text-sm

Spacing System (Tailwind)

Navigation:

py-4  (compact, professional)
px-8  (standard container padding)

❌ NEVER: py-6+ for nav (feels bloated)

Sections:

py-24 (standard section padding)
py-32 (emphasis sections)
px-8  (mobile safe area)

Hero:

minHeight: calc(100vh - navHeight)
paddingTop: navHeight (e.g., 72px if nav is py-4 + h-18)

This centers content in full viewport

Component Spacing:

mb-10 (badge → headline)
mb-8  (headline → subheadline)
mb-12 (subheadline → CTAs)
gap-6 (between CTA buttons)

Color Palettes

Noir (Dark Elegant)

Background: #000000 (true black)
Borders:    gray-900 (#1a1a1a), gray-800 (#262626)
Text:       white → gray-400 → gray-500 → gray-600 (hierarchy)
Accent:     amber-400 → yellow-500 (gold CTAs)

Light (Clean Professional)

Background: #ffffff (true white)
Borders:    gray-200 (#e5e5e5), gray-300 (#d4d4d4)
Text:       gray-900 → gray-700 → gray-500 (hierarchy)
Accent:     blue-600 → indigo-600 (professional CTAs)

Ethical Green (Sustainability)

Primary:    green-500 (#22c55e) for impact messaging
Secondary:  emerald-600 for CTAs
Use:        Only for reforestation/charity mentions

❌ AVOID:

• Purple gradients (AI-generated cliché)
• Hot pink + cyan combos (too flashy)
• Multiple gradient overlays

Component Patterns

Navigation

<nav className="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-xl border-b border-gray-900">
  <div className="container mx-auto px-8 py-4 flex items-center justify-between">
    <Link href="/">
      <Image src="/logo.png" width={40} height={40} />
    </Link>
    <div className="flex items-center gap-6">
      <Link className="text-sm uppercase text-gray-400 hover:text-white">
        Browse
      </Link>
      <Link className="px-5 py-2 bg-yellow-500 text-black rounded-full text-sm font-semibold">
        CTA
      </Link>
    </div>
  </div>
</nav>

Hero (Full Viewport)

<section 
  className="relative flex items-center justify-center px-8" 
  style={{ minHeight: 'calc(100vh - 72px)', paddingTop: '72px' }}
>
  <div className="container mx-auto">
    <div className="max-w-5xl mx-auto text-center">
      {/* Badge */}
      <div className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 border border-gray-800 rounded-full mb-10">
        <span className="text-yellow-500 text-sm">●</span>
        <span className="text-gray-400 text-sm">Category</span>
      </div>
      
      {/* Headline */}
      <h1 className="text-5xl md:text-7xl font-light leading-[0.9] mb-8">
        Main
        <br />
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-yellow-400">
          Highlight
        </span>
        <br />
        <span className="text-gray-600">Finish.</span>
      </h1>
      
      {/* Subheadline */}
      <p className="text-lg md:text-xl text-gray-400 leading-relaxed max-w-3xl mx-auto mb-12">
        Clear, direct explanation of what this does.
      </p>
      
      {/* CTAs */}
      <div className="flex gap-6">
        <button className="px-10 py-4 bg-white text-black">
          Primary
        </button>
        <button className="px-10 py-4 border border-gray-800">
          Secondary
        </button>
      </div>
    </div>
  </div>
</section>

Cards (Marketplace)

<div className="bg-gray-950 border border-gray-900 rounded-2xl hover:border-yellow-500/50 transition-all">
  {/* Image */}
  <div className="aspect-[4/5] bg-black relative overflow-hidden">
    <img src={item.image} className="w-full h-full object-cover" />
    <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent" />
  </div>
  
  {/* Info */}
  <div className="p-6 space-y-4">
    <div className="flex items-center gap-2">
      <h3 className="text-lg font-medium">{item.name}</h3>
      {item.country && <span>{getFlagEmoji(item.country)}</span>}
    </div>
    <p className="text-sm text-gray-500">{item.bio}</p>
    <button className="w-full py-3 bg-yellow-500 text-black rounded-xl">
      View
    </button>
  </div>
</div>

---

📝 Phase 3: Copy Guidelines

For Marketplaces

Direct > Poetic

❌ "Your secrets worth gold"
✅ "Sell your foot pics, earn crypto"

❌ "Desire meets discretion"
✅ "Upload via Telegram, get paid instantly"

For SaaS

What it DOES > How it feels

❌ "Revolutionize your workflow"
✅ "Automate document generation in 60 seconds"

For Landing Pages

Features > Fluff

❌ "Experience the future"
✅ "90% seller payout, 3% platform fee, 7% reforestation"

Tone Matching

If user provides reference (like FunWithFeet):

• Read their copy
• Match their directness level
• Don't invent a new voice

---

🚫 Anti-Patterns Checklist

Before shipping v1.0, self-review:

• [ ] No purple gradients (unless brand color)
• [ ] No emoji spam (1-2 strategic emojis max)
• [ ] Headlines under text-8xl
• [ ] Body text is text-base or text-lg (not larger)
• [ ] Copy says what product DOES (not vague feelings)
• [ ] Nav is py-4 (compact)
• [ ] Hero fills viewport properly
• [ ] No invented brand voice (matched reference)
• [ ] Business model is clear (fees mentioned)
• [ ] Differentiators are visible (7% trees, etc)

---

🎬 Phase 4: v5.0 = Creative Coding

v1.0 should be professional baseline.
v5.0 should blow minds with:

Creative Coding Libraries

• p5.js - Generative art, particle systems
• three.js - 3D scenes, WebGL
• framer-motion - Smooth animations
• GSAP - Advanced scroll animations
• lottie - Motion graphics

Examples v5.0 Features

Hero with:
- Animated gradient mesh (three.js)
- Mouse-following particles (p5.js)
- Smooth scroll parallax (GSAP)

Cards with:
- Magnetic hover effects (framer-motion)
- 3D tilt on hover (three.js)
- Staggered entrance animations

Background:
- Generative noise patterns (p5.js)
- Animated SVG morphing
- Shader effects

Timeline:

• v1.0 (Day 1): Professional, functional, elegant baseline
• v2.0-v4.0: Iterate on content/structure
• v5.0 (Day 2-3): Add creative coding magic

NOT:

• v1.0-v4.0: Fight with typography/spacing/colors
• v5.0: Finally get to "clean" design

---

🛠️ Usage Workflow

Starting a New Project

1. Read this skill

   Read ~/.openclaw/skills/design-system/SKILL.md
   

2. Run discovery (ask all 10 questions in Phase 1)

3. Study references (user-provided competitors)

4. Choose palette (Noir/Light/Brand)

5. Start with patterns (use Component Patterns section)

6. Self-review (Anti-Patterns Checklist)

7. Get approval on v1.0

8. Then add creative coding for v5.0

---

📚 Reference Projects

✅ Good Examples (Study These)

• Patas4Land v5.0 - Clean noir, compact nav, direct copy
• FunWithFeet - Marketplace clarity, seller details
• Linear.app - Professional sans-serif, subtle animations
• Stripe.com - Perfect hierarchy, readable typography

❌ Bad Examples (Avoid These)

• Patas4Land v1.0-v4.0 - AI-generated gradients, too big type
• Generic landing page templates with emoji spam
• "Mysterious" copy that doesn't explain the product

---

🎯 Success Metrics

This skill succeeds when:

• v1.0 looks like what v5.0 used to be
• No more than 2 iterations needed (v1 → v2 polish)
• User says "This looks professional" on first draft
• We spend 80% of time on creative coding, 20% on baseline

This skill fails when:

• We do 5+ iterations on colors/typography
• User says "too AI-generated" or "generic template vibes"
• We never get to the p5.js/three.js magic

---

🔄 Continuous Improvement

After each project, update this skill:

1. What worked? (add to patterns)
2. What failed? (add to anti-patterns)
3. New libraries discovered? (add to v5.0 section)
4. New discoveries? (add to guidelines)

Commit changes to:

• This file (SKILL.md)
• GitHub (pantera-memory repo)
• Convex DB (learnings table)

---

Bottom Line:
This skill exists so I NEVER spend 5 hours iterating on basics again. v1.0 = professional baseline. v5.0 = creative magic.

🐆✨