# Egstad

> Egstad — Style Reference

## Prompt Content

```
# Egstad — Style Reference
> editorial broadside in warm ink — monumental type, one paper color, zero decoration

**Theme:** light

Egstad hoạt động như một editorial broadside một màu: mực ấm (#252422) in trên nền giấy kem ấm (#e2e0d9), không có màu trang trí, không gradient, và gần như không có UI chrome. Toàn bộ nhận diện thị giác được gánh bởi ba typeface — một custom monumental display face (EG Metaphor) phủ kín trang từ mép này sang mép kia, system Times cho body copy, và một micro-display tracking rộng (S85) cho navigation. Các component được tước bỏ đến tận xương: một navigation bar hình pill tối màu, hairline horizontal rules, và circular image masks đè lên type mà không có container. Kết quả mang phong cách giống một tấm poster in hoặc magazine masthead hơn là một portfolio site điển hình — sự tiết chế chính là bản sắc, typography chính là kiến trúc.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Press Ink | `#252422` | `--color-press-ink` | Primary text, heading strokes, borders, dark surface cho navigation bar và các khối tối — warm near-black với undertone nâu, mềm hơn pure black trên nền cream canvas |
| Bone Paper | `#e2e0d9` | `--color-bone-paper` | Page canvas, card và container backgrounds, inverted text trên dark surface — warm off-white với chút sắc olive/khaki, khiến mực tối trông như in chứ không phải digital |
| Pure Carbon | `#000000` | `--color-pure-carbon` | Hairline borders và các điểm nhấn đen tuyền hiếm hoi khi cần độ tương phản cạnh tối đa trên nền cream canvas |

## Tokens — Typography

### EG Metaphor — Signature display và wordmark face dùng trên toàn bộ type scale từ 12px captions đến 399px headlines phủ kín trang. Single weight (400) là có chủ đích — face này mang toàn bộ cá tính qua custom letterforms, không qua weight contrast. Wide stylistic alternates (ss04–ss07) đang hoạt động và có thể hoán đổi letterforms cho headline compositions. · `--font-eg-metaphor`
- **Substitute:** GT Sectra Display, Tiempos Headline, hoặc Reckless Neue
- **Weights:** 400
- **Sizes:** 12px, 15px, 59px, 399px
- **Line height:** 0.97–1.34 tùy kích thước — tight 0.97 ở display scale, generous 1.33 ở mid scale
- **Letter spacing:** -0.055em ở display sizes (≈-22px ở 399px, ≈-3.2px ở 59px); +0.02em ở small sizes (12–15px)
- **OpenType features:** `"kern" on, "liga" on, "pnum" on, "ss04" on, "ss05" on, "ss06" on, "ss07" on`
- **Role:** Signature display và wordmark face dùng trên toàn bộ type scale từ 12px captions đến 399px headlines phủ kín trang. Single weight (400) là có chủ đích — face này mang toàn bộ cá tính qua custom letterforms, không qua weight contrast. Wide stylistic alternates (ss04–ss07) đang hoạt động và có thể hoán đổi letterforms cho headline compositions.

### Times — Body copy only — system Times ở single size 16px/1.2 cho toàn bộ paragraph text. Được chọn như một sự tương phản có chủ đích với custom display face: serif quen thuộc, trung tính, không mang thương hiệu, để display type làm chủ trang. · `--font-times`
- **Substitute:** Times New Roman, system-ui serif
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.20
- **Letter spacing:** normal
- **OpenType features:** `"kern" on, "liga" on, "pnum" on`
- **Role:** Body copy only — system Times ở single size 16px/1.2 cho toàn bộ paragraph text. Được chọn như một sự tương phản có chủ đích với custom display face: serif quen thuộc, trung tính, không mang thương hiệu, để display type làm chủ trang.

### S85 — Navigation micro-labels đặt ở 12px với 0.1em tracking và line-height 3.0 tạo khoảng không dọc rộng rãi quanh mỗi nav item. Nằm bên trong dark pill nav bar dưới dạng uppercase hoặc small-caps category labels (EGSTAD, WORK, EMAIL). · `--font-s85`
- **Substitute:** JetBrains Mono, IBM Plex Mono, hoặc Söhne Mono ở 12px với 0.1em tracking
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 3.00
- **Letter spacing:** 0.1em (1.2px)
- **OpenType features:** `"ss04" on, "ss05" on, "ss06" on, "ss07" on`
- **Role:** Navigation micro-labels đặt ở 12px với 0.1em tracking và line-height 3.0 tạo khoảng không dọc rộng rãi quanh mỗi nav item. Nằm bên trong dark pill nav bar dưới dạng uppercase hoặc small-caps category labels (EGSTAD, WORK, EMAIL).

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.33 | 0.24px | `--text-caption` |
| body-sm | 15px | 1.34 | 0.3px | `--text-body-sm` |
| heading | 59px | 1.33 | -3.245px | `--text-heading` |
| display | 399px | 0.97 | -21.945px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 7 | 7px | `--spacing-7` |
| 14 | 14px | `--spacing-14` |
| 16 | 16px | `--spacing-16` |
| 22 | 22px | `--spacing-22` |
| 30 | 30px | `--spacing-30` |

### Border Radius

| Element | Value |
|---------|-------|
| navPill | 1440px |
| navInner | 36px |

### Layout

- **Page max-width:** 1440px
- **Section gap:** 80-120px
- **Card padding:** 16px
- **Element gap:** 16px

## Components

### Pill Navigation Bar
**Role:** Primary site navigation

Dark bar hình pill hoàn chỉnh (1440px border-radius) tô màu Press Ink (#252422), chứa tên site và nav links. Internal padding khoảng 7px right margin giữa các item, 16px vertical padding. Chứa S85 12px labels với 0.1em tracking, text màu Bone Paper (#e2e0d9). Nằm ở góc trên cùng bên trái viewport, nhỏ gọn và theo hướng ngang.

### Nav Tab Item
**Role:** Individual navigation link

S85 ở 12px, 0.1em letter-spacing, line-height 3.0 để tạo khoảng không dọc. Text màu Bone Paper (#e2e0d9) trên nền dark pill. Không có hover state — phẳng, chỉ label, không gạch chân hay icon. Cách nhau bởi khoảng cách 7–16px trong pill.

### Display Wordmark
**Role:** Hero-scale brand identifier

EG Metaphor ở 399px, weight 400, line-height 0.97, letter-spacing -0.055em (≈-22px). Gần như lấp đầy toàn bộ chiều rộng viewport. Màu Press Ink (#252422) trên nền Bone Paper (#e2e0d9). Thường bị che phủ bởi circular image masks mà không có xung đột z-index. Đây là signature element — nó không phải heading, nó là kiến trúc.

### Mid-Scale Heading
**Role:** Section-level headline

EG Metaphor ở 59px, weight 400, line-height 1.33, letter-spacing -0.055em (≈-3.2px). Màu Press Ink. Dùng cho secondary headlines cần cùng cá tính với display wordmark nhưng ở kích thước dễ đọc hơn.

### Body Paragraph
**Role:** Readable paragraph copy

System Times ở 16px, line-height 1.2, weight 400, normal letter-spacing. Màu Press Ink (#252422). Không có paragraph spacing ngoài line-height multiplier 1.2 — text nằm trong các khối liên tục, chặt chẽ. Nằm trực tiếp bên dưới display type mà không có label hay eyebrow xen giữa.

### Circular Image Mask
**Role:** Portrait hoặc visual insert

Ảnh được cắt thành hình tròn hoàn hảo, không border, không shadow, không padding ring. Đè trực tiếp lên display type và body text, với nội dung ảnh hiện ra phía trước các letterforms. Không có border-radius được chỉ định nhưng được render dưới dạng 50% hoặc một fixed value lớn. Màu sắc và nội dung ảnh mang biến thể màu sắc duy nhất trong hệ thống.

### Hairline Divider
**Role:** Section hoặc content separator

1px horizontal rule màu Press Ink (#252422) hoặc Pure Carbon (#000000). Full-width hoặc giới hạn theo content width tùy ngữ cảnh. Không có decorative styling — chỉ là một đường line. Dùng để phân cách body paragraphs khỏi links hoặc đóng sections.

### Footer Block
**Role:** Page-bottom content area

Footer tối giản với 22px vertical padding trên và dưới content. Dùng cùng Times 16px body type. Không thay đổi background color, không border — chảy trực tiếp từ page canvas.

## Do's and Don'ts

### Do
- Dùng Press Ink (#252422) trên Bone Paper (#e2e0d9) cho toàn bộ text — không bao giờ thêm màu thứ hai
- Đặt display headlines bằng EG Metaphor ở 399px với -0.055em letter-spacing và 0.97 line-height để các chữ cái chạm nhau và lấp đầy viewport
- Dùng system Times ở 16px/1.2 cho toàn bộ body copy — không thay thế bằng serif khác
- Đặt nav labels bằng S85 (hoặc mono fallback) ở 12px với 0.1em tracking và 3.0 line-height để tạo khoảng không dọc bên trong pill bar
- Dùng 1440px border-radius cho main navigation pill để nó trông như một viên nang hoàn hảo
- Phân cách content bằng 1px hairline rules màu Press Ink hoặc Pure Carbon — không bao giờ dùng background color blocks
- Để circular image masks đè lên display type mà không có borders, shadows, hay padding rings

### Don't
- Không thêm accent colors, gradients, hoặc chromatic buttons — hệ thống là monochrome theo thiết kế
- Không áp dụng box-shadows cho bất kỳ element nào — sự phân cách đến từ ink contrast, không phải elevation
- Không dùng bold hoặc semibold weights của EG Metaphor hay Times — toàn bộ hệ thống chạy ở weight 400
- Không ngắt display headline thành nhiều dòng bằng manual line-breaks — để nó chạy từ mép này sang mép kia như một composition duy nhất
- Không dùng small radii (4px, 8px, 12px) trên containers — radii duy nhất trong hệ thống là 1440px (pill) và 36px (nav inner)
- Không thêm icons, badges, tags, hoặc pill labels bên trong body content — navigation và labeling chỉ là text
- Không đặt body copy bằng EG Metaphor — chỉ dùng face đó cho display và heading scales

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper Canvas | `#e2e0d9` | Base page background — warm cream mà tất cả element khác nằm trên |
| 1 | Ink Surface | `#252422` | Dark filled blocks (navigation bar pill, footer nếu có) — warm near-black với brown undertone |

## Elevation

Không có shadows. Mọi sự phân cách không gian đều đạt được qua độ tương phản warm dark-on-cream, hairline borders màu Pure Carbon hoặc Press Ink, và khoảng trống âm bản rộng rãi. Elevation được truyền tải bằng mật độ mực, không bằng blur hay offset.

## Imagery

Imagery cực kỳ thưa thớt và chỉ được dùng dưới dạng một circular portrait mask duy nhất đè lên display wordmark. Ảnh là một tight face crop, màu sắc tự nhiên, không filter hay duotone treatment, không background context. Không product photography, không illustration, không abstract graphics. Ngôn ngữ thị giác chủ yếu dựa trên text: typography CHÍNH LÀ imagery, và ảnh chỉ tồn tại để nhân tính hóa trang web dẫn dắt bằng type. Không có icon system nào ngoài text-based nav labels.

## Layout

Full-bleed editorial layout không có max-width constraint rõ ràng ở display scale — wordmark 399px lấp đầy từ mép này sang mép kia. Bên dưới hero, content được căn trái với generous left margin và chảy trong một cột hẹp duy nhất (giới hạn khoảng 700–900px để dễ đọc). Pill nav bar nằm absolute hoặc fixed ở góc trên cùng bên trái viewport, nhỏ gọn và ngang. Trang đọc như một vertical scroll gồm các khối type hoành tráng được phân cách bởi hairline rules và các vòng tròn ảnh nhỏ xen kẽ — không có card grids, không multi-column feature sections, không alternating dark/light bands. Navigation là một top bar tối giản; không sidebar, không mega-menu, không footer navigation system ngoài các text links đơn giản.

## Agent Prompt Guide

**Quick Color Reference**
- text: #252422
- background: #e2e0d9
- dark surface (nav bar): #252422
- border: #000000 hoặc #252422
- primary action: không có distinct CTA color

**Example Component Prompts**

1. Tạo một pill navigation bar: 1440px border-radius, background #252422, padding 16px vertical, positioned top-left. Bên trong, đặt nav labels bằng S85 (hoặc JetBrains Mono) ở 12px, weight 400, 0.1em letter-spacing, line-height 3.0, color #e2e0d9, với khoảng cách 7–16px giữa các item.

2. Tạo một display wordmark hero: full-bleed EG Metaphor (hoặc GT Sectra Display) ở 399px, weight 400, line-height 0.97, letter-spacing -0.055em, color #252422 trên nền #e2e0d9. Một circular portrait image (50% border-radius, không border, không shadow) đè lên phần dưới bên phải của wordmark.

3. Tạo một body text block: Times ở 16px, weight 400, line-height 1.2, color #252422 trên nền #e2e0d9. Giới hạn width khoảng ~800px, căn trái với generous left margin. Đóng block bằng 1px hairline rule màu #252422.

4. Tạo một mid-scale section heading: EG Metaphor ở 59px, weight 400, line-height 1.33, letter-spacing -0.055em, color #252422. Nằm phía trên body copy với khoảng cách ~40px, không có eyebrow label hay decorative element.

5. Tạo một footer: 22px padding trên và dưới, Times 16px body text màu #252422 trên nền #e2e0d9, không thay đổi background, không border, không icons — chỉ text links cách nhau bằng khoảng trắng.

## Similar Brands

- **Pentagram partner sites** — Cùng editorial broadside treatment — một custom display face ở extreme scale, nền giấy ấm, không decorative UI, typography là toàn bộ hệ thống thị giác
- **It's Nice That features** — Large-format serif display type lấp đầy viewport, palette monochrome tối giản, circular portrait crops đè lên headlines
- **Manual (manualcreative.jp)** — Pill-shaped dark navigation bar, oversized custom display wordmark, warm off-white canvas, zero chromatic accents
- **Locomotive (locomotive.ca)** — Monumental serif display type, palette monochrome tiết chế, editorial magazine-masthead feel thay vì SaaS product UI

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-press-ink: #252422;
  --color-bone-paper: #e2e0d9;
  --color-pure-carbon: #000000;

  /* Typography — Font Families */
  --font-eg-metaphor: 'EG Metaphor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-s85: 'S85', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.24px;
  --text-body-sm: 15px;
  --leading-body-sm: 1.34;
  --tracking-body-sm: 0.3px;
  --text-heading: 59px;
  --leading-heading: 1.33;
  --tracking-heading: -3.245px;
  --text-display: 399px;
  --leading-display: 0.97;
  --tracking-display: -21.945px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-7: 7px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-22: 22px;
  --spacing-30: 30px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 80-120px;
  --card-padding: 16px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-3xl: 36px;
  --radius-full: 1440px;

  /* Named Radii */
  --radius-navpill: 1440px;
  --radius-navinner: 36px;

  /* Surfaces */
  --surface-paper-canvas: #e2e0d9;
  --surface-ink-surface: #252422;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-press-ink: #252422;
  --color-bone-paper: #e2e0d9;
  --color-pure-carbon: #000000;

  /* Typography */
  --font-eg-metaphor: 'EG Metaphor', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-s85: 'S85', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.24px;
  --text-body-sm: 15px;
  --leading-body-sm: 1.34;
  --tracking-body-sm: 0.3px;
  --text-heading: 59px;
  --leading-heading: 1.33;
  --tracking-heading: -3.245px;
  --text-display: 399px;
  --leading-display: 0.97;
  --tracking-display: -21.945px;

  /* Spacing */
  --spacing-7: 7px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-22: 22px;
  --spacing-30: 30px;

  /* Border Radius */
  --radius-3xl: 36px;
  --radius-full: 1440px;
}
```