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

# Carl Beaverson · Design System

> Quietly frame the work; let each project speak.

**Theme:** light · **Industry:** portfolio · **Source:** https://carlbeaverson.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 developer portfolio pairs a brief introduction with a long, image-led project gallery. Soft neutrals, pale metadata, and generous whitespace keep attention on the selected work.

## North star

Keep the interface pale, quiet, and consistent so the project imagery—not the chrome—carries the visual emphasis.

## Overview

The page uses a near-white canvas and very light gray project panels to create a quiet gallery atmosphere. Muted gray is used for navigation, introductory copy, project labels, and links; the measured palette contains no distinct brand accent, so color comes mainly from the project thumbnails. A compact circular monogram anchors the upper-left corner, balanced by small navigation links at the upper right. The introduction sits centered in a narrow text block with substantial blank space around it, then gives way to a three-column portfolio gallery. Each project is presented as a pale, subtly rounded tile with a smaller landscape preview centered inside and understated metadata beneath. Typography is mostly regular-weight system sans-serif, with small italic serif-like project-count text adding an editorial note. The overall rhythm is spacious and consistent, while the varied artwork supplies contrast without changing the portfolio’s neutral frame.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Graphite | `#aaaaaa` | `--color-soft-graphite` | neutral | Muted navigation, introductory copy, project names, and link text. |
| Gallery Mist | `#f4f3f1` | `--color-gallery-mist` | surface | Light neutral field behind individual project cards. |
| Paper White | `#ffffff` | `--color-paper-white` | brand | Main page canvas and open space surrounding the introduction and gallery. |
| Stone Wash | `#dbdad8` | `--color-stone-wash` | surface | Alternate pale project-card background, with a subtle shadow on some cards. |

### Semantic aliases

`--color-canvas` → `#f4f3f1` (Gallery Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#dbdad8` (Stone Wash) · `--color-text` → `#aaaaaa` (Soft Graphite)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#aaaaaa` | `#f4f3f1` | 2.09:1 | fail |
| `#aaaaaa` | `#ffffff` | 2.32:1 | fail |
| `#aaaaaa` | `#dbdad8` | 1.66:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sans-serif | `--font-body` | system | 400 | Primary system type for navigation, body copy, links, and project labels. | Inter |

- **sans-serif:** Regular weight, sentence case, neutral tracking; keep interface text understated.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 20px | 400 | 1.4 | 0 | — | sans-serif | Small, regular-weight identity or primary introductory heading. |
| body | 15px | 400 | 1.5 | 0 | — | sans-serif | Centered introductory paragraph describing the developer practice. |
| caption | 13px | 400 | 1.5 | -0.038em | — | Suisse Works Trial | Small italic project-count label above the gallery. |
| nav | 15px | 400 | 1.5 | 0 | — | sans-serif | Compact upper-right Newsletter and Contact links. |
| link | 20px | 400 | 1.4 | 0 | — | sans-serif | Portfolio project titles and the CB Works identity link. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 20, 30, 193 px.
- Section rhythm 193px · element gap 20px · card padding — · max content width 750px.

A compact header spans the top, with the circular monogram aligned left and two quiet text links aligned right. The introductory copy is centered in a narrow column with a large surrounding whitespace buffer. Below it, a small project-count caption introduces a three-column, single-page gallery. Cards repeat in aligned rows with consistent gutters and ample vertical separation. The measured content max width is 750px; preserve the spacious rhythm rather than crowding the gallery.

## Shape & elevation

- Radius: card `5px` · xs `5px`
- Shadow `md` (card): `rgba(90, 50, 40, 0.15) 0px 5px 15px 0px, rgba(80, 40, 30, 0.1) 0px 4px 8px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Most of the page reads as flat, with no prominent borders or interface chrome. Project tiles use a subtle 5px radius; some pale gray cards have a soft, diffuse shadow beneath the preview. Keep image framing and card layering restrained, and avoid heavy outlines or dramatic depth effects.

## Imagery

The gallery is built from landscape website-preview images, each inset within a pale project tile. The thumbnails vary widely in subject, color, and visual style because they represent client work; treat them as portfolio artwork, not as a source of interface colors. Keep previews neatly framed and visually centered, with no decorative overlay competing with their content.

## Components

### Monogram mark

Small circular outlined C mark at the upper-left; keep it monochrome and visually compact.

### Header navigation

Newsletter and Contact appear as small, regular-weight gray text links aligned at the upper-right.

### Introduction

Centered, muted-gray paragraph in a narrow text block, surrounded by substantial white space.

### Project count

Small italic serif-like caption immediately above the gallery, identifying the selected-project collection.

### Project card

Pale #f4f3f1 or #dbdad8 tile with a 5px radius; center a landscape project preview and place understated metadata below.

### Portfolio gallery

Three-column desktop grid of repeated project cards; maintain even alignment and let thumbnail content vary.

### Measured component styles

- **Link** (“Talltech Design by Studio Bland”): transparent background · text #aaaaaa · radius 0px · padding 0px · 400 15px sans-serif
- **Card** (“Talltech Design by Studio Bland”): background #f4f3f1 · text #aaaaaa · radius 5px · padding 0px · 400 15px sans-serif
- **Navigation item** (“Newsletter Contact”): transparent background · text #aaaaaa · radius 0px · padding 0px · 400 15px sans-serif

## Do

- Use #ffffff as the dominant canvas.
- Keep navigation and metadata muted in #aaaaaa.
- Give the introduction generous surrounding whitespace.
- Use a consistent three-column project grid on wide screens.
- Frame previews within pale neutral cards.
- Let each project thumbnail provide its own color and character.

## Don't

- Do not add a saturated interface accent absent from the measured palette.
- Do not make navigation more prominent than the work.
- Do not crowd the introductory copy or gallery.
- Do not impose a uniform color treatment on varied project previews.
- Do not use heavy borders or strong shadows.
- Do not add oversized display typography or decorative gradients.

## Agent prompt

Build a new page in Carl Beaverson’s restrained portfolio style. Use Paper White (#ffffff) for the main canvas, Gallery Mist (#f4f3f1) and Stone Wash (#dbdad8) for quiet project surfaces, and Soft Graphite (#aaaaaa) for navigation, copy, and metadata. Create a compact top header with a small circular monogram at left and unobtrusive text links at right. Center a short introduction within a narrow column, leaving generous whitespace before a three-column project gallery. Each card should use a softly rounded neutral field, a centered landscape preview, and understated text beneath it. Use regular system sans-serif for most text and reserve a small editorial italic caption for the gallery label. Keep shadows subtle, avoid decorative UI accents, and let the project artwork supply the color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered introductory paragraph in a narrow column, with substantial whitespace above and below. | Brief practice introduction, Centered reading flow | Muted body text, Minimal top navigation, Monogram mark |
| 2 | gallery | Three-column desktop gallery with repeated pale cards, inset landscape previews, and small metadata. | Browse selected work, Open project links | Neutral card surfaces, Centered image previews, Subtle rounded corners, Small captions |

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