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

# Prisma Labs · Design System

> Quiet monochrome, bold type, and vivid app imagery.

**Theme:** light · **Industry:** ai · **Source:** https://prisma-ai.com/ · **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._

Prisma Labs presents its AI editing apps through a restrained monochrome layout with oversized uppercase typography and generous white space. Product screens provide the page’s vivid color, while thin rules, muted text, and a single dark team band structure the journey.

## North star

Keep the interface nearly monochrome and spacious, letting bold uppercase type and vivid app screens carry the visual emphasis.

## Overview

The visual strategy is intentionally restrained: a white canvas carries nearly the entire page, with near-black reserved for headline text, inverse buttons, and one full-width team section. Mid and light grays soften supporting copy, publication marks, and small metadata; a fine pale border separates statistics, press logos, and footer content. Inter is used throughout, combining large, tightly led uppercase headlines with small, widely tracked uppercase eyebrows and button labels. The centered hero and proof points give way to a two-column app showcase, where colorful phone screens become the dominant imagery against an otherwise quiet interface. Sections are broad and uncluttered, with fine horizontal rules and open space establishing rhythm instead of cards or shadows. Pill-shaped CTAs are the main rounded element. The footer returns to a white, compact multi-column arrangement with subdued text.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light section backgrounds, footer, and white CTA text on dark buttons. |
| Quiet Gray | `#767676` | `--color-quiet-gray` | neutral | Navigation labels, supporting copy, and subdued footer text. |
| Carbon Ink | `#0e0e0e` | `--color-carbon-ink` | brand | Primary headings and text, dark CTA fills, and the full-width team section. |
| Soft Divider | `#e4e4e2` | `--color-soft-divider` | semantic | Hairline borders dividing page sections and footer areas. |
| Mist Gray | `#b7b7b7` | `--color-mist-gray` | neutral | Lighter muted supporting text and subtle secondary details. |
| Pale Graphite | `#a6a6a6` | `--color-pale-graphite` | neutral | Occasional low-emphasis text, including small footer details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0e0e0e` (Carbon Ink) · `--color-text` → `#0e0e0e` (Carbon Ink) · `--color-text-muted` → `#767676` (Quiet Gray) · `--color-text-subtle` → `#b7b7b7` (Mist Gray) · `--color-border` → `#e4e4e2` (Soft Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e0e0e` | `#ffffff` | 19.3:1 | AAA |
| `#767676` | `#ffffff` | 4.54:1 | AA |
| `#767676` | `#0e0e0e` | 4.25:1 | AA-large |
| `#b7b7b7` | `#ffffff` | 2.01:1 | fail |
| `#b7b7b7` | `#0e0e0e` | 9.63:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500, 700 | All page text, from display headlines and body copy to navigation, metadata, and CTAs. | Inter |

- **Inter:** Headlines are weight 600, uppercase, and tightly led; body copy is regular, while small labels use generous tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.343, base 16.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 600 | 1.04 | 0.01em | uppercase | Inter | Oversized uppercase statement headlines. |
| h1 | 64px | 600 | 1.04 | 0.005em | uppercase | Inter | Primary hero headline. |
| h2 | 48px | 600 | 1.04 | 0.01em | uppercase | Inter | Major section headings such as app and team titles. |
| h3 | 35px | 600 | 1.04 | 0.03em | uppercase | Inter | App names and secondary feature headings. |
| h4 | 24px | 600 | 1.6 | 0 | — | Inter | Smaller content headings and statistic labels. |
| body | 16.5px | 400 | 1.6 | 0 | — | Inter | Explanatory copy beneath hero and app headings. |
| caption | 13.5px | 400 | 1.6 | 0 | — | Inter | Small metadata, press labels, and footer details. |
| button | 12.5px | 600 | 1.6 | 0.14em | uppercase | Inter | Compact uppercase pill-button labels. |
| nav | 13.5px | 400 | 1.6 | 0 | — | Inter | Header navigation and footer link labels. |
| eyebrow | 11px | 400 | 1.6 | 0.16em | uppercase | Inter | Small, tracked uppercase section kickers. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 3, 4, 5, 7, 8, 12, 13, 14, 16, 18, 22, 26, 28, 32, 36 px.
- Section rhythm 36px · element gap 4px · card padding — · max content width 1224px.

The page is centered on a measured 1224px maximum content width, with a compact overall density but generous open space around major blocks. The hero, stats, and press strip span broad horizontal bands; the app showcase uses two balanced columns, and the footer resolves into three columns. Headings and hero copy are centered, while product copy sits beneath each device image. Thin horizontal rules mark transitions. Maintain the measured section rhythm and avoid adding card-heavy structure.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows or gradients. Use pale, thin borders to separate broad bands and column divisions instead of raised cards. Keep the pill CTAs sharply legible through solid contrast, and let the phone mockups provide their own visual depth without adding extra layered panels.

## Imagery

The app showcase uses portrait-oriented phone mockups displaying colorful editing interfaces and subjects; these screens supply nearly all strong color on the page. Keep the devices prominent and cleanly framed within their columns, with short app descriptions and CTAs below. Press logos appear as a subdued monochrome strip. The rest of the design relies on typography and whitespace rather than decorative illustration or background imagery.

## Components

### Header navigation

A restrained white header with the Prisma Labs mark at left and small muted uppercase links aligned to the right.

### Hero statement

Centered, uppercase Inter headline with a small tracked eyebrow and a short muted paragraph beneath.

### Proof-point strip

Three horizontally aligned metrics separated by fine borders, pairing bold figures or claim text with small uppercase labels.

### Press logo row

A centered, muted publication strip introduced by a small uppercase label and divided from neighboring sections by a hairline.

### App showcase

Two side-by-side product columns with colorful phone screens, uppercase app names, compact descriptions, and dark pill CTAs.

### Team CTA

A full-width Carbon Ink section with centered white headline and copy, plus a white capsule button with dark text.

### Footer

A white, compact three-column footer for address, company, social, and legal links, with muted text and fine separators.

### Measured component styles

- **Primary button** (“MEET LENSA →”): background #0e0e0e · text #ffffff · border 1px solid #0e0e0e · radius 100px · padding 0px 32px · 600 12.48px Inter · uppercase
- **Secondary button** (“JOBS AT PRISMA LABS”): background #ffffff · text #0e0e0e · border 1px solid #ffffff · radius 100px · padding 0px 40px · 600 12.48px Inter · uppercase
- **Navigation item** (“About”): transparent background · text #767676 · radius 0px · padding 5px 0px · 400 13.6px Inter

## Do

- Use Gallery White as the dominant canvas.
- Set major headlines in uppercase near-black Inter.
- Use gray text for supporting copy and navigation.
- Let product screenshots provide the strongest color.
- Separate broad sections with pale hairlines.
- Keep CTAs pill-shaped and high contrast.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce unmeasured brand accent colors.
- Do not enclose every content group in a card.
- Do not make supporting text compete with the headlines.
- Do not crowd the hero or product showcase.
- Do not recolor the app screens to match the monochrome page.

## Agent prompt

Build a new Prisma Labs page using a restrained monochrome system. Use Gallery White (#ffffff) for the main canvas, Carbon Ink (#0e0e0e) for bold uppercase headings and primary actions, Quiet Gray (#767676) for navigation and supporting copy, and Soft Divider (#e4e4e2) for fine rules. Use Inter throughout; make display text bold, uppercase, and tightly led, with small tracked uppercase eyebrows and labels. Organize content in centered, broad sections with generous whitespace, balanced columns, and a compact multi-column footer. Use rounded capsule CTAs with strong foreground/background contrast. If product imagery is included, keep it vivid and let it supply the page’s color. Avoid shadows, gradients, extra accent colors, and unnecessary card containers.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero on white with an uppercase headline, small eyebrow, and muted supporting paragraph. | clear value proposition, centered reading flow | uppercase display type, tracked eyebrow, muted body copy |
| 2 | logo-cloud | A labeled horizontal strip of publication marks between fine divider lines. | social proof, brand recognition | muted logos, hairline boundaries, small uppercase label |
| 3 | product-showcase | Centered section heading above two balanced product columns with phone imagery and copy. | side-by-side product discovery, direct app CTA | phone mockups, uppercase app names, dark pill buttons |
| 4 | cta | Full-width dark band with centered white heading, short copy, and light capsule button. | recruitment prompt, single clear action | inverse color block, centered typography, white pill CTA |
| 5 | footer | White footer with a brand and address area alongside three compact link groups. | grouped navigation, legal access | three-column links, muted text, fine separators |

## Source CSS custom properties (selected)

```css
--nav-bg: rgba(255,255,255,.9);
--nav-bg-solid: rgba(255,255,255,.97);
--accent: #0E0E0E;
--accent-fg: #FFFFFF;
--accent-muted: rgba(255,255,255,.7);
--on-accent-bg: #FFFFFF;
--on-accent-fg: #0E0E0E;
```

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