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

# Leonardo.ai · Design System

> A black canvas for bold, creator-first AI

**Theme:** dark · **Industry:** ai · **Source:** https://leonardo.ai/ · **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._

Leonardo.ai uses a near-black canvas and oversized, vivid display lettering to make its AI creative platform feel like an immersive visual experience. Compact interface text and restrained pill-shaped controls sit alongside full-bleed artwork, product demonstrations, and artist stories.

## North star

Keep the interface quiet and the black canvas uninterrupted so oversized, vividly coloured creative media remains the dominant voice.

## Overview

The page is built on a continuous #000000 canvas, letting oversized artwork and typography provide the section-to-section contrast instead of alternating background bands. In the hero, extreme perspective lettering in electric violet fills the viewport around a compact centered headline and two pill CTAs. The measured heading face leoSans supplies heavy, uppercase display impact; canvaSans handles navigation, controls, labels, and compact explanatory copy. White text stays crisp against black, while vivid green, coral, pink, yellow, purple, and violet distinguish capabilities, metrics, and creator-card details. These colours are also prominent within visual assets, so preserve them as accents rather than treating every swatch as a global interface colour. Feature sections pair concise left-aligned copy with large media on the right. Generous black intervals separate content, while rounded media frames and pill controls soften the otherwise sharp, poster-like composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Infinite Black | `#000000` | `--color-infinite-black` | brand | Primary page canvas and continuous section background; also the dark field framing the hero artwork. |
| Soft Chalk | `#ededed` | `--color-soft-chalk` | neutral | Primary light text treatment for headings and body copy against the black canvas. |
| Creator Green | `#03e65b` | `--color-creator-green` | accent | Bright badges and selected capability or metric highlights; often part of bold creative visuals. |
| Quiet Silver | `#b7b7b7` | `--color-quiet-silver` | neutral | Measured button-border tone for subtle outlines on dark controls. |
| Graphite Glint | `#595959` | `--color-graphite-glint` | semantic | Measured gradient stop in decorative treatments, not a primary page surface. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | High-contrast primary CTA fill and selected navigation or heading text. |
| Artist Coral | `#ff5d4b` | `--color-artist-coral` | accent | Creator-card name accents and selected expressive content highlights. |
| Studio Pink | `#ff3386` | `--color-studio-pink` | accent | Capability and artwork lettering; use as a vivid feature accent rather than a background band. |
| Signal Yellow | `#ffc533` | `--color-signal-yellow` | accent | Creator labels and capability artwork, especially the video-themed visual. |
| Electric Orchid | `#d25fff` | `--color-electric-orchid` | accent | Upscaling-themed creative artwork and occasional vivid visual emphasis. |
| Violet Energy | `#6e60ee` | `--color-violet-energy` | accent | Dominant violet in the immersive hero lettering and select artwork; screenshot prominence is largely media-led. |
| Gallery Charcoal | `#353535` | `--color-gallery-charcoal` | surface | Dark creator-card surface, providing a modest tonal lift from the black canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Infinite Black) · `--color-surface` → `#353535` (Gallery Charcoal) · `--color-text` → `#ededed` (Soft Chalk) · `--color-text-muted` → `#000000` (Infinite Black) · `--color-border` → `#b7b7b7` (Quiet Silver) · `--color-accent` → `#03e65b` (Creator Green) · `--color-accent-2` → `#ff5d4b` (Artist Coral) · `--color-accent-3` → `#ff3386` (Studio Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ededed` | `#000000` | 17.94:1 | AAA |
| `#ededed` | `#353535` | 10.48:1 | AAA |
| `#000000` | `#353535` | 1.71:1 | fail |
| `#03e65b` | `#000000` | 12.47:1 | AAA |
| `#03e65b` | `#353535` | 7.29:1 | AAA |

### Gradients

- `conic-gradient(from 141deg, rgba(255, 255, 255, 0.35) 0deg, rgba(255, 255, 255, 0.05) 90deg, rgba(255, 255, 255, 0.35) 180deg, rgba(255, 255, 255, 0.05) 270deg, rgba(255, 255, 255, 0.35) 360deg)`
- `conic-gradient(from 172deg, rgba(255, 255, 255, 0.35) 0deg, rgba(255, 255, 255, 0.05) 90deg, rgba(255, 255, 255, 0.35) 180deg, rgba(255, 255, 255, 0.05) 270deg, rgba(255, 255, 255, 0.35) 360deg)`
- `conic-gradient(from 141.5deg, rgba(255, 255, 255, 0.35) 0deg, rgba(255, 255, 255, 0.05) 90deg, rgba(255, 255, 255, 0.35) 180deg, rgba(255, 255, 255, 0.05) 270deg, rgba(255, 255, 255, 0.35) 360deg)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| canvaSans | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, buttons, labels, and small supporting text. | Inter |
| leoSans | `--font-display` | webfont | 900, 500, 800 | Oversized display lettering and section headings. | Anton |

- **canvaSans:** Use compact, readable sans-serif text with regular to medium weights; keep interface copy restrained beside display art.
- **leoSans:** Very heavy, often uppercase display styling; tight tracking and compressed line spacing create poster-like impact.

### Type scale — Golden Ratio (ratio ≈ 1.64, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 166px | 900 | 0.85 | -0.02em | uppercase | leoSans | Immersive oversized hero lettering and campaign-style visual statements. |
| h1 | 97.5px | 900 | 0.9 | -0.01em | uppercase | leoSans | Primary hero headline and dominant page-level statements. |
| h2 | 79px | 900 | 0.8 | 0 | uppercase | leoSans | Large section headings and capability-feature titles. |
| h3 | 64.5px | 900 | 0.9 | -0.01em | uppercase | leoSans | Secondary feature and editorial headings. |
| h4 | 59px | 900 | 0.8 | 0 | uppercase | leoSans | Supporting display headings within content sections. |
| body | 14px | 400 | 1.25 | 0 | — | canvaSans | Feature descriptions, explanatory copy, and standard interface text. |
| caption | 10.5px | 400 | 1.25 | 0 | — | canvaSans | Compact artwork credits, creator roles, and secondary labels. |
| button | 14px | 500 | 1.25 | 0 | — | canvaSans | Primary and secondary pill CTA labels. |
| nav | 14px | 500 | 1.25 | 0 | — | canvaSans | Top-level navigation labels and utility links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 3, 5, 7, 10, 14, 17, 20, 27, 54 px.
- Section rhythm 54px · element gap 3px · card padding 20px · max content width 1152px.

A single dark canvas carries a long, vertically staged homepage. The measured content max width is 1152px, with comfortable density and large section intervals. The hero is a full-bleed, two-column composition whose centered message sits within immersive lettering. Later feature blocks use a split layout: short copy and CTAs on one side, oversized media on the other. A three-column artist-story area and centered brand statements add variety. Keep copy clusters compact and allow generous black negative space between major content moments.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `9999px` · badge `9999px` · link `9999px` · xs `6px` · sm `7px` · md `8px` · lg `16px` · xl `20px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.5) 0px 24px 80px 0px`
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: black sections have no visible elevation, and the measured card shadow is a deep, soft xl treatment rather than a universal effect. Use subtle outlines for secondary controls and reserve rounded framing for media and pills. Dark charcoal creator cards lift slightly from the canvas without introducing pale panels.

## Imagery

Use vivid, polished creative work and product-demo media as the primary visual substance. Hero artwork is typographic and perspective-distorted; feature imagery combines photography, motion, and large capability lettering. Media frames are prominent and rounded, while creator stories use portrait-oriented images and video. The saturated violet, pink, yellow, green, and blue visible across the page largely belong to artwork and capability visuals, not neutral UI chrome.

## Components

### Hero CTA pair

Center a white pill-shaped “Start now” button beside a dark, outlined “Developer API” control beneath the hero headline.

### Top navigation

Place compact white navigation labels over the hero artwork; keep utility actions at the right and avoid a separate light navigation band.

### Capability feature split

Pair concise explanatory copy and small pill actions with oversized, rounded product imagery, alternating visual emphasis as needed.

### Metric artwork

Present large, coloured figures and captions as typographic artwork on black, not as conventional dashboard tiles.

### Creator story card

Use creator imagery with a charcoal #353535 information area and small vivid accent labels such as #ff5d4b or #ffc533.

### Status badge

Use a compact #03e65b pill with dark text for brief status or emphasis, rather than a large filled panel.

### Measured component styles

- **Primary button** (“Start now”): background #ffffff · text #000000 · radius 3.35544e+07px · padding 13.5px 20.3px · 500 16px canvaSans
- **Link** (“Start now”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 13.5px canvaSans
- **Card** (“MIA FORREST Multidisciplinary Artist”): background #353535 · text #ff5d4b · radius 0px · padding 20.3px · 400 13.5px canvaSans
- **Badge**: background #03e65b · text #000000 · radius 3.35544e+07px · padding 5.1px 10.1px · 400 10.395px canvaSans
- **Navigation item** (“Create Industry Business Learn Pricing C”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 13.5px canvaSans

## Do

- Keep the page canvas consistently #000000.
- Let large expressive artwork dominate the hero.
- Use white pills for primary actions and outlined dark pills for secondary actions.
- Pair short feature copy with generously sized media.
- Reserve saturated hues for artwork, metrics, badges, and small highlights.
- Use heavy uppercase display type for key visual statements.

## Don't

- Do not add alternating light section backgrounds.
- Do not make every interface element brightly coloured.
- Do not turn the hero into a conventional text-heavy SaaS banner.
- Do not crowd feature media with dense copy.
- Do not treat artwork colours as a complete UI palette.
- Do not apply heavy shadows to every card or control.

## Agent prompt

Build a new page in the Leonardo.ai visual style. Use Infinite Black (#000000) as a continuous canvas, Soft Chalk (#ededed) for readable copy, and Paper White (#ffffff) for primary pill CTAs. Set oversized, heavy uppercase display statements in a leoSans-like face, with compact sans-serif interface text. Make one vivid, full-bleed visual the focal point; use saturated Violet Energy (#6e60ee), Studio Pink (#ff3386), Creator Green (#03e65b), or Signal Yellow (#ffc533) selectively in artwork and highlights. Keep navigation quiet, feature descriptions short, and media large with rounded framing. Arrange feature content as split copy-and-media sections, then use editorial creator or proof content for variety. Preserve generous black negative space; avoid light panels, generic dashboard cards, and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | 全幅视觉背景，顶部叠加导航，中央放置标题和双CTA。 | 主行动按钮, 开发者入口, 顶部导航 | 黑底, 紫色透视字, 白色胶囊按钮 |
| 2 | video | 黑底单列视频区域，留出宽阔空白。 | 静音控制, 轮播切换 | 深色画布, 媒体主导, 低调播放控件 |
| 3 | stats | 全幅黑底，彩色大数字与说明组成视觉化数据带。 | 关键数据展示 | 超大数字, 青蓝黄绿配色, 倾斜字形 |
| 4 | feature-split | 左侧说明和按钮，右侧大型创作图片。 | 开始创作, 了解更多 | 黑底分栏, 圆角媒体, 粉色视觉标题 |
| 5 | feature-split | 左侧功能说明，右侧大幅视频示例。 | 开始创作, 了解更多 | 黑底分栏, 黄色展示字, 圆角视频画面 |
| 6 | feature-split | 左侧短文案和操作，右侧宽幅编辑示例。 | 开始创作, 了解更多 | 黑底, 绿色功能字, 大幅媒体 |
| 7 | feature-split | 左侧简短说明，右侧人物图像与功能字样。 | 开始创作, 了解更多 | 黑底分栏, 紫色功能字, 圆角图像 |
| 8 | other | 三列内容区域，包含大量图片、图标和按钮。 | 内容浏览, 分类入口 | 黑底内容区, 多媒体卡片, 紧凑操作 |
| 9 | logo-cloud | 七列排列，内容居中。 | 品牌识别 | 居中对齐, 多枚标识, 黑底 |
| 10 | testimonials | 居中标题，下方三列人物媒体与简介卡片。 | 创作者案例, 横向浏览 | 人物影像, 炭灰信息区, 彩色姓名标签 |
| 11 | other | 黑底单列收尾区域，内容居中。 | 页尾承接 | 留白, 居中布局 |

## Source CSS custom properties (selected)

```css
--radius: .625rem;
--background: #000;
--foreground: oklch(14.5% 0 0);
--card-foreground: oklch(14.5% 0 0);
--popover-foreground: oklch(14.5% 0 0);
--primary: oklch(20.5% 0 0);
--primary-foreground: oklch(98.5% 0 0);
--secondary: oklch(97% 0 0);
--secondary-foreground: oklch(20.5% 0 0);
--muted-foreground: oklch(55.6% 0 0);
--accent: oklch(97% 0 0);
--accent-foreground: oklch(20.5% 0 0);
--border: oklch(92.2% 0 0);
--sidebar-foreground: oklch(14.5% 0 0);
--sidebar-primary: oklch(20.5% 0 0);
--sidebar-primary-foreground: oklch(98.5% 0 0);
--sidebar-accent: oklch(97% 0 0);
--sidebar-accent-foreground: oklch(20.5% 0 0);
--sidebar-border: oklch(92.2% 0 0);
--pagination-bullet-color: #fff;
--swiper-theme-color: #007aff;
--swiper-scale-duration: .5s;
```

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