# Ragged Edge

> Ragged Edge — Style Reference

## Prompt Content

```
# Ragged Edge — Style Reference
> Editorial brutalism trên nền đá cẩm thạch trắng. Hãy tưởng tượng sự tự tin về typography của Vogue kết hợp với sự kiềm chế màu sắc của một gallery Berlin — toàn mực và khoảng không, với một mảng màu duy nhất dùng như dấu chấm than, không phải trang trí.

**Theme:** light

Ragged Edge là một website tư vấn thương hiệu đầy tự tin, vận hành dựa trên kỷ luật gần như đơn sắc hoàn toàn: mực gần-đen trên nền trắng, với một chút violet bão hòa được dùng rất tiết kiệm làm accent viền, và một hero gradient full-bleed duy nhất — sự kiện màu sắc duy nhất trên homepage. Typography là toàn bộ cá tính — một display face chữ hoa dãn cực rộng (ABCDiatypeExpanded) đảm nhiệm vai trò "hét to", trong khi một serif tinh tế (Grit) đảm nhiệm vai trò "nói chuyện", tạo ra sự căng thẳng giữa typography tạp chí editorial và letterforms display brutalism. Layout mang tính maximalist về tỷ lệ (hero full-bleed, khoảng cách section 180px) nhưng minimal về bảng màu, và mọi bề mặt tương tác đều có dạng pill với bán kính trong khoảng 40–64px, tạo cho mọi button và nav item một dạng capsule mềm mại tương phản với kiểu chữ expanded góc cạnh.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Obsidian Ink | `#181f1f` | `--color-obsidian-ink` | Primary text, đường viền mảnh (hairline), action buttons dạng fill — màu gần-đen chủ đạo chiếm 90% giao diện |
| Paper White | `#ffffff` | `--color-paper-white` | Canvas nền, inverted text trên khối tối, viền nav/button |
| Fog | `#d1d2d2` | `--color-fog` | Đường phân cách nhẹ và viền phụ nơi Obsidian quá nặng |
| Ash | `#a3a5a5` | `--color-ash` | Helper text mờ, viền button không hoạt động, metadata phụ |
| Graphite | `#374151` | `--color-graphite` | Secondary body text và icon strokes nhẹ nơi cần đen nhạt hơn |
| True Black | `#000000` | `--color-true-black` | Đường phân cách navigation và surface backing cho một số khối |
| Mint Wash | `#eaf7f3` | `--color-mint-wash` | Bề mặt pha màu nhẹ cho nền nav và các section thở — màu xanh lá thoáng qua để làm ấm canvas trắng |
| Deep Teal | `#1f3233` | `--color-deep-teal` | Khối surface tối dùng làm khung case study và panel phủ ảnh |
| Iris Voltage | `#516fea` | `--color-iris-voltage` | Chỉ dùng làm viền action outlined — accent màu sắc duy nhất; xuất hiện dưới dạng vòng violet quanh secondary call-to-action buttons trên nền đơn sắc |
| Solar Bloom | `linear-gradient(0deg, rgba(255, 194, 64, 0), rgb(255, 194, 64) 25%, rgb(255, 196, 244) 50%, rgb(150, 235, 235) 75%, rgba(150, 235, 235, 0) 100%)` | `--color-solar-bloom` | Điểm dừng gradient hero — vàng ấm neo ở đầu gradient wash full-bleed |

## Tokens — Typography

### ABCDiatypeExpanded-Bold — Display, brand logo, section headings, project titles, và nav labels. Các letterforms expanded cực rộng (letter-spacing -0.02em ở 78–82px) là yếu tố đặc trưng — chữ hoa, không bao giờ đặt nhỏ dưới 10px, và chỉ dành cho những khoảnh khắc đòi hỏi trọng lượng thị giác. Kích thước 78–82px lấp đầy toàn bộ chiều rộng canvas hero. Weight giữ ở 400 vì độ dãn (expansion) đã cung cấp đủ trọng lượng; nếu đậm hơn sẽ làm méo tỷ lệ hình học. · `--font-abcdiatypeexpanded-bold`
- **Thay thế:** Druk Wide, Antonio Expanded, Bebas Neue (chỉ dùng fallback — không có substitute nào khớp chính xác độ dãn)
- **Weights:** 400
- **Kích thước:** 10px, 12px, 16px, 20px, 40px, 78px, 82px
- **Line height:** 1.10–1.20 cho display, 2.00 cho dùng dọc/xoay
- **Letter spacing:** -0.02em ở kích thước display (78–82px), -0.01em ở kích thước trung bình (20–40px), normal ở 10–16px
- **OpenType features:** `"kern"`
- **Vai trò:** Display, brand logo, section headings, project titles, và nav labels. Các letterforms expanded cực rộng (letter-spacing -0.02em ở 78–82px) là yếu tố đặc trưng — chữ hoa, không bao giờ đặt nhỏ dưới 10px, và chỉ dành cho những khoảnh khắc đòi hỏi trọng lượng thị giác. Kích thước 78–82px lấp đầy toàn bộ chiều rộng canvas hero. Weight giữ ở 400 vì độ dãn (expansion) đã cung cấp đủ trọng lượng; nếu đậm hơn sẽ làm méo tỷ lệ hình học.

### Grit-Regular — Tất cả body copy, paragraph text, mô tả, và mid-weight headings. Một serif đương đại với kết cấu tinh tế — mang lại trọng lượng editorial đối trọng với display sans expanded. Weight 400 cho running text, 500 cho cụm từ nhấn mạnh và sub-headings. Kích thước 56px với line-height 1.25 tạo ra các editorial pull-quotes ấn tượng. Kết hợp với ABCDiatypeExpanded bằng cách tương phản sự ấm áp của serif với sự lạnh lùng hình học. · `--font-grit-regular`
- **Thay thế:** Söhne (serif alternative), GT Sectra, Tiempos Text, Lora
- **Weights:** 400, 500
- **Kích thước:** 14px, 16px, 20px, 30px, 56px
- **Line height:** 1.43 cho body, 1.20–1.25 cho headings, 2.60 cho lead paragraphs rộng rãi
- **Letter spacing:** normal
- **OpenType features:** `"kern"`
- **Vai trò:** Tất cả body copy, paragraph text, mô tả, và mid-weight headings. Một serif đương đại với kết cấu tinh tế — mang lại trọng lượng editorial đối trọng với display sans expanded. Weight 400 cho running text, 500 cho cụm từ nhấn mạnh và sub-headings. Kích thước 56px với line-height 1.25 tạo ra các editorial pull-quotes ấn tượng. Kết hợp với ABCDiatypeExpanded bằng cách tương phản sự ấm áp của serif với sự lạnh lùng hình học.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.2 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.25 | — | `--text-subheading` |
| heading | 30px | 1.2 | — | `--text-heading` |
| heading-lg | 40px | 1.15 | -0.4px | `--text-heading-lg` |
| display | 56px | 1.25 | -0.56px | `--text-display` |
| hero | 80px | 1.1 | -1.6px | `--text-hero` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 180 | 180px | `--spacing-180` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 64px |
| cards | 40px |
| inputs | 54px |
| buttons | 64px |
| body-blocks | 40px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 180px
- **Card padding:** 32px
- **Element gap:** 16px

## Components

### Hero Gradient Banner
**Vai trò:** Mở đầu toàn viewport

Gradient full-bleed (vàng → hồng → cyan, 0deg, với đầu trong suốt) lấp đầy toàn bộ viewport. Wordmark 'RAGGED EDGE' đặt giữa bằng ABCDiatypeExpanded-Bold màu trắng ở 80px với -0.02em tracking, kéo dài gần như edge-to-edge. Không shadow, không overlay — gradient chính là bề mặt.

### Pill Navigation Button
**Vai trò:** Navigation chính và utility navigation

Radius 64px bo tròn, padding dọc 12px / ngang 32px, nền Mint Wash (#eaf7f3) với viền Obsidian Ink (#181f1f) 1px. Label bằng ABCDiatypeExpanded-Bold ở 10–12px, chữ hoa. Nhóm nav pills bên trái, utility pills ('Join', 'Contact') bên phải. Các pill phụ bên phải không có fill — nằm trong suốt trên gradient.

### Outlined Accent Button
**Vai trò:** Secondary call-to-action với điểm nhấn màu sắc

Pill radius 54px, padding ngang 34px, viền 1.5px Iris Voltage (#516fea), fill trắng, label text Obsidian Ink. Viền màu duy nhất trong toàn bộ hệ thống — dành riêng cho các action cần tách biệt khỏi trường nav/button đơn sắc.

### Editorial Headline
**Vai trò:** Câu mở đầu section

Grit-Regular weight 500 ở 56px, Obsidian Ink, line-height 1.25, -0.01em tracking. Thường được theo sau bởi một serif body paragraph ở 20–30px / 1.43 line-height với top margin 180px rộng rãi ngăn cách với section trước đó.

### Case Study Split Block
**Vai trò:** Trình diễn dự án với layout text-trái, ảnh-phải

Grid hai cột tỷ lệ ~5/7. Cột trái: tên dự án bằng ABCDiatypeExpanded-Bold ở 20–40px, sau đó mô tả ngắn Grit-Regular serif (20px / 1.43), sau đó tagline sans-serif đậm và chi tiết địa điểm bằng Grit weight 500 ở 14px. Cột phải: ảnh full-bleed hoặc panel màu khối (ví dụ: khối maroon Free Soul) với tên dự án xoay 90° bằng ABCDiatypeExpanded màu trắng.

### Vertical Project Mark
**Vai trò:** Nhận diện phủ trên ảnh

ABCDiatypeExpanded-Bold màu trắng ở 16–20px, xoay -90°, đặt giữa trong một khối ảnh màu đồng nhất. Hoạt động như label dạng watermark trên hình ảnh case study.

### Image-Block Panel
**Vai trò:** Hình ảnh case study full-bleed

Bề mặt media hình chữ nhật lớn, không border-radius ở các cạnh ngoài (chảy sát container), chứa ảnh chụp hoặc màu brand đồng nhất (maroon, deep teal, v.v.). Padding bên trong bằng 0 — type đè trực tiếp lên ảnh.

### Section Divider
**Vai trò:** Ngắt ngang mảnh giữa các dải nội dung

Hairline 1px màu Fog (#d1d2d2) hoặc Obsidian Ink (#181f1f) ở độ mờ rất thấp, trải dài toàn bộ chiều rộng nội dung. Tối giản — khoảng cách dọc 180px rộng rãi đã làm hầu hết công việc phân cách.

## Do's and Don'ts

### Do
- Chỉ dùng ABCDiatypeExpanded-Bold ở 10px trở lên; dưới mức đó các dạng expanded trở nên khó đọc.
- Ghép Grit-Regular body text với ABCDiatypeExpanded-Bold headings — không bao giờ dùng hai serif hoặc hai expanded sans trong cùng một khối.
- Dành khoảng cách section 180px cho các phân chia nội dung chính; dùng 80px cho ngắt trong section.
- Áp radius 64px cho tất cả bề mặt nav và button; 40–54px cho khối nội dung body.
- Chỉ dùng Iris Voltage (#516fea) làm viền 1.5px trên outlined buttons — không bao giờ dùng làm fill, không bao giờ dùng trên text.
- Để hero gradient là bề mặt màu sắc duy nhất trên bất kỳ trang nào; tất cả section tiếp theo giữ trên nền trắng hoặc mint.
- Đặt hero display text ở 78–82px với -0.02em tracking để đạt hiệu ứng brand mark edge-to-edge.

### Don't
- Không thêm accent colors phụ — hệ thống 98% đơn sắc; một màu sắc thứ hai phá vỡ kỷ luật.
- Không áp box-shadows ở bất kỳ đâu — chiều sâu đến từ sự chuyển tông bề mặt, không phải độ cao.
- Không dùng ABCDiatypeExpanded cho body copy dài hơn 4–5 từ; đây là display face, không phải running-text face.
- Không căn giữa khối body text; layout editorial đọc căn trái với left margin rộng rãi.
- Không dùng border-radius dưới 40px trên bất kỳ container nào — góc sắc xung đột với hệ thống pill-button.
- Không đặt Iris Voltage trên nền tối; nó mất vai trò accent trên bề mặt tương phản cao.
- Không đặt hero gradient ở hướng trên 0deg hoặc thay đổi số điểm dừng; luồng hướng là một phần của đặc trưng.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Paper White | `#ffffff` | Canvas trang chính và hầu hết các section nội dung |
| 2 | Mint Wash | `#eaf7f3` | Nền section pha màu, đế nav pill — thêm ấm áp tinh tế |
| 3 | Deep Teal | `#1f3233` | Khung ảnh/panel tối cho các khối case study |
| 4 | Obsidian Ink | `#181f1f` | Bề mặt tối cao nhất — hero overlay, footer |

## Elevation

Không có shadows. Chiều sâu đạt được thông qua tương phản tông màu (trắng → mint → teal → obsidian) và khoảng cách rộng rãi, không phải drop-shadows. Giao diện đọc như ấn phẩm editorial phẳng, không phải UI skeuomorphic.

## Imagery

Hình ảnh do case study dẫn dắt: ảnh chụp hình chữ nhật lớn và ảnh brand màu đồng nhất chảy sát mép container với zero border-radius ở ranh giới ngoài. Ảnh case study không mang bối cảnh lifestyle — chúng là crop sản phẩm, bao bì, hoặc ảnh chụp môi trường brand lấp đầy khung hình. Một động tác đặc trưng là xoay tên dự án 90° bằng ABCDiatypeExpanded màu trắng dưới dạng watermark dọc phủ trực tiếp lên panel màu đồng nhất (maroon, teal, v.v.). Không có illustrations, không icon ngoài chevron và mũi tên đơn giản. Hình ảnh 'trang trí' duy nhất là hero gradient full-bleed — một wash vàng sang hồng sang cyan chảy, hoạt động như khoảnh khắc màu sắc duy nhất của site. Xử lý ảnh mang phong cách editorial: tương phản cao, thường mang cảm giác duotone, luôn full-bleed trong khối của nó.

## Layout

Hero full-bleed với wordmark display căn giữa, sau đó các section trắng và mint xen kẽ cách nhau bởi khoảng cách dọc 180px. Layout dưới fold chuyển sang split 2 cột: text-trái ở ~5/12 chiều rộng, ảnh-phải ở ~7/12 chiều rộng, cho các khối case study. Không có sidebar navigation. Navigation cấp cao nhất là một hàng ngang duy nhất gồm các pill buttons nằm trực tiếp trên hero gradient. Mật độ nội dung thấp — mỗi section có toàn bộ chiều cao viewport để thở. Case studies xếp chồng dọc với text/ảnh đổi bên khi trang cuộn. Nhịp điệu tổng thể là tạp chí editorial: headline, khoảng không rộng, ảnh, headline, khoảng không, ảnh — không bao giờ có card grids hoặc feature blocks dày đặc.

## Agent Prompt Guide

**Quick Color Reference**
- text: #181f1f (Obsidian Ink)
- background: #ffffff (Paper White)
- border: #d1d2d2 (Fog) cho nhẹ, #181f1f cho mạnh
- accent: #516fea (Iris Voltage) — chỉ outlined, không bao giờ làm fill
- tinted surface: #eaf7f3 (Mint Wash)
- primary action: #181f1f (filled action)

**Example Component Prompts**

1. *Tạo một hero section*: Nền gradient full-bleed `linear-gradient(0deg, rgba(255,194,64,0), rgb(255,194,64), rgb(255,196,244), rgb(150,235,235), rgba(150,235,235,0))`. Wordmark display căn giữa bằng ABCDiatypeExpanded-Bold màu trắng ở 82px, line-height 1.10, letter-spacing -1.6px, kéo dài edge-to-edge. Không có button trong hero — nav là riêng biệt.

2. Tạo một Primary Action Button: Nền #181f1f, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng dạng fill này cho CTA chính.

3. *Tạo một case study split block*: Grid hai cột (5fr 7fr). Trái: tên dự án bằng ABCDiatypeExpanded-Bold 20px, sau đó Grit-Regular 20px/1.43 body text màu Obsidian Ink, sau đó chi tiết địa điểm bằng Grit 500 ở 14px màu Graphite (#374151). Phải: panel màu đồng nhất full-bleed (dùng #1f3233 Deep Teal làm mặc định) với tên dự án xoay -90° bằng ABCDiatypeExpanded-Bold màu trắng 20px, căn giữa.

4. *Tạo một outlined accent button*: border-radius 54px, padding ngang 34px, padding dọc 11px, viền 1.5px Iris Voltage (#516fea), fill trắng, label Grit-Regular 14px Obsidian Ink. Dùng tiết kiệm — đây là UI element màu sắc duy nhất.

5. *Tạo một editorial section header*: Grit-Regular weight 500 ở 56px, Obsidian Ink, line-height 1.25, letter-spacing -0.56px. Theo sau bởi một serif body paragraph ở 20px/1.43, max-width 720px, với margin-top 180px từ section trước đó.

## Typography Pairing Rules

Site vận hành trên hệ thống hai font nghiêm ngặt và sự tương phản chính là bản sắc: ABCDiatypeExpanded-Bold là dấu chấm than thị giác — hình học, rộng, chữ hoa, đặt lớn. Grit-Regular là lời thì thầm editorial — serif, ấm áp, dễ đọc, đặt ở kích thước con người. Không bao giờ dùng ABCDiatypeExpanded cho câu dài hơn 4–5 từ. Không bao giờ đặt Grit ở kích thước display (56px+) mà không có line-height rộng (1.25+). Letter-spacing của font expanded thắt chặt khi kích thước tăng: -0.01em ở 20–40px, -0.02em ở 78–82px. Grit giữ tracking normal ở mọi kích thước. Cả hai font đều dùng kerning (tính năng "kern").

## Similar Brands

- **Pentagram** — Cùng kỷ luật editorial-đơn sắc với bold display typography và ảnh case study full-bleed — cả hai đều coi type là tài sản thương hiệu chính
- **Manual (design agency)** — Giống hệt thẩm mỹ pill-button navigation, khoảng cách section rộng rãi, và sự căng thẳng serif/sans trong layout case study
- **Locomotive (MTL)** — Cùng cách tiếp cận: một chromatic gradient hero duy nhất trên nền site gần như hoàn toàn đơn sắc bên dưới, với bold expanded display type
- **Bureau Cool** — Chung sự tự tin về typography — oversized display headings, bảng màu kiềm chế, khoảng trắng editorial, và capsule buttons siêu bo tròn

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian-ink: #181f1f;
  --color-paper-white: #ffffff;
  --color-fog: #d1d2d2;
  --color-ash: #a3a5a5;
  --color-graphite: #374151;
  --color-true-black: #000000;
  --color-mint-wash: #eaf7f3;
  --color-deep-teal: #1f3233;
  --color-iris-voltage: #516fea;
  --color-solar-bloom: #ffc240;
  --gradient-solar-bloom: linear-gradient(0deg, rgba(255, 194, 64, 0), rgb(255, 194, 64) 25%, rgb(255, 196, 244) 50%, rgb(150, 235, 235) 75%, rgba(150, 235, 235, 0) 100%);

  /* Typography — Font Families */
  --font-abcdiatypeexpanded-bold: 'ABCDiatypeExpanded-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-grit-regular: 'Grit-Regular', 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.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading: 30px;
  --leading-heading: 1.2;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.4px;
  --text-display: 56px;
  --leading-display: 1.25;
  --tracking-display: -0.56px;
  --text-hero: 80px;
  --leading-hero: 1.1;
  --tracking-hero: -1.6px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-180: 180px;
  --spacing-200: 200px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 180px;
  --card-padding: 32px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-3xl: 40px;
  --radius-full: 54px;
  --radius-full-2: 64px;

  /* Named Radii */
  --radius-nav: 64px;
  --radius-cards: 40px;
  --radius-inputs: 54px;
  --radius-buttons: 64px;
  --radius-body-blocks: 40px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-mint-wash: #eaf7f3;
  --surface-deep-teal: #1f3233;
  --surface-obsidian-ink: #181f1f;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian-ink: #181f1f;
  --color-paper-white: #ffffff;
  --color-fog: #d1d2d2;
  --color-ash: #a3a5a5;
  --color-graphite: #374151;
  --color-true-black: #000000;
  --color-mint-wash: #eaf7f3;
  --color-deep-teal: #1f3233;
  --color-iris-voltage: #516fea;
  --color-solar-bloom: #ffc240;

  /* Typography */
  --font-abcdiatypeexpanded-bold: 'ABCDiatypeExpanded-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-grit-regular: 'Grit-Regular', 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.43;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading: 30px;
  --leading-heading: 1.2;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.4px;
  --text-display: 56px;
  --leading-display: 1.25;
  --tracking-display: -0.56px;
  --text-hero: 80px;
  --leading-hero: 1.1;
  --tracking-hero: -1.6px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-180: 180px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-3xl: 40px;
  --radius-full: 54px;
  --radius-full-2: 64px;
}
```