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

# DrawHistory · Design System

> Warm editorial minimalism for people-first change.

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

DrawHistory pairs oversized editorial typography with warm, restrained backgrounds and candid photography. The homepage moves between spacious manifesto-style sections, case studies, podcast content, client stories, and a stark black footer.

## North star

Let oversized editorial type and warm open space lead; use imagery and fine rules to support, never compete with, the message.

## Overview

The visual identity is built on a quiet, warm-neutral palette: white and pale sand carry most sections, with a deeper wet-sand band reserved for podcast content and black used for typography and the closing footer. Warm orange and other vivid hues belong to project photography, not the core interface. Eloquia Text gives the page its distinctive editorial voice, from large uppercase manifesto headlines to readable body copy; Roboto Mono handles compact uppercase navigation, labels, and buttons. Layout alternates broad single-column statements with asymmetric image-and-copy splits and compact multi-column news or client rows. Generous open space in the hero and feature sections contrasts with denser case-study and footer content. Photography is candid and documentary, often shown in softly rounded frames. Hairline rules and outlined controls define structure without shadows, so the page remains flat, calm, and distinctly editorial.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Primary text, oversized headlines, navigation, outlined controls, and the black footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for news, feature sections, newsletter, and white footer links. |
| Warm Sand | `#f2e9e1` | `--color-warm-sand` | surface | Hero background, case-study band, and client-story sections. |
| Shadow Fade | `#101010` | `--color-shadow-fade` | semantic | Gradient endpoint over media; a dark image-overlay detail rather than a standalone brand surface. |
| Wet Sand | `#e1d3c7` | `--color-wet-sand` | surface | Distinct background band behind the Undesign podcast section. |
| Rule Grey | `#999999` | `--color-rule-grey` | semantic | Thin borders around news cards and section divisions. |
| Stone Grey | `#918c87` | `--color-stone-grey` | neutral | Muted border and navigation detail; secondary structural contrast. |
| Input Grey | `#b2b2b2` | `--color-input-grey` | semantic | Subtle newsletter input border. |
| Footer Grey | `#808080` | `--color-footer-grey` | neutral | Secondary footer text and low-emphasis copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2e9e1` (Warm Sand) · `--color-surface-2` → `#e1d3c7` (Wet Sand) · `--color-surface-3` → `#000000` (Editorial Ink) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#999999` (Rule Grey)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2e9e1` | 17.52:1 | AAA |
| `#000000` | `#e1d3c7` | 14.34:1 | AAA |
| `#ffffff` | `#f2e9e1` | 1.2:1 | fail |
| `#ffffff` | `#e1d3c7` | 1.46:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgb(16, 16, 16), rgba(255, 255, 255, 0) 102.55%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Eloquia Text | `--font-body` | webfont | 400, 300 | Display headlines, section titles, body copy, captions, and large link-like labels. | DM Sans |
| Roboto Mono | `--font-mono` | webfont | 400 | Navigation, buttons, small labels, and compact utility text. | Roboto Mono |

- **Eloquia Text:** Mostly regular weight; oversized headlines often uppercase with tight negative tracking and compact line-height.
- **Roboto Mono:** Regular weight, uppercase treatment, and restrained tracking; used at small interface scales.

### Type scale — Augmented Fourth (ratio ≈ 1.391, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 400 | 1.1 | -0.009em | — | Eloquia Text | Large hero statement and prominent editorial display text. |
| h1 | 100px | 400 | 0.95 | -0.05em | uppercase | Eloquia Text | Primary uppercase manifesto and page-level headline. |
| h2 | 80px | 400 | 0.95 | -0.05em | uppercase | Eloquia Text | Large uppercase section and feature headlines. |
| h3 | 44px | 400 | 1.14 | -0.025em | — | Eloquia Text | Secondary editorial headings and case-study titles. |
| h4 | 40px | 400 | 1.13 | 0 | — | Eloquia Text | Smaller feature or content headings. |
| body | 20px | 400 | 1.4 | 0 | — | Eloquia Text | Explanatory copy in feature and story sections. |
| caption | 16px | 400 | 1.5 | 0 | — | Eloquia Text | Compact descriptions, metadata, and supporting copy. |
| button | 15px | 400 | 1.25 | 0 | uppercase | Roboto Mono | Uppercase monospace outlined action labels. |
| nav | 15px | 400 | 1.5 | 0 | uppercase | Roboto Mono | Uppercase monospace navigation and announcement text. |
| link | 104px | 400 | 1.1 | -0.009em | — | Eloquia Text | Large editorial link labels, including prominent navigation links. |
| code | 15px | 400 | 1.33 | 0 | uppercase | Roboto Mono | Compact uppercase utility labels and metadata. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 8, 12, 16, 20, 24, 28, 32, 40, 48, 64, 80, 112, 144 px.
- Section rhythm 32px · element gap 2px · card padding 8px · max content width 1376px.

The measured page max width is 1376px, with layouts ranging from a single-column hero to asymmetric feature splits and multi-column news or client rows. Hero headlines sit centrally within a broad warm field, while small copy and photography anchor opposing sides. Section backgrounds alternate between white, Warm Sand, and Wet Sand to mark content shifts. Spacing uses a compact measured scale with generous visual breathing room in the long hero and feature panels; denser grids are reserved for feeds, clients, and the footer.

## Shape & elevation

- Radius: button `8px` · media `16px` · xs `8px` · sm `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is largely flat, with no measured shadows. Use fine grey hairlines to separate cards and sections, and black outlines for compact actions. Media uses measured rounded corners, while text and section bands remain unboxed. The footer creates depth through a full black surface rather than elevated cards.

## Imagery

Use candid documentary photography of people, workshops, and community-facing work. Images sit within editorial layouts as large standalone portraits or supporting case-study tiles, often with softly rounded corners. Project thumbnails may contain vivid campaign colours, but keep interface surfaces restrained. The hero combines a portrait with a hand-drawn signature-like mark; imagery should feel observational rather than glossy or synthetic.

## Components

### Announcement bar

A slim top-row message pairs uppercase Roboto Mono text with a small orange marker and a black menu control.

### Hero statement

Large uppercase Eloquia Text sits on Warm Sand, balanced by a brief supporting paragraph, portrait, and signature-like graphic.

### Latest stories

A white content feed uses compact uppercase metadata, thin grey rules, headline text, and image-led story cards.

### Editorial feature split

A large headline and candid image share a white or sand field, with supporting copy and a small outlined action.

### Podcast panel

The Undesign feature uses Wet Sand, a two-column heading-and-copy arrangement, documentary image, and compact link.

### Newsletter form

A white section pairs a concise signup message with an email field and uppercase outlined submit control.

### Black footer

A black closing area groups navigation, social links, acknowledgement copy, and muted legal details.

### Measured component styles

- **Primary button** (“MEET OUR TEAM”): transparent background · text #000000 · border 1px solid #000000 · radius 8px · padding 8px 12px · 400 15px Roboto Mono · uppercase
- **Link** (“Work”): transparent background · text #ffffff · radius 0px · padding 0px · 400 104px Eloquia Text
- **Input**: transparent background · text #000000 · radius 0px · padding 8px 0px · 400 55px Eloquia Text
- **Card** (“UNDESIGN PODCAST PART 1: THE LEAP (2015-”): transparent background · text #000000 · border 1px solid #999999 · radius 0px · padding 16px 0px · 400 16px Eloquia Text
- **Navigation item** (“READ OUR OPEN LETTER ON DRAWHISTORY'S IN”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Eloquia Text

## Do

- Use the measured warm backgrounds as broad section fields.
- Set major statements in large, tightly tracked uppercase editorial type.
- Reserve Roboto Mono for compact navigation, labels, and actions.
- Alternate open feature splits with denser content rows.
- Use candid people-centered photography in rounded media frames.
- Define structure with thin rules and outlined controls.

## Don't

- Do not introduce unmeasured brand colours or gradients.
- Do not add drop shadows or elevated-card styling.
- Do not center every section; retain asymmetric editorial composition.
- Do not make interface labels large or decorative.
- Do not let vivid campaign imagery recolour the surrounding interface.
- Do not crowd the hero with cards or extra interface chrome.

## Agent prompt

Build a new social-impact agency page in DrawHistory’s editorial style. Use Warm Sand (#f2e9e1) and Gallery White (#ffffff) as the main section surfaces, with Wet Sand (#e1d3c7) for one distinct feature band and Editorial Ink (#000000) for core text and the footer. Use Eloquia Text or a close free substitute for oversized, tightly tracked uppercase headlines and readable body copy; use Roboto Mono for compact uppercase navigation and controls. Compose asymmetric image-and-copy sections, a spacious statement-led opening, and denser editorial rows. Use candid documentary photography with softly rounded frames. Keep the interface flat: rely on hairline Rule Grey (#999999) dividers and outlined actions rather than shadows. Keep campaign colours inside imagery, and preserve generous open space around major statements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Tall Warm Sand hero with central oversized headline, side portrait, supporting copy, and signature mark. | brand introduction, menu access | oversized uppercase heading, portrait photography, announcement bar |
| 2 | content-feed | A white full-width transition band introducing the latest stories feed. | content section entry | large section heading, white canvas |
| 3 | content-feed | White four-column editorial grid with story titles, labels, rules, and thumbnails. | browse recent stories, open story links | multi-column cards, thin dividers, image thumbnails |
| 4 | team | White asymmetric feature with a large candid image beside heading, paragraph, and outlined action. | team introduction, meet the team | split layout, large heading, outlined button |
| 5 | gallery | Warm Sand case-study band with large editorial project headlines and a varied image grid. | browse case studies, view all cases | project gallery, asymmetric media, small mono labels |
| 6 | feature-split | Wet Sand two-column podcast panel with title and description above supporting image and compact action. | explore podcast, browse episodes | two-column composition, documentary image, outlined link |
| 7 | feature-split | White feature split pairing a large headline and copy with a substantial candid photograph. | understand services, explore services | asymmetric split, large image, outlined CTA |
| 8 | logo-cloud | Centered headline on Warm Sand introducing a client section. | client credibility | centered oversized type, warm section band |
| 9 | logo-cloud | Warm Sand two-column client-story area with logos, names, and compact explanatory text. | scan client examples | client marks, column dividers, short descriptions |
| 10 | newsletter | White two-column signup section with message on one side and email form on the other. | newsletter signup, email entry | large heading, email field, outlined submit button |
| 11 | footer | Black three-column footer with site navigation, social and legal links, and acknowledgement copy. | site navigation, social links, legal information | black background, white link text, muted footer details |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #FFFFFF;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--onyx: #101010;
--wp--preset--color--warm-sand: #F2E9E1;
--wp--preset--color--wet-sand: #E1D3C7;
--wp--preset--color--sage: #A9A591;
--wp--preset--color--sage-dark: #3D3B2F;
--wp--preset--color--orange-shade: #B64F26;
--wp--preset--color--orange-flair: #FF6714;
--wp--preset--color--grey: #d7d7d7;
--wp--preset--color--lavender: #AB86E2;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
```

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