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

# Stability AI · Design System

> Dark editorial canvas, vivid creative tools

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

A dark, media-led homepage introduces Stability AI through cinematic creative imagery, concise product messaging, and a bright lavender CTA. A pale enterprise-solutions band creates a clear visual pause before the page returns to dark case studies and a compact footer.

## North star

Use the dark canvas and cinematic imagery as the stage; reserve lavender for clear, focused interaction.

## Overview

The visual system is built around a near-black canvas (#1e1e1e), with bright white headings and lavender (#a381ff) reserved for primary actions, selected links, and fine outlines. A broad warm off-white band (#ede5e1) distinguishes the enterprise offer from the darker editorial sections, while gradients soften that transition. Archivo carries nearly all of the site’s typography: bold, compact headlines contrast with readable regular-weight body copy. Figtree appears on selected buttons, giving calls to action a slightly distinct voice. The opening viewport uses a cinematic, full-bleed image with text anchored on the left; later sections alternate centered messaging, image-led cards, and a three-column news feed. The measured content width is 1127px, with a comfortable section rhythm and generous gaps around key statements. Cards remain visually restrained, using thin gray borders and subtle inset highlights rather than heavy drop shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Charcoal | `#1e1e1e` | `--color-studio-charcoal` | brand | Dominant page canvas and dark section background; also used for text on lavender CTAs. |
| Creative Lavender | `#a381ff` | `--color-creative-lavender` | accent | Primary filled CTA, selected links, and accent outlines against dark or pale surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation and heading text on dark areas; background for the enterprise and case-study transition. |
| Warm Porcelain | `#ede5e1` | `--color-warm-porcelain` | surface | Pale enterprise-solutions section and muted text on dark surfaces; also anchors soft gradients. |
| Footer Silver | `#bcbcbc` | `--color-footer-silver` | neutral | Low-emphasis footer copy and secondary utility text. |
| Card Graphite | `#606060` | `--color-card-graphite` | semantic | Thin card borders that separate media cards from the dark canvas. |
| Deep Black | `#000000` | `--color-deep-black` | neutral | Minor dark text or image-adjacent detail; not a defining page surface. |
| Soft Chalk | `#eeeeee` | `--color-soft-chalk` | neutral | Secondary link and text color on dark content sections. |
| Plum Shadow | `#2d2437` | `--color-plum-shadow` | semantic | Appears in media-overlay gradients and image treatment, not as a primary interface surface. |
| Slate Edge | `#464646` | `--color-slate-edge` | neutral | Subtle button, text, or secondary boundary detail within dark interface areas. |
| Quiet Gray | `#888888` | `--color-quiet-gray` | neutral | Muted supporting text; keep it secondary to white body copy. |
| Mauve Mist | `#b6a9c6` | `--color-mauve-mist` | accent | Occasional nav or link tint; a secondary lavender-adjacent accent rather than a core CTA color. |

### Semantic aliases

`--color-canvas` → `#1e1e1e` (Studio Charcoal) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#ede5e1` (Warm Porcelain) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#1e1e1e` (Studio Charcoal) · `--color-text-subtle` → `#ede5e1` (Warm Porcelain) · `--color-border` → `#606060` (Card Graphite) · `--color-accent` → `#a381ff` (Creative Lavender) · `--color-on-accent` → `#1e1e1e` (Studio Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1e1e1e` | 16.67:1 | AAA |
| `#ffffff` | `#ede5e1` | 1.24:1 | fail |
| `#1e1e1e` | `#ffffff` | 16.67:1 | AAA |
| `#1e1e1e` | `#ede5e1` | 13.41:1 | AAA |
| `#ede5e1` | `#1e1e1e` | 13.41:1 | AAA |
| `#ede5e1` | `#ffffff` | 1.24:1 | fail |
| `#a381ff` | `#1e1e1e` | 5.67:1 | AA |
| `#a381ff` | `#ffffff` | 2.94:1 | fail |
| `#a381ff` | `#ede5e1` | 2.37:1 | fail |

### Gradients

- `linear-gradient(rgb(240, 233, 230) 0%, rgb(255, 255, 254) 100%)`
- `linear-gradient(rgba(47, 37, 58, 0) 34.73%, rgba(47, 37, 58, 0.9) 84.98%)`
- `linear-gradient(rgb(237, 229, 225) 90%, rgb(240, 233, 230) 100%)`
- `linear-gradient(97.02deg, rgb(217, 203, 255) -1.81%, rgb(237, 229, 225) 45.23%, rgb(255, 255, 255) 110.19%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Archivo | `--font-body` | webfont | 400, 700, 600 | Primary family for headlines, body copy, navigation, links, and most page text. | Inter |
| Figtree | `--font-figtree` | webfont | 600 | Selected primary and secondary CTA labels. | Inter |
| Inter | `--font-inter` | system | 400 | Minor system-font fallback for small portions of text. | Inter |

- **Archivo:** Use regular body text and bold display headings; sentence case, with tight headline leading and no tracked-out caps.
- **Figtree:** Semibold button text, compact and legible; keep labels in natural sentence case.
- **Inter:** Use only as a fallback; measured share is minimal.

### Type scale — Major Third (ratio ≈ 1.257, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 700 | normal | 0 | — | Archivo | Hero headline introducing the featured creative product or message. |
| h2 | 42px | 700 | 0.98 | 0 | — | Archivo | Major section statements and prominent editorial headings. |
| h3 | 32px | 700 | 1.05 | 0 | — | Archivo | News, case-study, and feature-card headlines. |
| h4 | 26px | 700 | 1.18 | 0 | — | Archivo | Smaller subheads within content and solution blocks. |
| body | 18px | 400 | 1.34 | 0 | — | Archivo | Descriptions, explanatory copy, and supporting section text. |
| caption | 13px | 400 | 1.29 | 0 | — | Archivo | Dates, image labels, and compact metadata. |
| button | 14px | 600 | normal | 0 | — | Figtree | CTA labels, usually semibold and centered. |
| nav | 17.5px | 400 | 1.3 | 0 | — | Archivo | Main navigation and announcement-bar text. |
| link | 20px | 600 | 1.2 | 0 | — | Archivo | Prominent news and editorial links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 10, 11, 12, 15, 16, 18, 20, 21, 22, 26, 29, 30, 41, 58, 80 px.
- Section rhythm 95px · element gap 11px · card padding 91px · max content width 1127px.

Use a centered content frame with a measured maximum width of 1127px, while allowing hero media and select imagery to run full bleed. The opening composition aligns copy left over a darkened image; subsequent blocks use centered messaging, three-column cards, and broad horizontal section bands. Maintain a comfortable density: generous separation between major sections, tighter gaps inside cards, and clear transitions between dark and pale surfaces. The page’s cadence alternates immersive media with concise text-led pauses.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `8px` · media `50%` · nav `50%` · link `11px` · xs `8px` · sm `9px` · md `11px` · pill `9999px`
- Shadow `inset` (card, other): `rgba(255, 255, 255, 0.38) 0px 0px 1.5px 0.5px inset, rgba(255, 255, 255, 0.07) 0px 0px 12px 3px inset`
- Shadow `inset-2` (other): `oklch(0.999994 0.0000497986 none / 0.42) 0px 0px 2px 1px inset, oklch(0.999994 0.0000497986 none / 0.16) 0px 0px 12px 5px inset, rgba(0, 0, 0, 0.3) 0px 8px 30px 0px`
- Motion: standard transition `0.1s linear` on interactive elements.

The page is mostly flat, with section color and media framing creating hierarchy instead of heavy shadows. Cards use a measured gray hairline border and modest rounded corners. Subtle white inset highlights appear on selected cards or media treatments; avoid broad, elevated drop shadows.

## Imagery

Lead with cinematic, photographic creative work: people, environments, and generative-media examples are shown as immersive hero imagery or tightly framed card art. Overlay interface-like labels and subtle controls sparingly to suggest creative tools without competing with the subject. News thumbnails and case-study visuals remain image-forward; dark gradients help text sit legibly over media. Use real product or campaign imagery, not decorative illustration as the main visual language.

## Components

### Announcement bar

A narrow dark strip above navigation carries a centered update link and a small dismiss control.

### Primary CTA

Lavender pill button with dark text, a fine lavender border, and semibold Figtree or Archivo label.

### Hero media composition

Full-width cinematic image paired with left-aligned white copy and layered product-like labels or controls.

### Feature cards

Image-led cards introduce marketing, gaming, and entertainment use cases with concise white copy.

### News cards

Three-column editorial feed with image thumbnails, dates, and bold linked headlines on the dark canvas.

### Enterprise solution band

Warm off-white section with centered heading and four pale solution cards, each using a compact dark pill CTA.

### Footer form

Dark footer combines grouped navigation links with email and selection inputs outlined in white.

### Measured component styles

- **Primary button** (“Read more”): background #a381ff · text #1e1e1e · border 1px solid #a381ff · radius 300px · padding 10px 22px · 600 14px Figtree
- **Link** (“Self-Hosted Deploy our models in your en”): transparent background · text #1f1f1f · radius 11px · padding 42px 30px 20px 22px · 400 17.728px Archivo
- **Input** (“Please Select Enterprise solutions Gamin”): transparent background · text #ffffff · border 1px solid #ffffff · radius 99px · padding 12px 10px · 400 16px Archivo
- **Card**: transparent background · text #e5e7e6 · border 1px solid #606060 · radius 8px · padding 0px 0px 363.7px 0px · 400 17.728px Archivo
- **Navigation item** (“A new way to work with Stable Audio is h”): transparent background · text #ffffff · radius 0px · padding 0px · 400 17.728px Archivo

## Do

- Keep the primary canvas near-black and let imagery carry visual variety.
- Use lavender for high-priority actions and selective link emphasis.
- Set headlines in bold Archivo with compact, close leading.
- Create a clear contrast between dark editorial sections and the pale solution band.
- Use large image areas with restrained overlaid labels.
- Keep cards thin-bordered and visually integrated with their section.

## Don't

- Do not use lavender as a large background field.
- Do not flatten the page into a sequence of identical cards.
- Do not add heavy shadows or glossy effects across the interface.
- Do not crowd hero imagery with decorative UI overlays.
- Do not replace the warm pale section with an unrelated saturated color.
- Do not use all-caps display typography as the dominant headline style.

## Agent prompt

Build a new Stability AI page using Studio Charcoal (#1e1e1e) as the main canvas, Gallery White (#ffffff) for high-contrast text, and Creative Lavender (#a381ff) only for primary actions and selective links. Include a cinematic, image-led hero with left-aligned copy, then alternate dark editorial sections with a broad Warm Porcelain (#ede5e1) solution band. Use Archivo for headings, navigation, and body copy, with Figtree for selected CTA labels. Keep the content centered within the measured 1127px maximum width, while allowing hero media to bleed beyond it. Use bold compact headlines, comfortable section spacing, three-column editorial or case-study layouts, and restrained gray hairline borders. Favor photographic creative media over decorative illustration. Keep surfaces mostly flat and use only subtle inset highlights where layering helps.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width cinematic hero with copy aligned to the left and media filling the remaining composition. | product introduction, learn-more CTA, start-creating CTA | dark overlay, lavender pill buttons, floating media labels |
| 2 | logo-cloud | Centered trust statement above a wide logo or partner area on the dark canvas. | trust reinforcement | centered label, open dark space |
| 3 | feature-grid | Centered introduction followed by three image-led use-case cards. | use-case discovery, card-based browsing | three-column cards, image overlays, white copy |
| 4 | content-feed | Three-column editorial feed with thumbnails, dates, and linked headlines. | browse latest news, view all link | dark section, media cards, hairline borders |
| 5 | feature-grid | Pale horizontal band with a centered heading and four compact solution cards. | compare solution options, plan selection | warm pale surface, four-card grid, dark pill CTAs |
| 6 | testimonials | Centered quotation and attribution-style statement within the light section. | social proof, read-more link | large quote mark, centered copy, lavender CTA |
| 7 | product-showcase | Three-column case-study area with large media and text-led story cards. | case-study browsing, learn-more links | dark canvas, image-led cards, compact labels |
| 8 | cta | Full-bleed dark band with centered headline, short copy, and one button. | get-started CTA | centered text, lavender pill button, generous negative space |
| 9 | footer | Dark footer with company summary, grouped link columns, and a signup form. | newsletter signup, footer navigation, contact access | outlined inputs, small muted text, multi-column links |

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