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

# Spellbook · Design System

> Editorial calm for modern legal work

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

Spellbook pairs dramatic near-black hero and conversion sections with clean white content bands and restrained orange accents. Oversized refined serif headlines, practical sans-serif body text, and documentary-style photography give the legal AI product a confident, human tone.

## North star

Use literary serif headlines and restrained dark-and-white contrast to frame practical legal-product content with calm editorial clarity.

## Overview

The page uses a restrained, high-contrast palette: near-black #0e1315 establishes the hero and footer, white carries most product and solution content, and soft gray #f5f5f5 marks selected editorial bands. The orange #f94d1e is an occasional functional spark rather than a broad brand wash. Arizona Mix gives large headlines a literary, editorial character; Soehne keeps navigation, body copy, controls, and captions direct and contemporary. The opening is deliberately spacious, with left-aligned copy and an expansive dark field before a full-width photographic proof section. Subsequent sections alternate between open white layouts, light-gray testimonial and newsletter bands, logo grids, and image-led cards. Photography is prominent and cinematic, while product content remains uncluttered. Hairline borders and subtle surface contrast separate elements; the overall system avoids ornamental shadows, heavy rounding, and dense decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#0e1315` | `--color-midnight-ink` | brand | Primary dark canvas for the hero, closing CTA, and footer; also the main text and dark button color. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main content canvas, inverse text on dark areas, and white demo buttons and testimonial cards. |
| Quiet Divider | `#d9d9d9` | `--color-quiet-divider` | semantic | Fine borders and separators, including understated navigation and control outlines. |
| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | surface | Soft background bands for customer proof, newsletter, and testimonial sections. |
| Slate Copy | `#56595b` | `--color-slate-copy` | neutral | Muted body copy and secondary text in light-background cards and footer content. |
| Media Black | `#000000` | `--color-media-black` | surface | Dark backing within media; not a defining page canvas color. |
| Gradient Gray | `#7f7f7f` | `--color-gradient-gray` | neutral | Gradient measurement artifact; not a prominent standalone interface color. |
| Signal Orange | `#f94d1e` | `--color-signal-orange` | accent | Small CTA or newsletter submit accent; use sparingly rather than as a section fill. |
| Graphite Panel | `#2e3333` | `--color-graphite-panel` | surface | Secondary dark section tone within the page's inverse surfaces. |
| Shadow Charcoal | `#1d2222` | `--color-shadow-charcoal` | neutral | Subtle dark gradient transition detail, not a primary flat surface. |
| Control Edge | `#3f3f45` | `--color-control-edge` | semantic | Occasional darker input or button border detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#0e1315` (Midnight Ink) · `--color-surface-2` → `#f5f5f5` (Cloud Gray) · `--color-surface-3` → `#000000` (Media Black) · `--color-surface-4` → `#2e3333` (Graphite Panel) · `--color-text` → `#0e1315` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-text-subtle` → `#56595b` (Slate Copy) · `--color-border` → `#d9d9d9` (Quiet Divider) · `--color-accent` → `#f94d1e` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e1315` | `#ffffff` | 18.71:1 | AAA |
| `#0e1315` | `#f5f5f5` | 17.16:1 | AAA |
| `#0e1315` | `#000000` | 1.12:1 | fail |
| `#ffffff` | `#0e1315` | 18.71:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#56595b` | `#ffffff` | 7.06:1 | AAA |
| `#56595b` | `#0e1315` | 2.65:1 | fail |
| `#56595b` | `#f5f5f5` | 6.47:1 | AA |
| `#56595b` | `#000000` | 2.98:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(14, 19, 21), rgba(14, 19, 21, 0))`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))`
- `linear-gradient(90deg, rgba(16, 21, 23, 0.6), rgba(16, 21, 23, 0))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Soehne | `--font-body` | webfont | 400, 500, 700, 300 | Navigation, body copy, buttons, links, captions, and interface text | Inter |
| Arizona Mix | `--font-display` | webfont | 300 | Display and prominent section headlines | Cormorant Garamond |
| Arial | `--font-arial` | system | 400 | System fallback for body/interface text | Arial |

- **Soehne:** Mostly regular and medium weights; concise UI labels and sentence-case copy, with comfortable body leading.
- **Arizona Mix:** Light-weight editorial serif with tight negative tracking; use sentence case and allow headlines to wrap naturally.
- **Arial:** Fallback only; preserve the same plain, readable sans-serif treatment when Soehne is unavailable.

### Type scale — Perfect Fifth (ratio ≈ 1.504, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 300 | 1 | -0.04em | — | Arizona Mix | Large editorial headline emphasis in the opening and major statements. |
| h1 | 51px | 300 | 1.1 | -0.03em | — | Arizona Mix | Primary hero headline and highest-priority page title. |
| h2 | 24px | 400 | 1.4 | 0 | — | Soehne | Section headings introducing product, customer, and solution content. |
| body | 20px | 400 | 1.4 | 0 | — | Soehne | Supporting explanations and introductory product copy. |
| caption | 16px | 400 | 1.3 | 0 | — | Soehne | Customer details, media labels, and compact supporting text. |
| button | 16px | 500 | 1.5 | -0.01em | — | Soehne | Demo, product, and form action labels. |
| nav | 16px | 500 | 1.3 | 0 | — | Soehne | Header navigation and footer link group labels. |
| link | 16px | 500 | 1.5 | -0.01em | — | Soehne | Inline actions such as customer stories and product details. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 8, 11, 12, 13, 16, 19, 20, 24, 28, 32, 48, 128 px.
- Section rhythm 128px · element gap 8px · card padding — · max content width 1296px.

The measured content width reaches 1296px, with a spacious overall density and pronounced section breathing room. The desktop hero is left-aligned beneath a compact horizontal navigation, while the proof image spans the viewport. Content then moves through varied grids: four-column customer marks, a broad product demonstration, testimonial cards, integrations and stats, and multi-column footer content. Backgrounds alternate between white, #f5f5f5, and #0e1315 to distinguish chapters. Keep alignment predominantly left; center only the closing conversion block.

## Shape & elevation

- Radius: button `3px` · input `4px` · card `4px` · media `2px` · nav `4px` · link `3px` · xs `2px` · sm `3px` · md `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The page is largely flat: white and pale-gray bands, hairline separators, and changes in background tone do the structural work. Cards have understated edges and small corner radii rather than pronounced shadows. Layer photography with subtle dark gradients when text sits on top; keep controls and surfaces crisp and legible.

## Imagery

Use real, cinematic workplace and industry photography: legal-team testimonials, a container port, manufacturing, office buildings, and healthcare settings. Frame images broadly, often edge-to-edge or as horizontal cards, with dark overlays only when needed for readable copy. Product/interface areas remain restrained and mostly white. Avoid decorative illustration or glossy 3D as the main visual language.

## Components

### Top navigation

Compact dark header with logo, horizontally arranged Soehne navigation, subtle divider, login link, and white Book a Demo button.

### Hero

Near-black full-width field with a small product descriptor, large light serif headline, concise supporting copy, and white demo CTA.

### Customer proof

Full-bleed photographic testimonial/proof panel with overlaid trust statement, rating, customer mark, and short result.

### Logo grid

Pale-gray trust section combining a short heading and customer-story link with a structured grid of customer marks.

### Testimonial cards

Horizontal customer cards pair brand marks and concise quotes with portrait or video imagery and compact attribution.

### Lead form

Dark conversion area with centered serif heading, stacked dark inputs, small supporting proof, and a high-contrast action button.

### Newsletter signup

Newsletter block on a soft-gray band with editorial identity, short invitation, email field, and orange submit control.

### Footer

Dark multi-column navigation and newsletter area, separated by a fine horizontal rule and finished with legal links.

### Measured component styles

- **Primary button** (“Book a Demo”): background #ffffff · text #0e1315 · radius 3.2px · padding 12px 24px · 500 16px Soehne
- **Secondary button** (“Learn about ACM”): background #0e1315 · text #ffffff · radius 3.2px · padding 12px 24px · 500 16px Soehne
- **Link** (“4.7”): transparent background · text #0e1315 · radius 0px · padding 0px · 400 16px Soehne
- **Input** (“Are you a legal professional?* Yes, tran”): background #222727 · text #ffffff · radius 4px · padding 8px 16px 8px 12.8px · 400 16px Soehne
- **Card** (“Change and adoption was very straight-fo”): background #ffffff · text #56595b · radius 4px · padding 0px · 400 16px Soehne
- **Navigation item** (“Product Solutions Resources Customers Se”): transparent background · text #d9d9d9 · radius 0px · padding 0px · 400 16px Soehne

## Do

- Use #0e1315 for major dark bands and white inverse text.
- Set prominent headings in a light editorial serif.
- Keep navigation, body copy, and controls in a clean sans-serif.
- Alternate white content with measured #f5f5f5 section bands.
- Use real photography for customer proof and solution categories.
- Reserve orange for small functional accents.
- Separate sections with whitespace and fine rules.

## Don't

- Do not turn orange into a large background wash.
- Do not add heavy shadows or strongly rounded cards.
- Do not fill every section with dark backgrounds.
- Do not crowd the hero with extra copy or controls.
- Do not use decorative graphics in place of customer photography.
- Do not center-align all content; preserve the left-led editorial layout.

## Agent prompt

Build a new legal-AI SaaS page in Spellbook's calm editorial style. Use Midnight Ink (#0e1315) for a dramatic hero and conversion/footer bands, Paper White (#ffffff) for the main canvas, and Cloud Gray (#f5f5f5) for occasional proof or editorial sections. Keep Signal Orange (#f94d1e) to small action details. Use a light, tightly tracked serif display face for large headlines and a clear sans-serif for navigation, body, and controls. Favor a compact horizontal header, left-aligned copy, spacious section transitions, broad real-world photography, customer marks, and uncluttered cards. Use thin dividers and subtle surface contrast instead of shadows. Vary layouts across proof, product, testimonial, and solution content; keep the final CTA more centered and high contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-width hero, left-aligned copy, spacious field beneath compact navigation. | Primary demo CTA, Concise product explanation | Near-black canvas, Light serif headline, White button |
| 2 | gallery | Full-bleed customer photography with overlaid trust and outcome copy. | Customer proof, Rating signal | Wide photograph, Dark text overlay, Customer logo |
| 3 | logo-cloud | Pale-gray band with a left intro and multi-column logo grid. | Customer credibility, Customer-story link | Logo grid, Soft-gray background, Rating detail |
| 4 | product-showcase | White section with left-led heading and broad product demonstration area. | Workflow exploration, Learn-more action | Editorial section title, Product interface, Minimal dividers |
| 5 | testimonials | Wide horizontal testimonial carousel with image-led cards. | Customer quotes, Video playback, Carousel navigation | Photo cards, Customer logos, Compact attribution |
| 6 | integrations | White section combining left-side copy and integration marks with adjacent metrics. | Integration discovery, Outcome scanning | Tool logo row, Large stat figures, Light metric card |
| 7 | other | Centered security message with generous white space. | Security reassurance, Learn-more action | Centered serif heading, Compact compliance labels |
| 8 | newsletter | Soft-gray, multi-column editorial newsletter area with signup form. | Email subscription, Publication discovery | Newsletter identity, Email input, Orange submit accent |
| 9 | testimonials | Light-gray testimonial band with horizontally arranged white quote cards. | Customer quotes, Carousel navigation | White cards, Customer portraits, Brand marks |
| 10 | category-nav | White section with category heading and horizontal image-card row. | Industry browsing, Category links | Large industry photography, Card captions, Carousel controls |
| 11 | contact | Near-black two-column conversion area with form and supporting message. | Lead capture, Audience qualification, Trust reassurance | Dark form inputs, Centered serif heading, High-contrast CTA |
| 12 | footer | Dark footer with newsletter block and multi-column link groups. | Newsletter signup, Site navigation, Legal links | Thin divider, Grouped link columns, Brand mark |

## Source CSS custom properties (selected)

```css
--page--background: #0e1315;
--_typography---paragraph-body--font: Soehne,Arial,sans-serif;
--_typography---paragraph-body--font-size-lg: 1rem;
--_typography---paragraph-body--font-weight: 400;
--_typography---paragraph-body--letter-spacing: 0em;
--_typography---h1--font: "Arizona Mix",sans-serif;
--page--text-primary: white;
--_typography---h1--font-size-lg: 4.25rem;
--_typography---h1--font-weight: 300;
--_typography---h1--letter-spacing: -.04em;
--type-h1--font-size-md<deleted|variable-4846072a-e3b2-8ef1-0393-2dbb83195742>: 3.625rem;
--type-h1--font-size-sm<deleted|variable-e5e812c0-4c6e-d633-1178-c051cf6f098e>: 3.06rem;
--type-h1--font-size-xs<deleted|variable-fdfec53a-11a7-1764-a94f-37c1cd7b5f79>: 2.625rem;
--_typography---h2--font: "Arizona Mix",sans-serif;
--_typography---h2--font-size-lg: 3.2rem;
--_typography---h2--font-weight: 300;
--_typography---h2--letter-spacing: -.03em;
--_typography---h2--font-size-md: 2.8rem;
--_typography---h2--font-size-sm: 2.5rem;
--_typography---h2--font-size-xs: 2.25rem;
--_typography---h3--font: "Arizona Mix",sans-serif;
--_typography---h3--font-size-lg: 2.6rem;
--_typography---h3--font-weight: 300;
--_typography---h3--letter-spacing: -.025em;
--_typography---h3--font-size-md: 2rem;
--_typography---h3--font-size-sm: 1.8rem;
--_typography---h3--font-size-xs: 1.6rem;
--_typography---h4--font: Soehne,Arial,sans-serif;
--_typography---h4--font-size-lg: 2rem;
--_typography---h4--font-weight: 400;
--_typography---h4--letter-spacing: 0em;
--_typography---h4--font-size-md: 1.4rem;
--_typography---h4--font-size-sm: 1.25rem;
--_typography---h4--font-size-xs: 1.25rem;
--_typography---h5--font: Soehne,Arial,sans-serif;
--_typography---h5--font-size-lg: 1.1rem;
--_typography---h5--font-weight: 400;
--_typography---h5--letter-spacing: 0em;
--_typography---h5--font-size-md: 1.1rem;
--_typography---h5--font-size-sm: 1rem;
```

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