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

# Jonnie Hallman · Design System

> Quiet typography, vivid work, generous space

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

A restrained personal portfolio pairs concise, editorial text with expansive project imagery. A white introduction gives way to distinctly colored case-study sections, then returns to a simple writing list and contact close.

## North star

Keep the editorial text narrow and quiet, and let each project’s imagery and full-width color field carry the visual impact.

## Overview

The visual strategy is built around contrast between a quiet, white introduction and a long sequence of expressive project canvases. The measured palette’s pure white and near-black text establish a plain editorial baseline; vivid blue identifies links and a small monogram, while charcoal, near-black, blue, red, and deep green distinguish selected project bands. A pale blue field also frames Stripe imagery, though its lighter blue tones belong largely to the artwork rather than the site’s core identity. System sans-serif typography stays unembellished: modest headings, readable body copy, and familiar underlined links. Content sits in a narrow, centered column, while project images can spread beyond the text and define each section’s visual scale. Generous vertical pauses give each case study room to register. The page favors flat fields and imagery over card chrome, using layered mockups and occasional media shadows for depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Link Blue | `#0000ff` | `--color-electric-link-blue` | brand | Primary link and navigation color; also appears in the compact DT monogram. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and the background for the introduction, writing area, and other light sections. |
| Reading Ink | `#222222` | `--color-reading-ink` | neutral | Default heading and body text on light backgrounds. |
| Muted Periwinkle | `#555abf` | `--color-muted-periwinkle` | accent | Secondary link color, including Stripe-related links; use as a restrained variation on the primary blue. |
| Section Hairline | `#dcdcdc` | `--color-section-hairline` | semantic | Measured section border color; keep borders subtle rather than framing content with boxes. |
| Warm Charcoal | `#2c2b28` | `--color-warm-charcoal` | surface | Full-width FiftyThree project section, paired with light text and dark product imagery. |
| Soft Ash | `#d8d4cf` | `--color-soft-ash` | neutral | Muted light text or links on dark project surfaces. |
| Signal Blue | `#0061ff` | `--color-signal-blue` | accent | Minor link color detected in the palette; not a defining page-wide surface. |
| Deep Link Blue | `#00237e` | `--color-deep-link-blue` | accent | Minor link color detected in the palette; use only where matching a specific link treatment. |
| Pencil Ember | `#eb5e28` | `--color-pencil-ember` | accent | Warm link accent associated with the FiftyThree project section. |
| Talk Red | `#ff0000` | `--color-talk-red` | surface | Full-width CreativeMornings talk section background. |
| Night Ink | `#121311` | `--color-night-ink` | surface | Full-width near-black section behind light project copy. |
| Studio Green | `#00361c` | `--color-studio-green` | surface | Full-width Design Town section background, surrounding studio photography. |
| Cushion Blue | `#3498db` | `--color-cushion-blue` | surface | Full-width Cushion project background; its mountain artwork adds further blues within the illustration. |
| Blush Link | `#e9d5d5` | `--color-blush-link` | accent | Minor link color in measured data; not a dominant brand or section color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#2c2b28` (Warm Charcoal) · `--color-surface-2` → `#121311` (Night Ink) · `--color-surface-3` → `#00361c` (Studio Green) · `--color-text` → `#222222` (Reading Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#d8d4cf` (Soft Ash) · `--color-border` → `#dcdcdc` (Section Hairline) · `--color-accent` → `#0000ff` (Electric Link Blue) · `--color-accent-2` → `#555abf` (Muted Periwinkle) · `--color-accent-3` → `#ff0000` (Talk Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#2c2b28` | 1.12:1 | fail |
| `#222222` | `#121311` | 1.17:1 | fail |
| `#222222` | `#00361c` | 1.17:1 | fail |
| `#ffffff` | `#2c2b28` | 14.16:1 | AAA |
| `#ffffff` | `#121311` | 18.63:1 | AAA |
| `#ffffff` | `#00361c` | 13.6:1 | AAA |
| `#d8d4cf` | `#ffffff` | 1.47:1 | fail |
| `#d8d4cf` | `#2c2b28` | 9.6:1 | AAA |
| `#d8d4cf` | `#121311` | 12.63:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 400, 600 | All headings, body copy, navigation, and links. | Inter |

- **-apple-system:** System sans-serif with regular body and navigation, occasional bold emphasis, natural casing, and no measured tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1.4 | 0 | — | -apple-system | Introductory statement introducing the designer and location. |
| body | 16px | 400 | 1.5 | 0 | — | -apple-system | Short portfolio descriptions, project context, and closing copy. |
| nav | 16px | 400 | normal | 0 | — | -apple-system | Compact top navigation links. |
| link | 16px | 400 | 1.5 | 0 | — | -apple-system | Underlined inline links to projects, posts, and contact destinations. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 16, 32, 50, 64, 135 px.
- Section rhythm 225px · element gap 64px · card padding 157px · max content width 666px.

Use a centered, narrow editorial text column; the measured page max width is 666px. Keep the introduction compact and align navigation and copy to the same central content area. Follow it with tall, full-width project bands, alternating mostly white space with distinct showcase backgrounds. Project copy remains concise while imagery may extend well beyond the text column. The measured spacing system is spacious, with large section gaps and generous pauses between cases; avoid dense grids except where a project’s image arrangement calls for one.

## Shape & elevation

- Shadow `lg` (media): `rgba(0, 0, 0, 0.5) 0px 22.8571px 45.7143px -11.4286px`
- Shadow `lg-2` (media): `rgba(0, 0, 0, 0.5) 0px 13.7143px 27.4286px -6.85714px`
- Shadow `xl` (media): `rgba(0, 0, 0, 0.5) 0px 32px 64px -16px`
- Motion: standard transition `0.35s cubic-bezier(0.37, 0, 0.63, 1)` on interactive elements.

Most page structure is flat: full-width color fields and open white space replace cards and outlined containers. Let project mockups and media supply depth through their own layering and measured black shadows. Keep section separators subtle, and do not add generic drop shadows to text blocks or navigation.

## Imagery

Treat each project’s own artwork as the main visual event: layered Stripe graphics, product mockups, device screens, an illustrated mountain landscape, and documentary studio photographs. Preserve the original image aspect and avoid decorative overlays that compete with the artwork. Images can be large or compositionally offset from their accompanying text, while smaller editorial areas stay restrained.

## Components

### Header and monogram

Small blue DT square at the left of the centered content area, with compact Blog, RSS, LinkedIn, and Email links aligned across the top.

### Intro statement

Brief designer introduction and supporting sentence on white, set in regular system sans-serif with selected bold name emphasis.

### Project text block

Short case-study description paired with a brand or project visual and a small underlined text link.

### Full-width case-study band

Distinctive project canvas, including charcoal, near-black, Cushion blue, red, or deep green, with text and imagery composed for that project.

### Inline text links

Blue or muted periwinkle underlined links embedded directly in body copy and lists, without button framing.

### Writing list

Editorial list of post titles and dates beside a device image, set on a white background.

### Closing contact copy

Simple text-led end section with a short sign-off, blog link, and email invitation.

### Measured component styles

- **Link** (“writing”): transparent background · text #0000ff · radius 0px · padding 0px · 400 16px -apple-system
- **Card**: background #000000 · text #222222 · radius 0px · padding 0px 0px 628.1px 0px · 400 16px -apple-system
- **Navigation item** (“Blog RSS LinkedIn Email”): transparent background · text #222222 · radius 0px · padding 0px · 400 16px -apple-system

## Do

- Keep the main copy column narrow and centered.
- Use #0000ff for primary links and the compact monogram.
- Give each case study its own full-width visual field when appropriate.
- Let project imagery extend beyond its text column.
- Use system sans-serif typography with restrained emphasis.
- Preserve generous whitespace between portfolio entries.

## Don't

- Do not turn the portfolio into a dense card grid.
- Do not add unmeasured colors, radii, or spacing values.
- Do not use oversized display typography for ordinary project copy.
- Do not treat artwork-only colors as universal site accents.
- Do not add button chrome to simple inline links.
- Do not apply decorative shadows to every section.

## Agent prompt

Build a portfolio page in the style of Jonnie Hallman’s personal site. Use a white editorial canvas, a centered narrow text column, and a restrained system sans-serif stack; substitute Inter only if needed. Set ordinary copy in #222222 and make underlined links and the small monogram #0000ff. Begin with a concise introduction and compact navigation, then create spacious full-width project sections with short text and large, project-specific imagery. Use measured showcase surfaces deliberately: #2c2b28 for warm charcoal, #121311 for near-black, #3498db for the illustrated blue project, #ff0000 for a vivid talk section, and #00361c for a studio feature. Keep layouts flat and open; let layered media provide depth. Finish with a simple article list and contact copy. Do not invent decorative cards, border radii, or extra palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation and brief introduction in a centered text column on white. | Primary profile introduction, Text-link navigation | Blue monogram, Underlined navigation links, Bold name emphasis |
| 2 | product-showcase | Project description sits beside expansive artwork in a pale blue showcase field. | Project context, Inline project links | Pale field, Stripe wordmark, Oversized layered illustration |
| 3 | product-showcase | Sequential project descriptions and product imagery across a mostly white section. | Project-to-project storytelling, Read-more links | Brand marks, Product mockups, Large white intervals |
| 4 | product-showcase | Tall, full-width charcoal band with product imagery and adjacent light project copy. | Single-project focus, Case-study link | Warm charcoal surface, Dark product mockup, Light text |
| 5 | feature-split | Near-black full-width section with a compact light-text description and project media. | Talk context, Inline event link | Near-black surface, Quiet light copy, Media-led framing |
| 6 | product-showcase | Blue full-width background with short text over a broad illustrated landscape. | Product introduction, Visit-project link | Cushion blue field, Layered mountain illustration, Small bird detail |
| 7 | content-feed | White section pairing a device image with an editorial list of linked posts and dates. | Chronological reading list, Article links | Device mockup, Underlined blue links, Compact date labels |
| 8 | video | Full-width red section with event media and a concise explanatory text block. | Talk introduction, Watch or event destination | Red background, Event identity graphic, Light copy |
| 9 | team | Deep green studio section with introductory copy and a loose arrangement of photographs. | Studio introduction, Visit-space link | Green background, Overlapping documentary photos, Light text |

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