# Yung Studio

> # Yung Studio — Style Reference

**Yung Studio** — Style Reference

## Prompt Content

```
# Yung Studio — Style Reference
> nét vẽ phấn trắng trên tường gallery đen

**Theme:** dark

Yung Studio hoạt động trong không gian đơn sắc tuyệt đối: một khoảng đen thuần khiết, nơi type trắng và illustration trắng làm tất cả. Ngôn ngữ thị giác mang phong cách gallery — thưa thoáng, tự tin, editorial — với một chút violet (#c692ff) dành riêng làm accent nhẹ nhàng, chỉ xuất hiện ở trạng thái hover hoặc selection. Typography đảm nhận toàn bộ giọng điệu thương hiệu qua hệ thống optical-size PolySans: Slim thì thầm ở body text, Neutral lấp đầy các phần mid-scale, còn Bulky neo giữ hero như display cỡ lớn. Layout thở mạnh mẽ; các section cách nhau bởi khoảng trống 100+ pixel và được đóng khung bằng padding ngang rộng rãi, cho mỗi phần tử đủ không gian để tỏa sáng. Thẩm mỹ này gần với bìa zine hoặc sách nghệ thuật hơn là một SaaS dashboard — phẳng, đậm, biểu cảm qua typography, và không ngại khoảng trống âm.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Obsidian | `#000000` | `--color-obsidian` | Canvas trang, background full-bleed, bề mặt cho mọi nội dung chính |
| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt hỗ trợ sáng cho background nhẹ và phân cách section. Không nâng lên làm màu CTA chính |
| Ultraviolet | `#c692ff` | `--color-ultraviolet` | Accent cho hover states, active link underline, và highlight dấu câu thỉnh thoảng — xuất hiện với tần suất gần như bằng không, nên hoạt động như sự bất ngờ, không phải trang trí |

## Tokens — Typography

### PolySans-Slim — Body copy ở 16px, subheadings ở 20–30px, và section headings ở 40px. Optical Slim là giọng nói của site: hẹp, tiết kiệm không gian, không bao giờ mang tính trang trí. Tracking -0.01em chặt chẽ khiến body text 16px có cảm giác được sắp đặt thay vì tùy tiện. · `--font-polysans-slim`
- **Thay thế:** Inter, Manrope, hoặc General Sans
- **Weights:** 400
- **Sizes:** 16px, 20px, 30px, 40px
- **Line height:** 1.00–1.35
- **Letter spacing:** -0.0100em
- **Vai trò:** Body copy ở 16px, subheadings ở 20–30px, và section headings ở 40px. Optical Slim là giọng nói của site: hẹp, tiết kiệm không gian, không bao giờ mang tính trang trí. Tracking -0.01em chặt chẽ khiến body text 16px có cảm giác được sắp đặt thay vì tùy tiện.

### PolySans-Neutral — Display và hero typography. 60px cho section openers, 160px cho brand-level wordmark/display moments. Ở 160px với line-height 0.90, các chữ cái gần như chạm nhau theo chiều dọc — một sự nén có chủ đích khiến type mang cảm giác kiến trúc thay vì thoáng đãng. · `--font-polysans-neutral`
- **Thay thế:** Inter Display, Migra, hoặc bất kỳ neo-grotesque weight-400 nào ở kích thước lớn
- **Weights:** 400
- **Sizes:** 60px, 160px
- **Line height:** 0.90–1.10
- **Letter spacing:** -0.0200em
- **Vai trò:** Display và hero typography. 60px cho section openers, 160px cho brand-level wordmark/display moments. Ở 160px với line-height 0.90, các chữ cái gần như chạm nhau theo chiều dọc — một sự nén có chủ đích khiến type mang cảm giác kiến trúc thay vì thoáng đãng.

### PolySans-Bulky — Link và CTA text ở 28px. Optical Bulky thêm trọng lượng và sự ấm áp cho các phần tử tương tác mà không cần chuyển sang bold weight — buttons và links cảm thấy chắc chắn ở kích thước tương đối với body. · `--font-polysans-bulky`
- **Thay thế:** Inter, hoặc cùng family ở weight 600
- **Weights:** 400
- **Sizes:** 28px
- **Line height:** 1.01
- **Letter spacing:** -0.0100em
- **Vai trò:** Link và CTA text ở 28px. Optical Bulky thêm trọng lượng và sự ấm áp cho các phần tử tương tác mà không cần chuyển sang bold weight — buttons và links cảm thấy chắc chắn ở kích thước tương đối với body.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|---------|
| body | 16px | 1.35 | -0.16px | `--text-body` |
| body-lg | 20px | 1.2 | -0.2px | `--text-body-lg` |
| subheading | 30px | 1.1 | -0.3px | `--text-subheading` |
| heading | 40px | 1 | -0.4px | `--text-heading` |
| heading-lg | 60px | 1.1 | -1.2px | `--text-heading-lg` |
| display | 160px | 0.9 | -3.2px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** spacious

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 14 | 14px | `--spacing-14` |
| 20 | 20px | `--spacing-20` |
| 22 | 22px | `--spacing-22` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 50 | 50px | `--spacing-50` |
| 60 | 60px | `--spacing-60` |
| 68 | 68px | `--spacing-68` |
| 110 | 110px | `--spacing-110` |
| 124 | 124px | `--spacing-124` |
| 222 | 222px | `--spacing-222` |

### Border Radius

| Phần tử | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 10px |
| buttons | 9999px |

### Layout

- **Section gap:** 110-124px
- **Card padding:** 32-36px
- **Element gap:** 20px

## Components

### Pill Button (Filled)
**Vai trò:** Phần tử tương tác chính

Button full-pill (bán kính 9999px) với fill trắng (#ffffff), text đen, padding dọc 14px, padding ngang 50px. Text bằng PolySans-Bulky ở 28px weight 400, tracking -0.28px. Không border, không shadow — hình học và độ tương phản tự làm việc.

### Pill Button (Ghost)
**Vai trò:** Phần tử tương tác phụ

Cùng bán kính 9999px và type Bulky 28px như button filled, nhưng với background trong suốt, border trắng 1px, và text trắng. Dùng cho các hành động ít ưu tiên hơn trên canvas tối.

### Hero Display Word
**Vai trò:** Khoảnh khắc typography cấp thương hiệu

PolySans-Neutral ở 160px, line-height 0.90, tracking -3.2px, trắng trên đen. Hoạt động như trung tâm thị giác của bất kỳ landing screen nào. Không padding xung quanh — khoảng trống âm quanh chữ CHÍNH LÀ thiết kế.

### Section Heading
**Vai trò:** Neo typography giữa trang

PolySans-Neutral ở 60px, line-height 1.10, tracking -1.2px, trắng. Nằm ở đầu các content section với margin-bottom 110-124px để tạo nhịp điệu section rộng rãi.

### Body Text Block
**Vai trò:** Copy chạy

PolySans-Slim ở 16-20px, line-height 1.35 (body) đến 1.20 (lớn hơn), tracking -0.16 đến -0.20px, trắng. max-width rộng rãi được ngụ ý bởi độ dài dòng tự nhiên; không có container card.

### Link (Inline)
**Vai trò:** Text có thể điều hướng

PolySans-Bulky ở 28px, trắng, với underline hoặc hover state violet (#c692ff). Optical Bulky là sự tương phản weight duy nhất so với Slim body text, vì vậy links khác biệt về mặt typography mà không cần nhấn mạnh bằng màu sắc.

### Top Navigation Bar
**Vai trò:** Điều hướng cấp site

Thanh đen full-width với padding ngang 36-50px. Bên trái: wordmark bằng PolySans-Slim trắng ở 16-20px. Bên phải: menu trigger (icon ba dòng hoặc xếp chồng) màu trắng. Không background fill, không border — nó nằm trực tiếp trên canvas đen.

### Illustrative Graphic
**Vai trò:** Điểm nhấn vẽ tay

Line-art illustrations trắng (#ffffff) ở tỷ lệ lớn, stroke weight 4-6px, không fill, không shadow. Xuất hiện cùng hoặc phía sau display type. Nằm phẳng trên canvas đen mà không có khung chứa — artwork tràn ra mép trang.

### Content Card (Rounded)
**Vai trò:** Khối nội dung có khung

border-radius 10px, fill đen hoặc gần đen, text trắng, padding 32-36px. Được sử dụng một cách tiết kiệm — hệ thống ưu tiên text không khung trên canvas hơn layout nặng card. Tùy chọn border hairline trắng 1px để xác định ranh giới.

### Tag / Pill Label
**Vai trò:** Nhãn danh mục hoặc trạng thái

Bán kính 9999px, padding dọc 14px, padding ngang ~20px, PolySans-Slim ở 16px trắng. Hoặc fill trắng/text đen hoặc transparent-fill/border trắng/text trắng.

## Do's and Don'ts

### Nên làm
- Sử dụng #000000 thuần làm background trang cho mọi màn hình — không xám, không off-black, không tint nhẹ
- Đặt tất cả interactive text bằng PolySans-Bulky ở 28px để links và buttons khác biệt về mặt typography so với Slim body copy mà không cần màu sắc
- Sử dụng border-radius 9999px cho tất cả buttons, tags, và phần tử hình pill
- Phân cách các section bằng khoảng trống dọc 110-124px để duy trì nhịp điệu editorial rộng rãi
- Để display type 160px thở mà không có padding hoặc container — bao quanh nó bằng ít nhất 60px khoảng trống âm đen ở mọi phía
- Ghép PolySans-Slim body text với PolySans-Neutral headings trong cùng một section để tạo sự tương phản optical-size trong cùng một family
- Chỉ sử dụng violet #c692ff làm hover-state hoặc active-state accent — không bao giờ làm default fill, không bao giờ làm background, không bao giờ ở tỷ lệ lớn

### Không nên làm
- Không đưa vào các tông xám trung gian (#333, #666, #999) — hệ thống là nhị phân: trắng thuần trên đen thuần
- Không sử dụng card backgrounds với surface tints — nội dung nằm trực tiếp trên canvas đen hoặc bên trong cards bán kính 10px chỉ với hairline borders
- Không áp dụng drop shadows, glows, hoặc blur effects cho bất kỳ phần tử nào — hierarchy đến từ kích thước và khoảng cách
- Không sử dụng violet #c692ff làm CTA background hoặc vùng fill lớn — nó là hover/active whisper, không phải brand field
- Không sử dụng PolySans-Slim cho display headlines trên 40px — optical design bị nén ở kích thước lớn và mất đi sự hiện diện
- Không phá vỡ quy ước pill 9999px bằng rectangular buttons — hình pill là chữ ký hình học duy nhất của hệ thống
- Không làm layout chật chội — nếu một section cần dày đặc, hãy chia nó thành hai section với 100+ px khoảng trống đen giữa chúng

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Canvas | `#000000` | Background trang full-bleed — bề mặt duy nhất trong hệ thống |

## Elevation

Không có shadows. Hệ thống thiết kế sử dụng độ tương phản màu tuyệt đối (trắng trên đen) và khoảng trống âm rộng rãi để tạo visual hierarchy. Elevation được ngụ ý bởi typographic scale và spacing, không bao giờ bằng drop shadow hay blur.

## Imagery

Line-art illustrations vẽ tay màu trắng trên nền đen thuần. Strokes dày 4-6px, hữu cơ và hơi bất thường, với các họa tiết như nến, pháo sáng, và hình dạng trừu tượng. Illustrations nằm phẳng trên canvas không có container, không fill, không shadow — chúng trông như phấn trắng trên bảng đen. Không photography, không product renders, không 3D. Ngôn ngữ thị giác mang tính đồ họa, editorial, và illustrative, với tỷ lệ illustration đạt đến chiều rộng full page để tạo ra những khoảnh khắc hero.

## Layout

Canvas đen full-bleed không có max-width constraint trên trang ngoài. Navigation là một thanh trên mỏng với padding ngang 36-50px. Hero sections có display type cỡ lớn 160px không container, căn giữa hoặc căn trái, thường đi kèm với hand-drawn illustration lớn. Content sections theo nhịp một cột hoặc hai cột với khoảng trống dọc 110-124px. Text blocks sử dụng độ dài dòng tự nhiên (max-width ngụ ý khoảng 400-600px) mà không có container nhìn thấy được. Trang đọc từ trên xuống dưới như các tấm đen full-bleed rời rạc được phân cách bởi khoảng trắng rộng rãi — gần với một cuốn sách nghệ thuật có thể cuộn hơn là lưới webpage truyền thống.

## Agent Prompt Guide

**Tham chiếu màu nhanh**
- Background: #000000
- Text: #ffffff
- Border: #ffffff (hairline)
- Accent (hover/active only): #c692ff
- primary action: không có màu CTA riêng biệt

**Ví dụ Component Prompts**

1. **Hero display moment**: Background đen (#000000) full-bleed. Display type: PolySans-Neutral weight 400, 160px, line-height 0.90, letter-spacing -3.2px, color #ffffff. Không padding xung quanh type — để nó nằm ở trung tâm canvas với ít nhất 80px khoảng trống đen ở mọi phía.

2. **Pill navigation button**: Background trong suốt, border 1px solid #ffffff, border-radius 9999px, padding dọc 14px, padding ngang 50px. Text: PolySans-Bulky weight 400, 28px, color #ffffff, letter-spacing -0.28px.

3. **Section heading + body**: Section heading bằng PolySans-Neutral weight 400, 60px, line-height 1.10, letter-spacing -1.2px, color #ffffff, với margin-bottom 124px. Body text bên dưới bằng PolySans-Slim weight 400, 20px, line-height 1.20, letter-spacing -0.20px, color #ffffff, độ dài dòng tự nhiên tối đa (~500px).

4. **Hand-drawn illustration accent**: SVG line art trắng (#ffffff), stroke-width 5px, không fill, đặt ở bên phải hoặc phía sau display type. Không container, không border, không shadow — nó tràn trực tiếp lên canvas đen.

5. **Content card**: Background #000000, border-radius 10px, border 1px solid #ffffff ở độ mờ 20% (hiệu ứng hairline), padding 32px. Body text bên trong bằng PolySans-Slim 16px #ffffff.

## Typography Philosophy

Họ PolySans cung cấp ba optical sizes — Slim, Neutral, Bulky — tất cả ở weight 400. Hệ thống khai thác điều này bằng cách sử dụng WEIGHT và OPTICAL SIZE làm các biến typography duy nhất, không bao giờ pha trộn typefaces. Điều này tạo ra một cảm giác êm dịu, gần như typographic-monoculture, nơi giọng điệu chuyển đổi (thì thầm, nói, hét) mà không thay đổi tính cách. Tracking chặt chẽ (-0.01em body, -0.02em display) kéo tất cả các kích thước về một cảm giác dày đặc, có tổ chức, editorial — không có gì là thoáng đãng hay lỏng lẻo.

## Similar Brands

- **Studio Dumbar** — Cùng phong cách monochrome tương phản cao với oversized custom display type trên canvas tối full-bleed, và pill buttons trắng
- **Resn** — Editorial dark-mode agency site với khoảng cách dọc rộng rãi, không card containers, và typography-as-hero
- **Locomotive (locomotive.ca)** — Background đen full-bleed, layout typographic-forward, và kỷ luật single-accent-color cho hover states
- **Manual (manual.work)** — Thẩm mỹ agency tối siêu tối giản dựa trên type scale và illustration trắng trên đen, không có decorative UI chrome

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-paper-white: #ffffff;
  --color-ultraviolet: #c692ff;

  /* Typography — Font Families */
  --font-polysans-slim: 'PolySans-Slim', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-polysans-neutral: 'PolySans-Neutral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-polysans-bulky: 'PolySans-Bulky', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.35;
  --tracking-body: -0.16px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.2;
  --tracking-body-lg: -0.2px;
  --text-subheading: 30px;
  --leading-subheading: 1.1;
  --tracking-subheading: -0.3px;
  --text-heading: 40px;
  --leading-heading: 1;
  --tracking-heading: -0.4px;
  --text-heading-lg: 60px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.2px;
  --text-display: 160px;
  --leading-display: 0.9;
  --tracking-display: -3.2px;

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

  /* Spacing */
  --spacing-14: 14px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-50: 50px;
  --spacing-60: 60px;
  --spacing-68: 68px;
  --spacing-110: 110px;
  --spacing-124: 124px;
  --spacing-222: 222px;

  /* Layout */
  --section-gap: 110-124px;
  --card-padding: 32-36px;
  --element-gap: 20px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 10px;
  --radius-buttons: 9999px;

  /* Surfaces */
  --surface-canvas: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-paper-white: #ffffff;
  --color-ultraviolet: #c692ff;

  /* Typography */
  --font-polysans-slim: 'PolySans-Slim', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-polysans-neutral: 'PolySans-Neutral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-polysans-bulky: 'PolySans-Bulky', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.35;
  --tracking-body: -0.16px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.2;
  --tracking-body-lg: -0.2px;
  --text-subheading: 30px;
  --leading-subheading: 1.1;
  --tracking-subheading: -0.3px;
  --text-heading: 40px;
  --leading-heading: 1;
  --tracking-heading: -0.4px;
  --text-heading-lg: 60px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.2px;
  --text-display: 160px;
  --leading-display: 0.9;
  --tracking-display: -3.2px;

  /* Spacing */
  --spacing-14: 14px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-50: 50px;
  --spacing-60: 60px;
  --spacing-68: 68px;
  --spacing-110: 110px;
  --spacing-124: 124px;
  --spacing-222: 222px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-full: 9999px;
}
```