---
name: Uizard
description: "The site perfectly captures the 'AI design' aesthetic, using dark mode and glowing purple to signal both power and creative potential."
version: alpha

colors:
  background: "#0D0D0D"
  primary: "#F5F5F5"
  secondary: "#AEAEAE"
  tertiary: "#6419FF"
  neutral: "#232323"
  bg-soft: "#171717"
  bg-quiet: "#080808"
  muted-soft: "#2E2E2E"
  line: "rgba(33,33,33,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 480
    letterSpacing: "-0.6px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.2px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Turn product ideas into concepts instantly with GenAI.

*An autopilot for UI design that turns text prompts into wireframes.*

## Colors

High-contrast dark mode with a vibrant purple AI accent to signal creativity and modern tech.

- **Background (`#0D0D0D`)** — uses `bg` token
- **Primary text (`#F5F5F5`)** — uses `ink` token
- **Secondary text (`#AEAEAE`)** — uses `ink-soft` token
- **Accent (`#6419FF`)** — uses `accent` token
- **Muted (`#232323`)** — uses `muted` token
- **Borders (`rgba(33,33,33,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Maintain tight line-heights (1.1-1.15) for headings.
- Use negative letter-spacing (-1px to -0.2px) for a modern, tight feel.
- Prioritize clean, geometric shapes for all display typography.

## Layout

A structured grid layout centered on the page with distinct sections for hero, features, and social proof.

*Rhythm:* A consistent 4px grid system ensures harmonious spacing across all UI components.

## Elevation & Depth

- 0px 12px 30px -4px rgba(3,3,3,0.12)
- 0px 2px 12px 0px rgba(168,129,254,0.64)
- 0px -20px 200px 0px rgba(68,20,187,0.75)
- Borders: 1px solid rgb(245,245,245) or rgb(33,33,33) depending on context.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High-contrast primary buttons with pill-shaped borders and subtle purple glows.
- **card:** Rounded cards with soft borders (1px solid #212121) and deep background colors.
- **chip:** Small, rounded labels used for status or tags within the interface.
- **input:** Clean input fields with dark backgrounds and subtle borders, often grouped with action buttons.
- **hero:** A dominant, centered hero section featuring a large headline, subtext, and a prominent prompt input.

## Do's and Don'ts

**Don't:**
- Don't use a white or light background — the screenshot shows a deep dark theme (#0D0D0D) as the foundation.
- Don't use warm, earthy, or pastel colors — the palette is dominated by blacks, whites, and high-chroma purples.
- Don't use serif fonts — the screenshot shows exclusively clean, geometric, and humanist sans-serif typefaces.
- Don't use rounded corners smaller than 4px — even small elements use at least 4px, with many cards using 12px or 16px.
- Don't use generic placeholder text in marketing materials — the screenshot uses clear, instructional prompt examples.
- Don't use low-contrast text — the screenshot shows high-contrast white (#F5F5F5) on dark backgrounds for maximum legibility.

---

## System Prompt (paste into AI agent)

```
Uizard is an AI-powered UI design tool that prioritizes speed and innovation. The visual system is built on a high-contrast dark mode (#0D0D0D background) with vibrant purple accents (#6419FF). Typography is dominated by clean, geometric sans-serif categories (display and body). Critical constraints include avoiding light themes, using exclusively modern sans-serif fonts, and maintaining high contrast for all text. The design uses a consistent 4px spacing grid and rounded corners (12px-16px) for a soft yet professional feel. Never use serif fonts or warm, earthy color palettes. The focus should always be on the 'magic' of AI-generated content, highlighted through glowing accents and bold, benefit-driven headlines.
```