# Egstad · Design system migration spec

> Source: https://egstad.com  ·  Curated by OpenDesign  ·  en

> Worth including for its masterful use of extreme typographic scale and restraint to create a powerful, memorable portfolio.

## 1. Identity DNA

Egstad operates as a personal portfolio for a graphic designer and web developer, built on the principle of bold typographic statements set against a field of deliberate restraint. The system functions like a well-composed poster: every element is chosen for its graphic impact, yet the overall effect is one of clean, structural confidence. It balances expressive, playful details with a foundation that feels both modern and enduring.

**One-liner:** A bold, expressive personal portfolio for a graphic designer and web developer.
**Keywords:** graphic design · web development · expressive · enduring · playful
**Analogy:** A graphic designer's personal portfolio with bold typographic statements and playful interactive elements.

## 2. Color

The color system is defined by a single, high-contrast pairing: a warm, off-white background and near-black text. This monochromatic palette ensures that typography and content carry the full visual weight without chromatic competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#e2e0d9` | main background |
| `--ink` | `#252422` | body text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(37, 36, 34, 1)` | divider |

**Color principle:** High contrast monochrome with a warm, off-white background.

The underlying principle is maximum legibility and graphic punch through strict tonal restraint.

## 3. Typography

The typographic voice is split between a bold, custom grotesque sans-serif for display and a cleaner humanist sans-serif for body copy. This pairing establishes a clear hierarchy, where the display face makes aggressive, screen-filling statements, and the body text maintains quiet readability.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 398.8px | 1.0 | 400 | -3.23px | Hero brand name |
| body-lg | 58.76px | 0.97 | 400 | normal | Introductory paragraph |
| body | 16px | 1.2 | 400 | normal | Body copy and navigation |

**Type rules:**
- Use extreme scale for the primary brand name to create a bold visual statement.
- Navigation text is uppercase with wide tracking.
- Body copy maintains a clean, readable sans-serif style.

## 4. Spacing

Generous white space establishes the rhythmic foundation, allowing bold typographic forms room to dominate the visual field.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous white space to let the bold typography breathe, with tighter spacing within navigation and footer elements.

## 5. Surfaces

Surface depth is communicated through a carefully graded trio of soft, diffuse shadows that lift elements with subtle dimensionality. Borders are minimal and fine, serving as quiet delineators rather than decorative features.

- **Radius:** sm 4px · md 36px · lg 1440px · pill 999px
- **Shadows:**
  - 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
- **Borders:** 1px solid rgba(37, 36, 34, 1)

## 6. Layout

The layout skeleton begins with a commanding, single-column hero section designed for maximum typographic impact. This structured column then yields to a multi-column grid for biographical content and the footer, organizing information with clean, logical alignment.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single-column hero followed by a multi-column grid for the bio and footer.

## 7. Motion & Interaction

Motion philosophy prioritizes deliberation over spectacle, using slow, smooth fade-ins and custom cubic-bezier easing for all transitions. Playful, transform-based hover effects introduce a layer of interactive personality without compromising the system's measured pace.

- **Durations:** micro 200ms · small 400ms · medium 750ms
- **Easing:** `cubic-bezier(0.375, 0.39, 0, 1.175)`
- **Patterns:**
  - Slow, smooth fade-in and color transitions for interactive elements.
  - Playful transform-based hover effects on the floating element.

- **Hover:** Subtle color changes and transform-based movements on interactive elements.
- **Click:** Smooth transitions on background and border colors.
- **Transition:** Smooth, deliberate transitions using ease-in-out and custom cubic-bezier curves.
- **Keyboard:** Standard focusable elements with visible focus states.

## 8. Voice & Don'ts

The editorial voice is confident, personal, and slightly playful, matching the tone of a seasoned creative professional. Headlines are intentionally massive, while calls to action remain direct and simple, presented in distinctive pill-shaped forms.

- **Tone:** Confident, personal, and slightly playful.
- **Headline style:** Extremely bold, large-scale typography that dominates the visual field.
- **CTA style:** Direct and simple, presented in pill-shaped buttons.
- **Avoid:** Formal corporate language / Small, understated headlines / Complex color palettes

### Don'ts
- ❌ Don't use small, understated headlines — screenshot shows massive, screen-filling typographic statements.
- ❌ Don't use a complex or vibrant color palette — screenshot shows a strictly restrained monochrome and off-white scheme.
- ❌ Don't use sharp, square corners on interactive elements — screenshot shows prominent pill-shaped buttons with high border-radius.
- ❌ Don't use generic, system-default fonts for display — screenshot shows a custom, highly stylized grotesque sans-serif.
- ❌ Don't avoid white space — screenshot shows generous margins and padding around all content blocks.
- ❌ Don't use busy, cluttered layouts — screenshot shows a clean, focused single-column and multi-column grid structure.

The system deliberately avoids complex color palettes, formal corporate language, and small, understated headlines in favor of its signature bold scale and restrained tone.

## System Prompt (paste into AI tool)

```
This is a personal portfolio for a graphic designer and web developer. It features extreme typographic scale and a restrained color palette. Key colors are a warm off-white background (#e2e0d9) and near-black text (#252422). The primary font is a custom grotesque sans-serif, with a secondary humanist sans-serif for body copy. Critical donts: Do not use small, understated headlines—use massive, screen-filling type. Do not use a complex color palette—stick to strict monochrome. Do not use sharp corners on buttons—use pill-shaped, highly rounded forms.
```