# Uizard · Design system migration spec

> Source: https://uizard.io  ·  Curated by OpenDesign  ·  en

> The site perfectly captures the 'AI design' aesthetic, using dark mode and glowing purple to signal both power and creative potential.

## 1. Identity DNA

The Uizard design system is an autopilot for UI design, translating the chaos of early product ideas into structured, editable wireframes. Its visual language is built to feel both technically precise and creatively generative, establishing a clear identity for rapid prototyping.

**One-liner:** Turn product ideas into concepts instantly with GenAI.
**Keywords:** AI-powered · rapid prototyping · UI design · wireframing · product concepts
**Analogy:** An autopilot for UI design that turns text prompts into wireframes.

## 2. Color

The palette is a study in high-contrast focus, built on a foundation of deep, near-black dark mode with a singular, vibrant purple accent. This combination isolates interactive elements and signals creative potential against a backdrop of focused calm.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0D0D` | main background |
| `--bg-soft` | `#171717` | card background |
| `--bg-quiet` | `#080808` | quiet area |
| `--ink` | `#F5F5F5` | body text |
| `--ink-soft` | `#AEAEAE` | secondary text |
| `--muted` | `#232323` | placeholder |
| `--muted-soft` | `#2E2E2E` | weak hint |
| `--accent` | `#6419FF` | single accent |
| `--line` | `rgba(33,33,33,1)` | divider |

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

The guiding principle is chromatic restraint: a vast dark canvas that makes every accent and piece of text demand attention.

## 3. Typography

Typography relies on clean, geometric sans-serif categories for both display and body copy. Tight line-heights and negative letter-spacing create a dense, modern typographic mass that prioritizes scannable headlines and clear interface labels.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main hero headline |
| h1 | 40px | 1.1 | 480 | -0.6px | Section headings |
| body-lg | 18px | 1.33 | 400 | -0.2px | Subheadings and emphasis |
| body | 16px | 1.15 | 400 | -0.2px | Standard paragraph text |
| caption | 14px | 1.15 | 400 | 0px | Secondary text and UI labels |

**Type rules:**
- 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.

## 4. Spacing

All spacing derives from a consistent 4px grid, ensuring a predictable and harmonious rhythm across every component and section.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 90 px
- **Rhythm:** A consistent 4px grid system ensures harmonious spacing across all UI components.

## 5. Surfaces

Surfaces are defined by deep background values and layered with sophisticated shadows to create a subtle sense of depth. Crisp, context-dependent borders provide essential delineation without visual clutter.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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.

## 6. Layout

The layout is a centered, full-width structure that anchors the experience with a dominant hero section. A clear 12-column grid governs the arrangement of features and social proof, creating an organized flow of information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is functional and reinforces the system's high-tech character, with smooth, standardized transitions on core properties. Dynamic glows and subtle hover effects provide feedback and emphasize the AI-driven core of the product.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on background-color and opacity.
  - Subtle hover effects on interactive elements.
  - Dynamic glows and gradients that enhance the AI-centric feel.

- **Hover:** Subtle color shifts and slight scale or glow effects on primary actions.
- **Click:** Immediate visual feedback through color change or inset shadow.
- **Transition:** Standardized 0.3s transitions for all state changes.
- **Keyboard:** Full keyboard accessibility for navigation and action triggers.

## 8. Voice & Don'ts

The editorial voice is innovative and direct, speaking in bold, benefit-driven headlines that foreground speed and AI capabilities. Calls to action use clear, active verbs to reduce friction and encourage exploration.

- **Tone:** Innovative, empowering, and direct.
- **Headline style:** Bold, benefit-driven statements that focus on speed and AI capabilities.
- **CTA style:** Action-oriented verbs like 'Generate', 'Sign up', and 'Explore'.
- **Avoid:** Overly technical jargon that isn't explained. / Passive or hesitant language. / Excessive exclamation marks or sensationalism.

### Don'ts
- ❌ 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.

The system deliberately excludes serif typography, light themes, and warm, earthy palettes to maintain its sharp, AI-native aesthetic.

## System Prompt (paste into AI tool)

```
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.
```