# Linus Rogge

> # Linus Rogge — Style Reference

## Prompt Content

```
# Linus Rogge — Style Reference
> Portfolio mang phong cách editorial trên nền gallery trắng — mỗi dự án là một bức ảnh cỡ tường với chú thích nhỏ nhẹ ở góc.

**Theme:** light

Linus Rogge là portfolio cá nhân xây dựng trên sự kiềm chế triệt để về typography: chỉ một cỡ chữ 14px duy nhất cho mọi văn bản, chỉ hai màu (đen thuần và trắng thuần), và ảnh chụp cỡ gallery là giọng nói hình ảnh duy nhất. Hierarchy được tạo ra thông qua weight (400 vs 500) và khoảng trống âm bản rộng rãi, không phải bằng cách tăng kích thước. Mỗi dự án được trình bày dưới dạng một nhãn canh trái thưa thớt đi kèm với ảnh full-bleed, mang phong cách như chú thích trong bảo tàng bên cạnh một bản in lớn. Các component gần như vô hình — không có shadow, không có border-radius trên canvas, không có màu trang trí — để bản thân tác phẩm tự gánh vác trang.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Paper White | `#ffffff` | `--color-paper-white` | Canvas chính, mọi chữ trên nền tối, chữ button inverted |
| Ink Black | `#000000` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho chữ, icon và độ tương phản mạnh. Không dùng làm màu CTA chính |
| Gallery Gray | `#e5e5e5` | `--color-gallery-gray` | Bề mặt phụ cho các section band, footer background wash |
| Plinth Gray | `#d4d4d4` | `--color-plinth-gray` | Bề mặt cấp ba, divider nhịp điệu section xen kẽ |
| Carbon Black | `#0a0a0a` | `--color-carbon-black` | Nền section tối cho các khối nội dung (writing index, project list) — gần đen tránh sự chói của #000 thuần |
| Slate Black | `#171717` | `--color-slate-black` | Bề mặt tối cấp hai cho các section tối xếp chồng |
| Concrete | `#a3a3a3` | `--color-concrete` | Chữ helper muted, ngày tháng metadata, chú thích cấp ba trên nền trắng |
| Stone | `#737373` | `--color-stone` | Chữ muted cấp hai, label, annotation không hoạt động |
| Graphite | `#525252` | `--color-graphite` | Chữ muted mạnh nhất trước khi chuyển sang đen hoàn toàn, điểm nhấn tinh tế |

## Tokens — Typography

### ABC Oracle — Kiểu chữ duy nhất cho mọi văn bản — headline, body, label, metadata, navigation. Lựa chọn đặc trưng là dùng một cỡ 14px duy nhất trên toàn bộ site: hierarchy đến từ weight contrast (400 cho body, 500 cho title và mục đang hoạt động) và whitespace, không bao giờ từ kích thước. Cách tiếp cận phản hierarchy này coi mọi thông tin đều quan trọng như nhau, giống như chú thích tường trong gallery. · `--font-abc-oracle`
- **Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk ở cỡ 14px cố định
- **Weights:** 400, 500
- **Cỡ chữ:** 14px
- **Line height:** 1.00, 1.25, 1.43
- **Letter spacing:** normal
- **Vai trò:** Kiểu chữ duy nhất cho mọi văn bản — headline, body, label, metadata, navigation. Lựa chọn đặc trưng là dùng một cỡ 14px duy nhất trên toàn bộ site: hierarchy đến từ weight contrast (400 cho body, 500 cho title và mục đang hoạt động) và whitespace, không bao giờ từ kích thước. Cách tiếp cận phản hierarchy này coi mọi thông tin đều quan trọng như nhau, giống như chú thích tường trong gallery.

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 0px |
| cards | 0px |
| inputs | 0px |
| buttons | 0px |

### Layout

- **Section gap:** 48-96px
- **Card padding:** 12px
- **Element gap:** 12px

## Components

### Project Header Label
**Vai trò:** Khối metadata dự án ở góc trên bên trái mỗi section dự án

Stack ba dòng canh trái: tên client/brand (weight 500), tiêu đề dự án (weight 500), mô tả dự án (weight 400). Tất cả ở 14px, chữ đen trên nền trắng. Không icon, không bullet, không yếu tố trang trí. Xuất hiện ở góc trên bên trái mỗi section ảnh full-bleed.

### Project Footer Label
**Vai trò:** Ngày tháng và thông tin studio ở góc dưới bên trái mỗi dự án

Hai dòng: khoảng năm (weight 400) và tên studio/công ty (weight 400). 14px, chữ đen, góc dưới bên trái. Tối giản — chỉ đủ để ghi công cho tác phẩm.

### Full-Bleed Project Image
**Vai trò:** Yếu tố hình ảnh chính của mỗi dự án

Ảnh lớn chiếm phần lớn viewport. Không border, không radius (0px), không shadow. Ảnh là product/lifestyle photography trên nền sạch. Không có caption hay overlay trên chính ảnh — label nằm bên ngoài khu vực ảnh ở các góc.

### Writing Index Entry
**Vai trò:** Danh sách bài blog trong section viết tối

Layout hai cột: tiêu đề bài (weight 500, trắng) bên trái, ngày xuất bản (weight 400, trắng) bên dưới. Được sắp xếp trong grid nhiều cột. 14px, không có link hay hover state hiển thị. Nằm trên nền Carbon Black (#0a0a0a).

### Section Label
**Vai trò:** Header danh mục cho nội dung được nhóm (ví dụ: 'Writing')

Một từ duy nhất ở weight 400, 14px, đen trên trắng hoặc trắng trên tối. Nằm ở góc trên bên trái section với lề trái rộng rãi. Hoạt động như một section anchor nhẹ nhàng.

### Filled Action Button
**Vai trò:** Call-to-action chính (ví dụ: 'Information')

Nền Ink Black (#000000), chữ Paper White (#ffffff), weight 500, 14px. Border-radius bằng 0 (0px). Padding 12px 12px (trên/dưới 12px, trái/phải 12px). Không border, không shadow, không hover state. Hình chữ nhật sắc cạnh — yếu tố 'màu sắc' duy nhất trong toàn bộ hệ thống là sự đảo ngược giữa đen và trắng.

### About Text Block
**Vai trò:** Văn bản bio cá nhân ở khu vực footer

Đoạn văn nhiều dòng ở 14px, weight 400, chữ đen. Max-width tương đương 8 cột (khoảng 40% viewport). Line-height 1.43. Nằm trên nền Gallery Gray (#e5e5e5). Không có pull quote hay điểm nhấn — văn xuôi phẳng liên tục.

### Alternating Section Band
**Vai trò:** Công cụ nhịp điệu dọc phân cách các vùng trang

Các band ngang full-width xen kẽ giữa Gallery Gray (#e5e5e5), Plinth Gray (#d4d4d4) và Concrete (#a3a3a3). Không có chữ hay nội dung — thuần túy là khoảng thở hình ảnh giữa các section, giống như cách một cuốn sách dùng trang trắng giữa các chương.

## Do's and Don'ts

### Do
- Dùng chính xác 14px cho mọi văn bản bất kể tầm quan trọng — để weight (400 vs 500) và whitespace tạo hierarchy
- Dùng #000000 thuần và #ffffff thuần cho mọi chữ chính và bề mặt; hệ thống hoàn toàn hai màu
- Đặt border-radius thành 0px trên mọi component — button, card, ảnh, input đều là hình chữ nhật sắc cạnh
- Canh trái mọi văn bản với lề trái nhất quán; không bao giờ canh giữa chữ
- Đặt metadata dự án ở các góc (trên-trái và dưới-trái) của ảnh full-bleed, không overlay lên ảnh
- Dùng section band với Gallery Gray (#e5e5e5) và Plinth Gray (#d4d4d4) để tạo nhịp điệu dọc giữa các dự án
- Chỉ dùng weight 500 cho title, mục đang hoạt động và chữ button — mọi thứ khác giữ ở 400

### Don't
- Không bao giờ thêm cỡ chữ thứ hai — toàn bộ hệ thống chạy trên 14px
- Không bao giờ thêm màu sắc, gradient hay shadow — thiết kế phẳng và hoàn toàn đơn sắc
- Không bao giờ dùng border-radius lớn hơn 0px trên bất kỳ element nào
- Không bao giờ canh giữa chữ hay dùng layout đối xứng — mọi thứ neo vào bên trái
- Không bao giờ overlay chữ lên ảnh — label sống ở lề bên ngoài ảnh
- Không bao giờ dùng icon trang trí, bullet hay divider — whitespace là separator duy nhất
- Không bao giờ dùng #0a0a0a hay #171717 làm chữ body trên nền trắng — đó là màu bề mặt chỉ dùng cho khối tối

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang, bề mặt chính |
| 1 | Section Band | `#e5e5e5` | Nền section xen kẽ, footer wash |
| 2 | Plinth | `#d4d4d4` | Bề mặt banded cấp hai |
| 3 | Dark Block | `#0a0a0a` | Section nội dung inverted (writing index, archive) |

## Elevation

Thiết kế có độ cao bằng không. Không shadow, không glow, không bất kỳ tín hiệu chiều sâu nào. Bề mặt được định nghĩa hoàn toàn bằng tương phản màu giữa các band trắng và xám liền kề. Component nằm sát với nền của chúng, và sự phân cách không gian duy nhất đến từ whitespace và các cạnh cứng của ảnh tiếp giáp với các trường màu đặc.

## Imagery

Ảnh chụp sản phẩm và phong cách sống khổ lớn là yếu tố hình ảnh chủ đạo. Ảnh full-bleed hoặc gần full-bleed, không border, không bo góc, không overlay. Xử lý sạch sẽ và tự nhiên — laptop trên bàn trắng, tablet trên bề mặt gỗ, tay tương tác với thiết bị. Không duotone, không color grading, không mask. Ảnh chụp gánh toàn bộ trọng lượng hình ảnh của trang; không có illustration, không có đồ họa trừu tượng, không có icon đáng kể. Các vật thể trong ảnh (sản phẩm, thiết bị, bàn tay) là hero — bối cảnh xung quanh tối thiểu và trung tính để chủ thể đọc rõ ràng.

## Layout

Layout full-bleed một cột. Mỗi dự án chiếm một section dọc: metadata ở góc trên bên trái, ảnh lớn lấp đầy viewport, ngày tháng/ghi công ở góc dưới bên trái. Các section xếp chồng dọc không có gutter — mỗi dự án mới bắt đầu ngay nơi dự án trước kết thúc. Trong các section, một khối inverted tối (writing index) dùng grid nhiều cột (3-4 cột) cho các mục danh sách. Footer dùng nền xám nhạt với chữ canh trái vào một cột rộng khoảng 40% viewport. Không có navigation bar, không sidebar, không sticky header — trang là một scroll dọc liên tục các khối dự án. Không có max-width constraint trên ảnh; khối chữ bị giới hạn trong một cột hẹp bên trái.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000
- background: #ffffff
- border: #000000
- muted text: #737373
- dark surface: #0a0a0a
- section band: #e5e5e5
- primary action: không có màu CTA riêng biệt

## Example Component Prompts

1. **Project Header Label**: Tạo một stack chữ canh trên trái: dòng đầu 'Linus Rogge' ở 14px weight 500, dòng thứ hai tiêu đề dự án ở 14px weight 500, dòng thứ ba mô tả ở 14px weight 400. Tất cả trong #000000 trên nền #ffffff. Padding trên 12px, neo vào lề trái không có lề trái ngoài gutter trang.

2. **Full-Bleed Project Image**: Render một ảnh lớn chiếm toàn bộ chiều rộng viewport. Border-radius bằng 0, không border, không shadow. Không chữ hay overlay trên ảnh. Đặt absolute trong luồng section với metadata dự án xếp phía trên và ngày tháng/ghi công phía dưới.

3. **Section Band Divider**: Tạo một band ngang full-width với nền #e5e5e5, cao 48-96px, không nội dung. Hoạt động như một khoảng thở hình ảnh giữa các section dự án.

4. **Writing Index Entry**: Trên nền tối #0a0a0a, render một khối hai dòng: tiêu đề ở 14px weight 500 trong #ffffff, ngày tháng bên dưới ở 14px weight 400 trong #ffffff. Sắp xếp nhiều mục trong grid 3 cột với column gap 48px.

5. **Filled Action Button**: Hình chữ nhật đen (#000000) với chữ trắng (#ffffff) ở 14px weight 500, label 'Information'. Border-radius bằng 0. Padding 12px mọi phía. Không border, không shadow, không hover state.

## Similar Brands

- **Rauno Freiberg** — Cùng typography phản hierarchy một cỡ chữ, ảnh full-bleed, bảng màu đen-trắng nghiêm ngặt, và danh sách dự án canh trái với metadata tối thiểu
- **Studio Dumbar** — Trình bày portfolio như gallery wall được tuyển chọn — ảnh khổ lớn với chú thích chữ nhỏ nhẹ ở góc, không có chrome trang trí
- **Frank Chimero** — Kiềm chế một kiểu chữ, whitespace rộng rãi, cột chữ canh trái trên section band xám nhạt, không yếu tố trang trí
- **Bret Victor** — Chủ nghĩa tối giản typography triệt để, một font body nhỏ mang mọi thông tin và bản thân tác phẩm lấp đầy trang

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-gallery-gray: #e5e5e5;
  --color-plinth-gray: #d4d4d4;
  --color-carbon-black: #0a0a0a;
  --color-slate-black: #171717;
  --color-concrete: #a3a3a3;
  --color-stone: #737373;
  --color-graphite: #525252;

  /* Typography — Font Families */
  --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 14px;
  --leading-sm: 1.43;

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

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-48: 48px;

  /* Layout */
  --section-gap: 48-96px;
  --card-padding: 12px;
  --element-gap: 12px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-inputs: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-section-band: #e5e5e5;
  --surface-plinth: #d4d4d4;
  --surface-dark-block: #0a0a0a;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-gallery-gray: #e5e5e5;
  --color-plinth-gray: #d4d4d4;
  --color-carbon-black: #0a0a0a;
  --color-slate-black: #171717;
  --color-concrete: #a3a3a3;
  --color-stone: #737373;
  --color-graphite: #525252;

  /* Typography */
  --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-sm: 14px;
  --leading-sm: 1.43;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-48: 48px;
}
```