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

# Egstad · Design System

> Oversized type, quiet canvas, playful portrait.

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

Egstad’s homepage introduces a graphic designer and developer through an oversized typographic wordmark, concise introduction, and compact editorial project notes. A restrained warm-neutral palette and floating portrait make the page feel both composed and playfully personal.

## North star

Let one oversized typographic gesture dominate a warm, quiet canvas, then use precise rules and one playful portrait for character.

## Overview

The page is built around a restrained three-colour system: warm gray #e2e0d9 establishes the dominant canvas, near-black #252422 carries the wordmark and nearly all copy, and white #ffffff appears as a contrasting surface in the measured page structure. Typography is the main visual event. EG Metaphor is used for the enormous, tightly composed EGSTAD display and the readable introduction; System85 supplies small uppercase navigation and eyebrow details. The layout uses a broad, left-aligned composition, with a thin dark rule separating the wordmark from the introduction and fine dividers organizing dense lower-page text. A small, distorted portrait overlaps the large lettering, introducing the page’s only conspicuous photographic colour. Navigation sits in a compact dark pill at the upper left, while the rest of the page remains largely flat and open. Preserve the contrast between monumental display type, quiet supporting copy, and the deliberately odd portrait rather than adding decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#252422` | `--color-soft-ink` | brand | Wordmark, body copy, navigation pill, links, and the fine rules dividing content. |
| Warm Canvas | `#e2e0d9` | `--color-warm-canvas` | neutral | Dominant warm-gray page field and pale lettering on the dark navigation pill. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Measured white surface in the page structure; use sparingly as a clean contrast, not a prominent accent. |

### Semantic aliases

`--color-canvas` → `#e2e0d9` (Warm Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#252422` (Soft Ink) · `--color-border` → `#252422` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#252422` | `#e2e0d9` | 11.74:1 | AAA |
| `#252422` | `#ffffff` | 15.51:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| EG Metaphor | `--font-body` | webfont | 400 | Display wordmark, introduction, body copy, and standard links. | Manrope |
| System85 | `--font-system85` | webfont | 400 | Uppercase navigation, button labels, and eyebrow-style utility text. | Space Mono |

- **EG Metaphor:** Regular weight throughout; exceptionally oversized display lettering contrasts with compact, closely set copy.
- **System85:** Small uppercase labels with open tracking; retain a distinct utility voice against the rounded main type.

### Type scale — Custom (ratio ≈ 5.158, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 399px | 400 | 1 | 0 | — | EG Metaphor | Oversized EGSTAD wordmark spanning the hero width. |
| h1 | 59px | 400 | 0.97 | -0.055em | — | EG Metaphor | Large introductory heading beneath the wordmark. |
| body | 15px | 400 | 1.34 | 0 | — | EG Metaphor | Compact paragraphs describing practice and selected work. |
| caption | 12px | 400 | 1.33 | 0.02em | — | EG Metaphor | Small supporting notes and fine-print details. |
| button | 12px | 400 | 3 | 0.03em | uppercase | System85 | Uppercase labels on dark pill-shaped social buttons. |
| nav | 399px | 400 | 1 | 0 | — | EG Metaphor | Oversized EGSTAD wordmark, despite the nav role measurement. |
| link | 15px | 400 | 1.34 | 0 | — | EG Metaphor | Inline portfolio, typeface, and resource links. |
| eyebrow | 12px | 400 | 3 | 0.03em | uppercase | System85 | Small uppercase utility labels and section details. |

OpenType features in use: `"ss04", "ss05", "ss06", "ss07"`, `"kern", "liga", "pnum"`, `"tnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 14, 16, 22, 25, 30 px.
- Section rhythm — · element gap 16px · card padding — · max content width 1408px.

The page uses a broad, nearly full-width composition, with the measured content max width at 1408px. The wordmark and introduction align to the left and occupy the dominant upper portion; a narrow navigation pill floats at the top left. A horizontal hairline anchors the transition from display lettering to the introductory copy. Below, the page becomes denser, arranging descriptive text in several editorial columns with fine rules and small utility details. Keep generous open canvas around the hero and tighter spacing within the lower information blocks.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · pill `9999px`
- Shadow `xl` (nav): `rgba(0, 0, 0, 0.063) 0px 1.3px 5.3px 0px, rgba(0, 0, 0, 0.09) 0px 4.5px 17.9px 0px, rgba(0, 0, 0, 0.15) 0px 20px 80px 0px`
- Motion: standard transition `0.75s ease-in-out` on interactive elements.

Most content is flat: the wordmark and text sit directly on the canvas, and thin rules provide separation instead of card borders. The top navigation is a dark rounded capsule with a pronounced soft shadow. The portrait also floats above the lettering through its own shadow, creating the page’s principal layered moments.

## Imagery

The hero uses a cropped photographic portrait of the designer, distorted into a rounded, floating cutout that overlaps the wordmark. Its skin and hair tones are image content, not brand palette colours. A soft cast shadow separates the portrait from the canvas. The remainder of the visible page is typography-led, with no large photographic panels or illustrative backgrounds.

## Components

### Floating navigation pill

Compact dark capsule at the top left with EGSTAD, WORK, and EMAIL links; the current item sits on a pale inset pill.

### Oversized wordmark

EGSTAD is rendered in near-black EG Metaphor, filling the hero width and acting as both identity and display graphic.

### Portrait cutout

A rounded, distorted face photograph overlaps the right side of the wordmark and casts a soft shadow.

### Introductory heading

Large, left-aligned EG Metaphor copy sits below a fine horizontal rule and explains the designer’s practice.

### Editorial text columns

Compact paragraphs and inline links form dense lower-page columns, separated by fine rules.

### Social buttons

Near-black pill buttons use pale uppercase System85 labels, including the measured INSTAGRAM label.

### Measured component styles

- **Primary button** (“INSTAGRAM”): background #252422 · text #e2e0d9 · radius 1440px · padding 0px 30px · 400 12px System85 · uppercase
- **Link** (“Instrument’s”): transparent background · text #252422 · radius 0px · padding 0px · 400 14.976px EG Metaphor
- **Navigation item** (“EGSTAD WORK EMAIL”): transparent background · text #252422 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use #e2e0d9 as the dominant warm canvas.
- Set primary lettering and rules in #252422.
- Make the wordmark dramatically larger than supporting text.
- Use EG Metaphor for display and editorial copy.
- Reserve System85-style lettering for small uppercase utility labels.
- Keep dividers thin and layouts predominantly flat.
- Use imagery as a playful, isolated interruption.

## Don't

- Do not add bright accent colours to the brand palette.
- Do not place the wordmark inside a conventional card.
- Do not crowd the hero with extra content.
- Do not use heavy borders around every text block.
- Do not turn the portrait into a full-bleed background.
- Do not use bold, conventional corporate typography.

## Agent prompt

Build a new page with Egstad’s editorial portfolio character. Use Warm Canvas (#e2e0d9) as the dominant field and Soft Ink (#252422) for the main type, links, and rules; keep Paper White (#ffffff) limited to clean surface contrast. Make typography the primary graphic: use an EG Metaphor-like geometric sans for a very large, regular-weight display gesture and concise supporting copy. Set utility navigation and button labels in a small, tracked, uppercase mono-like face. Align content broadly to the left, use fine horizontal rules to separate editorial blocks, and let lower content become denser without losing clarity. Add at most one playful, isolated portrait or image detail with subtle depth. Keep most elements flat, reserving pill shapes and shadow for navigation or controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Broad left-aligned hero with floating top-left navigation, oversized wordmark, overlapping portrait, and ruled introduction above compact text columns. | persistent-style navigation links, inline portfolio links, social buttons | oversized wordmark, warm neutral canvas, fine horizontal rules, floating portrait cutout, pill navigation |

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