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

# Erno Forsström · Design System

> Quiet, spacious design with work in focus.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.erno.works/ · **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 designer portfolio that pairs an oversized introduction with a carefully ordered project gallery. A near-white canvas, dark typography, fine dividers, and media-led cards keep attention on the work.

## North star

Keep the interface visually quiet and let large, well-spaced typography and project imagery carry the page.

## Overview

The page uses a near-white canvas (#fafbfc) as a continuous field, with dark charcoal (#202020) typography providing the only strong recurring contrast. Pale gray (#dfdcdc) appears as a fine rule and subtle surface tone rather than a prominent section fill; much of the image color belongs to project work, not the site palette. A single sans-serif family carries everything from compact navigation to the oversized introductory statement, using regular weight and tight tracking for a calm editorial feel. The layout begins with a sparse top bar, then a large, left-aligned statement with generous breathing room. Portfolio sections use a two-column structure: labels occupy a narrow left rail while images and project captions fill the wider right area. A later grid pairs projects side by side. Image crops and varied artwork supply contrast, while thin dividers, flat surfaces, and open spacing maintain a quiet, gallery-like presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#202020` | `--color-soft-ink` | neutral | Primary text, navigation, section labels, captions, and the prominent contact link. |
| Gallery White | `#fafbfc` | `--color-gallery-white` | surface | Continuous page canvas behind the introduction, project sections, and contact block. |
| Quiet Gray | `#dfdcdc` | `--color-quiet-gray` | neutral | Subtle divider and hairline color; keep it understated rather than using it as a strong band. |

### Semantic aliases

`--color-canvas` → `#fafbfc` (Gallery White) · `--color-surface` → `#dfdcdc` (Quiet Gray) · `--color-text` → `#202020` (Soft Ink) · `--color-border` → `#dfdcdc` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#fafbfc` | 15.73:1 | AAA |
| `#202020` | `#dfdcdc` | 11.95:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nb akademie pro book webfont | `--font-body` | webfont | 400 | The sole typeface for navigation, display copy, headings, captions, links, and body text. | Inter |

- **Nb akademie pro book webfont:** Regular weight throughout; display and headline styles use tight negative tracking. Keep casing natural, with no decorative uppercase treatment.

### Type scale — Golden Ratio (ratio ≈ 1.655, base 21px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 57.5px | 400 | 1 | -0.05em | — | Nb akademie pro book webfont | Oversized opening statement, set as a calm editorial introduction. |
| h1 | 43px | 400 | 1 | -0.027em | — | Nb akademie pro book webfont | Section headings and the large contact link. |
| body | 21px | 400 | 1.1 | -0.015em | — | Nb akademie pro book webfont | Introductory copy and project descriptions or captions. |
| link | 21px | 400 | 1 | 0 | — | Nb akademie pro book webfont | Header navigation, project links, and inline contact links. |

OpenType features in use: `"tnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 8, 13, 16, 18, 31, 39, 42, 49, 65, 107, 108 px.
- Section rhythm 49px · element gap 16px · card padding 4px · max content width 1404px.

A compact top navigation sits above a broad, left-aligned introduction. The measured maximum content width is 1404px, with comfortable density and a two-column project layout. In the portfolio sections, a narrow label rail sits beside a wider media area; the featured work combines one large item with smaller paired projects, followed by a two-column historical grid. Sections are separated by fine rules and open vertical intervals. Keep alignment crisp and avoid ornamental containers.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is flat: measured data reports no shadows, gradients, or rounded radii. Use pale hairline rules to mark section boundaries and keep cards visually open, with captions on the canvas rather than inside raised containers. Project imagery can contain its own depth, device frames, or dark backgrounds; treat these as media content, not page-level elevation.

## Imagery

Project work is presented through large rectangular screenshots, video stills, and portfolio mockups. The media spans varied visual worlds—dark presentation backgrounds, light web pages, photography, and colored artwork—so preserve each project's native image treatment rather than recoloring it to match the site. Use clean crops with captions immediately below; imagery, not interface decoration, supplies most of the page's color and texture.

## Components

### Top navigation

Sparse text-only header with the designer name, discipline label, and right-aligned Works and About links.

### Intro statement

Large regular-weight text block, left aligned and spanning much of the content width, with tight tracking and ample surrounding space.

### Section label rail

A small heading such as Featured or 2018—2020 sits to the left of the project media area.

### Featured project

One dominant project image followed by smaller paired items; each project has a concise title and muted visual caption treatment.

### Project grid

Two-column presentation of earlier work with consistent rectangular media, direct titles, and short category captions.

### Contact callout

Simple closing invitation and prominent Reach out text link, separated from work by open space and a fine rule.

### Footer links

Compact, text-only utility links arranged in small groups with a subtle top divider.

### Measured component styles

- **Link** (“Erno Forsström”): transparent background · text #202020 · radius 0px · padding 0px · 400 21px Nb akademie pro book webfont
- **Card** (“Let’s get to know each other. Reach out”): transparent background · text #202020 · border 1px solid #dddede · radius 0px · padding 16px 0px 0px 0px · 400 21px Nb akademie pro book webfont

## Do

- Use the near-white canvas consistently across sections.
- Set text in a single regular-weight sans-serif family.
- Make the opening statement the typographic focal point.
- Pair narrow section labels with a wider media area.
- Keep project images rectangular and let their own artwork retain its colors.
- Use fine gray rules and generous open space to separate content.

## Don't

- Do not introduce bright accent colors into the interface.
- Do not add shadows, gradients, or rounded card treatments.
- Do not place captions in heavy, filled containers.
- Do not let navigation compete with the introduction.
- Do not crop project imagery into decorative shapes.
- Do not overfill the page with extra labels or ornament.

## Agent prompt

Build a new portfolio page in Erno Forsström’s restrained editorial style. Use Gallery White (#fafbfc) as the continuous canvas, Soft Ink (#202020) for text and links, and Quiet Gray (#dfdcdc) only for subtle dividers or understated surface details. Use one regular sans-serif throughout; choose Inter as a close free substitute if the original webfont is unavailable. Create a sparse text navigation, an oversized left-aligned introduction, and a project gallery with a narrow heading rail beside a wide media column. Let project artwork retain its own colors and framing, with concise captions directly below. Keep surfaces flat, corners square, and spacing open. Finish with a simple contact callout and a compact text-link footer. Avoid decorative color, shadows, gradients, and bulky card chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column introductory statement beneath a sparse top navigation. | Clear positioning, Immediate introduction | Oversized text, Open canvas, Left alignment |
| 2 | gallery | Section label rail beside a wide media area, with a lead project and smaller paired items. | Project browsing, Direct project links | Two-column structure, Large rectangular media, Short captions |
| 3 | gallery | A narrow year heading beside a two-column grid of project images and captions. | Chronological grouping, Scannable project choices | Paired image cards, Section divider, Minimal captions |
| 4 | contact | Single-column closing invitation with a prominent text link. | Direct contact, Clear next step | Large text link, Open spacing, Subtle separator |

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