---
title: "Uizard design system"
variant: extended
source: https://uizard.io/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/uizard-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Uizard · Design System

> Dark product storytelling lit by electric violet

**Theme:** dark · **Industry:** ai · **Source:** https://uizard.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Uizard presents AI-powered UI design through a black canvas, vivid violet glows, and prominent product previews. A centered hero leads into feature cards, customer testimonials, and a dense, structured footer.

## North star

Keep the page anchored in black and let violet glow, crisp type, and real product UI carry the story.

## Overview

The page uses an almost-black canvas as its visual anchor, letting white and soft-white typography stay legible while violet gradients create a dramatic focal glow behind the hero and selected feature panels. Blue is reserved for the prominent free-sign-up CTA, while violet marks generation actions and AI-related accents. Satoshi-Variable supplies the consistent interface voice; a larger Clash Grotesk display treatment gives the hero headline its strong, compact presence. The opening section centers headline, supporting copy, prompt field, and a framed product preview, then transitions into trusted-brand marks and a centered introduction. Feature content is organized in bordered dark cards with embedded interface imagery, followed by a three-column testimonial field and a multi-column footer. Generous separation between major blocks contrasts with tighter card and footer content. Thin charcoal outlines and restrained shadows distinguish layers without brightening the overall dark atmosphere.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Main page canvas and dominant background across sections. |
| Soft Chalk | `#f5f5f5` | `--color-soft-chalk` | neutral | Primary heading, body, and link text against the dark canvas. |
| Quiet Graphite | `#212121` | `--color-quiet-graphite` | neutral | Subtle hairlines and link or text boundaries. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | High-contrast text and button labels; also appears in headline gradients. |
| Card Black | `#0b0b0b` | `--color-card-black` | surface | Slightly lifted dark card surfaces. |
| Lavender Signal | `#a881fe` | `--color-lavender-signal` | accent | Violet generation actions, highlighted text, and soft accent glow. |
| Signup Blue | `#1e90ff` | `--color-signup-blue` | accent | Bright blue background for the free-sign-up CTA. |
| Border Charcoal | `#2e2e2e` | `--color-border-charcoal` | surface | Outlines around feature cards and other dark UI panels. |
| Mist Silver | `#e6e6e6` | `--color-mist-silver` | semantic | Gradient stop and pale detail, not a defining page surface. |
| Middle Gray | `#808080` | `--color-middle-gray` | semantic | Gradient midpoint or subdued visual detail, not a core interface color. |
| Electric Violet | `#6419ff` | `--color-electric-violet` | accent | Strong violet gradient and luminous product-story accents. |
| Pale Lilac | `#cbb2ff` | `--color-pale-lilac` | accent | Light end of violet gradients and decorative highlight. |
| Muted Silver | `#aeaeae` | `--color-muted-silver` | neutral | Occasional subdued text and secondary contrast. |
| Slate Edge | `#525252` | `--color-slate-edge` | surface | Secondary dark card boundary and subdued panel detail. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#0b0b0b` (Card Black) · `--color-text` → `#ffffff` (Pure White) · `--color-border` → `#212121` (Quiet Graphite) · `--color-accent` → `#a881fe` (Lavender Signal) · `--color-accent-2` → `#1e90ff` (Signup Blue) · `--color-accent-3` → `#6419ff` (Electric Violet) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#0b0b0b` | 19.68:1 | AAA |
| `#a881fe` | `#000000` | 7.24:1 | AAA |
| `#a881fe` | `#0b0b0b` | 6.78:1 | AA |

### Gradients

- `linear-gradient(78deg, rgb(255, 255, 255) 9.07%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.5) 90.93%)`
- `linear-gradient(-45deg, rgb(100, 25, 255), rgb(203, 178, 255))`
- `linear-gradient(189.47deg, rgb(204, 178, 255) 4.76%, rgb(100, 25, 255) 92.85%)`
- `linear-gradient(91deg, rgba(3, 3, 3, 0.3) 0%, rgba(85, 85, 85, 0.3) 100%), radial-gradient(59.46% 220% at 50% 100%, rgba(162, 117, 255, 0.1) 0%, rgba(100, 25, 255, 0.1) 100%), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Satoshi-Variable | `--font-body` | webfont | 480, 560, 640, 540 | Primary interface and content type for body copy, headings, navigation, buttons, and links. | Inter |

- **Satoshi-Variable:** Variable sans with measured weights from 480 to 640; tight tracking on larger text, natural case.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 540 | 1 | -0.008em | — | ClashGrotesk-Variable | Oversized hero headline establishing the page’s first focal point. |
| h1 | 40px | 640 | 1.2 | -0.025em | — | Satoshi-Variable | Major section headings and prominent page-level messages. |
| h2 | 24px | 640 | 1.33 | -0.008em | — | Satoshi-Variable | Feature-card and secondary section headings. |
| body | 18px | 480 | 1.33 | -0.011em | — | Satoshi-Variable | Hero explanation and feature descriptions. |
| caption | 14px | 480 | 1.43 | 0 | — | Satoshi-Variable | Small supporting labels and compact utility text. |
| button | 16px | 640 | 1.38 | -0.006em | — | Satoshi-Variable | Primary CTA and generation action labels. |
| link | 14px | 480 | 1.43 | 0 | — | Satoshi-Variable | Navigation, footer lists, and inline links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 12, 16, 20, 24, 32, 40 px.
- Section rhythm 90px · element gap 12px · card padding 20px · max content width 1260px.

The hero is centered within a wide desktop canvas, with headline, supporting copy, prompt control, and product preview stacked vertically. The measured page max width is 1260px; feature content uses a two-column, modular card arrangement, while testimonials form three columns and the footer spreads into six. Sections have pronounced vertical separation, with more compact spacing inside cards and dense footer lists. Alignment shifts from centered hero messaging to left-aligned card and testimonial content.

## Shape & elevation

- Radius: button `8px` · input `10px` · card `12px` · link `12px` · xs `4px` · sm `8px` · md `10px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `lg` (card): `rgba(3, 3, 3, 0.12) 0px 12px 30px -4px`
- Shadow `inset` (text): `rgba(168, 129, 254, 0.64) 0px 2px 12px 0px, rgb(168, 129, 254) 0px 1px 1px 0px inset`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.55) 0px 10.679px 33.371px 0px`
- Shadow `xl` (card): `rgba(68, 20, 187, 0.75) 0px -20px 200px 0px`
- Shadow `sm` (other): `rgba(3, 3, 3, 0.16) 0px 2px 8px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The page is mostly flat black, with charcoal card borders defining content boundaries. Product previews sit inside nested frames, while violet glow and selected dark shadows create depth behind the hero and feature panels. Keep elevation restrained: contrast comes from outlines, layered UI screenshots, and light effects rather than broad, bright shadows.

## Imagery

Product UI screenshots and mockups are the dominant imagery, framed inside dark panels and used to explain features rather than decorate independently. The hero preview sits within a large outlined frame over a violet glow. Feature cards embed smaller interface views, sometimes on violet-backed surfaces. Customer testimonials are primarily text-based, with small profile images; no defining photography or illustration style is apparent.

## Components

### Top navigation

Compact horizontal links on black, with the AI Design item accented in violet and a blue Sign up for free button.

### Hero prompt

Centered prompt input and adjacent violet Generate action beneath the headline and supporting copy.

### Product preview frame

Large dark product screenshot inside a thin outlined, rounded frame with a violet ambient glow.

### Feature cards

Dark modular cards with charcoal borders, rounded corners, concise copy, and embedded product UI imagery.

### Testimonial columns

Three-column customer quote layout with subtle dark boundaries and occasional profile images.

### Footer directory

Multi-column navigation lists above a thin divider, with a small brand lockup and blue signup CTA.

### Measured component styles

- **Primary button** (“Sign up for free”): background #1e90ff · text #ffffff · radius 8px · padding 0px 16px · 640 16px Satoshi-Variable
- **Secondary button** (“Generate”): background #a881fe · text #ffffff · radius 12px · padding 0px 24px · 640 16px Satoshi-Variable
- **Link** (“UI Design AI-powered UI design”): transparent background · text #0000ee · radius 8px · padding 0px 40px 0px 12px · 400 16px Satoshi-Variable
- **Input**: transparent background · text #111111 · border 1px solid · radius 10px · padding 12px · 640 16px Satoshi-Variable
- **Card** (“Generate prototypes No ideas left behind”): transparent background · text #f5f5f5 · border 1px solid #2e2e2e · radius 16px · padding 40px 0px 0px 40px · 400 16px Satoshi-Variable

## Do

- Use black as the continuous page canvas.
- Use soft-white text for clear contrast.
- Reserve blue for the primary signup action.
- Use violet for AI actions and selective ambient glow.
- Frame product imagery with thin charcoal borders.
- Give major sections clear vertical breathing room.

## Don't

- Do not introduce bright section backgrounds.
- Do not use violet as the default for every CTA.
- Do not let mockup colors redefine the brand palette.
- Do not replace product UI with generic stock photography.
- Do not add heavy shadows to every card.
- Do not crowd the centered hero with extra elements.

## Agent prompt

Build a new Uizard page with a continuous Canvas Black (#000000) background and Soft Chalk (#f5f5f5) typography. Use Satoshi-Variable for interface copy and Space Grotesk as the free display substitute for the measured Clash Grotesk hero treatment. Center the hero message and product preview; use Lavender Signal (#a881fe) or Electric Violet (#6419ff) for AI actions and restrained ambient glow, and reserve Signup Blue (#1e90ff) for the main signup CTA. Make product screenshots the visual proof: place them in dark panels outlined with Border Charcoal (#2e2e2e), with careful layered framing rather than heavy shadows. Organize feature content into modular cards, testimonials into three columns, and footer links into compact columns. Preserve generous separation between major sections while keeping card content efficient and readable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero stack with prompt input and framed product preview, followed by a trust-mark row and centered introduction. | AI prompt entry, Generate action, Free signup CTA, Trusted-by logos | Black canvas, Violet ambient glow, White headline, Outlined product frame |
| 2 | feature-grid | Modular, image-rich feature cards arranged in a two-column rhythm on the dark canvas. | Feature discovery, Product capability previews | Dark bordered cards, Embedded UI screenshots, Violet gradient panels |
| 3 | testimonials | Three-column testimonial field with varied quote lengths and compact profile details. | Social proof, Customer quotations | Dark quote cards, Subtle boundaries, Small profile images |
| 4 | footer | Brand row and signup action above compact multi-column navigation lists and a bottom legal line. | Site-wide navigation, Signup conversion, Legal links | Six-column link directory, Thin divider, Blue signup button |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/uizard-io