# Mother Design

> Mother Design — Style Reference

## Prompt Content

```
# Mother Design — Style Reference
> broadsheet manifesto in mực đen

**Theme:** light

Mother Design xem trình duyệt như một tờ broadsheet biên tập: gần như đơn sắc hoàn toàn, typography đảm nhận mọi công việc biểu đạt, cấu trúc được vẽ bằng những đường mực 1px thay vì đổ bóng hay panel. Một nốt màu duy nhất — xanh rừng sâu #306f09 — được kiềm chế đến mức gần như biến mất, chỉ xuất hiện như một điểm nhấn code gần như vô hình. Display size đẩy lên tới 226px, biến typography thành hero của mọi màn hình; supporting text được đặt trong một grotesque dày, tracking hơi âm, đọc tự tin chứ không ồn ào. Các component đều thô: bordered tabs, unframed thumbnails, những đường kẻ dọc mảnh chia grid. Serif Times xuất hiện như một điểm đối trọng biên tập lặng lẽ, không bao giờ là trang trí. Kết quả mang cảm giác như một bản tuyên ngôn in ấn được gán một URL cố định — grid mực trên nền giấy xám ấm, nơi sự kiềm chế CHÍNH LÀ bản sắc thị giác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Newsprint | `#f4f4f4` | `--color-newsprint` | Nền section mềm, surface thay thế, card fill lặng lẽ. |
| Bone White | `#ffffff` | `--color-bone-white` | Nền navigation, surface card, button fills, inverted text — đẩy lên phía trước khỏi canvas xám |
| Press Black | `#000000` | `--color-press-black` | Neutral form states, badge text, và phản hồi UI lặng lẽ nơi màu sắc cần giữ kín đáo. |
| Foil Gray | `#808080` | `--color-foil-gray` | Secondary text, subdued link borders, metadata — nằm sau Press Black như chú thích lặng lẽ |
| Ink Green | `#306f09` | `--color-ink-green` | Lớp phủ xanh cho highlight backgrounds, decorative bands, và điểm nhấn mềm phía sau nội dung |

## Tokens — Typography

### Basis — Primary typeface trên toàn bộ UI. Weight 400 cho body, links, và hầu hết running text; weight 600 dùng có chừng mực cho các label nhỏ dạng uppercase-ish và navigation tabs. Kích thước 226px với line-height 1.0 là signature — display type hoạt động như poster headline, không phải web heading. Negative tracking thắt chặt khi size lớn dần: -0.04em ở display, -0.02em ở mid, -0.01em ở body. · `--font-basis`
- **Thay thế:** Inter, Suisse Int'l, hoặc Neue Haas Grotesk
- **Weights:** 400, 600
- **Sizes:** 10, 14, 16, 48, 60, 110, 226
- **Line height:** 1.00–1.50 (tùy ngữ cảnh: 1.0 cho display, 1.5 cho body)
- **Letter spacing:** -0.04em ở 226px, -0.04em ở 110px, -0.02em ở 60px, -0.02em ở 48px, -0.01em ở 16px, 0 ở 14px và nhỏ hơn
- **Vai trò:** Primary typeface trên toàn bộ UI. Weight 400 cho body, links, và hầu hết running text; weight 600 dùng có chừng mực cho các label nhỏ dạng uppercase-ish và navigation tabs. Kích thước 226px với line-height 1.0 là signature — display type hoạt động như poster headline, không phải web heading. Negative tracking thắt chặt khi size lớn dần: -0.04em ở display, -0.02em ở mid, -0.01em ở body.

### Basis Mono — Dùng cho technical labels, metadata, timestamps, và small annotations. Letter-spacing +0.06em mang lại cảm giác như chú thích in ấn đặt trong mặt chữ máy đánh chữ — một điểm đối trọng có chủ đích với grotesque dày của Basis. · `--font-basis-mono`
- **Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Berkeley Mono
- **Weights:** 400
- **Sizes:** 14
- **Line height:** 1.20
- **Letter spacing:** 0.06em (8.4px ở 14px)
- **Vai trò:** Dùng cho technical labels, metadata, timestamps, và small annotations. Letter-spacing +0.06em mang lại cảm giác như chú thích in ấn đặt trong mặt chữ máy đánh chữ — một điểm đối trọng có chủ đích với grotesque dày của Basis.

### Times — System serif dùng như điểm nhấn biên tập hiếm hoi — xuất hiện trong icon và small body contexts nơi cần một nốt 'báo in' hoặc 'footnotes'. Sự hiện diện của nó được cảm nhận hơn là nhìn thấy; lựa chọn này báo hiệu dòng dõi in ấn chứ không phải trang trí. · `--font-times`
- **Thay thế:** Times New Roman, EB Garamond, hoặc Source Serif
- **Weights:** 400
- **Sizes:** 14
- **Line height:** 1.20
- **Letter spacing:** 0.06em
- **Vai trò:** System serif dùng như điểm nhấn biên tập hiếm hoi — xuất hiện trong icon và small body contexts nơi cần một nốt 'báo in' hoặc 'footnotes'. Sự hiện diện của nó được cảm nhận hơn là nhìn thấy; lựa chọn này báo hiệu dòng dõi in ấn chứ không phải trang trí.

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.2 | — | `--text-caption` |
| body-sm | 14px | 1.2 | — | `--text-body-sm` |
| body | 16px | 1.5 | -0.16px | `--text-body` |
| heading-sm | 48px | 1.1 | -0.96px | `--text-heading-sm` |
| heading | 60px | 1 | -1.2px | `--text-heading` |
| heading-lg | 110px | 1 | -4.4px | `--text-heading-lg` |
| display | 226px | 1 | -9.04px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 200 | 200px | `--spacing-200` |

### Border Radius

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

### Layout

- **Section gap:** 160-200px
- **Card padding:** 0px
- **Element gap:** 20px

## Components

### Navigation Tab
**Vai trò:** Các link cấp trang (Work, Information, News, Contact)

Một text label Basis 14px / weight 600 / -0.01em bên trong border 1px Press Black, fill Bone White, không radius, padding ngang 16px, padding dọc 2px. Nhiều tab đặt cạnh nhau tạo thành segmented control. Brand mark (icon trái tim) nằm trong ô có border riêng bên trái nhóm tab. Các tab hình chữ nhật, không trang trí — đọc như tab in trên bìa hồ sơ.

### Brand Mark Cell
**Vai trò:** Vùng chứa logo ở ngoài cùng bên trái của hàng nav

Một ô vuông nhỏ (~32px) Bone White với border 1px Press Black chứa glyph trái tim Press Black. Phản chiếu trọng lượng thị giác của nav tabs và neo brand trong cùng grid với navigation.

### News Marquee Bar
**Vai trò:** Headline/news ticker chạy ngang phía trên bên phải

Fill Bone White, border 1px Press Black, Basis Mono 14px / weight 400 / tracking +0.06em, text Press Black. Headlines nằm trong một hàng ngang, cách nhau bằng các đường kẻ dọc mảnh Press Black. Đọc như một dòng ngày tháng in ấn.

### Theme Toggle Cluster
**Vai trò:** Các control chỉ icon ở góc trên bên phải

Bốn ô vuông nhỏ (~32px mỗi ô), border 1px Press Black, fill Bone White, mỗi ô chứa một nét icon Press Black (sun, moon, gear, v.v.). Các tile đặt cạnh nhau không gap, tạo thành segmented control thứ hai. Icons có nét 1.5px, hình học, không fill.

### Portfolio Thumbnail
**Vai trò:** Các tile preview dự án trong work grid

Raw image tiles với zero border, zero radius, zero shadow, zero caption treatment phía trên hoặc dưới. Mỗi tile lấp đầy chính xác grid cell của nó; hình ảnh CHÍNH LÀ card. Tên dự án và credits xuất hiện bên ngoài grid trong vai trò caption nhỏ. Việc thiếu chrome cho phép tác phẩm — chứ không phải UI — mang sự chú ý.

### Project Caption Block
**Vai trò:** Tên dự án + text vai trò bên dưới work grid

Căn trái, không border. Tên dự án bằng Basis 14px / weight 600, text vai trò/thể loại bằng Basis 14px / weight 400, cả hai đều Press Black, line-height 1.2. Nằm xa bên dưới grid với khoảng trắng rộng rãi — mối quan hệ là một footnote, không phải label.

### Manifesto Block
**Vai trò:** Đoạn văn biên tập lớn giới thiệu giọng nói của studio

Basis ở display sizes (60–110px) / weight 400 / line-height 1.0 / letter-spacing -0.02em đến -0.04em, Press Black. Chảy full-width không có max-width constraint — độ dài dòng được kiểm soát bởi số cột, không phải bởi container. Inline links được gạch chân bằng 1px Press Black. Đây là thứ gần nhất site có với một 'hero' và nó là type thuần túy.

### Section Display Header
**Vai trò:** Các tiêu đề section hoành tráng (Rigor, Rebellion, Depth, Care)

Basis 226px / weight 400 / line-height 1.0 / letter-spacing -0.04em, Press Black. Căn giữa trong grid cell của nó. Cell được xác định bởi các đường kẻ ngang và dọc 1px Press Black bao quanh toàn bộ section như một cái bảng. Text trôi nổi bên trong cell với ~120px padding ở mọi phía — type thở trong không gian âm.

### Grid Section Frame
**Vai trò:** Container cho 2-up section displays và nội dung

Full-bleed, không padding, không background, không radius. Được chia bởi một đường kẻ dọc 1px Press Black duy nhất tại điểm giữa cột. Đường kẻ dọc là element cấu trúc duy nhất — không cards, không fills, không spacing tricks. Các đường kẻ ngang 1px Press Black trên và dưới đóng khung section.

### Service List Item
**Vai trò:** Danh sách dọc các năng lực (Brand Strategy, Naming, v.v.)

Basis 60px / weight 400 / line-height 1.0 / letter-spacing -0.02em, Press Black. Căn trái, xếp dọc với khoảng cách hàng ~8px. Không bullet, không border giữa các item — chính nhịp điệu type tạo ra sự phân cách. Nằm ở cột phải của grid 2 cột; cột trái chứa section display header và body copy mô tả trong vai trò mono label nhỏ.

### Inline Link
**Vai trò:** Hyperlinks trong manifesto và body copy

Text Press Black với gạch chân 1px Press Black. Không hover color change, không background, không icon mũi tên. Độ dày gạch chân khớp với hairline border của hệ thống — links đọc như copy được gạch chân trong layout in ấn, không phải affordances web tương tác.

### Section Label
**Vai trò:** Label nhỏ dạng all-caps-style phía trên content blocks (ví dụ 'How we do it', 'What we do')

Basis Mono 14px / weight 400 / tracking +0.06em, Press Black. Nằm ở góc trên bên trái của một content area, thiết lập thể loại section trước khi display type tiếp quản.

## Do's and Don'ts

### Do
- Đặt display type ở 226px với letter-spacing -0.04em và line-height 1.0 — tỷ lệ cực đoan là signature, không phải ngoại lệ.
- Chỉ dùng năm màu: canvas #f4f4f4, surface #ffffff, text và rules #000000, secondary #808080, #306f09 là nốt màu duy nhất.
- Cấu trúc mọi layout bằng các đường kẻ 1px Press Black — dọc, ngang, và làm border cho interactive cells. Không bao giờ dùng shadows hoặc fills để phân cách vùng.
- Dùng Basis Mono với tracking +0.06em cho metadata, labels, và news ticker. Dành Basis cho mọi thứ khác; chỉ dùng Times cho các chú thích biên tập thỉnh thoảng.
- Giữ card và thumbnail padding ở 0px. Để raw images nằm cạnh nhau trong grid cells của chúng, không chrome, border, hay radius.
- Neo nav bằng segmented control có border 1px: brand mark cell + nhóm tab bên trái, theme toggle cluster bên phải. Fill Bone White, không radius.
- Xem whitespace như một element cấu trúc — các khoảng trống dọc lớn (160-200px) giữa portfolio grid và section tiếp theo là một phần của hệ thống, không phải không gian âm cần lấp đầy.

### Don't
- Không thêm màu sắc bổ sung. Bất kỳ màu mới nào, dù là desaturated, cũng sẽ làm loãng bản sắc broadsheet. Màu xanh là dấu hiệu của máy in, không phải swatch palette.
- Không thêm box-shadows, blurs, hoặc bất kỳ hình thức elevation nào. Hệ thống không có z-axis — depth là typographic.
- Không bo góc. Mọi border, button, và cell đều giữ radius 0px. Đường cong sẽ phản bội phép ẩn dụ trang in.
- Không giới hạn display type ở các kích thước web thông thường (48-72px). Tỷ lệ 226px / 110px là điểm cốt lõi — thu nhỏ nó để 'cảm thấy hiện đại hơn' sẽ loại bỏ signature.
- Không dùng weight 700 hoặc 800. Basis 600 là weight nặng nhất trong hệ thống; 400 làm công việc ở display sizes vì bản thân kích thước đã cung cấp trọng lượng.
- Không thêm icons bên trong buttons hoặc cards. Icons chỉ tồn tại trong theme toggle cluster và brand mark cell.
- Không căn giữa body copy hoặc đặt paragraphs ở max-width hẹp. Manifesto đọc full-bleed; chiều rộng cột được kiểm soát bởi grid, không phải bởi content container.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Newsprint | `#f4f4f4` | Page canvas — 'giấy' xám ấm nơi mọi thứ nằm trên đó |
| 1 | Bone White | `#ffffff` | Navigation bar, button surfaces, và một vài elevated card containers cần bước ra khỏi canvas |

## Elevation

Hệ thống từ chối hoàn toàn elevation. Không có drop shadows, không surface lifts, không depth illusions. Cấu trúc được truyền đạt qua các đường kẻ 1px Press Black cắt layout thành grid, và qua bước chuyển tonal từ Newsprint (#f4f4f4) sang Bone White (#ffffff) cho navigation bar. Depth là typographic, không phải kiến trúc — display type 226px mang trọng lượng mà shadows sẽ mang trong UI thông thường.

## Imagery

Work grid là imagery: đa dạng, unframed, full-bleed thumbnails trải dài từ product photography (lon soda giữ bầu trời cầu vồng), editorial poster design (poster Brooklyn Orioles nặng về type), brand identity systems (type specimen Babies), đến 3D product render (Rolfr camera-can). Không có xử lý ảnh nhất quán — thumbnail của mỗi dự án đến raw, full color, không overlay, duotone, hay filter. Bản thân trang là text-dominant; imagery chỉ xuất hiện trong portfolio grid và được xem như bằng chứng về năng lực chứ không phải bầu không khí. Iconography tối thiểu: glyphs hình học nét 1.5px chỉ giới hạn trong theme toggle cluster và heart brand mark. Ngôn ngữ thị giác của site là ngôn ngữ thị giác của một portfolio in ấn — để tác phẩm lên tiếng full color trên nền trang đen trên xám.

## Layout

Full-bleed edge-to-edge layout không có max-width container. Trang được tổ chức như một grid chặt chẽ chia bởi các đường kẻ 1px Press Black. Hàng trên cùng chứa nav (trái: brand mark + segmented tabs, phải: news marquee + theme toggles) trong một thanh chiều cao cố định. Bên dưới nav, work grid là một hàng 5 cột các thumbnail tile với zero gap giữa các cell — images chạm nhau. Một khoảng trống dọc lớn (160-200px) ngăn cách grid với manifesto section, là một khối full-width của running text cỡ display. Các section 'How we do it' và 'What we do' sử dụng grid 2 cột chia bởi một đường kẻ dọc 1px tại điểm giữa; cột trái mang một section label nhỏ và body copy, cột phải mang display type hoành tráng (Rigor/Rebellion, Depth/Care) hoặc một service list dọc. Mỗi section chính được đóng khung bởi các đường kẻ ngang 1px Press Black trên và dưới. Trang đọc từ trên xuống dưới như một tài liệu in: header bar, portfolio spread, manifesto column, sectioned grid pages.

## Editorial System

UI của Mother Design mượn logic từ in ấn — cụ thể từ broadsheet newspapers và design annuals. Các signature moves: display type ở tỷ lệ poster (226px) với aggressive negative tracking, 1px ink rules thay vì cards hoặc shadows, một canvas 'newsprint' xám ấm duy nhất, và serif Times dùng như điểm đối trọng biên tập lặng lẽ với grotesque Basis. Màu sắc duy nhất trong hệ thống là Press Black; mọi thứ khác là giấy. Một AI xây dựng trang mới nên xem layout như một typeset page, không phải web app: không max-width container, không căn giữa body text, không bo góc, không elevation. Grid là chrome.

## Agent Prompt Guide

**Quick Color Reference**
- text: #000000
- background: #f4f4f4
- surface: #ffffff
- border: #000000 (1px)
- secondary text: #808080
- accent: #306f09
- primary action: không có màu CTA riêng biệt

**Example Component Prompts**
1. *Section display header*: Render 'Rigor' ở 226px Basis weight 400, color #000000, letter-spacing -0.04em, line-height 1.0, căn giữa trong grid cell được đóng khung bởi các đường kẻ 1px #000000 ở mọi phía với ~120px internal padding.
2. *Navigation tab*: Basis 14px weight 600, text 'Work', color #000000, background #ffffff, border 1px #000000, padding ngang 16px, padding dọc 2px, radius 0px. Đặt trong một hàng các tab tương tự cạnh nhau.
3. *Service list item*: Basis 60px weight 400, text 'Brand Strategy', color #000000, letter-spacing -0.02em, line-height 1.0, căn trái, xếp dọc với khoảng cách hàng 8px, không bullet, không border.
4. *Portfolio thumbnail*: Full-bleed image lấp đầy grid cell 5 cột, 0px border, 0px radius, 0px padding, không caption bên trong cell.
5. *Section label*: Basis Mono 14px weight 400, text 'What we do', color #000000, letter-spacing 0.06em, line-height 1.2, đặt ở góc trên bên trái của một content area.

## Similar Brands

- **Pentagram** — Cùng truyền thống agency biên tập: 1px rules cấu trúc trang, canvas đơn sắc, display type làm công việc trang trí, và portfolio grid để tác phẩm đến không khung.
- **Bureau Borsche** — Cùng broadsheet sensibility — type khổng lồ set tight, backgrounds xám ấm, và từ chối bo góc hoặc thêm elevation. Cả hai xem trình duyệt như một typeset page.
- **Studio Dumbar** — Cam kết chung về màu sắc kiềm chế (về cơ bản đơn sắc với một accent), grotesque sans-serif ở display sizes cực đoan, và structural grids vẽ bằng hairline rules thay vì xây từ cards.
- **Anagrama** — Các site agency biên tập sử dụng cùng kịch bản: canvas-light layout, oversized display headings với negative tracking, bordered segmented navigation, và portfolio grid không thumbnail chrome.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-newsprint: #f4f4f4;
  --color-bone-white: #ffffff;
  --color-press-black: #000000;
  --color-foil-gray: #808080;
  --color-ink-green: #306f09;

  /* Typography — Font Families */
  --font-basis: 'Basis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-basis-mono: 'Basis Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.96px;
  --text-heading: 60px;
  --leading-heading: 1;
  --tracking-heading: -1.2px;
  --text-heading-lg: 110px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -4.4px;
  --text-display: 226px;
  --leading-display: 1;
  --tracking-display: -9.04px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-200: 200px;

  /* Layout */
  --section-gap: 160-200px;
  --card-padding: 0px;
  --element-gap: 20px;

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

  /* Surfaces */
  --surface-newsprint: #f4f4f4;
  --surface-bone-white: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-newsprint: #f4f4f4;
  --color-bone-white: #ffffff;
  --color-press-black: #000000;
  --color-foil-gray: #808080;
  --color-ink-green: #306f09;

  /* Typography */
  --font-basis: 'Basis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-basis-mono: 'Basis Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.2;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1.1;
  --tracking-heading-sm: -0.96px;
  --text-heading: 60px;
  --leading-heading: 1;
  --tracking-heading: -1.2px;
  --text-heading-lg: 110px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -4.4px;
  --text-display: 226px;
  --leading-display: 1;
  --tracking-display: -9.04px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-200: 200px;
}
```