# Cosmos

> # Cosmos — Style Reference

## Prompt Content

```
# Cosmos — Style Reference
> Linen gallery wall với floating polaroids

**Theme:** light

Cosmos là một canvas bọc gallery dành cho khám phá hình ảnh: nền kem ấm (#f7f5f3) mang phong cách vải linen chưa xử lý, typography mực đen, và giao diện monochrome nghiêm ngặt — nơi màu sắc chỉ xuất hiện qua hình ảnh do người dùng tuyển chọn. Sản phẩm tin vào sự kiềm chế — chrome vô hình để hình ảnh có thể lên tiếng. Typeface là một custom serif-influenced face duy nhất (cosmosOracle) được kéo chặt với negative tracking, dùng weight 350 cho hero copy để tạo độ mềm mại editorial thay vì sự hung hăng marketing. Các bề mặt phẳng với một signature radius duy nhất (16px) lặp lại trên cards, inputs và video containers. Hero rải các image tile trong một collage tự do bao quanh centered copy, và phần còn lại của trang dàn vào grid ba cột gồm các feature card lấy hình ảnh làm chủ đạo. Không có gradients, không có shadow ngoài shadow tự nhiên của các collage cards, và không có chromatic accents trong chính giao diện.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Linen Canvas | `#f7f5f3` | `--color-linen-canvas` | Nền trang — off-white ấm, không bao giờ là #ffffff tinh khiết ở root, tạo cho giao diện nền giống giấy, gallery-wall |
| Ink Black | `#0d0d0d` | `--color-ink-black` | Neutral tối hỗ trợ cho text, icons và độ tương phản mạnh. Không nâng lên làm màu CTA chính; Borders, dividers, outlined button strokes — dùng ở độ mờ thấp để tạo đường cấu trúc tinh tế, luôn là Ink Black thay vì một gray riêng |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt sáng hỗ trợ cho nền nhẹ và phân cách section. Không nâng lên làm màu CTA chính |
| Stone | `#6e6a69` | `--color-stone` | Body text, secondary icons, inactive UI — mid-gray ấm cho body copy và metadata hỗ trợ |
| Pebble | `#9a9796` | `--color-pebble` | Helper text mờ, disabled states, tertiary icon strokes — gray dễ đọc nhẹ nhất trong dải neutral |

## Tokens — Typography

### cosmosOracle — Single custom face dùng cho mọi thứ. Weight 350 là signature — hero và display copy dùng whisper-weight này thay vì weight 700 thông thường, tạo sự bình tĩnh editorial. Weight 400 cho body, weight 500 dành riêng cho buttons và labels. Negative tracking scale theo kích thước: chặt nhất (-0.05em) ở display 74px, mở dần về normal ở 14px. Line-height thấp trên kích thước lớn (0.80–1.10) ôm sát baseline để headlines đọc như những khối có chủ đích, không phải đoạn văn thoáng. · `--font-cosmosoracle`
- **Thay thế:** GT Super, Fraunces, hoặc bất kỳ high-contrast didone-influenced serif nào có optical sizing; fallback về 'Georgia' nếu không có serif
- **Weights:** 350, 400, 500
- **Sizes:** 14, 15, 16, 18, 24, 26, 33, 38, 58, 66, 74
- **Line height:** 0.80, 1.00, 1.06, 1.08, 1.10, 1.20, 1.25, 1.29, 1.50
- **Letter spacing:** -0.0500em ở 74/66/58px, -0.0400em ở 38/33px, -0.0200em ở 24/26px, -0.0110em ở 18/16px, 0 ở 14/15px
- **OpenType features:** `Chọn old-style figures và discretionary ligatures nếu cosmosOracle hỗ trợ; typeface hoạt động như một didone-meets-grotesque hybrid`
- **Vai trò:** Single custom face dùng cho mọi thứ. Weight 350 là signature — hero và display copy dùng whisper-weight này thay vì weight 700 thông thường, tạo sự bình tĩnh editorial. Weight 400 cho body, weight 500 dành riêng cho buttons và labels. Negative tracking scale theo kích thước: chặt nhất (-0.05em) ở display 74px, mở dần về normal ở 14px. Line-height thấp trên kích thước lớn (0.80–1.10) ôm sát baseline để headlines đọc như những khối có chủ đích, không phải đoạn văn thoáng.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 14px | 1.5 | — | `--text-caption` |
| body | 16px | 1.5 | -0.18px | `--text-body` |
| subheading | 18px | 1.29 | -0.2px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |
| heading | 33px | 1.1 | -1.32px | `--text-heading` |
| heading-lg | 38px | 1.08 | -1.52px | `--text-heading-lg` |
| display | 58px | 1.06 | -2.32px | `--text-display` |
| display-xl | 74px | 0.8 | -3.7px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 72 | 72px | `--spacing-72` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 16px |
| inputs | 16px |
| buttons | 16px |
| imageTiles | 12px |
| videoContainer | 16px |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 80px
- **Card padding:** 16px
- **Element gap:** 24px

## Components

### Primary Filled Button
**Vai trò:** Hành động chuyển đổi chính (Sign up)

Fill Ink Black (#0d0d0d), text Paper White (#ffffff), cosmosOracle weight 500, 16px font-size, 16px border-radius, 16px vertical / 24px horizontal padding. Chặt, dạng pill nhưng vuông ở radius. Không shadow, không border.

### Secondary Outlined Button
**Vai trò:** Hành động phụ (Get the app, Login)

Fill Paper White (#ffffff), border Ink Black 1px ở độ mờ ~15%, text Ink Black, 16px radius, 16px/24px padding. Kích thước giống hệt primary button để ghép thành hàng hai nút.

### Pill Navigation Bar
**Vai trò:** Navigation nổi đầu trang

Một pill ngang duy nhất chứa logo (dot cluster glyph 8 chấm), các link Explore / Careers, search input căn giữa, và Login / Sign up. Nền Paper White với border nhẹ, 9999px radius, nổi ngay dưới cạnh trên của viewport, không shadow.

### Search Input
**Vai trò:** Tìm kiếm toàn cục bên trong nav pill

Text input không border với icon magnifier ở đầu, placeholder 'Search Cosmos...' màu Stone (#6e6a69). Fill trong suốt để nằm gọn trong nav pill. Text 16px, weight 400.

### Floating Image Tile
**Vai trò:** Ảnh collage rải rác trong hero

Ảnh nội dung người dùng được crop với border-radius ~12px, nổi ở góc xoay nhẹ hoặc trong grid lỏng lẻo xung quanh hero text. Không caption, không border, không shadow — bản thân ảnh là component. Kích thước 60–140px, được đặt absolute xung quanh headline căn giữa.

### Feature Image Card
**Vai trò:** Hàng ba feature thể hiện khả năng sản phẩm

Card lớn lấy hình ảnh làm chủ đạo với 16px radius. Ảnh phủ kín card edge-to-edge; bên dưới là label cosmosOracle weight 400 ở 18px (ví dụ 'By color'). Không border nhìn thấy, không shadow, không background color — ảnh định nghĩa card. Ba card nằm trong grid 3 cột với gap 24px.

### Video Container
**Vai trò:** Nhúng video/phim full-bleed

Container 16px-radius trải rộng theo page max-width, chứa poster video với animation loading 9-dot màu trắng ở giữa. Text overlay chia đôi: 'Watch' căn trái và 'the film' căn phải ở 38px weight 350, với tam giác play ở giữa. Caption nhỏ 'featuring Odessa Azion' căn giữa gần cuối.

### AI Content Detection Overlay
**Vai trò:** Thẻ cảnh báo nội dung do AI tạo

Bề mặt Paper White với 12px radius, rộng ~280px, đặt ở góc trên bên phải trong feature card. Tiêu đề 'AI content' Ink Black 16px weight 500, body 'Content detected as likely generated by AI' Stone 14px. Bên dưới: ba text buttons — 'Show' (Ink Black, 16px radius, fill trắng), 'Blur' (neutral), 'Hide' (neutral).

### Text Link with Play Icon
**Vai trò:** Inline call-to-action link (Watch our new film)

Inline ở 18px weight 400, Ink Black, có icon tam giác play nhỏ phía trước. Không underline mặc định; chuyển màu nhẹ khi hover. Dùng cho tertiary navigation cues không cạnh tranh với hàng nút.

### Theme Toggle
**Vai trò:** Công tắc light/dark mode trong nav

Nút nhỏ chỉ icon (glyph mặt trời/mặt trăng) ở cạnh phải của nav pill, trước cụm Login/Sign up. Vùng chạm 32×32px, không border nhìn thấy, 9999px radius trên hover background.

### Eyebrow Label
**Vai trò:** Tiêu đề section nhỏ viết hoa trước tiêu đề chính

cosmosOracle weight 500, 15–16px, tracked ở 0em, hiển thị dạng 'COSMOS' phía trên hero headline. Tạo tone editorial: nhỏ, all-caps, gần như một con dấu hơn là label.

### Dot Cluster Logo
**Vai trò:** Brand mark trong nav và favicon

Tám chấm đen nhỏ xếp trong grid 3×3 với chấm trung tâm bị loại bỏ, trông như bông hoa nhỏ hoặc dấu hoa thị. Luôn là Ink Black trên Linen Canvas, luôn ở ~18px trong nav, lớn hơn trong ngữ cảnh marketing.

## Do's and Don'ts

### Nên làm
- Chỉ dùng Linen Canvas (#f7f5f3) làm nền root — không bao giờ dùng trắng tinh khiết ở cấp trang; màu trắng chỉ dành cho cards và inputs.
- Áp dụng 16px border-radius cho mọi container, button và input — đây là signature radius duy nhất của hệ thống.
- Đặt hero và display copy ở weight 350 với letter-spacing từ -0.04em đến -0.05em; không in đậm headlines trên 400.
- Luôn ghép mỗi primary filled button với một outlined secondary có padding và radius giống hệt để chúng đọc như một bộ.
- Để hình ảnh người dùng mang toàn bộ nội dung màu sắc; bảng màu UI chỉ giới hạn ở đen/trắng/kem/xám.
- Dùng gap 24px giữa các grid cards và padding 16px bên trong cards làm nhịp điệu nội dung mặc định.
- Đặt nav dưới dạng một floating pill duy nhất với 9999px radius ở đầu mỗi trang.

### Không nên làm
- Không đưa accent colors (đỏ, xanh dương, xanh lá) vào interface chrome — màu sắc chỉ thuộc về nội dung người dùng.
- Không dùng weights trên 500 trong cosmosOracle; typeface không được thiết kế cho bold display và sẽ trông thô.
- Không áp shadow cho cards hoặc buttons; hệ thống cố tình phẳng và dựa vào radius và độ tương phản bề mặt.
- Không đặt body text lớn hơn 18px hoặc nhỏ hơn 14px; cosmosOracle được thiết kế cho dải body chặt 14–18px.
- Không trộn lẫn border-radius values trong cùng một trang (tránh radius 8px hoặc 24px) — 16px là quy tắc, 12px chỉ dành cho image tiles.
- Không dùng #000000 tinh khiết; luôn dùng #0d0d0d để màu đen ấm lên trên nền kem.
- Không đặt nền có màu phía sau text; tất cả text nằm trên Linen Canvas, Paper White hoặc trực tiếp trên hình ảnh.

## Surfaces

| Cấp độ | Name | Value | Mục đích |
|--------|------|-------|----------|
| 0 | Linen Canvas | `#f7f5f3` | Nền trang root, gallery wall |
| 1 | Paper White | `#ffffff` | Cards, inputs, outlined buttons — bề mặt nâng cao duy nhất trong hệ thống |

## Elevation

Cosmos cố tình phẳng: không drop shadows trên cards, buttons hoặc navigation pill. Elevation được truyền đạt hoàn toàn qua độ tương phản màu bề mặt — Linen Canvas (#f7f5f3) ở nền, Paper White (#ffffff) cho cards và inputs nằm trên. Độ sâu duy nhất trong giao diện đến từ các image tile rải rác trong hero, trông như polaroids thật trên canvas. Chống lại việc thêm shadow; sự phẳng lặng chính là điểm mấu chốt.

## Imagery

Hình ảnh là sản phẩm, không phải trang trí. Hero rải các image tile nhỏ đã crop (60–140px) với 12px radius xung quanh text căn giữa như polaroids ghim trên gallery wall. Ba feature card dẫn đầu bằng ảnh và collage edge-to-edge — hoa đỏ rực rỡ, silhouette túi beige ấm áp, và chân dung tím đầy tâm trạng — mỗi ảnh mang màu sắc duy nhất trong giao diện. Video container dùng still điện ảnh (nội thất lát gạch xanh, soft focus) với animation loading 9-dot màu trắng phủ lên. Không có illustrations, không có đồ họa trừu tượng, không có 3D renders. Icons là stroked linework tối giản màu Ink Black, dùng tiết kiệm (magnifier, play triangle, sun/moon, social glyphs). Phong cách nhiếp ảnh trong collage mang cảm giác curated và editorial: độ tương phản cao, chủ thể đa dạng, không có xử lý màu thống nhất — sự đa dạng là điểm chính.

## Layout

Trang được căn giữa với content well max-width ~1280px, mặc dù hero dùng full-bleed positioning cho các image tile rải rác. Hero là một text stack căn giữa: eyebrow ('COSMOS') → headline 74px → hàng hai nút, tất cả căn giữa theo chiều dọc và ngang trong khi các image tile nổi xung quanh rìa với góc xoay đa dạng. Bên dưới hero, video container trải rộng toàn bộ content width với 16px radius. Feature row là grid 3 cột nghiêm ngặt với gap 24px, mỗi ô dẫn đầu bằng ảnh và kết thúc bằng label 18px. Navigation là một floating pill bar duy nhất nổi gần cạnh trên của viewport trên mọi trang, chứa logo, hai text links, search căn giữa, theme toggle và Login/Sign up — không bao giờ nhân đôi thành secondary bar. Nhịp điệu dọc giữa các section rộng rãi (80px+), cho mỗi dải không gian thở như các phòng gallery riêng biệt.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text: #0d0d0d (Ink Black)
- background: #f7f5f3 (Linen Canvas)
- surface/card: #ffffff (Paper White)
- muted text: #6e6a69 (Stone)
- border: #0d0d0d ở độ mờ 10–15%
- primary action: không có màu CTA riêng biệt

**3-5 Ví dụ Component Prompts**
1. *Hero headline*: Căn giữa headline 74px cosmosOracle weight 350 màu #0d0d0d với letter-spacing -3.7px và line-height 0.80. Phía trên đặt eyebrow 'COSMOS' 15px weight 500 màu Ink Black, tracked ở 0. Phía dưới đặt hàng hai nút: nút filled Ink Black với text trắng 16px weight 500, 16px radius, 16px/24px padding, bên cạnh nút outlined trắng với border Ink Black 1px ở độ mờ 12%, radius và padding giống hệt. Tất cả trên nền #f7f5f3.

2. *Feature image card*: Card grid 3 cột với 16px radius, ảnh edge-to-edge phủ kín card (không padding quanh ảnh), và label 18px cosmosOracle weight 400 màu Ink Black bên dưới ảnh với spacing trên 16px. Không border, không shadow. Gap giữa các card: 24px.

3. *Floating image tile (hero collage)*: Ảnh nội dung người dùng hình vuông 100px với 12px border-radius, đặt absolute với góc xoay nhẹ 2–4°, không border, không shadow, nằm trên Linen Canvas xung quanh hero text. Không caption.

4. *Video container*: Container 16:9 full-width (trong max-width 1280px) với 16px radius, chứa poster ảnh. Phủ lên grid 3×3 gồm 8 chấm trắng (bỏ chấm trung tâm) ở độ mờ 60% tại trung tâm. Đặt 'Watch' căn trái và 'the film' căn phải ở 38px weight 350 màu trắng, với tam giác play nhỏ màu trắng ở giữa. Caption nhỏ 14px 'featuring …' căn giữa gần cuối màu trắng ở độ mờ 70%.

5. *AI content overlay*: Card Paper White (#ffffff) rộng 280px với 12px radius, đặt ở góc trên bên phải của feature image. Tiêu đề 'AI content' 16px weight 500 Ink Black, body text 'Content detected as likely generated by AI' 14px Stone. Ba text buttons bên dưới: 'Show' dạng nút filled Ink Black nhỏ (16px radius, text trắng, 8px/16px padding), 'Blur' và 'Hide' dạng neutral text buttons màu Stone.

## Typography Signature

Lựa chọn typography định hình là dùng whisper-weight (350) serif ở kích thước display. Hầu hết các product site hiện đại chọn weight 600–800 cho hero copy; Cosmos đi ngược lại, để độ tương phản nét cao của serif và tight tracking mang lại uy quyền mà không cần âm lượng. Negative letter-spacing scale mạnh theo kích thước (-0.05em ở 74px, 0 ở 14px), đó là điều làm cho các headline lớn mang cảm giác kiến trúc hơn là trang trí. Khi tạo lại trang, không bao giờ thay thế display bằng bold sans — soft serif là toàn bộ giọng nói thương hiệu.

## Image-First Component Rule

Cosmos là một sản phẩm hình ảnh, vì vậy hệ thống component cố tình giới hạn UI chrome và để hình ảnh làm việc. Quy tắc: nếu một component không phải navigation, input hoặc button, thì nó có lẽ là image card với text label nhỏ. Chống lại việc xây dựng dashboards, tables hoặc UI nhiều dữ liệu; hệ thống này dành cho galleries, feeds và bề mặt khám phá nơi hình ảnh là đơn vị giá trị.

## Similar Brands

- **Are.na** — Cùng nền kem ấm, UI monochrome không cản trở hình ảnh do người dùng tuyển chọn, và cách tiếp cận single-typeface editorial cho sản phẩm bookmarking hình ảnh
- **Pinterest** — Hệ thống grid lấy hình ảnh làm chủ đạo và triết lý màu sắc thuộc về nội dung người dùng, không phải interface chrome
- **VSCO** — Thẩm mỹ gallery-wall với floating image tiles, UI text tối giản, và nền neutral ấm duy nhất làm khung thay vì cạnh tranh với nhiếp ảnh
- **Cargo (cargo.site)** — Công cụ khám phá hình ảnh lấy portfolio làm trọng tâm, dùng typography kiềm chế và whitespace rộng rãi để hình ảnh người sáng tạo chiếm ưu thế

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-linen-canvas: #f7f5f3;
  --color-ink-black: #0d0d0d;
  --color-paper-white: #ffffff;
  --color-stone: #6e6a69;
  --color-pebble: #9a9796;

  /* Typography — Font Families */
  --font-cosmosoracle: 'cosmosOracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.18px;
  --text-subheading: 18px;
  --leading-subheading: 1.29;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 33px;
  --leading-heading: 1.1;
  --tracking-heading: -1.32px;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1.08;
  --tracking-heading-lg: -1.52px;
  --text-display: 58px;
  --leading-display: 1.06;
  --tracking-display: -2.32px;
  --text-display-xl: 74px;
  --leading-display-xl: 0.8;
  --tracking-display-xl: -3.7px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-200: 200px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 16px;
  --element-gap: 24px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 19px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-inputs: 16px;
  --radius-buttons: 16px;
  --radius-imagetiles: 12px;
  --radius-videocontainer: 16px;

  /* Surfaces */
  --surface-linen-canvas: #f7f5f3;
  --surface-paper-white: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-linen-canvas: #f7f5f3;
  --color-ink-black: #0d0d0d;
  --color-paper-white: #ffffff;
  --color-stone: #6e6a69;
  --color-pebble: #9a9796;

  /* Typography */
  --font-cosmosoracle: 'cosmosOracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.18px;
  --text-subheading: 18px;
  --leading-subheading: 1.29;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.48px;
  --text-heading: 33px;
  --leading-heading: 1.1;
  --tracking-heading: -1.32px;
  --text-heading-lg: 38px;
  --leading-heading-lg: 1.08;
  --tracking-heading-lg: -1.52px;
  --text-display: 58px;
  --leading-display: 1.06;
  --tracking-display: -2.32px;
  --text-display-xl: 74px;
  --leading-display-xl: 0.8;
  --tracking-display-xl: -3.7px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-72: 72px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 19px;
}
```