yung_studio___style_reference: info: "> nét vẽ phấn trắng trên tường gallery đen" theme: "dark" info: "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: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Obsidian | `#000000` | `--color-obsidian` | Canvas trang, background full-bleed, bề mặt cho mọi nội dung chính |" info: "| 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 |" info: "| 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: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|-------------|----------------|-------|---------|" info: "| body | 16px | 1.35 | -0.16px | `--text-body` |" info: "| body-lg | 20px | 1.2 | -0.2px | `--text-body-lg` |" info: "| subheading | 30px | 1.1 | -0.3px | `--text-subheading` |" info: "| heading | 40px | 1 | -0.4px | `--text-heading` |" info: "| heading-lg | 60px | 1.1 | -1.2px | `--text-heading-lg` |" info: "| display | 160px | 0.9 | -3.2px | `--text-display` |" tokens___spacing___shapes: density: "spacious" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 14 | 14px | `--spacing-14` |" info: "| 20 | 20px | `--spacing-20` |" info: "| 22 | 22px | `--spacing-22` |" info: "| 24 | 24px | `--spacing-24` |" info: "| 32 | 32px | `--spacing-32` |" info: "| 36 | 36px | `--spacing-36` |" info: "| 50 | 50px | `--spacing-50` |" info: "| 60 | 60px | `--spacing-60` |" info: "| 68 | 68px | `--spacing-68` |" info: "| 110 | 110px | `--spacing-110` |" info: "| 124 | 124px | `--spacing-124` |" info: "| 222 | 222px | `--spacing-222` |" border_radius: info: "| Phần tử | Giá trị |" info: "|---------|-------|" info: "| tags | 9999px |" info: "| cards | 10px |" info: "| 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" info: "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ụ" info: "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" info: "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" info: "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" info: "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" info: "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" info: "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" info: "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" info: "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" info: "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: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 1 | Canvas | `#000000` | Background trang full-bleed — bề mặt duy nhất trong hệ thống |" elevation: info: "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: info: "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: info: "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: - "**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." - "**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." - "**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)." - "**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." - "**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: info: "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; }