VibeDesign AI

:root {
  --color-primary: #7C3AED;
  --color-secondary: #22C55E;
  --color-accent: #A855F7;
  --color-background: #080A12;
  --color-surface: #111827;
  --color-card: #161B22;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A1A1AA;
  --color-border: #27272A;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-muted: #71717A;
  --color-input: #18181B;
}

theme: {
  extend: {
    colors: {
      primary: "var(--color-primary)",
      secondary: "var(--color-secondary)",
      accent: "var(--color-accent)",
      background: "var(--color-background)",
      surface: "var(--color-surface)",
      card: "var(--color-card)",
      border: "var(--color-border)",
      muted: "var(--color-muted)",
      success: "var(--color-success)",
      warning: "var(--color-warning)",
      danger: "var(--color-danger)"
    },
    borderRadius: {
      xl: "1rem",
      "2xl": "1.5rem",
      "3xl": "2rem"
    },
    boxShadow: {
      soft: "0 20px 60px rgba(0,0,0,0.25)",
      glow: "0 0 40px rgba(124,58,237,0.25)"
    }
  }
}

Build a responsive landing page with hero, feature sections, proof, pricing or CTA, and footer.

Follow the color system, typography, spacing, component rules, visual effects, and accessibility rules from the DESIGN.md below.
Do not introduce random colors.
Do not ignore the visual direction.
Make the UI modern, clean, responsive, and production-ready.
Use reusable components.
Make sure all pages are visually consistent.
Use semantic HTML and accessible focus states.
Prefer real working UI structure over decorative placeholders.

Here is the DESIGN.md:

# DESIGN.md

This is the official design system specification for the **Startup Landing Page** project, generated using VibeDesign AI. Use this specification to ensure complete visual consistency during UI implementation.

---

## 1. Project & Brand Identity

- **Category / Layout Suggestion**: **Startup Landing Page**
- **Brand Vibe Theme**: **Dark Premium**
- **Emotional Mood / Tone**: premium, modern, dark, elegant
- **Mixed Direction Description**: premium, modern, dark, elegant, clean, futuristic, intelligent, with 60% Dark Premium, 25% Modern SaaS, and 15% Futuristic AI.

### Expected User Journey & Purpose
The website should communicate a clear, focused purpose. Its page structure, typography, and color tokens must work together to lead visitors toward key actions. The page composition follows this structured layout flow:
*Hero first, social proof, product value, feature grid, CTA bands.*

---

## 2. Typography Specification

Headings and UI text follow the brand-specified typographic constraints:

| Typography Role | Style Specifications |
| :--- | :--- |
| **Interface Headings** | Sans-serif (Inter, Geist Sans, or system UI), semi-bold to bold (600–700 weight), tight tracking (-1.5% to -2%), line-height 1.1–1.2 |
| **Body Prose / Details** | Sans-serif (Inter or system UI), regular to medium (400–500 weight), line-height 1.5–1.6 for scanning |
| **Code / JSON / Technical** | Geist Mono (or system monospace), regular (400 weight), tight line-height |

*Preset Inspiration:* Clean modern sans-serif, bold headings, readable body text.

---

## 3. Color Token System

Use these exact tokens. Do not invent arbitrary colors. If hover, active, or disabled states require variation, derive them by adjusting the alpha opacity or brightness of these tokens.

| Token | HEX Code | Role & Usage |
| :--- | :--- | :--- |
| Primary | `#7C3AED` | Main CTA background, active navigation state, key brand highlights. |
| Secondary | `#22C55E` | Supporting buttons, secondary badges, charts, and content markers. |
| Accent | `#A855F7` | Focus rings, highlight borders, special annotations, attention states. |
| Background | `#080A12` | Main page canvas background. |
| Surface | `#111827` | Grouped sections, panels, sidebars, page dividers. |
| Card | `#161B22` | Content cards, pricing cards, dashboard widgets, modal dialog panels. |
| Text Primary | `#FFFFFF` | Headings, main titles, buttons labels, primary readability copy. |
| Text Secondary | `#A1A1AA` | Descriptions, helper text, captions, secondary details. |
| Border | `#27272A` | Subtle borders, outlines, hairline dividers, boundaries. |
| Success | `#22C55E` | Success states, completed indicators, success badges. |
| Warning | `#F59E0B` | Caution statuses, warning alerts, attention indicators. |
| Danger | `#EF4444` | Errors, destructive buttons, critical alerts. |
| Muted | `#71717A` | Placeholders, disabled inputs, quiet metadata, low-priority details. |
| Input | `#18181B` | Form fields backgrounds, select dropdowns, editable boxes. |

---

## 4. Component Implementation Rules

### Buttons & CTAs
- **Primary CTA**: Styled with `Primary` background (`#7C3AED`) and readable text (`readableOn(Primary)`). Rounded-full (pill-style) or rounded-lg with subtle hover lifts (`hover:-translate-y-0.5`) and active compression.
- **Secondary CTA**: Styled with transparent background, outline border using `Border`, and `Text Primary`.

### Containers & Cards
- **Content Cards**: Use `Card` background (`#161B22`) and subtle hairline borders with `Border` (`#27272A`). Maintain a unified corner radius.
- **Section Breaks / Groups**: Grouped content areas or sidebars use the `Surface` background (`#111827`) for separation.

### Form Fields
- **Text Inputs / Selects**: Styled with `Input` background (`#18181B`), outlines using `Border`, and clear focus states with `Primary`.

*Website Type Component emphasis:* Strong hero CTA, logo wall, feature cards, testimonial blocks.

---

## 5. Visual Effects & Spacing

- **Corner Softening**: Components follow this principle: *Rounded buttons, glass cards, subtle borders, strong CTA contrast.*
- **Drop Shadows & Glows**: Visual effects follow this principle: *Subtle glow, smooth transitions, soft shadow, faint gradients.*
- **Transitions**: Keep hover animations smooth and fast (between 150ms and 220ms).
- **Responsive Paddings**: Mobile viewports use 16px horizontal gutters; tablet/desktop viewports scale to 24px and 32px respectively.

---

## 6. Theme Renderer Guidance

Do not reuse a generic SaaS layout for every visual direction. Treat this design as a theme-specific renderer:

| Theme Signal | Implementation Requirement |
| :--- | :--- |
| **Apple / Minimal / Wellness** | Use gallery-first sections, oversized whitespace, soft product tiles, minimal chrome, and restrained shadows. |
| **Framer / Cyberpunk / Gaming / Dark Anime** | Use dark artboard layouts, poster-scale typography, glowing gradient feature tiles, and high-energy dashboard surfaces. |
| **Luxury / Editorial** | Use editorial spacing, serif-style display type, thin dividers, restrained gold/accent usage, and image-led storytelling. |
| **Coffee / UMKM / Marketplace / Education** | Use warm conversion flows, product/menu cards, practical trust cues, and friendly rounded commerce surfaces. |
| **Developer / Docs / Vercel-like** | Use dense documentation rhythm, monospace technical surfaces, sharp dividers, and precise active states. |

When building previews or pages, vary the composition, card shape, typography, navigation behavior, and content modules according to the selected vibe and website category. Changing only colors is not enough.

---

## 7. Code & Export Tokens

### CSS Variables
```css
:root {
  --color-primary: #7C3AED;
  --color-secondary: #22C55E;
  --color-accent: #A855F7;
  --color-background: #080A12;
  --color-surface: #111827;
  --color-card: #161B22;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A1A1AA;
  --color-border: #27272A;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-muted: #71717A;
  --color-input: #18181B;
}
```

### Tailwind Config Extend
```js
theme: {
  extend: {
    colors: {
      primary: "var(--color-primary)",
      secondary: "var(--color-secondary)",
      accent: "var(--color-accent)",
      background: "var(--color-background)",
      surface: "var(--color-surface)",
      card: "var(--color-card)",
      border: "var(--color-border)",
      muted: "var(--color-muted)",
      success: "var(--color-success)",
      warning: "var(--color-warning)",
      danger: "var(--color-danger)"
    }
  }
}
```

---

## 8. Do's and Don'ts

### ✅ Do:
- Maintain clear visual contrast ratios between text and background.
- Follow the color token tables exactly.
- Keep components responsive and mobile-friendly.
- Make each theme feel structurally different: page rhythm, card silhouette, navbar style, and preview modules must change with the vibe.

### ❌ Don't:
- Do not introduce random hex codes outside this specification.
- Do not mix unrelated visual guidelines in the same view.
- Do not use low-contrast text on primary buttons or headers.
- Do not ship a generic template where every vibe has identical layout with only color changes.

{
  "colors": {
    "primary": "#7C3AED",
    "secondary": "#22C55E",
    "accent": "#A855F7",
    "background": "#080A12",
    "surface": "#111827",
    "card": "#161B22",
    "textPrimary": "#FFFFFF",
    "textSecondary": "#A1A1AA",
    "border": "#27272A",
    "success": "#22C55E",
    "warning": "#F59E0B",
    "danger": "#EF4444",
    "muted": "#71717A",
    "input": "#18181B"
  }
}