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

# Paradigm · Design System

> Editorial clarity for evidence-led AI research

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

Paradigm presents an AI research platform through a restrained editorial system, pairing large serif headlines with precise sans-serif interface copy. Light, ruled content sections alternate with a cinematic dark hero and a dark footer, while blue gradients are reserved for product visuals.

## North star

Use an editorial serif-and-sans hierarchy over a precise ruled grid, reserving dramatic darkness and blue gradients for media and product proof.

## Overview

Paradigm balances a cinematic, nearly black hero with a long sequence of pale, finely divided content panels. The hero uses a full-bleed, low-light photographic video backdrop, placing a white serif headline and concise copy over the image; a light rectangular demo CTA provides the main contrast. Across the body, the cool near-white canvas and white surfaces create a calm foundation, with hairline gray borders defining the grid and separating content rather than relying on heavy cards. Atacama supplies the expressive, tightly tracked serif headlines, while Neue Montreal handles navigation, copy, labels, and controls with measured weights and compact tracking. Feature sections alternate text and product-interface imagery, often using soft blue gradients inside the illustrations. Spacious vertical intervals give each topic room, while consistent column alignment keeps the lengthy page structured. The dark footer returns to the hero’s tonal contrast and carries the same restrained typography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Graphite | `#606167` | `--color-quiet-graphite` | neutral | Muted explanatory copy and secondary text on pale sections. |
| Cool Paper | `#f6f7f8` | `--color-cool-paper` | surface | Primary page canvas and light hero CTA fill; also appears as text over dark areas. |
| Midnight Ink | `#080b12` | `--color-midnight-ink` | brand | Primary text and links on light panels; anchors dark section and footer backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Clean section and content surfaces within the long feature sequence. |
| Soft Fog | `#f0f0f2` | `--color-soft-fog` | surface | Alternate pale bands, including subdued FAQ and transition areas. |
| Rule Gray | `#d7d7da` | `--color-rule-gray` | neutral | Fine card outlines and recurring panel and grid dividers. |
| Muted Periwinkle | `#7b95c4` | `--color-muted-periwinkle` | accent | Blue gradient highlight inside product mockups, not a dominant page-wide accent. |
| Ice Blue | `#dfecff` | `--color-ice-blue` | accent | Pale endpoint of the soft blue illustration gradient. |
| Night Slate | `#06080d` | `--color-night-slate` | surface | Deep alternate dark section surface, including the security content band. |
| Silver Divider | `#cfd0d4` | `--color-silver-divider` | neutral | Fine separators within pale content regions and section boundaries. |
| Misted Line | `#cacacf` | `--color-misted-line` | neutral | Secondary card and content divider strokes. |
| Abyss Blue | `#010b18` | `--color-abyss-blue` | accent | Deep starting tone in a product illustration gradient, not the general canvas. |
| Navigation Ash | `#97999c` | `--color-navigation-ash` | neutral | Subdued navigation label tone. |
| Pale Type | `#b7b7bb` | `--color-pale-type` | neutral | Low-emphasis text and navigation detail against dark backgrounds. |
| Footer Gray | `#7f8185` | `--color-footer-gray` | neutral | Quiet footer and secondary dark-surface copy. |
| Signal Navy | `#103b91` | `--color-signal-navy` | accent | Saturated middle stop in the blue product-visual gradient. |
| Signal Blue | `#4c7de8` | `--color-signal-blue` | accent | Bright gradient stop inside product mockups; not used as a broad interface fill. |

### Semantic aliases

`--color-canvas` → `#f6f7f8` (Cool Paper) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#080b12` (Midnight Ink) · `--color-surface-3` → `#f0f0f2` (Soft Fog) · `--color-surface-4` → `#06080d` (Night Slate) · `--color-text` → `#080b12` (Midnight Ink) · `--color-text-muted` → `#606167` (Quiet Graphite) · `--color-text-subtle` → `#f6f7f8` (Cool Paper) · `--color-border` → `#d7d7da` (Rule Gray) · `--color-accent` → `#7b95c4` (Muted Periwinkle) · `--color-accent-2` → `#103b91` (Signal Navy) · `--color-accent-3` → `#4c7de8` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080b12` | `#f6f7f8` | 18.35:1 | AAA |
| `#080b12` | `#ffffff` | 19.68:1 | AAA |
| `#080b12` | `#f0f0f2` | 17.29:1 | AAA |
| `#606167` | `#f6f7f8` | 5.75:1 | AA |
| `#606167` | `#ffffff` | 6.17:1 | AA |
| `#606167` | `#080b12` | 3.19:1 | AA-large |
| `#606167` | `#f0f0f2` | 5.42:1 | AA |
| `#f6f7f8` | `#ffffff` | 1.07:1 | fail |
| `#f6f7f8` | `#080b12` | 18.35:1 | AAA |
| `#f6f7f8` | `#f0f0f2` | 1.06:1 | fail |

### Gradients

- `linear-gradient(135deg, rgb(123, 149, 196), rgb(223, 236, 255))`
- `linear-gradient(rgb(1, 11, 24), rgb(1, 8, 24) 16%, rgb(16, 59, 145) 49%, rgb(76, 125, 232) 78%, rgb(186, 208, 255) 97%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal-664db4e45422dff6 | `--font-body` | webfont | 450, 500, 400, 600 | Navigation, body copy, links, labels, and buttons. | Inter |
| Atacama-b538b26c81f7b413 | `--font-display` | webfont | 370, 400 | Large editorial headlines and section titles. | Cormorant Garamond |

- **Neue Montreal-664db4e45422dff6:** Predominant sans; measured weights 400–600, copy around 450, compact negative tracking, uppercase spaced eyebrows.
- **Atacama-b538b26c81f7b413:** Light serif display treatment, regular-to-light weights, tight negative tracking, sentence case.

### Type scale — Custom (ratio ≈ 1.854, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 55px | 400 | 1.15 | -0.05em | — | Atacama-b538b26c81f7b413 | Hero headline; large two-line serif statement over dark media. |
| h2 | 40.5px | 370 | 1.15 | -0.06em | — | Atacama-b538b26c81f7b413 | Editorial section headlines and prominent content titles. |
| body | 16px | 450 | 1.5 | -0.01em | — | Neue Montreal-664db4e45422dff6 | Feature descriptions and explanatory paragraph copy. |
| caption | 14px | 500 | 1.25 | -0.015em | — | Neue Montreal-664db4e45422dff6 | Compact supporting labels and interface details. |
| button | 14px | 500 | 1.6 | -0.015em | — | Neue Montreal-664db4e45422dff6 | Demo and signup CTA labels. |
| nav | 12px | 500 | 1.67 | -0.01em | — | Neue Montreal-664db4e45422dff6 | Small, restrained navigation labels. |
| link | 15px | 400 | 1.39 | -0.02em | — | Neue Montreal-664db4e45422dff6 | Inline feature and resource links. |
| eyebrow | 12px | 500 | 1.67 | 0.14em | uppercase | Neue Montreal-664db4e45422dff6 | Uppercase, letter-spaced section markers. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 6, 8, 12, 16, 20, 24, 32, 40, 120, 190 px.
- Section rhythm 120px · element gap 16px · card padding 12px · max content width 1060px.

A spacious, centered content system uses a measured 1060px maximum width and a recurring multi-column grid. The hero is full-bleed media with left-aligned copy; the following long-form content alternates text and product visuals across split sections. Thin vertical and horizontal rules make the grid visible without adding card-heavy structure. Wide section intervals create a deliberate scroll rhythm, while logo, integration, FAQ, and footer areas stay aligned to the same underlying columns. Overall density is spacious, with compact text inside broad areas of negative space.

## Shape & elevation

- Radius: card `4px` · xs `2px` · sm `4px`
- Shadow `inset` (other): `rgba(8, 8, 23, 0.16) 0px 0px 0px 1px inset`
- Shadow `md` (other, 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(7, 7, 22, 0.04) 0px 3px 6px 0px, rgba(7, 7, 15, 0.03) 0px 2`
- 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(10, 12, 30, 0.06) 0px 16px 24px 0px, rgba(8, 10, 25, 0.05) `
- Motion: standard transition `0.15s cubic-bezier(0.33, 0, 0.15, 1)` on interactive elements.

The interface is mostly flat: thin gray rules, white surfaces, and aligned panels do the structural work. Product cards have restrained outlines and subtle measured shadows rather than pronounced floating layers. Gradient backgrounds belong inside mockups, while the hero image creates depth through darkness and photographic blur.

## Imagery

The hero is a full-bleed, low-light photographic video frame with softly blurred human and environmental detail, darkened to support white copy. Later sections use clean product-interface mockups and data cards, often placed over pale blue gradient fields or deep navy illustration panels. Media is framed as evidence of the product rather than decorative photography; logos and interface details remain small within the wider grid.

## Components

### Hero navigation

Compact white-on-dark header with brand mark, centered navigation links, a login link, and a fine outlined signup control.

### Media hero

Full-bleed dark video or photography with left-aligned Atacama headline, concise Neue Montreal copy, and a light rectangular demo CTA.

### Logo strip

Centered trust statement and subdued customer marks on a pale band, framed by the page grid.

### Alternating feature panels

Editorial text and product mockups swap sides across spacious sections, with thin dividers and selective gradient illustration backdrops.

### Integration matrix

A ruled table-like display groups tool logos by category, keeping rows and columns visually light.

### FAQ list

A pale section pairs a compact introductory block with vertically stacked questions and simple plus controls.

### Dark footer CTA

Near-black footer opens with a serif CTA and light demo button, then organizes company links in ruled columns.

### Measured component styles

- **Primary button** (“Request a demo”): background #f6f7f8 · text #080b12 · border 1px solid · radius 0px · padding 8px 24px · 500 14px Neue Montreal-664db4e45422dff6
- **Secondary button** (“Get started”): transparent background · text #f6f7f8 · border 1px solid #f6f7f8 · radius 0px · padding 8px 24px · 500 14px Neue Montreal-664db4e45422dff6
- **Link** (“See how account research works”): transparent background · text #080c12 · radius 0px · padding 0px · 400 15px Neue Montreal-664db4e45422dff6
- **Card** (“Update CRM Record Priority: High · Evide”): transparent background · text #080b12 · border 1px solid #d7d7da · radius 4px · padding 12px · 400 16px Neue Montreal-664db4e45422dff6 · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Home”): transparent background · text #f7f7f8 · radius 0px · padding 0px · 500 12px Neue Montreal-664db4e45422dff6

## Do

- Pair Atacama-style serif headlines with Neue Montreal-style interface copy.
- Keep the canvas cool and pale, with dark bands used selectively.
- Align long-form sections and dividers to a consistent column grid.
- Alternate feature copy and product visuals to sustain scroll rhythm.
- Use measured gray borders instead of heavy card outlines.
- Keep blue gradients inside product imagery rather than broad UI fills.

## Don't

- Do not turn the page into a uniformly dark interface.
- Do not use saturated blue as a dominant page background.
- Do not replace the fine ruled grid with chunky cards.
- Do not center every section; preserve the left-aligned editorial structure.
- Do not let product mockups overwhelm the headline and copy.
- Do not add decorative shadows or rounded pills that disrupt the restrained geometry.

## Agent prompt

Build a new Paradigm-style AI SaaS page with an editorial, evidence-led feel. Use Cool Paper (#f6f7f8), Gallery White (#ffffff), and Soft Fog (#f0f0f2) for the main content, anchored by Midnight Ink (#080b12) dark bands and text. Use Rule Gray (#d7d7da) for delicate grid dividers. Set expressive large headlines in a light serif similar to Cormorant Garamond and use a clean sans such as Inter for navigation, copy, and controls. Create spacious, aligned sections with alternating text and product-interface visuals. Reserve Muted Periwinkle (#7b95c4), Ice Blue (#dfecff), and Signal Blue (#4c7de8) for restrained gradients inside mockups. Keep the hero cinematic and dark, the CTA rectangular and clear, and cards flat with subtle borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, centered multi-column page begins with a full-bleed dark media hero; body continues in alternating feature panels. | Primary demo CTA, Customer trust proof, Alternating feature explanations | Dark photographic hero, Serif headline, Fine ruled grid, Blue-gradient product mockups |
| 2 | footer | Dark full-width footer with a top CTA, followed by five compact link columns and a ruled legal row. | Demo conversion CTA, Grouped site navigation, Social and legal links | Midnight surface, Serif CTA heading, Light button, Column dividers |

## Source CSS custom properties (selected)

```css
--font-atacama: Atacama-b538b26c81f7b413,"Atacama-b538b26c81f7b413 fallback: Times New Roman",Palatino,Garamond,Cambria,Georgia,serif;
--font-neue-montreal: "Neue Montreal-664db4e45422dff6","Neue Montreal-664db4e45422dff6 fallback: Arial",sans-serif;
--pd-border-thin: .5px;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-copy: 450;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heading: 500;
--font-weight-label: 600;
--font-weight-button: 500;
--pd-letter-spacing-tightest: -.02em;
--pd-letter-spacing-tighter: -.015em;
--pd-letter-spacing-tight: -.01em;
--pd-letter-spacing-normal: 0;
--pd-letter-spacing-wide: .005em;
--pd-letter-spacing-wider: .0075em;
--pd-letter-spacing-widest: .01em;
--pd-font-size-smaller: .9em;
--pd-heading-32-letter-spacing: -.02em;
--pd-heading-24-letter-spacing: -.02em;
--pd-heading-20-letter-spacing: -.015em;
--pd-heading-18-letter-spacing: -.015em;
--pd-heading-16-letter-spacing: -.015em;
--pd-heading-14-letter-spacing: -.01em;
--pd-label-15-letter-spacing: -.02em;
--pd-label-14-letter-spacing: -.02em;
--pd-label-13-letter-spacing: -.01em;
--pd-label-12-letter-spacing: -.01em;
--pd-copy-16-letter-spacing: 0em;
--pd-copy-15-letter-spacing: -.02em;
--pd-copy-14-letter-spacing: -.015em;
--pd-copy-13-letter-spacing: -.01em;
--pd-copy-12-letter-spacing: -.01em;
--pd-copy-11-letter-spacing: -.01em;
--pd-button-14-letter-spacing: -.015em;
--pd-button-14-white-letter-spacing: -.01em;
--pd-button-13-letter-spacing: -.015em;
--pd-button-13-white-letter-spacing: -.01em;
```

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