# Telescope

> # Kính thiên văn — Tham chiếu phong cách

## Prompt Content

```
# Telescope — Style Reference
> Editorial pasteboard trên giấy kem. Một canvas bone-white ấm áp với ảnh tạp chí full-bleed, một điểm nhấn lime sáng duy nhất, và serif headlines trải dài quanh ảnh như một art director's spread.

**Theme:** light

Telescope mang phong cách tạp chí thời trang editorial in trên giấy kem ấm: một thế giới gần như đơn sắc với canvas bone-white, chữ gần đen ấm áp, và ảnh editorial full-bleed, chỉ được chấm phá bởi một điểm nhấn lime rực rỡ duy nhất — tín hiệu cho bề mặt tương tác duy nhất. UI được tước bỏ đến tận xương — không card, không panel, không decorative chrome — với một bottom bar cố định bằng mono caps làm toàn bộ nhiệm vụ navigation và ảnh trôi nổi tự do vào headline như thể được dàn trang trên pasteboard. Typography đảm nhận phần nặng nhất: một custom serif nhẹ nhàng ở cỡ lớn với negative tracking chặt chẽ thì thầm thay vì la hét, trong khi mono labels ở 12px là kết cấu typographic duy nhất ngoài hệ thống serif. Mọi thứ đều sắc nét ở góc 2px, spacing thoáng đãng, và màu lime green được phân bổ dè sẻn — một nút, không gì khác.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Bone Paper | `#f4f3f0` | `--color-bone-paper` | Page canvas — màu off-white ấm áp gợi giấy in, không phải màn hình trắng. Mọi thứ đều nằm trên bề mặt này |
| Ink | `#1a1915` | `--color-ink` | Text chính, body copy, heading, border, và hairline rules. Màu gần đen ấm áp, không bao giờ là #000 thuần, để độ tương phản với Bone Paper có cảm giác in ấn thay vì kỹ thuật số |
| Ash | `#82868e` | `--color-ash` | Secondary text, meta labels, và subtle borders. Là điểm đối trọng mát mẻ với Ink ấm áp — dùng khi type cần lùi lại mà vẫn giữ legibility |
| Pure White | `#ffffff` | `--color-pure-white` | Surface layer phía trên Bone Paper dành cho inline cards và bottom navigation bar. Hiếm khi dùng — hầu hết bề mặt đều nằm trên Bone |
| Lime Pulse | `#e3f794` | `--color-lime-pulse` | Green wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung. Không nâng cấp nó thành primary CTA color |

## Tokens — Typography

### Beausite — Display và body face duy nhất. Dùng ở bốn cỡ: 19px cho body và card text, 23px cho emphasized body và sub-headings, 55px cho section headings, và 57px cho hero headlines. Single weight (400) ở mọi cỡ — hệ thống dựa vào size và negative tracking để tạo hierarchy, không dùng weight contrast. Letter-spacing thắt chặt mạnh ở cỡ lớn: -0.007em ở 19–23px, sâu hơn thành -0.017em ở 55px và -0.020em ở 57px. Negative tracking này là signature — nó mang lại cho serif cảm giác hiện đại, chặt chẽ, fashion-editorial thay vì kiểu sách vở. · `--font-beausite`
- **Substitute:** GT Super, Tiempos Text, hoặc Domaine Display — bất kỳ contemporary serif nào có refined terminals và display behavior tốt
- **Weights:** 400
- **Sizes:** 19, 23, 55, 57
- **Line height:** 1.05–1.15
- **Letter spacing:** -0.0200em, -0.0170em, -0.0070em
- **Vai trò:** Display và body face duy nhất. Dùng ở bốn cỡ: 19px cho body và card text, 23px cho emphasized body và sub-headings, 55px cho section headings, và 57px cho hero headlines. Single weight (400) ở mọi cỡ — hệ thống dựa vào size và negative tracking để tạo hierarchy, không dùng weight contrast. Letter-spacing thắt chặt mạnh ở cỡ lớn: -0.007em ở 19–23px, sâu hơn thành -0.017em ở 55px và -0.020em ở 57px. Negative tracking này là signature — nó mang lại cho serif cảm giác hiện đại, chặt chẽ, fashion-editorial thay vì kiểu sách vở.

### DM Mono — Chỉ dùng cho UI chrome: label 'CURRENTLY IN BETA', text nút 'LOGIN' và 'SIGN UP', và indicator 'SCROLL'. Đặt ở dạng all-caps cỡ 12px với tracking +0.03em (0.36px), tạo ra kết cấu cơ học giãn rộng tương phản mạnh với serif hữu cơ của Beausite. Đây là kết cấu typographic duy nhất ngoài hệ thống serif. · `--font-dm-mono`
- **Substitute:** JetBrains Mono, IBM Plex Mono, hoặc Space Mono
- **Weights:** 400
- **Sizes:** 12
- **Line height:** 1.10
- **Letter spacing:** 0.0300em
- **Vai trò:** Chỉ dùng cho UI chrome: label 'CURRENTLY IN BETA', text nút 'LOGIN' và 'SIGN UP', và indicator 'SCROLL'. Đặt ở dạng all-caps cỡ 12px với tracking +0.03em (0.36px), tạo ra kết cấu cơ học giãn rộng tương phản mạnh với serif hữu cơ của Beausite. Đây là kết cấu typographic duy nhất ngoài hệ thống serif.

### CM Geom — Một decorative display khổng lồ ở 250px — có thể là brand wordmark hoặc oversized brand-mark element được xử lý như layout sculpture, không phải copy có thể đọc. Line-height 1.00 với tracking -0.002em tối thiểu. Dùng tiết kiệm như một atmospheric hoặc branding element, không bao giờ dùng cho functional text. · `--font-cm-geom`
- **Substitute:** Không có substitute — coi như custom brand element. Nếu cần, có thể xấp xỉ bằng bất kỳ geometric display face nào ở tỷ lệ cực lớn.
- **Weights:** 400
- **Sizes:** 250
- **Line height:** 1.00
- **Letter spacing:** -0.0020em
- **Vai trò:** Một decorative display khổng lồ ở 250px — có thể là brand wordmark hoặc oversized brand-mark element được xử lý như layout sculpture, không phải copy có thể đọc. Line-height 1.00 với tracking -0.002em tối thiểu. Dùng tiết kiệm như một atmospheric hoặc branding element, không bao giờ dùng cho functional text.

### Type Scale

| Vai trò | Cỡ | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.1 | 0.36px | `--text-caption` |
| body-sm | 19px | 1.15 | -0.13px | `--text-body-sm` |
| body | 23px | 1.15 | -0.16px | `--text-body` |
| heading | 55px | 1.05 | -0.94px | `--text-heading` |
| heading-lg | 57px | 1.05 | -1.14px | `--text-heading-lg` |
| display | 250px | 1 | -0.5px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 7 | 7px | `--spacing-7` |
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 19 | 19px | `--spacing-19` |
| 24 | 24px | `--spacing-24` |
| 29 | 29px | `--spacing-29` |
| 41 | 41px | `--spacing-41` |
| 48 | 48px | `--spacing-48` |
| 71 | 71px | `--spacing-71` |
| 135 | 135px | `--spacing-135` |
| 225 | 225px | `--spacing-225` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| all | 2px |
| cards | 2px |
| images | 2px |
| buttons | 2px |

### Layout

- **Section gap:** 48-71px
- **Card padding:** 10-14px
- **Element gap:** 6-10px

## Components

### Bottom Navigation Bar
**Vai trò:** Fixed chrome layer — navigation bền vững duy nhất

Full-width white (#ffffff) bar neo ở đáy viewport. Ba vùng: trái ('CURRENTLY IN BETA' ở DM Mono 12px caps, tracking 0.36px, màu Ink), giữa (Beausite wordmark 'Telescope' ở body weight, với 'LOGIN' và 'SIGN UP' actions ở bên phải), và phải (label 'SCROLL' với icon down-chevron nhỏ màu Ink). Chiều cao khoảng 48–56px. 2px top border màu Ink. Không background blur hay shadow — nằm phẳng trên trang.

### Sign Up Button
**Vai trò:** Primary action duy nhất trong interface

Filled rectangle với Lime Pulse (#e3f794) background, Ink (#1a1915) text ở DM Mono 12px all-caps, tracking 0.36px. 2px border radius — sắc nét, không bo tròn. Padding khoảng 7px ngang, 10px dọc. Không shadow, không hover gradient. Sự cô lập của nó trong màu lime giữa hệ thống đơn sắc khiến nó trở thành thứ ồn ào nhất trên trang.

### Login Link
**Vai trò:** Secondary navigation action trong bottom bar

Text-only 'LOGIN' ở DM Mono 12px caps, màu Ink, tracking 0.36px. Không background, không border. 7px horizontal padding. Nằm ngay bên trái nút Sign Up.

### Beta Status Label
**Vai trò:** Contextual status indicator ở góc trái-dưới của navigation bar

'CURRENTLY IN BETA' ở DM Mono 12px caps, màu Ash (#82868e) hoặc Ink, tracking 0.36px. Không background. Quiet metadata báo hiệu platform đang ở giai đoạn đầu.

### Floating Editorial Photo
**Vai trò:** Ảnh sản phẩm và lifestyle rải rác xung quanh hero headlines

Hình ảnh chữ nhật với 2px border radius, trôi nổi tự do quanh page headline trong một art-directed scatter. Không caption, không border, không shadow — chỉ là raw photographs được dàn trang như magazine contact sheet. Kích thước thay đổi (khoảng 80–160px rộng trên hero). Ảnh editorial đầy màu sắc, không phải product white-background shots.

### Full-Bleed Editorial Hero
**Vai trò:** Section-opening photography cho editorial content blocks

Full-viewport-width photograph không border, không radius, không overlay treatment. Beausite 55–57px headline phủ lên ảnh bằng text trắng hoặc bán trong suốt, căn giữa. Bức ảnh CHÍNH LÀ section — không container, không card, không padding xung quanh.

### Inline Image-in-Headline Composition
**Vai trò:** Signature layout pattern — ảnh cắt ngang dòng chảy của headline

Một headline được render bằng Beausite 55–57px bị chia cắt bởi một bức ảnh nhỏ đặt inline giữa các từ, sao cho dòng đọc chảy quanh ảnh. Ảnh nằm trên cùng baseline với text, 2px radius, kích thước khớp với cap-height của serif xung quanh. Đây là kỹ thuật layout tạp chí, không phải web component tiêu chuẩn.

### Scroll Indicator
**Vai trò:** Lời nhắc nhẹ nhàng để scroll qua hero

'SCROLL' ở DM Mono 12px caps với icon downward chevron nhỏ màu Ink (#1a1915). Neo ở góc dưới-phải của viewport. 2px stroke weight trên chevron.

### Curator Portrait
**Vai trò:** Subject photography cho những người đứng sau recommendations

Full-bleed editorial portrait photograph, không crop hoặc crop lỏng lẻo, dùng làm visual anchor cho curator profiles. Beausite 55–57px white headline phủ lên, căn giữa ngang và dọc. Khung hình tự nhiên của portrait làm toàn bộ công việc composition.

## Do's and Don'ts

### Do
- Dùng Lime Pulse (#e3f794) độc quyền cho nút Sign Up chính. Không bao giờ dùng cho decorative elements, hover states, hay secondary actions.
- Đặt tất cả góc thành 2px radius — images, buttons, cards, mọi thứ. Độ sắc nét đồng nhất này là đặc điểm định hình của hệ thống.
- Render headlines bằng Beausite ở 55–57px với letter-spacing thắt chặt thành -0.94px và -1.14px tương ứng. Negative tracking không phải tùy chọn; nó mang lại cho serif giọng editorial hiện đại.
- Dùng DM Mono 12px với tracking +0.36px ở dạng all-caps cho mọi UI label: status indicators, button text, navigation items. Dành Beausite cho editorial và body content.
- Để trang thở trên Bone Paper (#f4f3f0). Duy trì 48–71px giữa các section chính và 6–10px giữa các inline elements. Canvas kem cần khoảng trống để đọc như giấy.
- Thả ảnh editorial trôi nổi tự do vào layout — quanh headlines, inline giữa các từ, full-bleed như section breaks. Xử lý ảnh như layout elements, không phải content blocks.
- Viết body và card text bằng Beausite 400 ở 19–23px với tracking -0.13 đến -0.16px. Single weight (400) có nghĩa là hierarchy đến từ size và spacing đơn thuần.

### Don't
- Không bao giờ dùng shadows, drop-shadow filters, hay box-elevation effects. Hệ thống là flat; chiều sâu chỉ đến từ photography và surface color contrast.
- Không bao giờ bo tròn góc quá 2px. Không pill buttons, không large radii trên cards, không circular avatars. Góc 2px sắc nét là bất khả thương lượng.
- Không bao giờ áp Lime Pulse cho bất kỳ thứ gì khác ngoài nút Sign Up. Dùng accent cho links, icons, tags, hay highlights sẽ phá hủy giá trị khan hiếm của nó.
- Không bao giờ dùng Ash (#82868e) cho primary body text. Nó chỉ dành cho secondary metadata, borders, và receded labels. Body copy luôn là Ink (#1a1915).
- Không bao giờ đặt Beausite headlines ở bold hay black weight — face chỉ có sẵn ở 400. Hierarchy thông qua size, không bao giờ qua weight contrast.
- Không bao giờ thêm background colors vào ảnh hoặc đặt photographs trong containers có visible borders. Ảnh nên nằm raw trên cream canvas.
- Không bao giờ dùng sans-serif system font cho editorial text. Beausite (hoặc serif substitute của nó) là body và display face duy nhất. DM Mono xử lý UI labels riêng biệt.

## Surfaces

| Cấp | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Bone Paper | `#f4f3f0` | Full-bleed page canvas |
| 1 | Pure White | `#ffffff` | Bottom navigation bar và inline card surfaces |
| 2 | Lime Pulse | `#e3f794` | Primary action button fill |

## Elevation

Flat by design. Interface dùng zero shadows — chiều sâu được truyền đạt qua full-bleed photography và độ tương phản giữa white navigation bar và cream canvas. Sự phẳng này củng cố phép ẩn dụ in ấn/giấy.

## Imagery

Full-bleed editorial photography là phương tiện hình ảnh chính. Ảnh là uncropped hoặc loosely cropped portraits và product/lifestyle shots với ánh sáng tự nhiên và màu sắc phong phú — chất lượng tạp chí, không phải ảnh sản phẩm thương mại điện tử. Floating product images trên hero nằm ở tỷ lệ nhỏ (80–160px) rải rác art-directed quanh headline, không caption, border, hay container. Full-bleed section images trải dài toàn bộ viewport với white serif text phủ lên. Phong cách photography ấm áp, con người, và được tuyển chọn — nên có cảm giác như fashion editorial contact sheet, không phải product catalog. Không illustrations, không abstract graphics, không icons ngoài minimal scroll chevron.

## Layout

Full-bleed editorial layout không có page max-width constraint. Hero dùng centered headline ở giữa thị giác của viewport với photographs rải rác tự do trong whitespace xung quanh ở nhiều kích thước và góc xoay khác nhau. Signature pattern là text bị gián đoạn bởi inline images — headline đọc 'by real [portrait] people' với một bức ảnh nằm giữa các từ trên cùng baseline. Section transitions là full-viewport photographs với overlaid centered headlines. UI bền vững duy nhất là fixed bottom navigation bar (trắng, cao ~48px) chứa beta status, wordmark, login, và sign up. Không top nav, không sidebar, không grid containers — trang đọc từ trên xuống dưới như một magazine spread, với generous vertical breathing room (48–71px) giữa các section.

## Agent Prompt Guide

**Quick Color Reference**
- Text (primary): #1a1915
- Text (secondary): #82868e
- Background (canvas): #f4f3f0
- Background (surface): #ffffff
- Border: #1a1915
- Accent / primary action: không có distinct CTA color

**Example Component Prompts**

1. **Hero với floating editorial photos**: Bone Paper (#f4f3f0) full-bleed background. Centered headline ở Beausite 400 cỡ 57px, màu #1a1915, letter-spacing -1.14px, line-height 1.05. Bao quanh headline với 6–8 bức ảnh editorial nhỏ (100–160px rộng, 2px radius) rải rác tự do trong whitespace xung quanh ở nhiều vị trí khác nhau. Không caption, không border trên ảnh.

2. **Bottom navigation bar**: Fixed white (#ffffff) bar, full width, cao ~48px, 2px top border màu #1a1915. Trái: 'CURRENTLY IN BETA' ở DM Mono 12px caps, màu #82868e, tracking 0.36px. Trái-giữa: 'Telescope' wordmark ở Beausite 400 cỡ 19px, màu #1a1915. Ngay bên phải: 'LOGIN' ở DM Mono 12px caps, #1a1915, sau đó là nút Sign Up filled (Lime Pulse #e3f794 background, Ink #1a1915 text, 2px radius, 10px dọc / 7px ngang padding). Phải: 'SCROLL' ở DM Mono 12px caps với icon down-chevron nhỏ màu #1a1915.

3. **Full-bleed editorial section**: Full-viewport-width photograph (uncropped, không border, không radius) lấp đầy toàn bộ chiều cao section. Overlaid centered ở giữa: headline ở Beausite 400 cỡ 55px, màu #ffffff, letter-spacing -0.94px, line-height 1.05. Text nên nằm ở khoảng 40% từ trên xuống của ảnh.

4. **Inline image-in-headline composition**: Một dòng duy nhất của Beausite 400 cỡ 55px, màu #1a1915, letter-spacing -0.94px, với một bức portrait photograph nhỏ (~80px cao, 2px radius) được chèn inline giữa hai từ trên cùng baseline với text. Dòng nên đọc như: 'by real [photo] people' với ảnh thay thế khoảng trống giữa các từ.

5. **Status badge / label**: 'CURRENTLY IN BETA' ở DM Mono 12px caps, màu #82868e, tracking 0.36px, không background, không border, không padding. Dùng inline như quiet metadata text.

## Similar Brands

- **Are.na** — Cùng cách tiếp cận editorial, minimal-chrome với warm off-white canvas, floating image cards, và serif-first typography để nội dung thở
- **Cereal magazine** — Chung sensibility magazine-spread: cream paper background, full-bleed editorial photography, và tight serif headlines với aggressive negative tracking
- **It's Nice That** — Curatorial media platform với một single accent color được phân bổ cho một action, serif display type, và photography-first layout xử lý trang như contact sheet
- **Aesop (aesop.com)** — Cùng bảng màu warm near-black trên cream-white với một single reserved accent, tight serif typography, và stripped-back UI để product imagery dẫn dắt trang
- **Kinfolk** — Editorial publication aesthetic với warm bone background, generous whitespace, serif ở cỡ lớn, và full-bleed lifestyle photography làm section dividers

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-bone-paper: #f4f3f0;
  --color-ink: #1a1915;
  --color-ash: #82868e;
  --color-pure-white: #ffffff;
  --color-lime-pulse: #e3f794;

  /* Typography — Font Families */
  --font-beausite: 'Beausite', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-cm-geom: 'CM Geom', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.1;
  --tracking-caption: 0.36px;
  --text-body-sm: 19px;
  --leading-body-sm: 1.15;
  --tracking-body-sm: -0.13px;
  --text-body: 23px;
  --leading-body: 1.15;
  --tracking-body: -0.16px;
  --text-heading: 55px;
  --leading-heading: 1.05;
  --tracking-heading: -0.94px;
  --text-heading-lg: 57px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -1.14px;
  --text-display: 250px;
  --leading-display: 1;
  --tracking-display: -0.5px;

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

  /* Spacing */
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-24: 24px;
  --spacing-29: 29px;
  --spacing-41: 41px;
  --spacing-48: 48px;
  --spacing-71: 71px;
  --spacing-135: 135px;
  --spacing-225: 225px;

  /* Layout */
  --section-gap: 48-71px;
  --card-padding: 10-14px;
  --element-gap: 6-10px;

  /* Border Radius */
  --radius-sm: 2px;

  /* Named Radii */
  --radius-all: 2px;
  --radius-cards: 2px;
  --radius-images: 2px;
  --radius-buttons: 2px;

  /* Surfaces */
  --surface-bone-paper: #f4f3f0;
  --surface-pure-white: #ffffff;
  --surface-lime-pulse: #e3f794;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-bone-paper: #f4f3f0;
  --color-ink: #1a1915;
  --color-ash: #82868e;
  --color-pure-white: #ffffff;
  --color-lime-pulse: #e3f794;

  /* Typography */
  --font-beausite: 'Beausite', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-cm-geom: 'CM Geom', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.1;
  --tracking-caption: 0.36px;
  --text-body-sm: 19px;
  --leading-body-sm: 1.15;
  --tracking-body-sm: -0.13px;
  --text-body: 23px;
  --leading-body: 1.15;
  --tracking-body: -0.16px;
  --text-heading: 55px;
  --leading-heading: 1.05;
  --tracking-heading: -0.94px;
  --text-heading-lg: 57px;
  --leading-heading-lg: 1.05;
  --tracking-heading-lg: -1.14px;
  --text-display: 250px;
  --leading-display: 1;
  --tracking-display: -0.5px;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-10: 10px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-19: 19px;
  --spacing-24: 24px;
  --spacing-29: 29px;
  --spacing-41: 41px;
  --spacing-48: 48px;
  --spacing-71: 71px;
  --spacing-135: 135px;
  --spacing-225: 225px;

  /* Border Radius */
  --radius-sm: 2px;
}
```