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

# Henry From Online · Design System

> A stark digital garden with a literary edge

**Theme:** light · **Industry:** portfolio · **Source:** https://henry.codes/ · **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 personal portfolio that pairs oversized editorial typography with an austere monochrome palette and hand-rendered imagery. The page moves from a dramatic opening through personal writing, biography, selected work, articles, and a compact directory-like footer.

## North star

Let oversized literary typography and stark light-dark section changes carry the identity; keep every supporting detail quiet and legible.

## Overview

The visual identity is built around a near-black brown, #2a2722, against the warm off-white #fafafa. Large, high-contrast serif display lettering supplies a literary, poster-like voice, while Neue Montreal keeps navigation, metadata, and explanatory copy direct and contemporary. The opening is an intentionally oversized typographic composition, paired with a monochrome illustration rather than conventional portfolio photography. Alternating light and dark section bands create a clear long-scroll rhythm: the letter and selected work sit on dark fields, while the author profile and article listings return to the pale canvas. Layouts range from a spacious single-column statement to split biography and work areas, then a compact article grid. Thin rules, quiet metadata, and restrained borders organize dense content without decorative effects. The result feels personal and handmade, yet structured enough for browsing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Umber | `#2a2722` | `--color-charcoal-umber` | brand | Primary dark section field, headline and link color on pale sections, and the main contrast anchor. |
| Paper White | `#fafafa` | `--color-paper-white` | surface | Main canvas and light section background; also serves as text and link color on dark fields. |
| Muted Graphite | `#666666` | `--color-muted-graphite` | neutral | Secondary text for supporting copy, navigation, and quieter headings. |
| Warm Ash | `#3e3b36` | `--color-warm-ash` | neutral | Muted text and card detail, adding softer contrast against the dark brown-black. |
| Faint Rule | `#eeeeee` | `--color-faint-rule` | semantic | Fine card and content dividers on light surfaces. |
| Soft Silver | `#a9a9a9` | `--color-soft-silver` | neutral | Sparse low-emphasis footer text; not a defining brand color. |
| Quiet Silver | `#9f9f9f` | `--color-quiet-silver` | neutral | Muted text and footer details, especially on dark backgrounds. |
| Pale Ash | `#bdbdbd` | `--color-pale-ash` | neutral | Rare tertiary text detail; keep its use subtle and limited. |
| Illustration Black | `#030303` | `--color-illustration-black` | surface | Observed in a single dark article-card treatment; incidental rather than a core page color. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Paper White) · `--color-surface` → `#2a2722` (Charcoal Umber) · `--color-text` → `#2a2722` (Charcoal Umber) · `--color-text-muted` → `#666666` (Muted Graphite) · `--color-text-subtle` → `#3e3b36` (Warm Ash) · `--color-border` → `#eeeeee` (Faint Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2a2722` | `#fafafa` | 14.25:1 | AAA |
| `#666666` | `#fafafa` | 5.5:1 | AA |
| `#666666` | `#2a2722` | 2.59:1 | fail |
| `#3e3b36` | `#fafafa` | 10.68:1 | AAA |
| `#3e3b36` | `#2a2722` | 1.33:1 | fail |

### Gradients

- `linear-gradient(rgb(42, 39, 34), rgb(42, 39, 34))`
- `linear-gradient(rgb(254, 254, 254), rgb(254, 254, 254))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal | `--font-body` | webfont | 400, 700 | Body copy, navigation, links, captions, and metadata | Inter |
| Louize Display | `--font-display` | webfont | 400 | Oversized hero lettering and major section headlines | Bodoni Moda |
| Louize | `--font-louize` | webfont | 400 | Smaller serif headings and article or editorial titles | Cormorant Garamond |

- **Neue Montreal:** Mostly regular weight; compact navigation and uppercase caption labels. Keep supporting text clear beside expressive serif display type.
- **Louize Display:** Regular-weight editorial serif at display scale; uppercase is prominent in the hero. Preserve dramatic contrast and open forms.
- **Louize:** Regular serif used at restrained heading sizes; retain an elegant, literary character rather than adding bold weight.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 77px | 400 | normal | 0 | — | Louize Display | Oversized editorial hero headline and prominent project-link lettering. |
| h1 | 34.5px | 400 | 0.9 | 0 | uppercase | Louize Display | Uppercase hero title, tightly stacked over the opening composition. |
| h2 | 32px | 400 | 1.1 | 0 | — | Louize Display | Section headings, including the letter and article area. |
| h3 | 24px | 400 | 1.3 | 0 | — | Louize | Smaller serif article and subsection titles. |
| body | 20px | 400 | 1.2 | 0 | — | Neue Montreal | Biography, personal letter, and explanatory portfolio copy. |
| caption | 12px | 400 | normal | 0 | uppercase | Neue Montreal | Uppercase metadata, category labels, and compact annotations. |
| nav | 16px | 400 | 1.2 | -0.01em | — | Neue Montreal | Header and footer navigation labels. |
| link | 20px | 400 | 1.5 | 0 | — | Neue Montreal | Readable inline links and calls to action. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 12, 16, 19, 20, 24, 32, 64 px.
- Section rhythm 64px · element gap 12px · card padding 28px · max content width 1408px.

The measured page max width is 1408px, with a comfortable density and a spacious single-column opening. The hero uses a dramatic type-led area beside framed artwork; later content alternates between centered letter writing, a two-column author section, two-column selected work, and a one-column article feed with card-like entries. Section transitions are broad and deliberate, using a measured 64px section gap. Supporting elements align to clear edges, while small uppercase labels and rules separate metadata from primary content.

## Shape & elevation

- Radius: card `12px` · xs `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The visual system is mostly flat, with no measured shadows. Section color changes, fine rules, and card borders provide structure rather than raised surfaces. Cards use a measured 12px radius and a 2px border; dark work areas rely on tonal contrast and layered typography instead of conventional elevation.

## Imagery

The page favors monochrome, high-contrast illustrated imagery over polished product photography. A framed, distressed-looking image anchors the hero, and a large hand-drawn figure sits beside the author copy. The footer includes a hazy skyline image. Work references use understated repeated wordmarks and pale text textures, keeping imagery subordinate to the typography.

## Components

### Oversized hero

A tightly composed headline pairs massive uppercase Louize Display lettering with smaller serif phrasing, metadata rules, navigation, and a framed monochrome illustration.

### Announcement strip

A thin top line carries an uppercase serif statement with an italicized ending, set apart from the hero by a subtle divider.

### Editorial letter

Centered, restrained serif writing sits on a #2a2722 section, framed by a fine border and generous surrounding space.

### Author profile

Biography and availability copy share a two-column light section with a large black-and-white drawing and a compact social-links panel.

### Selected work list

A dark portfolio section presents oversized white serif project names over subdued repeated wordmarks and compact case-study links.

### Article cards

A light content feed uses fine #eeeeee borders, small uppercase category and reading metadata, serif titles, and compact read-more links.

### Directory footer

A dark footer groups garden, elsewhere, contact, and meta links into compact columns, with quiet secondary text and a large decorative illustration.

### Measured component styles

- **Link** (“Bluesky”): transparent background · text #2a2722 · radius 0px · padding 0px 0px 0px 32px · 400 20px Neue Montreal
- **Card** (“CATEGORY RESOURCE TAGS PERSONAL COMPUTIN”): transparent background · text #2a2722 · border 2px solid #eeeeee · radius 12px · padding 32px 24px · 400 16px Neue Montreal
- **Navigation item** (“Home”): transparent background · text #fafafa · radius 0px · padding 4px 0px · 400 16px Neue Montreal

## Do

- Use #fafafa and #2a2722 as the dominant alternating fields.
- Give major headings a literary serif voice and dramatic scale.
- Keep metadata small, uppercase, and visually subordinate.
- Use monochrome, hand-rendered imagery with deliberate framing.
- Organize long content into clearly differentiated section bands.
- Use fine rules and restrained borders instead of shadows.

## Don't

- Do not introduce bright accent colors or gradients.
- Do not replace the editorial typography with generic heavy sans-serif headings.
- Do not fill every section with decorative imagery.
- Do not use raised cards or pronounced drop shadows.
- Do not compress the hero into a conventional centered headline.
- Do not make metadata compete with titles and body copy.

## Agent prompt

Build a new page in the Henry From Online visual style. Use Paper White (#fafafa) as the light canvas and Charcoal Umber (#2a2722) for deliberate dark section bands; reserve muted grays for secondary copy, rules, and footer detail. Set dramatic editorial headlines in a Louize Display-like serif and keep navigation, body copy, and metadata in a clean Neue Montreal-like sans serif. Compose the opening around oversized typography and a framed monochrome illustration, then use clear long-scroll blocks with varied single- and two-column layouts. Keep the page flat: rely on section contrast, fine borders, and carefully aligned content rather than shadows. Use quiet uppercase captions and readable link labels. Maintain generous breathing room around primary statements, while keeping article and footer metadata compact.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Light, single-column opening with oversized title, navigation and metadata beside framed artwork. | section navigation, scroll caution note, portfolio introduction | oversized serif display, thin metadata rules, monochrome illustration |
| 2 | other | Centered writing framed inside a dark, full-width section. | editorial message, centered reading | dark band, fine inset border, serif body text |
| 3 | team | Light two-column profile combining biography, availability, links, and a large illustration. | author biography, availability details, social links | split composition, large monochrome drawing, compact link panel |
| 4 | product-showcase | Dark two-column portfolio field with oversized project names and subtle repeated wordmarks. | project browsing, case-study links | dark background, white display lettering, low-contrast wordmark texture |
| 5 | content-feed | Light article feed with multiple columns of bordered editorial cards. | article discovery, category scanning, read-more links | serif titles, uppercase metadata, fine card borders |
| 6 | gallery | Full-bleed horizontal skyline image separating the article feed from the footer. | visual transition | monochrome image, full-bleed framing |
| 7 | footer | Dark multi-column directory with grouped navigation and decorative artwork. | site navigation, social destinations, contact link | compact text groups, muted secondary copy, large ornamental illustration |

## Source CSS custom properties (selected)

```css
--color-background: #2a2722;
--color-text: #fafafa;
--color-text-mid: #9f9f9f;
--color-border-mid: hsl(38deg 11% 25%);
--color-border-light: hsl(38deg 11% 35%);
```

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