Design System Master File

LOGIC: When building a specific page, first check design-system/pages/[page-name].md. If that file exists, its rules override this Master file. If not, strictly follow the rules below.

---

Project: Vaanexa Generated: 2026-10-01 23:27:24 Category: Micro SaaS

---

Global Rules

Color Palette

Color Notes: Professional blue + deal green

Typography

• Heading Font: Fira Code
• Body Font: Fira Sans
• Mood: dashboard, data, analytics, code, technical, precise
• Google Fonts: Fira Code + Fira Sans

CSS Import:

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

Spacing Variables

Shadow Depths

---

Component Specs

Buttons

/* Primary Button */
.btn-primary {
  background: #059669;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #2563eb;
  border: 2px solid #2563eb;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

Cards

.card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: all 200ms ease;
  cursor: pointer;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

Inputs

.input {
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 200ms ease;
}

.input:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px #2563eb20;
}

Modals

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 90%;
}

---

Style Guidelines

Style: Vibrant & Block-based

Keywords: Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic

Best For: Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer

Key Effects: Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms

Page Pattern

Pattern Name: Bento Grid Showcase

• Conversion Strategy: Scannable value props. High information density without clutter. Mobile stack.
• CTA Placement: Floating Action Button or Bottom of Grid
• Section Order: 1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA

---

Anti-Patterns (Do NOT Use)

• ❌ Static design
• ❌ No video
• ❌ Poor mobile

Additional Forbidden Patterns

• ❌ Emojis as icons — Use SVG icons (Heroicons, Lucide, Simple Icons)
• ❌ Missing cursor:pointer — All clickable elements must have cursor:pointer
• ❌ Layout-shifting hovers — Avoid scale transforms that shift layout
• ❌ Low contrast text — Maintain 4.5:1 minimum contrast ratio
• ❌ Instant state changes — Always use transitions (150-300ms)
• ❌ Invisible focus states — Focus states must be visible for a11y

---

Pre-Delivery Checklist

Before delivering any UI code, verify:

• No emojis used as icons (use SVG instead)
• All icons from consistent icon set (Heroicons/Lucide)
• cursor-pointer on all clickable elements
• Hover states with smooth transitions (150-300ms)
• Light mode: text contrast 4.5:1 minimum
• Focus states visible for keyboard navigation
• prefers-reduced-motion respected
• Responsive: 375px, 768px, 1024px, 1440px
• No content hidden behind fixed navbars
• No horizontal scroll on mobile