# Spacelab

> # Spacelab — Style Reference

**Spacelab** — Style Reference

## Prompt Content

```
# Spacelab — Style Reference
> Swiss editorial grid trên nền giấy thô. Một gallery tĩnh lặng, nơi Helvetica nằm trên baseline và một nút slate-violet duy nhất là thứ ồn ào nhất trong phòng.

**Theme:** light

Spacelab là studio kiến trúc theo phong cách Swiss-editorial, xây dựng trên sự kiềm chế gần như đơn sắc tuyệt đối: một typeface, một điểm nhấn màu, và hầu như không có trang trí bề mặt. Trang web hoạt động như một monograph in ấn — canvas trắng, ảnh kiến trúc cỡ lớn, và navigation index cột trái gợi nhớ đến sidebar catalogue bảo tàng. Type đảm nhận toàn bộ giọng điệu: HelveticaNeue weight 400 với line-height nén ở 1.0–1.2 nằm sát baseline hơn so với web type thông thường, khiến mọi đoạn văn có cảm giác được "sắp chữ" (set) chứ không phải "gõ chữ" (typed). Màu slate-violet nhẹ (#495472) chỉ xuất hiện trên filled buttons và một số card surface hiếm hoi, hoạt động như một tín hiệu navigation nhẹ nhàng thay vì một tuyên ngôn thương hiệu. Các component được rút gọn đến bộ xương: hairline borders, 4px corners, không shadow, không gradient — mọi element đều có trọng lượng nhờ chiếm dụng negative space thay vì lấp đầy nó.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, card surfaces, body text inversion, button labels. Nền chủ đạo; mọi thứ khác đều nằm trên nó |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, hairline borders, logo wordmark. Dùng cho hầu hết divider và đường kẻ cấu trúc (border frequency 1,156) |
| Charcoal | `#2c2222` | `--color-charcoal` | Secondary text và màu border đậm nhất trong hệ thống (freq 3,104). Màu gần đen pha ấm, làm mềm độ tương phản gay gắt khi đọc dài |
| Fossil | `#b2b4b1` | `--color-fossil` | Muted link color, inactive nav items, tertiary text. Xanh-xám bão hòa thấp, lùi lại khi đặt cạnh paper white và ink black |
| Slate Iris | `#495472` | `--color-slate-iris` | Nền filled button và một số card surface — giọng màu duy nhất trong hệ thống. Màu violet-slate nhẹ, đọc như xanh-xám kiến trúc hơn là màu thương hiệu, nên không bao giờ lấn át ảnh |

## Tokens — Typography

### HelveticaNeue — Typeface duy nhất. Dùng cho mọi thứ từ logo 'spacelab_' viết thường đến display headline 62px, section heading 19–21px, body 17px, và caption 15px. · `--font-helveticaneue`
- **Thay thế:** Helvetica, Inter, Neue Haas Grotesk, Arial
- **Weights:** 400
- **Kích cỡ:** 15px, 17px, 19px, 21px, 30px, 62px
- **Line height:** 1.00–1.20 (tight; display ở 1.0, body ở 1.20)
- **Letter spacing:** 0.0110em (0.165px ở 15px, 0.682px ở 62px — tracking dương nhất quán trên mọi kích cỡ)
- **Vai trò:** Typeface duy nhất. Dùng cho mọi thứ từ logo 'spacelab_' viết thường đến display headline 62px, section heading 19–21px, body 17px, và caption 15px.

### HelveticaNeue-Light — Body copy và đoạn văn hỗ trợ khi cần giọng nhẹ nhàng hơn. Light cut tạo sự đa dạng về typography mà không cần đổi họ typeface — một hệ thống single-typeface thở qua weight, không qua sự đa dạng. · `--font-helveticaneue-light`
- **Thay thế:** Helvetica Neue Light, Inter Light, Neue Haas Grotesk Light
- **Weights:** 300 (rendered as 400 in data — light weight optical)
- **Kích cỡ:** 17px
- **Line height:** 1.20
- **Letter spacing:** 0.0110em
- **Vai trò:** Body copy và đoạn văn hỗ trợ khi cần giọng nhẹ nhàng hơn. Light cut tạo sự đa dạng về typography mà không cần đổi họ typeface — một hệ thống single-typeface thở qua weight, không qua sự đa dạng.

### Type Scale

| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |
|---------|---------|-------------|----------------|-------|
| caption | 15px | 1.2 | 0.165px | `--text-caption` |
| body | 17px | 1.2 | 0.187px | `--text-body` |
| subheading | 19px | 1.15 | 0.209px | `--text-subheading` |
| heading-sm | 21px | 1.15 | 0.231px | `--text-heading-sm` |
| heading | 30px | 1.1 | 0.33px | `--text-heading` |
| display | 62px | 1 | 0.682px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Name | Giá trị | Token |
|------|---------|-------|
| 5 | 5px | `--spacing-5` |
| 10 | 10px | `--spacing-10` |
| 21 | 21px | `--spacing-21` |
| 42 | 42px | `--spacing-42` |
| 84 | 84px | `--spacing-84` |
| 147 | 147px | `--spacing-147` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 0px |
| cards | 0px |
| other | 4px |
| images | 0px |
| buttons | 0px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 84px
- **Card padding:** 21px
- **Element gap:** 21px

## Components

### Sidebar Logo Wordmark
**Vai trò:** Nhận diện thương hiệu, ghim ở góc trên bên trái mọi trang

'spacelab_' viết thường bằng HelveticaNeue 21px, weight 400, màu #000000, letter-spacing 0.231px. Dấu gạch dưới ở cuối là signature — nó đọc như một artifact của code-syntax và là gimmick hình ảnh duy nhất của logo.

### Vertical Section Index
**Vai trò:** Primary navigation — luôn hiển thị ở rail trái

Danh sách xếp chồng ở 17px HelveticaNeue weight 400. Mục active ('All stories') hiển thị bằng #000000 weight 400; mục inactive ('Work', 'News', 'Exploration', 'About', 'Contact') hiển thị bằng #b2b4b1 weight 400. Khoảng cách 10px giữa các mục. Không bullet, không icon, không separator — một index typography thuần túy.

### Filled Accent Button
**Vai trò:** Primary interactive element — filled button duy nhất trong hệ thống

Nền #495472, chữ #ffffff, 15px HelveticaNeue weight 400, letter-spacing 0.165px, padding 21px ngang / 21px dọc, border-radius 0. Không có hover state deviation được chỉ định — button vốn đã yên tĩnh, nên state change là tối thiểu.

### Ghost Text Link
**Vai trò:** Inline links và secondary navigation

Màu #b2b4b1 mặc định, #000000 khi hover. 17px HelveticaNeue weight 400, margin-bottom 5px cho paragraph spacing. Không underline mặc định — link affordance đến từ sự thay đổi màu sắc và hairline border-bottom 1px #000000 áp dụng trong body context.

### Accent Card Surface
**Vai trò:** Featured content card — surface màu sắc duy nhất

Nền #495472, padding 21px, border-radius 0. Dùng để làm nổi bật một dự án hoặc câu chuyện; card chứa chữ #ffffff. Hoạt động như một 'pull-quote panel' typography hơn là một content container — nó ngắt quãng canvas trắng thay vì tổ chức nội dung.

### Full-Bleed Image Block
**Vai trò:** Đơn vị hình ảnh chính cho project và editorial pages

Ảnh kiến trúc ở tỷ lệ khung hình gốc, không border, không radius, không caption. Căn chỉnh vào cột phải của asymmetric grid. Có thể trải rộng toàn bộ chiều rộng content area.

### Body Paragraph
**Vai trò:** Long-form editorial copy

17px HelveticaNeue-Light ở line-height 1.20, màu #000000, letter-spacing 0.187px. Paragraph spacing 21px. Căn trái, ragged right. Không có max-width constraint — text theo cột.

### Display Headline
**Vai trò:** Page titles và editorial section openers

62px HelveticaNeue weight 400, line-height 1.00, letter-spacing 0.682px, màu #000000. Line-height 1.0 chặt chẽ khiến headline nằm trên baseline như một masthead in ấn — không leading thoáng, không decorative space.

### Section Heading
**Vai trò:** Mid-level headings cho content sections

21–30px HelveticaNeue weight 400, line-height 1.10–1.15, màu #000000. margin-bottom 42px để tách biệt khỏi body content.

### Hairline Divider
**Vai trò:** Structural separator giữa các content blocks

1px solid #000000 hoặc #2c2222, không styling khác. Element phổ biến nhất trong hệ thống (hơn 1.100 instances trong data) — Spacelab dùng đường kẻ, không phải spacing, để tổ chức nội dung.

## Do's and Don'ts

### Do
- Chỉ dùng HelveticaNeue (hoặc HelveticaNeue-Light) cho mọi text element — không display fonts, không serifs, không monospaced accents.
- Giữ line-heights ở 1.00 cho display sizes (30–62px) và không bao giờ trên 1.20 cho body — nhịp điệu chặt chẽ là signature.
- Dùng #495472 độc quyền cho filled buttons và accent card surfaces; coi nó như một công tắc (switch), không phải trang trí.
- Phân tách content blocks bằng hairline borders 1px màu #000000 hoặc #2c2222 thay vì padding hoặc background fills.
- Giữ border-radius ở 0px trên mọi cards, buttons, tags, và images; token 4px dành riêng cho utility element hiếm hoi.
- Duy trì 21px làm đơn vị cơ sở cho element gaps và card padding; tăng lên 42px và 84px cho section-level separation.
- Hiển thị logo dưới dạng 'spacelab_' viết thường với dấu gạch dưới ở cuối — dấu gạch dưới là brand grammar bất di bất dịch.

### Don't
- Không giới thiệu typeface thứ hai, kể cả để nhấn mạnh — thay vào đó, thay đổi weight (400 vs Light) trong HelveticaNeue.
- Không thêm drop shadows, inner glows, hoặc blur effects — hệ thống chỉ dùng flat surfaces và hairline borders.
- Không dùng #495472 cho body text, icons, borders, hoặc decorative accents — nó chỉ dành cho filled interactive surfaces.
- Không bo tròn góc trên images, cards, hoặc buttons; radius 0px là lựa chọn editorial có chủ đích.
- Không vượt quá 62px cho headlines hoặc xuống dưới 15px cho text — scale được thu hẹp có chủ ý.
- Không căn giữa body paragraphs; ragged-right text căn chỉnh với Swiss editorial baseline.
- Không áp dụng gradients, duotone effects, hoặc color overlays lên ảnh — images được hiển thị nguyên bản.

## Surfaces

| Cấp độ | Name | Giá trị | Mục đích |
|--------|------|---------|----------|
| 1 | Paper | `#ffffff` | Base canvas — toàn bộ nền trang |
| 2 | Slate Iris Surface | `#495472` | Accent card và filled button surface — dùng tiết kiệm như dấu câu chức năng |

## Elevation

Thiết kế tránh hoàn toàn shadows. Các surface được phân tách bằng hairline borders (1px, #000000 hoặc #2c2222) hoặc bằng white space đơn thuần. Elevation được truyền đạt qua z-order và màu accent surface duy nhất, không qua blur hoặc drop shadow. Điều này giữ cho ngôn ngữ thị giác đồng nhất với thiết kế editorial in ấn — phẳng, trung thực, vật chất.

## Imagery

Ảnh kiến trúc và nội thất là nội dung hình ảnh chính. Các shot là full-bleed, không cắt xén theo editorial dimensions, và không được stylize — không overlays, không duotone treatments, không rounded corners. Hình ảnh CHÍNH LÀ bố cục: tài liệu khổ lớn về môi trường xây dựng (atria, workspaces, public buildings) được hiển thị với độ rõ ràng tài liệu. Con người xuất hiện như scale figures, không phải chân dung. Ảnh màu được dùng nguyên bản — ánh sáng tự nhiên, bảng màu tự nhiên. Không có illustration, không có iconography ngoài simple line glyphs, và không có decorative graphics.

## Layout

Cấu trúc hai cột bất đối xứng: một left rail cố định (~20% chiều rộng) chứa logo và vertical navigation, trong khi ~80% bên phải chứa nội dung trang hiện tại. Nav là một danh sách phẳng các section labels (All stories, Work, News, Exploration, About, Contact) xếp chồng theo chiều dọc với vertical rhythm rộng rãi. Hero là một ảnh kiến trúc full-bleed chiếm cột phải, không caption hoặc overlay. Nhịp điệu trang dựa trên section gap 84px và card padding 21px để tạo khoảng thở giữa các block. Grid ngầm dựa trên cột hơn là dựa trên card — images và text blocks căn chỉnh theo cấu trúc cột dọc thay vì hệ thống card đồng nhất.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000 (primary), #2c2222 (secondary), #b2b4b1 (muted/inactive)
- background: #ffffff
- border: #000000 hoặc #2c2222 (hairline 1px)
- accent surface: #495472 (Slate Iris)
- primary action: #495472 (filled action)

**Example Component Prompts**

1. *Display Headline*: 62px HelveticaNeue weight 400, line-height 1.00, letter-spacing 0.682px, màu #000000, căn trái, không margin-top, margin-bottom 84px đến element tiếp theo.

2. *Filled Accent Button*: 15px HelveticaNeue weight 400, letter-spacing 0.165px, màu #ffffff trên nền #495472, padding 21px 21px, border-radius 0, không border, không shadow, inline-block.

3. *Vertical Sidebar Nav*: Danh sách link xếp chồng, 17px HelveticaNeue weight 400, row-gap 10px, màu #b2b4b1 cho mục inactive, màu #000000 cho mục active, không bullets, không underlines, căn trái trong left rail rộng 200px.

4. *Body Paragraph*: 17px HelveticaNeue-Light, line-height 1.20, letter-spacing 0.187px, màu #000000, margin-bottom 21px giữa các đoạn, căn trái, ragged right, không max-width.

5. *Full-Bleed Architectural Image*: Tỷ lệ khung hình gốc, không border, border-radius 0, không caption, không overlay, căn chỉnh vào cột phải của asymmetric grid, không decorative treatment.

## Similar Brands

- **Vitsoe** — Cùng sự kiềm chế Swiss-editorial, một accent dùng tiết kiệm, typography nằm trên baseline với line-heights chặt chẽ, ảnh kiến trúc làm hình ảnh chính.
- **Aesop** — Editorial grid layout với whitespace rộng rãi, bảng màu đơn sắc nhẹ với một accent yên tĩnh duy nhất, hệ thống typography không serif ưu tiên nội dung hơn chrome.
- **Frieze** — Information architecture kiểu gallery-catalogue với left-rail section index, ảnh unstyled khổ lớn, và hệ thống phân cấp type driven by Helvetica ở line-heights nén.
- **Studio Ma** — Site studio kiến trúc với ảnh tài liệu, trang trí bề mặt tối thiểu, hệ thống single-typeface, và bảng màu gần đơn sắc với một chromatic accent nhẹ duy nhất.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-charcoal: #2c2222;
  --color-fossil: #b2b4b1;
  --color-slate-iris: #495472;

  /* Typography — Font Families */
  --font-helveticaneue: 'HelveticaNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.2;
  --tracking-caption: 0.165px;
  --text-body: 17px;
  --leading-body: 1.2;
  --tracking-body: 0.187px;
  --text-subheading: 19px;
  --leading-subheading: 1.15;
  --tracking-subheading: 0.209px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.15;
  --tracking-heading-sm: 0.231px;
  --text-heading: 30px;
  --leading-heading: 1.1;
  --tracking-heading: 0.33px;
  --text-display: 62px;
  --leading-display: 1;
  --tracking-display: 0.682px;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-21: 21px;
  --spacing-42: 42px;
  --spacing-84: 84px;
  --spacing-147: 147px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 84px;
  --card-padding: 21px;
  --element-gap: 21px;

  /* Border Radius */
  --radius-md: 4px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-other: 4px;
  --radius-images: 0px;
  --radius-buttons: 0px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-slate-iris-surface: #495472;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper-white: #ffffff;
  --color-ink-black: #000000;
  --color-charcoal: #2c2222;
  --color-fossil: #b2b4b1;
  --color-slate-iris: #495472;

  /* Typography */
  --font-helveticaneue: 'HelveticaNeue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 15px;
  --leading-caption: 1.2;
  --tracking-caption: 0.165px;
  --text-body: 17px;
  --leading-body: 1.2;
  --tracking-body: 0.187px;
  --text-subheading: 19px;
  --leading-subheading: 1.15;
  --tracking-subheading: 0.209px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.15;
  --tracking-heading-sm: 0.231px;
  --text-heading: 30px;
  --leading-heading: 1.1;
  --tracking-heading: 0.33px;
  --text-display: 62px;
  --leading-display: 1;
  --tracking-display: 0.682px;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-21: 21px;
  --spacing-42: 42px;
  --spacing-84: 84px;
  --spacing-147: 147px;

  /* Border Radius */
  --radius-md: 4px;
}
```