christopher_ireland_creative___style_reference: info: "> bone-white gallery wall, editorial monograph in morning light" theme: "light" info: "Portfolio của một nhiếp ảnh gia được dàn dựng như một editorial spread tĩnh lặng: nền bone canvas ấm áp, một cặp typeface duy nhất (serif đương đại cho display, geometric sans cho utility), và không hề có điểm nhấn màu sắc. Hệ thống thị giác hoàn toàn nhường chỗ cho nhiếp ảnh — chữ chỉ là giàn giáo mỏng manh gồm các nhãn danh mục và vài headline serif cỡ lớn, hoạt động như pull-quotes trên tạp chí. Cảm giác gần với một monograph in ấn hơn là một website: những khối khoảng trống lớn, bố cục split layout bất đối xứng (text trái, ảnh phải), và weight 400 ở mọi nơi — serif không bao giờ đậm lên, sans không bao giờ co lại, vì vậy hệ thống phân cấp đến từ kích thước và tracking thay vì độ nhấn." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Bone | `#f2f1ec` | `--color-bone` | Canvas trang, bề mặt card — màu off-white ấm áp đọc như giấy, không phải màn hình; mang lại chất liệu xúc giác, in ấn cho trang |" info: "| Ink | `#000000` | `--color-ink` | Text chính, border, divider, dấu cộng, section rules — màu đen tuyền trên nền bone tạo độ tương phản cao nhất có thể cho cảm giác editorial posterized |" info: "| Graphite | `#333332` | `--color-graphite` | Text headline — gần như đen nhưng có thêm một phần tư bước ấm áp; giúp các heading serif có cảm giác được đặt (set) chứ không phải đóng dấu (stamped) |" info: "| Ash | `#5d5b5b` | `--color-ash` | Body text phụ, caption, sub-label — bước muted duy nhất trong một bảng màu nhị phân |" tokens___typography: playfair_display___display_và_section_headings___ở_94px_với_weight_400_và_tracking_dương_0_01em__serif_hoạt_động_như_masthead_tạp_chí_chứ_không_phải_ui_heading__regular_weight_là_phản_quy_ước__hầu_hết_display_serif_dùng_bold_để_tạo_uy_quyền__nhưng_playfair_400_ở_kích_thước_này_mang_uy_quyền_thông_qua_tỷ_lệ_và_khoảng_trống_âm__dùng_cho_hero_name__section_titles_commercial__creative__community__và_bất_kỳ_khoảnh_khắc_một_từ_nào_cần_cảm_giác_như_một_trang_tiêu_đề_in_ấn_____font_playfair_display: - "**Thay thế:** Cormorant Garamond, Lora, DM Serif Display" - "**Weights:** 400" - "**Sizes:** 63px, 94px" - "**Line height:** 1.00–1.20" - "**Letter spacing:** 0.01em ở 63–94px" - "**Vai trò:** Display và section headings — ở 94px với weight 400 và tracking dương 0.01em, serif hoạt động như masthead tạp chí chứ không phải UI heading. Regular weight là phản quy ước; hầu hết display serif dùng bold để tạo uy quyền, nhưng Playfair 400 ở kích thước này mang uy quyền thông qua tỷ lệ và khoảng trống âm. Dùng cho hero name, section titles (Commercial, Creative, Community), và bất kỳ khoảnh khắc một từ nào cần cảm giác như một trang tiêu đề in ấn." rubik___tất_cả_utility_text___body_copy__sub_label__navigation__metadata__rubik_ở_400___16px___1_5_line_height_cố_tình_lặng_lẽ__nó_không_bao_giờ_cạnh_tranh_với_serif_display__các_dạng_hình_geometric_humanist_cung_cấp_đủ_cấu_trúc_cho_các_ui_element_nhỏ_dấu___mở_rộng__link__about__mà_không_giới_thiệu_một_giọng_thị_giác_thứ_hai_____font_rubik: - "**Thay thế:** Inter, IBM Plex Sans, Work Sans" - "**Weights:** 400" - "**Sizes:** 16px, 94px" - "**Line height:** 1.50" - "**Vai trò:** Tất cả utility text — body copy, sub-label, navigation, metadata. Rubik ở 400 / 16px / 1.5 line-height cố tình lặng lẽ; nó không bao giờ cạnh tranh với serif display. Các dạng hình geometric humanist cung cấp đủ cấu trúc cho các UI element nhỏ (dấu \"+\" mở rộng, link \"About\") mà không giới thiệu một giọng thị giác thứ hai." type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| body | 16px | 1.5 | — | `--text-body` |" info: "| heading | 63px | 1.2 | 0.63px | `--text-heading` |" info: "| display | 94px | 1 | 0.94px | `--text-display` |" tokens___spacing___shapes: base_unit: "6px" density: "spacious" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 11 | 11px | `--spacing-11` |" info: "| 14 | 14px | `--spacing-14` |" info: "| 30 | 30px | `--spacing-30` |" info: "| 48 | 48px | `--spacing-48` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| tags | 0px |" info: "| cards | 0px |" info: "| images | 0px |" info: "| buttons | 0px |" layout: - "**Page max-width:** 1200px" - "**Section gap:** 48px" - "**Card padding:** 0px" - "**Element gap:** 11-14px" components: editorial_display_heading: vai_trò: "Hero name và section titles" info: "Playfair Display 400 ở 94px (display) hoặc 63px (section), line-height 1.0–1.2, letter-spacing 0.01em, color #333332. Căn trái trong cột của nó, không trang trí. Cách xử lý chữ thường như chữ hoa cỡ lớn (\"CHRISTOPHER IRELAND\" viết hoa ở 94px) tạo ra khoảnh khắc masthead." category_list_item: vai_trò: "Danh mục portfolio có thể mở rộng (Commercial, Creative, Community)" hàng_hai_cột: "label serif bên trái (Playfair Display 400, 63px, #333332) và glyph \"+\" bên phải (Rubik 400, 16px, #000000). Nhịp dọc khoảng 11–14px giữa các item. Không có nền, không có border — bản thân chữ là component." plus_mark_expand_indicator: vai_trò: "Chỉ báo danh mục có thể chạm/mở rộng" info: "Rubik 400 ở 16px, #000000, ký tự đơn \"+\". Căn trái trong cột riêng, căn giữa theo chiều dọc với label serif. Hoạt động như affordance tương tác duy nhất trên trang." featured_image_panel: vai_trò: "Trưng bày nhiếp ảnh bên cạnh text danh mục" info: "Ảnh full-bleed, không border, không radius, không shadow, không caption. Chiếm cột phải trong section danh mục. Nằm trên bone canvas mà không có bề mặt card hay khung — ảnh tiếp xúc trực tiếp với mép canvas." top_bar: vai_trò: "Nhận diện site và nhãn nghề nghiệp" info: "Masthead căn giữa ở đầu trang. Tên trong Playfair Display 400 caps ở 94px, #333332. Nhãn nghề nghiệp \"Photographer | Director\" trong Rubik 400 ở 16px, #5d5b5b, căn phải bên dưới tên." section_divider: vai_trò: "Phân cách header khỏi nội dung" info: "Một đường hairline 1px #000000 kéo dài toàn bộ chiều rộng trang. Không gradient, không shadow, không trọng lượng thêm — một đường rule của trang in ấn." sub_nav_row: vai_trò: "Danh mục dịch vụ và link phụ" rubik_400_ở_16px__000000__bên_trái: "danh sách dịch vụ phân cách bằng dấu phẩy (\"Commercial campaigns · Documentary films · Long-form photography\"). Bên phải: link text \"About\", gạch chân khi hover. 30px padding dọc phía trên và dưới." body_caption: vai_trò: "Bất kỳ đoạn văn hỗ trợ hoặc metadata nào" info: "Rubik 400 ở 16px, #5b5b5b, line-height 1.5. Dùng cho ghi chú nhiếp ảnh gia, mô tả dự án, và bất kỳ text nào không phải display heading hay label." do_s_and_don_ts: nên_làm: - "Dùng Playfair Display 400 ở 63px hoặc 94px cho mọi display heading — không bao giờ bold nó" - "Đặt canvas thành #f2f1ec và để ảnh chạm mép canvas trực tiếp (edge-to-edge) mà không có card, border, hay shadow" - "Duy trì thang text ba bước: #333332 cho heading, #000000 cho label và rule chính, #5d5b5b cho body" - "Dùng hairline 1px #000000 làm divider duy nhất — không bao giờ dùng shadow, fill, hay gradient fade để phân cách section" - "Giữ tất cả interactive element dưới dạng text hoặc ký tự \"+\" đơn trong Rubik 400 — không button, không nền, không hình tròn" - "Đặt image và card radius thành 0px; bone canvas và ảnh nên chia sẻ một cạnh sắc" - "Áp dụng 48px padding dọc phía trên và dưới section rules để tạo nhịp thở của trang in ấn" không_nên_làm: - "Không đưa vào bất kỳ màu nào — bảng màu cố tình không có màu sắc (achromatic); thêm một hue sẽ phá vỡ cảm giác monograph" - "Không bold các heading Playfair Display; display weight-400 CHÍNH LÀ chữ ký" - "Không bọc ảnh trong card, frame, hay shadow — để chúng nằm trực tiếp trên bone canvas" - "Không thêm border-radius cho bất kỳ element nào; mọi góc trong hệ thống đều sắc" - "Không dùng icon nào ngoài ký tự \"+\"; hệ thống chỉ giao tiếp qua type và image" - "Không dùng gradient, blur, hay glassmorphism — những thứ này mâu thuẫn với phép ẩn dụ trang in ấn" - "Không đặt body copy lớn hơn 16px; sự tương phản giữa body 16px và display 63–94px chính là thứ tạo ra hệ thống phân cấp editorial" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 1 | Bone Canvas | `#f2f1ec` | Nền trang — lớp bề mặt duy nhất; mọi thứ nằm trực tiếp trên đó |" info: "| 2 | Photograph Surface | `#000000` | Bề mặt tối nhất — ảnh full-bleed cung cấp điểm khởi hành duy nhất khỏi bone; không có card, border, hay elevation nào ngăn cách nó khỏi canvas |" elevation: info: "Không sử dụng elevation ở bất kỳ đâu trong hệ thống. Không có shadow, không có card lift, không có overlay. Trang phẳng như một trang in ấn — đường hairline 1px và sự chuyển đổi từ bone sang ảnh là những tín hiệu chiều sâu duy nhất. Đây là một lựa chọn có chủ đích: portfolio xoay quanh nhiếp ảnh, và bất kỳ shadow hay floating element nào sẽ cạnh tranh với ảnh về trọng lượng thị giác." imagery: info: "Nhiếp ảnh là toàn bộ ngôn ngữ thị giác. Tất cả imagery đều là nhiếp ảnh chất lượng cao, tự nhiên — ấm áp, ánh sáng dịu nhẹ, thường là cảnh nội thất với ánh sáng cửa sổ tự nhiên (có thể thấy trong screenshot: một người ngồi trên giường trong ánh sáng golden-hour). Ảnh full-bleed trong cột của chúng, không bao giờ bị crop thành hình tròn, không bao giờ bị overlay bởi text hay UI. Không có illustration, không có icon nào ngoài ký tự \"+\", không có đồ họa trang trí, không có product mockup. Tỷ lệ ảnh trên text nghiêng hẳn về ảnh khi các section danh mục bắt đầu, nhưng khu vực header và nav là typography thuần túy. Sự ấm áp của bone canvas bổ sung cho nhiệt độ màu ấm của nhiếp ảnh, tạo ra một bảng màu editorial gắn kết." layout: info: "Container max-width căn giữa (~1200px) trên bone canvas, nhưng bố cục bên trong bất đối xứng. Khu vực trên cùng là masthead căn giữa (tên căn giữa, nghề nghiệp căn phải bên dưới). Bên dưới đường hairline 1px, một hàng sub-nav hai cột với danh sách dịch vụ bên trái và link \"About\" bên phải. Khu vực nội dung chính chia thành grid hai cột: label danh mục serif lớn (Commercial, Creative, Community) xếp chồng theo chiều dọc bên trái ở khoảng 50% chiều rộng, với một ảnh featured lớn chiếm cột phải. Mỗi hàng danh mục cách nhau khoảng 11–14px không gian dọc. Bố cục mang tính editorial — nó đọc như một mục lục tạp chí, không phải grid card. Navigation tối thiểu: không sidebar, không sticky header, không mega-menu, chỉ có masthead trên cùng và hai link text trong sub-nav." agent_prompt_guide: tham_chiếu_màu_nhanh: - "canvas: #f2f1ec" - "primary text: #000000" - "heading text: #333332" - "body / muted text: #5d5b5b" - "borders / rules: #000000" - "primary action: không có màu CTA riêng biệt" 3_5_ví_dụ_component_prompts: - "**Editorial hero masthead**: Căn giữa tên trong Playfair Display 400 ở 94px, letter-spacing 0.01em, color #333332. Bên dưới, căn phải \"Photographer | Director\" trong Rubik 400 ở 16px, #5d5b5b. Tất cả trên canvas #f2f1ec." - "**Category list row**: Bố cục hai cột trên #f2f1ec. Cột trái: \"Commercial\" trong Playfair Display 400, 63px, #333332, line-height 1.2. Cột phải: một dấu \"+\" đơn trong Rubik 400, 16px, #000000, căn giữa theo chiều dọc. Khoảng cách hàng 11px giữa các item." - "**Featured image panel**: Ảnh full-bleed trong cột phải với 0px border-radius, không border, không shadow, không caption. Mép ảnh chạm trực tiếp vào canvas #f2f1ec." - "**Section divider**: Đường hairline 1px solid #000000 kéo dài 100% chiều rộng, với 48px padding phía trên và dưới." - "**Sub-nav row**: Rubik 400, 16px, trên #f2f1ec. Bên trái: \"Commercial campaigns · Documentary films · Long-form photography\" trong #000000. Bên phải: \"About\" dưới dạng link text thuần trong #000000 với gạch chân khi hover. 30px padding dọc." similar_brands: - "**Pelle Cass** — Cùng bone-canvas + serif cỡ lớn + bố cục một ảnh; cả hai đều là portfolio nhiếp ảnh gia đọc như monograph in ấn hơn là website" - "**Peter Lindbergh** — Kỷ luật editorial giống hệt — serif weight-400 ở kích thước display, không màu sắc, nhiếp ảnh là yếu tố thị giác duy nhất ngoài type" - "**Coco Capitan** — Cùng canvas off-white ấm áp với khoảng trắng rộng rãi và serif display heading; cả hai dùng typography như giàn giáo gallery-label xung quanh ảnh lớn" - "**Cereal magazine** — Cùng phép ẩn dụ ấn phẩm in — serif display trên nền trung tính ấm, hairline rules, không UI chrome, ảnh trôi nổi mà không có card container" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-bone: #f2f1ec; --color-ink: #000000; --color-graphite: #333332; --color-ash: #5d5b5b; /* Typography — Font Families */ --font-playfair-display: 'Playfair Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-rubik: 'Rubik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-body: 16px; --leading-body: 1.5; --text-heading: 63px; --leading-heading: 1.2; --tracking-heading: 0.63px; --text-display: 94px; --leading-display: 1; --tracking-display: 0.94px; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-unit: 6px; --spacing-11: 11px; --spacing-14: 14px; --spacing-30: 30px; --spacing-48: 48px; /* Layout */ --page-max-width: 1200px; --section-gap: 48px; --card-padding: 0px; --element-gap: 11-14px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-images: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-bone-canvas: #f2f1ec; --surface-photograph-surface: #000000; } tailwind_v4: css: | @theme { /* Colors */ --color-bone: #f2f1ec; --color-ink: #000000; --color-graphite: #333332; --color-ash: #5d5b5b; /* Typography */ --font-playfair-display: 'Playfair Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-rubik: 'Rubik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-body: 16px; --leading-body: 1.5; --text-heading: 63px; --leading-heading: 1.2; --tracking-heading: 0.63px; --text-display: 94px; --leading-display: 1; --tracking-display: 0.94px; /* Spacing */ --spacing-11: 11px; --spacing-14: 14px; --spacing-30: 30px; --spacing-48: 48px; }