# Uizard — Design System
> AI-powered UI design tool for rapid prototyping and wireframing.
- **Canonical:** https://uiuxskills.com/library/uizard
- **Source:** https://uizard.io
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:24.489Z

---

---
version: alpha
name: Uizard
description: AI-powered UI design tool for rapid prototyping and wireframing.
tone: >-
  Empowering, innovative, and accessible. The tone is direct and benefit-oriented, focusing on the
  ease of turning ideas into reality.
color-scheme: dark
colors:
  primary: "#7B61FF"
  surface: "#080808"
  surface-container: "#181818"
  on-surface: "#FFFFFF"
  on-surface-dim: "#A0A0A0"
  outline: "#333333"
  error: "#FF4D4D"
  success: "#00C853"
  on-primary: "#FFFFFF"
  focus-ring: "#7B61FF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    width: auto
  button-primary-hover:
    backgroundColor: "#654DE0"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#A594FF"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-surface-dim:
    backgroundColor: "{colors.on-surface-dim}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.3)
  lg: 0 10px 15px rgba(0,0,0,0.4)
---

## Overview

Uizard employs a dark-themed, high-contrast aesthetic that emphasizes its AI-driven capabilities. The visual language is modern, sleek, and professional, designed to appeal to product teams and designers who value speed and efficiency.

## Colors

The color strategy centers on a deep, immersive dark-mode palette that allows the brand's signature purple to stand out as a high-intent action color.

*   Primary (#7B61FF): The brand signature purple used for primary CTAs and highlights. (inferred)
*   Surface (#080808): The primary background color for the dark-mode interface.
*   Surface-container (#181818): The secondary surface used for cards, navigation containers, and section backgrounds.
*   On-surface (#FFFFFF): Primary text color for high contrast against dark surfaces. (inferred)
*   On-surface-dim (#A0A0A0): Secondary text color for subheads and metadata. (inferred)
*   Outline (#333333): Border color for inputs and dividers. (inferred)
*   Error (#FF4D4D): Semantic color for error states and alerts. (inferred)
*   Success (#00C853): Semantic color for success states. (inferred)
*   Focus-ring (#7B61FF): The high-visibility indicator for interactive elements. (inferred)

## Typography

The typography uses the Inter typeface to maintain a clean, readable, and professional interface across all screen sizes.

*   Display-lg: Used for hero headlines to create visual impact. (inferred)
*   Display-md: Used for major section headers. (inferred)
*   Headline-lg: Used for feature titles. (inferred)
*   Headline-md: Used for sub-feature titles. (inferred)
*   Headline-sm: Used for card titles. (inferred)
*   Body-md: The primary font for all body text. (inferred)
*   Label-sm: Used for small UI labels, badges, and metadata. (inferred)

## Layout

The site follows a standard SaaS landing page structure, utilizing a responsive grid that adapts from mobile to desktop. The section order is: nav, hero, social-proof, features, and footer. The hero pattern features a centered headline and subhead with a primary CTA, accompanied by a large product preview. Maintain at least {spacing.lg} between major content blocks to prevent overcrowding.

## Elevation & Depth

Depth is conveyed through subtle, multi-layered shadows on cards and interactive elements, providing a clear distinction between the background and content layers.

*   elevation.sm: Used for subtle card lift.
*   elevation.md: Used for standard cards and elevated containers.
*   elevation.lg: Used for modals, dropdowns, or drawer overlays.

## Shapes

The design follows a consistent rounded-corner philosophy that balances the technical nature of the AI tool with an approachable, modern feel. The {rounded.md} token (8px) is the standard for most UI components, ensuring visual harmony across the interface.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use {colors.primary} with {colors.on-primary} text, transitioning to a darker state on hover. Secondary buttons use a transparent background with an {colors.outline} border, maintaining a clean, minimal aesthetic.

### Card
Cards utilize {colors.surface-container} as a base with {rounded.md} corners. Use {card-elevated} when you need to create a distinct visual layer against the primary {colors.surface} background.

### Input Field
Input fields feature a {colors.surface} background with an {colors.outline} border. Upon interaction, the border should transition to {colors.focus-ring} to provide clear feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Never use {colors.primary} for background surfaces. |
| Apply {typography.display-lg} for hero headlines. | Avoid using {typography.body-md} for headers. |
| Use {rounded.md} for all card components. | Do not mix sharp corners with {rounded.md} components. |
| Maintain {spacing.md} between form elements. | Never use low-contrast text on {colors.surface}. |
| Use {colors.on-surface-dim} for secondary text. | Do not use {colors.error} for non-destructive actions. |
| Apply {colors.surface-container} for card backgrounds. | Avoid overcrowding; use less than {spacing.lg} between blocks. |
| Use {colors.focus-ring} for keyboard navigation. | Do not use thin, low-contrast borders for inputs. |
| Use {badge-success} for positive status indicators. | Do not use {colors.primary} for text labels on buttons. |

## Content Style

CTA labels should be action-oriented and use imperative verbs, such as "Sign up for free" or "Find out more." Keep button text concise to maintain the clean UI.

Headings should be benefit-driven and declarative, focusing on the speed and efficiency of the AI design process. Avoid fluff; prioritize clarity and direct value propositions.

Copy density should remain low. Use short, scannable paragraphs and bullet points to break up information. Ensure there is sufficient whitespace between text blocks to match the modern, minimal brand tone.

## Imagery & Icons

The imagery style is mixed, utilizing a combination of high-fidelity product screenshots, abstract gradient backgrounds, and clean, modern SVG icons. Product screenshots should be displayed clearly, often with subtle elevation, while gradients should be used sparingly to highlight key sections. Iconography should be simple and geometric, avoiding overly complex details.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Uizard, a minimal dark-mode enterprise SaaS brand with a direct, benefit-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.headline-md}`, `{rounded.md}` — never hardcode hex values, px sizes, or font families.
2. Use only the component variants listed under `components:`. Do not invent new button styles, card variants, or badge types the spec does not define.
3. Follow the Layout narrative for page-level decisions: nav → hero → social-proof → features → footer. Use at least `{spacing.lg}` between major content blocks.
4. Apply the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.primary}` as a surface background), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations from a site render. If an authoritative token source exists (theme file, Storybook), those values override the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, elevation, and typography decision.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{elevation.sm}` or `{elevation.md}` to cards; reserve `{elevation.lg}` for modals, dropdowns, and drawers.
- Render `{colors.focus-ring}` as the keyboard-focus indicator on all interactive elements.
- Match CTA copy style: imperative verbs, concise labels, no filler.

**Must NOT:**
- Invent colors, radii, font sizes, or spacing values outside the spec.
- Use generic system defaults when a brand token exists.
- Use `{colors.primary}` for background surfaces or text labels on buttons.
- Add emoji, decorative copy, or marketing filler.
- Rewrite existing page copy, button labels, headings, or navigation items.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- Ask the user before introducing any value not present in the spec.
- Prefer composing existing components over defining new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on dark surfaces, default to `{colors.on-surface}`; use `{colors.on-surface-dim}` for secondary or metadata text.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Use `{rounded.md}` as the default radius unless the spec explicitly calls for another value.