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

# Prismic · Design System

> Quiet monochrome layouts, with product clarity at the center.

**Theme:** light · **Industry:** saas · **Source:** https://prismic.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._

Prismic pairs a spacious white canvas and assertive black typography with restrained blue and purple accents. Product screenshots, soft-gray cards, and a single dark footer make the long homepage feel structured without becoming visually heavy.

## North star

Keep the page calm and legible: let whitespace and black typography lead, and use color only to clarify product details.

## Overview

The page is built on a predominantly white canvas, with near-black text and controls creating crisp contrast rather than relying on decorative color. Pale gray fills distinguish feature cards, while thin gray rules separate testimonial content; a deep charcoal band gives the workflow section and footer visual weight. Blue appears as a small interface accent, and purple is confined to the MCP announcement badge, so neither competes with the content. Headings use a bold, tightly tracked display face, balanced by compact, readable sans-serif body copy. The layout alternates between centered hero content and left-aligned, multi-column sections, with generous whitespace between major blocks. Product UI images and a human-centered video still provide evidence of use, while repeated rounded cards make the feature areas easy to scan. CTAs stay simple and high-contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Prismic Ink | `#151515` | `--color-prismic-ink` | brand | Primary text, headings, dark CTA buttons, the workflow band, and footer. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas, light button fills, and contrast text on dark surfaces. |
| Soft Rule | `#eeeeee` | `--color-soft-rule` | neutral | Card outlines, fine separators, and subdued interface boundaries. |
| Slate Copy | `#505050` | `--color-slate-copy` | neutral | Navigation labels and secondary body copy on white. |
| Cloud Panel | `#f7f7f7` | `--color-cloud-panel` | surface | Soft-filled feature cards and understated content surfaces. |
| Muted Gray | `#a4a4a4` | `--color-muted-gray` | semantic | Low-emphasis text detected in measured styles; use sparingly for tertiary copy. |
| MCP Violet | `#8e44ec` | `--color-mcp-violet` | accent | Small Prismic MCP announcement badge, not a broad page background. |
| Charcoal Panel | `#1f1f1f` | `--color-charcoal-panel` | surface | Occasional dark card surface within the otherwise light product presentation. |
| Signal Blue | `#59b5f8` | `--color-signal-blue` | accent | Sparse interface or text emphasis; avoid treating it as a dominant page color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#151515` (Prismic Ink) · `--color-surface-2` → `#f7f7f7` (Cloud Panel) · `--color-surface-3` → `#1f1f1f` (Charcoal Panel) · `--color-text` → `#151515` (Prismic Ink) · `--color-text-muted` → `#505050` (Slate Copy) · `--color-text-subtle` → `#eeeeee` (Soft Rule) · `--color-border` → `#eeeeee` (Soft Rule) · `--color-accent` → `#59b5f8` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#151515` | `#f7f7f7` | 17.05:1 | AAA |
| `#151515` | `#1f1f1f` | 1.11:1 | fail |
| `#505050` | `#ffffff` | 8.06:1 | AAA |
| `#505050` | `#151515` | 2.26:1 | fail |
| `#505050` | `#f7f7f7` | 7.53:1 | AAA |
| `#505050` | `#1f1f1f` | 2.04:1 | fail |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#eeeeee` | `#151515` | 15.74:1 | AAA |
| `#eeeeee` | `#f7f7f7` | 1.08:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| copyFont | `--font-body` | webfont | 500, 700 | Body copy, navigation, captions, and most compact links and buttons. | Inter |
| headingsFont | `--font-display` | webfont | 500, 700 | Display and section headings, plus the measured button type role. | Plus Jakarta Sans |

- **copyFont:** Measured weights 500 and 700; keep copy clean and compact, with no tracking or uppercase styling.
- **headingsFont:** Measured weights 500 and 700; headings use tight negative tracking, with sentence-case wording.

### Type scale — Perfect Fourth (ratio ≈ 1.368, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.14 | -0.025em | — | headingsFont | Large hero headline and other high-priority page statements. |
| h1 | 40px | 700 | 1.1 | -0.025em | — | headingsFont | Primary section headings and prominent content titles. |
| h2 | 32px | 500 | 1.13 | -0.025em | — | headingsFont | Secondary section headings and feature-group titles. |
| h3 | 22px | 500 | 1.27 | -0.025em | — | headingsFont | Card titles and smaller subsection headings. |
| body | 16px | 500 | 1.5 | 0 | — | copyFont | Standard paragraphs, feature descriptions, and supporting copy. |
| caption | 14px | 700 | 1.43 | 0 | — | copyFont | Compact labels, metadata, and supporting card text. |
| button | 22px | 500 | 1.27 | -0.025em | — | headingsFont | Prominent button label styling where the display face is used. |
| nav | 16px | 500 | 1.5 | 0 | — | copyFont | Header navigation labels and menu items. |
| link | 14px | 700 | 1.43 | 0 | — | copyFont | Bold inline actions, story links, and compact text CTAs. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 10, 12, 16, 24, 32, 40, 48, 56, 80 px.
- Section rhythm 80px · element gap 16px · card padding 48px · max content width 1216px.

Use a centered page frame capped at the measured 1216px max width, with comfortable density and clear section breaks. The hero is centered, while most content sections use left-aligned headings and split or three-column layouts. Preserve the measured 80px section rhythm and 16px element rhythm where applicable. Alternate text with product media, then use repeated cards to organize feature explanations. Keep testimonial and FAQ content aligned to the same frame; let the footer expand into multiple link columns.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `50%` · badge `9999px` · nav `8px` · link `8px` · xs `2px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat: measured data reports no shadows. Use subtle borders in #eeeeee for outlined cards and separators, and #f7f7f7 fills for soft card surfaces. Rounded corners distinguish cards and buttons without making them look raised. Reserve dark panels for deliberate section contrast, not floating overlays.

## Imagery

Use product-interface screenshots as the main proof of capability, framed cleanly within the content grid and often paired with explanatory cards. Include occasional human-centered photography or video stills, cropped to feel like part of the product story rather than decorative stock imagery. Small interface accents may appear inside screenshots; keep the surrounding page neutral and avoid adding unmeasured brand colors.

## Components

### Announcement strip

A restrained top banner with a compact purple Prismic MCP badge, short announcement copy, and a pale neutral background.

### Header navigation

Logo and horizontal navigation use #505050 labels, with simple menu affordances and contrasting outlined or dark CTA buttons.

### Hero

Centered, bold two-line headline, muted explanatory copy, dark demo CTA, and a low-key customer logo row.

### Feature cards

Use #f7f7f7 rounded surfaces or #eeeeee outlines to separate concise feature copy without shadows.

### Dark CTA band

A wide #151515 panel pairs a short prompt with a white button for clear, high-contrast action.

### Testimonial cards

Bordered story cards combine short customer quotes, attribution, and a compact bold text link.

### FAQ accordion

A two-column FAQ layout balances a section heading against a vertical list of concise questions and controls.

### Footer

A deep #151515 footer uses multiple link columns, restrained light text, and compact social icons.

### Measured component styles

- **Primary button** (“Get a demo”): background #ffffff · text #151515 · border 2px solid #ffffff · radius 8px · padding 12px 24px · 700 14px copyFont
- **Secondary button** (“Get started”): background #151515 · text #ffffff · border 2px solid #151515 · radius 8px · padding 0px 16px · 700 14px copyFont
- **Link** (“Read UNICEF's story”): transparent background · text #151515 · radius 8px · padding 12px 10px · 700 14px copyFont
- **Card** (“Go global Launch every locale at once Gi”): background #f7f7f7 · text #151515 · radius 12px · padding 48px · 500 16px copyFont
- **Badge** (“Prismic MCP”): background #8e44ec · text #ffffff · radius 9999px · padding 2px 10px · 500 12px headingsFont
- **Navigation item** (“Platform Solutions Developers Case studi”): transparent background · text #505050 · radius 0px · padding 0px · 500 16px copyFont

## Do

- Keep the main canvas white and uncluttered.
- Use #151515 for primary text and key actions.
- Apply #f7f7f7 to soft feature surfaces.
- Use #eeeeee for quiet borders and separators.
- Give headlines tight tracking and clear weight contrast.
- Pair product imagery with nearby explanatory copy.

## Don't

- Do not turn the page into a colorful gradient system.
- Do not use purple or blue as broad section backgrounds.
- Do not add shadows when the measured design is flat.
- Do not center every section; retain left-aligned content blocks.
- Do not crowd cards with dense copy or competing decoration.
- Do not use unmeasured radii or spacing values.

## Agent prompt

Create a new Prismic-style SaaS page with a calm, product-led visual system. Use Canvas White (#ffffff) as the main canvas, Prismic Ink (#151515) for headings and primary actions, Slate Copy (#505050) for secondary text, Cloud Panel (#f7f7f7) for soft cards, and Soft Rule (#eeeeee) for borders. Keep MCP Violet (#8e44ec) and Signal Blue (#59b5f8) sparse and contextual. Use bold, tightly tracked headings with clean, readable sans-serif body text. Build a centered frame with generous measured section rhythm, alternating split content and card grids. Show authentic product UI imagery beside concise copy. Favor flat surfaces, rounded cards, high-contrast buttons, and a dark footer; avoid gradients, shadows, and decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath announcement and navigation; headline, short copy, CTA, and customer logos. | primary demo action, customer social proof | centered headline, dark CTA, logo row |
| 2 | feature-split | Two-column section with copy and stats opposite a product-related image. | benefit explanation, proof-point stats | split layout, image panel, stat tiles |
| 3 | other | Single-column section heading and brief explanatory paragraph. | context setting | left-aligned heading, short intro |
| 4 | product-showcase | A prominent product image occupies a focused single-column media area. | workflow demonstration | product UI screenshot, overlay panel |
| 5 | feature-grid | Two-column grid of repeated soft-gray feature cards with short descriptions. | scan feature benefits, compare use cases | rounded cards, blue micro-labels |
| 6 | cta | Wide dark horizontal panel with a text prompt and button. | secondary conversion | dark band, light button |
| 7 | how-it-works | Dark section with introduction and three horizontally arranged step cards. | step-by-step guidance | numbered cards, dark-on-dark surfaces |
| 8 | feature-grid | Three-column feature cards, each combining product image, heading, and copy. | capability scanning | three-card row, embedded product previews |
| 9 | cta | Wide, dark CTA panel with a short heading, proof copy, and demo action. | conversion prompt, social proof | dark rounded panel, contrasting button |
| 10 | testimonials | Horizontal row of bordered testimonial cards with customer attribution and links. | customer validation, story discovery | outlined cards, quote text, text links |
| 11 | faq | Two-column FAQ area with section label beside a vertical question list. | answer discovery, progressive disclosure | question rows, expand controls |
| 12 | footer | Full-width dark footer with logo, social links, and four dense navigation columns. | site-wide navigation, social discovery | dark surface, multi-column links, social icons |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--shiki-color-text: #f7f7f7;
--shiki-color-background: #151515;
--color-prettylights-syntax-comment: #8b949e;
--color-prettylights-syntax-constant: #79c0ff;
--color-prettylights-syntax-entity: #d2a8ff;
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
--color-prettylights-syntax-entity-tag: #7ee787;
--color-prettylights-syntax-keyword: #ff7b72;
--color-prettylights-syntax-string: #a5d6ff;
--color-prettylights-syntax-variable: #ffa657;
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
--color-prettylights-syntax-carriage-return-bg: #b62324;
--color-prettylights-syntax-string-regexp: #7ee787;
--color-prettylights-syntax-markup-list: #f2cc60;
--color-prettylights-syntax-markup-heading: #1f6feb;
--color-prettylights-syntax-markup-italic: #c9d1d9;
--color-prettylights-syntax-markup-bold: #c9d1d9;
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
--color-prettylights-syntax-markup-deleted-bg: #67060c;
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
--color-prettylights-syntax-markup-inserted-bg: #033a16;
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
--swiper-theme-color: #007aff;
```

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