linus_rogge___style_reference: info: "> Portfolio mang phong cách editorial trên nền gallery trắng — mỗi dự án là một bức ảnh cỡ tường với chú thích nhỏ nhẹ ở góc." theme: "light" info: "Linus Rogge là portfolio cá nhân xây dựng trên sự kiềm chế triệt để về typography: chỉ một cỡ chữ 14px duy nhất cho mọi văn bản, chỉ hai màu (đen thuần và trắng thuần), và ảnh chụp cỡ gallery là giọng nói hình ảnh duy nhất. Hierarchy được tạo ra thông qua weight (400 vs 500) và khoảng trống âm bản rộng rãi, không phải bằng cách tăng kích thước. Mỗi dự án được trình bày dưới dạng một nhãn canh trái thưa thớt đi kèm với ảnh full-bleed, mang phong cách như chú thích trong bảo tàng bên cạnh một bản in lớn. Các component gần như vô hình — không có shadow, không có border-radius trên canvas, không có màu trang trí — để bản thân tác phẩm tự gánh vác trang." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|------|" info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas chính, mọi chữ trên nền tối, chữ button inverted |" info: "| Ink Black | `#000000` | `--color-ink-black` | Màu trung tính tối hỗ trợ cho chữ, icon và độ tương phản mạnh. Không dùng làm màu CTA chính |" info: "| Gallery Gray | `#e5e5e5` | `--color-gallery-gray` | Bề mặt phụ cho các section band, footer background wash |" info: "| Plinth Gray | `#d4d4d4` | `--color-plinth-gray` | Bề mặt cấp ba, divider nhịp điệu section xen kẽ |" info: "| Carbon Black | `#0a0a0a` | `--color-carbon-black` | Nền section tối cho các khối nội dung (writing index, project list) — gần đen tránh sự chói của #000 thuần |" info: "| Slate Black | `#171717` | `--color-slate-black` | Bề mặt tối cấp hai cho các section tối xếp chồng |" info: "| Concrete | `#a3a3a3` | `--color-concrete` | Chữ helper muted, ngày tháng metadata, chú thích cấp ba trên nền trắng |" info: "| Stone | `#737373` | `--color-stone` | Chữ muted cấp hai, label, annotation không hoạt động |" info: "| Graphite | `#525252` | `--color-graphite` | Chữ muted mạnh nhất trước khi chuyển sang đen hoàn toàn, điểm nhấn tinh tế |" tokens___typography: abc_oracle___kiểu_chữ_duy_nhất_cho_mọi_văn_bản___headline__body__label__metadata__navigation__lựa_chọn_đặc_trưng_là_dùng_một_cỡ_14px_duy_nhất_trên_toàn_bộ_site__hierarchy_đến_từ_weight_contrast_400_cho_body__500_cho_title_và_mục_đang_hoạt_động_và_whitespace__không_bao_giờ_từ_kích_thước__cách_tiếp_cận_phản_hierarchy_này_coi_mọi_thông_tin_đều_quan_trọng_như_nhau__giống_như_chú_thích_tường_trong_gallery_____font_abc_oracle: - "**Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk ở cỡ 14px cố định" - "**Weights:** 400, 500" - "**Cỡ chữ:** 14px" - "**Line height:** 1.00, 1.25, 1.43" - "**Letter spacing:** normal" - "**Vai trò:** Kiểu chữ duy nhất cho mọi văn bản — headline, body, label, metadata, navigation. Lựa chọn đặc trưng là dùng một cỡ 14px duy nhất trên toàn bộ site: hierarchy đến từ weight contrast (400 cho body, 500 cho title và mục đang hoạt động) và whitespace, không bao giờ từ kích thước. Cách tiếp cận phản hierarchy này coi mọi thông tin đều quan trọng như nhau, giống như chú thích tường trong gallery." tokens___spacing___shapes: base_unit: "6px" density: "comfortable" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 6 | 6px | `--spacing-6` |" info: "| 8 | 8px | `--spacing-8` |" info: "| 12 | 12px | `--spacing-12` |" info: "| 48 | 48px | `--spacing-48` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| tags | 0px |" info: "| cards | 0px |" info: "| inputs | 0px |" info: "| buttons | 0px |" layout: - "**Section gap:** 48-96px" - "**Card padding:** 12px" - "**Element gap:** 12px" components: project_header_label: vai_trò: "Khối metadata dự án ở góc trên bên trái mỗi section dự án" stack_ba_dòng_canh_trái: "tên client/brand (weight 500), tiêu đề dự án (weight 500), mô tả dự án (weight 400). Tất cả ở 14px, chữ đen trên nền trắng. Không icon, không bullet, không yếu tố trang trí. Xuất hiện ở góc trên bên trái mỗi section ảnh full-bleed." project_footer_label: vai_trò: "Ngày tháng và thông tin studio ở góc dưới bên trái mỗi dự án" hai_dòng: "khoảng năm (weight 400) và tên studio/công ty (weight 400). 14px, chữ đen, góc dưới bên trái. Tối giản — chỉ đủ để ghi công cho tác phẩm." full_bleed_project_image: vai_trò: "Yếu tố hình ảnh chính của mỗi dự án" info: "Ảnh lớn chiếm phần lớn viewport. Không border, không radius (0px), không shadow. Ảnh là product/lifestyle photography trên nền sạch. Không có caption hay overlay trên chính ảnh — label nằm bên ngoài khu vực ảnh ở các góc." writing_index_entry: vai_trò: "Danh sách bài blog trong section viết tối" layout_hai_cột: "tiêu đề bài (weight 500, trắng) bên trái, ngày xuất bản (weight 400, trắng) bên dưới. Được sắp xếp trong grid nhiều cột. 14px, không có link hay hover state hiển thị. Nằm trên nền Carbon Black (#0a0a0a)." section_label: vai_trò: "Header danh mục cho nội dung được nhóm (ví dụ: 'Writing')" info: "Một từ duy nhất ở weight 400, 14px, đen trên trắng hoặc trắng trên tối. Nằm ở góc trên bên trái section với lề trái rộng rãi. Hoạt động như một section anchor nhẹ nhàng." filled_action_button: vai_trò: "Call-to-action chính (ví dụ: 'Information')" info: "Nền Ink Black (#000000), chữ Paper White (#ffffff), weight 500, 14px. Border-radius bằng 0 (0px). Padding 12px 12px (trên/dưới 12px, trái/phải 12px). Không border, không shadow, không hover state. Hình chữ nhật sắc cạnh — yếu tố 'màu sắc' duy nhất trong toàn bộ hệ thống là sự đảo ngược giữa đen và trắng." about_text_block: vai_trò: "Văn bản bio cá nhân ở khu vực footer" info: "Đoạn văn nhiều dòng ở 14px, weight 400, chữ đen. Max-width tương đương 8 cột (khoảng 40% viewport). Line-height 1.43. Nằm trên nền Gallery Gray (#e5e5e5). Không có pull quote hay điểm nhấn — văn xuôi phẳng liên tục." alternating_section_band: vai_trò: "Công cụ nhịp điệu dọc phân cách các vùng trang" info: "Các band ngang full-width xen kẽ giữa Gallery Gray (#e5e5e5), Plinth Gray (#d4d4d4) và Concrete (#a3a3a3). Không có chữ hay nội dung — thuần túy là khoảng thở hình ảnh giữa các section, giống như cách một cuốn sách dùng trang trắng giữa các chương." do_s_and_don_ts: do: - "Dùng chính xác 14px cho mọi văn bản bất kể tầm quan trọng — để weight (400 vs 500) và whitespace tạo hierarchy" - "Dùng #000000 thuần và #ffffff thuần cho mọi chữ chính và bề mặt; hệ thống hoàn toàn hai màu" - "Đặt border-radius thành 0px trên mọi component — button, card, ảnh, input đều là hình chữ nhật sắc cạnh" - "Canh trái mọi văn bản với lề trái nhất quán; không bao giờ canh giữa chữ" - "Đặt metadata dự án ở các góc (trên-trái và dưới-trái) của ảnh full-bleed, không overlay lên ảnh" - "Dùng section band với Gallery Gray (#e5e5e5) và Plinth Gray (#d4d4d4) để tạo nhịp điệu dọc giữa các dự án" - "Chỉ dùng weight 500 cho title, mục đang hoạt động và chữ button — mọi thứ khác giữ ở 400" don_t: - "Không bao giờ thêm cỡ chữ thứ hai — toàn bộ hệ thống chạy trên 14px" - "Không bao giờ thêm màu sắc, gradient hay shadow — thiết kế phẳng và hoàn toàn đơn sắc" - "Không bao giờ dùng border-radius lớn hơn 0px trên bất kỳ element nào" - "Không bao giờ canh giữa chữ hay dùng layout đối xứng — mọi thứ neo vào bên trái" - "Không bao giờ overlay chữ lên ảnh — label sống ở lề bên ngoài ảnh" - "Không bao giờ dùng icon trang trí, bullet hay divider — whitespace là separator duy nhất" - "Không bao giờ dùng #0a0a0a hay #171717 làm chữ body trên nền trắng — đó là màu bề mặt chỉ dùng cho khối tối" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 0 | Canvas | `#ffffff` | Nền trang, bề mặt chính |" info: "| 1 | Section Band | `#e5e5e5` | Nền section xen kẽ, footer wash |" info: "| 2 | Plinth | `#d4d4d4` | Bề mặt banded cấp hai |" info: "| 3 | Dark Block | `#0a0a0a` | Section nội dung inverted (writing index, archive) |" elevation: info: "Thiết kế có độ cao bằng không. Không shadow, không glow, không bất kỳ tín hiệu chiều sâu nào. Bề mặt được định nghĩa hoàn toàn bằng tương phản màu giữa các band trắng và xám liền kề. Component nằm sát với nền của chúng, và sự phân cách không gian duy nhất đến từ whitespace và các cạnh cứng của ảnh tiếp giáp với các trường màu đặc." imagery: info: "Ảnh chụp sản phẩm và phong cách sống khổ lớn là yếu tố hình ảnh chủ đạo. Ảnh full-bleed hoặc gần full-bleed, không border, không bo góc, không overlay. Xử lý sạch sẽ và tự nhiên — laptop trên bàn trắng, tablet trên bề mặt gỗ, tay tương tác với thiết bị. Không duotone, không color grading, không mask. Ảnh chụp gánh toàn bộ trọng lượng hình ảnh của trang; không có illustration, không có đồ họa trừu tượng, không có icon đáng kể. Các vật thể trong ảnh (sản phẩm, thiết bị, bàn tay) là hero — bối cảnh xung quanh tối thiểu và trung tính để chủ thể đọc rõ ràng." layout: info: "Layout full-bleed một cột. Mỗi dự án chiếm một section dọc: metadata ở góc trên bên trái, ảnh lớn lấp đầy viewport, ngày tháng/ghi công ở góc dưới bên trái. Các section xếp chồng dọc không có gutter — mỗi dự án mới bắt đầu ngay nơi dự án trước kết thúc. Trong các section, một khối inverted tối (writing index) dùng grid nhiều cột (3-4 cột) cho các mục danh sách. Footer dùng nền xám nhạt với chữ canh trái vào một cột rộng khoảng 40% viewport. Không có navigation bar, không sidebar, không sticky header — trang là một scroll dọc liên tục các khối dự án. Không có max-width constraint trên ảnh; khối chữ bị giới hạn trong một cột hẹp bên trái." agent_prompt_guide: quick_color_reference: - "text: #000000" - "background: #ffffff" - "border: #000000" - "muted text: #737373" - "dark surface: #0a0a0a" - "section band: #e5e5e5" - "primary action: không có màu CTA riêng biệt" example_component_prompts: - "**Project Header Label**: Tạo một stack chữ canh trên trái: dòng đầu 'Linus Rogge' ở 14px weight 500, dòng thứ hai tiêu đề dự án ở 14px weight 500, dòng thứ ba mô tả ở 14px weight 400. Tất cả trong #000000 trên nền #ffffff. Padding trên 12px, neo vào lề trái không có lề trái ngoài gutter trang." - "**Full-Bleed Project Image**: Render một ảnh lớn chiếm toàn bộ chiều rộng viewport. Border-radius bằng 0, không border, không shadow. Không chữ hay overlay trên ảnh. Đặt absolute trong luồng section với metadata dự án xếp phía trên và ngày tháng/ghi công phía dưới." - "**Section Band Divider**: Tạo một band ngang full-width với nền #e5e5e5, cao 48-96px, không nội dung. Hoạt động như một khoảng thở hình ảnh giữa các section dự án." - "**Writing Index Entry**: Trên nền tối #0a0a0a, render một khối hai dòng: tiêu đề ở 14px weight 500 trong #ffffff, ngày tháng bên dưới ở 14px weight 400 trong #ffffff. Sắp xếp nhiều mục trong grid 3 cột với column gap 48px." - "**Filled Action Button**: Hình chữ nhật đen (#000000) với chữ trắng (#ffffff) ở 14px weight 500, label 'Information'. Border-radius bằng 0. Padding 12px mọi phía. Không border, không shadow, không hover state." similar_brands: - "**Rauno Freiberg** — Cùng typography phản hierarchy một cỡ chữ, ảnh full-bleed, bảng màu đen-trắng nghiêm ngặt, và danh sách dự án canh trái với metadata tối thiểu" - "**Studio Dumbar** — Trình bày portfolio như gallery wall được tuyển chọn — ảnh khổ lớn với chú thích chữ nhỏ nhẹ ở góc, không có chrome trang trí" - "**Frank Chimero** — Kiềm chế một kiểu chữ, whitespace rộng rãi, cột chữ canh trái trên section band xám nhạt, không yếu tố trang trí" - "**Bret Victor** — Chủ nghĩa tối giản typography triệt để, một font body nhỏ mang mọi thông tin và bản thân tác phẩm lấp đầy trang" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; --color-gallery-gray: #e5e5e5; --color-plinth-gray: #d4d4d4; --color-carbon-black: #0a0a0a; --color-slate-black: #171717; --color-concrete: #a3a3a3; --color-stone: #737373; --color-graphite: #525252; /* Typography — Font Families */ --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-sm: 14px; --leading-sm: 1.43; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; /* Spacing */ --spacing-unit: 6px; --spacing-6: 6px; --spacing-8: 8px; --spacing-12: 12px; --spacing-48: 48px; /* Layout */ --section-gap: 48-96px; --card-padding: 12px; --element-gap: 12px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-inputs: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-canvas: #ffffff; --surface-section-band: #e5e5e5; --surface-plinth: #d4d4d4; --surface-dark-block: #0a0a0a; } tailwind_v4: css: | @theme { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; --color-gallery-gray: #e5e5e5; --color-plinth-gray: #d4d4d4; --color-carbon-black: #0a0a0a; --color-slate-black: #171717; --color-concrete: #a3a3a3; --color-stone: #737373; --color-graphite: #525252; /* Typography */ --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-sm: 14px; --leading-sm: 1.43; /* Spacing */ --spacing-6: 6px; --spacing-8: 8px; --spacing-12: 12px; --spacing-48: 48px; }