laura_monin___style_reference: info: "> editorial gallery wall, white marble, ink stamp" theme: "light" info: "Laura Monin là một portfolio thời trang editorial được xây dựng trên sự kiềm chế màu sắc tuyệt đối: canvas trắng tinh, mực đen, và một display serif tùy chỉnh duy nhất mang toàn bộ giọng điệu thương hiệu. Bố cục hoạt động như một mood board được tuyển chọn — ảnh chụp phân tán bất đối xứng trên khoảng trống âm bản rộng rãi thay vì căn chỉnh theo grid thông thường, với overlay caption hoạt động như những nhãn dán thì thầm chứ không phải navigation. Typography đảm nhận toàn bộ hệ thống phân cấp: display serif khổng lồ ở 58–158px chiếm vị trí trung tâm, trong khi Neue Haas Grotesk ở 12–22px đóng vai trò là giàn giáo lặng lẽ cho navigation, metadata và văn bản hỗ trợ. Không có shadow, không có bo góc, không có gradient, không có màu sắc — hệ thống đạt được sự sang trọng thông qua những gì nó loại bỏ, chứ không phải thêm vào. Mọi element phải có cảm giác như được đặt bằng tay trên một bức tường gallery: chính xác, thong thả, và không bao giờ lấp đầy khung hình nhiều hơn mức cần thiết." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, viền ảnh, nền nav — tông bề mặt duy nhất trong hệ thống |" info: "| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, mọi đường viền outline trên ảnh và nav, list markers — mỏ neo màu sắc duy nhất |" tokens___typography: title___display_serif_chỉ_dùng_cho_brand_title_và_hero_headlines__custom_serif___với_các_nét_tương_phản_cao_và_dạng_hơi_condensed___mang_toàn_bộ_nhận_diện_thương_hiệu__letter_spacing__0_018em_thắt_chặt_các_chữ_in_hoa_cỡ_lớn_vừa_đủ_để_tạo_cảm_giác_có_chủ_đích_mà_không_bị_cứng_nhắc__một_lựa_chọn_thay_thế_gần_là_transitional_hoặc_didone_style_serif_như__gt_sectra_display__hoặc_các_lựa_chọn_miễn_phí__playfair_display_____dm_serif_display_____font_title: - "**Thay thế:** Playfair Display hoặc DM Serif Display" - "**Weights:** 400" - "**Sizes:** 58px, 158px" - "**Line height:** 1.20" - "**Letter spacing:** -0.018em" - "**Vai trò:** Display serif chỉ dùng cho brand title và hero headlines. Custom serif — với các nét tương phản cao và dạng hơi condensed — mang toàn bộ nhận diện thương hiệu. Letter-spacing -0.018em thắt chặt các chữ in hoa cỡ lớn vừa đủ để tạo cảm giác có chủ đích mà không bị cứng nhắc. Một lựa chọn thay thế gần là transitional hoặc didone-style serif như 'GT Sectra Display' hoặc các lựa chọn miễn phí 'Playfair Display' / 'DM Serif Display'" neue_haas_grotesk_display___toàn_bộ_ui__navigation__caption__metadata_và_văn_bản_gần_body__geometric_grotesque_ở_một_weight_duy_nhất_400___hệ_thống_cố_tình_tránh_tương_phản_bold_light__thay_vào_đó_dùng_kích_thước_và_vị_trí_để_tạo_hệ_thống_phân_cấp__dùng__inter__hoặc_chính__neue_haas_grotesk__miễn_phí_qua_adobe_làm_lựa_chọn_thay_thế____font_neue_haas_grotesk_display: - "**Thay thế:** Inter hoặc Neue Haas Grotesk" - "**Weights:** 400" - "**Sizes:** 12px, 14px, 18px, 22px" - "**Line height:** 1.15–1.20" - "**Vai trò:** Toàn bộ UI, navigation, caption, metadata và văn bản gần body. Geometric grotesque ở một weight duy nhất (400) — hệ thống cố tình tránh tương phản bold/light, thay vào đó dùng kích thước và vị trí để tạo hệ thống phân cấp. Dùng 'Inter' hoặc chính 'Neue Haas Grotesk' (miễn phí qua Adobe) làm lựa chọn thay thế" type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| caption | 12px | 1.15 | — | `--text-caption` |" info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |" info: "| body | 18px | 1.2 | — | `--text-body` |" info: "| subheading | 22px | 1.2 | — | `--text-subheading` |" info: "| heading | 58px | 1.2 | -1.04px | `--text-heading` |" info: "| display | 158px | 1.2 | -2.84px | `--text-display` |" tokens___spacing___shapes: đơn_vị_cơ_sở: "4px" density: "comfortable" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 7 | 7px | `--spacing-7` |" info: "| 9 | 9px | `--spacing-9` |" info: "| 12 | 12px | `--spacing-12` |" info: "| 16 | 16px | `--spacing-16` |" info: "| 29 | 29px | `--spacing-29` |" info: "| 37 | 37px | `--spacing-37` |" info: "| 182 | 182px | `--spacing-182` |" info: "| 236 | 236px | `--spacing-236` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| cards | 0px |" info: "| images | 0px |" info: "| buttons | 0px |" layout: - "**Card padding:** 0px" - "**Element gap:** 7-12px" components: image_tile: vai_trò: "Container ảnh phân tán — đơn vị nội dung chính" info: "Ảnh hình chữ nhật trên nền trắng. Viền mỏng 1px màu #000000 hoặc viền trắng gần như vô hình. Zero border-radius (0px). Không padding. Không shadow. Ảnh phủ kín tile edge-to-edge. Tile có kích thước thay đổi từ ~200px đến ~400px và được đặt theo dạng phân tán bất đối xứng, không phải grid." image_overlay_caption: vai_trò: "Văn bản nhãn được đặt phía trên hoặc cạnh image tile" info: "Neue Haas Grotesk 12–14px, weight 400, màu #000000. Đặt ở góc trên bên trái của image tile, cách mép trái/phải 9px. Hoạt động như một placard gallery — cực kỳ tối giản, không background, không border." display_title: vai_trò: "Hero brand title — element thị giác chi phối của trang" info: "Custom serif font 'title', weight 400, kích thước 58px hoặc 158px, line-height 1.20, letter-spacing -0.018em. Màu #000000. Căn giữa theo chiều ngang trên trang. Không background, không border. Kích thước 158px là tỷ lệ đặc trưng — nó phải chiếm ưu thế trong viewport." navigation_link: vai_trò: "Các mục navigation trên thanh trên cùng (INDEX, INFOS, ARCHIVES)" info: "Neue Haas Grotesk 14px, weight 400, chữ in hoa. Màu #000000. margin-right 16px giữa các mục. Không gạch chân, không background, không border. Trạng thái hover: không thay đổi thị giác — chủ nghĩa tối giản là tuyệt đối." wordmark_brand_mark: vai_trò: "Nhận diện trang web ở góc trên bên trái" info: "Neue Haas Grotesk 14px, weight 400, chữ in hoa 'LAURA MONIN'. Màu #000000. Căn trái, cách mép 16px. Không có logo đồ họa — chính chữ là brand mark." section_label: văn_bản_nhỏ_dùng_cho_tên_dự_án_và_tên_bộ_sưu_tập_được_đặt_chồng_lên_ảnh: info: "Neue Haas Grotesk 12px, weight 400, chữ in hoa, #000000. Xuất hiện ở đầu một số image tile nhất định. Không có element trang trí." do_s_and_don_ts: do: - "Chỉ dùng #ffffff và #000000 cho mọi bề mặt, văn bản và viền — không bao giờ đưa màu thứ ba vào" - "Đặt hero display title ở 58–158px bằng custom serif với letter-spacing -0.018em; tỷ lệ này là bắt buộc để có cảm giác editorial" - "Dùng neue-haas-grotesk-display ở weight 400 duy nhất — không bao giờ bold, không bao giờ light — cho mọi văn bản UI ở 12/14/18/22px" - "Duy trì khoảng cách dọc 200–300px giữa các section chính của trang để giữ khoảng thở kiểu gallery-wall" - "Giữ mọi border-radius ở 0px — mọi container, ảnh và button đều là hình chữ nhật hoàn hảo" - "Đặt image tile theo dạng phân tán bất đối xứng, không phải grid đều — vị trí bất thường là dấu hiệu nhận diện bố cục" - "Dùng khoảng trống âm bản rộng rãi (60%+ viewport) thay vì nhồi nhét nội dung vào khu vực có sẵn" don_t: - "Không thêm drop shadow, glow hoặc bất kỳ box-shadow nào cho bất kỳ element nào — thiết kế cố tình phẳng" - "Không dùng bo góc (border-radius > 0) trên bất kỳ ảnh, card hoặc button nào" - "Không đưa màu nhấn, gradient hoặc background fill vào — hệ thống hoàn toàn là đen trên trắng" - "Không dùng weight bold hoặc semibold cho văn bản UI — weight 400 ở mọi kích thước là quy tắc" - "Không căn chỉnh ảnh theo grid đều với gutter bằng nhau — phân tán bất đối xứng là bản sắc bố cục" - "Không thêm hover animation, transition hoặc micro-interaction vào navigation hoặc link" - "Không dùng sans-serif hoặc grotesque font cho headline hoặc display text — serif mang toàn bộ trọng lượng thương hiệu" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 1 | Paper | `#ffffff` | Nền toàn trang — tông bề mặt duy nhất cho canvas, card và image wrapper |" elevation: info: "Thiết kế không có bất kỳ shadow vocabulary nào. Chiều sâu được tạo ra hoàn toàn thông qua khoảng trống âm bản rộng rãi và vị trí bất đối xứng — element có cảm giác như nổi trên tường gallery, không phải xếp chồng trên UI. Không drop shadow, không glow, không border elevation trong bất kỳ trường hợp nào. Sự vắng mặt này là đặc trưng: thêm bất kỳ shadow nào sẽ phá vỡ độ phẳng editorial vốn định nghĩa hệ thống." imagery: info: "Ngôn ngữ thị giác chỉ dùng ảnh chụp: ảnh thời trang editorial đầy đủ màu sắc (bờ biển, hậu trường, chân dung) được trình bày dưới dạng tile hình chữ nhật không có hiệu ứng cắt xén, không duotone, không filter. Ảnh được đặt nguyên bản trên canvas trắng với viền mảnh như sợi tóc. Không minh họa, không icon, không đồ họa trừu tượng. Ảnh chụp là màu sắc duy nhất trong toàn bộ hệ thống — mọi thứ khác đều là đơn sắc, khiến ảnh có cảm giác như những vật thể sống động được gắn trên tường gallery trắng. Photo tile được cô lập (không chồng lấn, không masking), full-bleed đến mép container." layout: info: "Trang full-bleed không có ràng buộc max-width — canvas mở rộng đến mép viewport. Bố cục là sự phân tán bất đối xứng có chủ đích: thanh trên cùng với brand mark bên trái, nav ở giữa, secondary nav bên phải; sau đó ảnh được đặt ở các vị trí không đều nhau trên viewport (trên-trái, trên-giữa, trên-phải, giữa-trái, trung tâm, giữa-phải, dưới-trái, dưới-phải). Display title khổng lồ 'La Croisette' nằm ở trung tâm bố cục, đóng vai trò là mỏ neo hấp dẫn giữa các image tile phân tán. Nhịp điệu dọc dùng khoảng cách section cực lớn (padding-bottom 200–300px) để tạo khoảng ngắt kiểu gallery. Không có grid cột truyền thống, không có hàng card — mọi element đều được đặt bằng tay. Navigation là thanh trên cùng tối giản với link văn bản nhỏ. Không sidebar, không mega-menu, không sticky header." agent_prompt_guide: quick_color_reference: - "background: #ffffff" - "text: #000000" - "border: #000000" - "image border: #000000 (1px hairline)" - "primary action: không có màu CTA riêng biệt" - "accent: không có — hệ thống hoàn toàn đơn sắc" example_component_prompts: - "**Hero Display Title**: Căn giữa văn bản 'La Croisette' trên canvas #ffffff. Font: custom serif (thay thế Playfair Display), weight 400, kích thước 158px, line-height 1.20, letter-spacing -0.018em, màu #000000. Không background, không border, không decoration. Title một mình nên chiếm ~50% chiều rộng viewport." - "**Image Tile with Overlay Caption**: Đặt một ảnh hình chữ nhật (tỷ lệ 4:5 hoặc 3:4) trên canvas #ffffff. Bao quanh bằng viền 1px #000000, border-radius 0px. Đặt chồng văn bản caption (ví dụ 'FLEXHIBITION SS24') bằng neue-haas-grotesk-display weight 400, 12px, chữ in hoa, #000000, đặt cách góc trên bên trái của ảnh 9px." - "**Minimal Navigation Bar**: Thanh trên cùng trải dài toàn bộ chiều rộng viewport trên nền #ffffff. Bên trái: brand mark 'LAURA MONIN' bằng neue-haas-grotesk-display 14px weight 400 chữ in hoa #000000, cách mép trái 16px. Ở giữa: secondary nav link ('FLEXHIBITION SS24', 'LA CROISETTE', 'PISCINE MOLITOR', 'INSTAGRAM') ở 12–14px weight 400 #000000 với khoảng cách 16px. Bên phải: nav link ('INDEX', 'INFOS', 'ARCHIVES') ở 14px weight 400 #000000. Không gạch chân, không hiệu ứng hover, không border." - "**Asymmetric Photo Scatter Section**: Đặt 5–6 tile ảnh hình chữ nhật ở các vị trí không đều nhau trên canvas #ffffff — ví dụ, một ở góc phần tư trên-trái (~250px rộng), một ở trên-giữa (~200px), một ở trên-phải (~300px), và một cái lớn hơn ở dưới display title (~400px). Mỗi tile: border-radius 0px, viền hairline 1px #000000, ảnh full-bleed, padding 0px. Duy trì khoảng trống âm bản bất thường 80–120px giữa các tile. Không căn chỉnh grid." - "**Empty Section Gap**: Chèn một vùng thở dọc 250–300px (padding-bottom) với không nội dung, không trang trí, thuần #ffffff. Đây là một element thiết kế, không phải không gian lãng phí — nó tạo nhịp điệu dạo gallery giữa các cụm nội dung." negative_space_philosophy: info: "Hệ thống coi khoảng trắng là vật liệu thiết kế chính, không phải sản phẩm phụ. Khoảng 60–70% của bất kỳ viewport nào nên là canvas #ffffff trống. Đây không phải là ràng buộc cần vượt qua — nó CHÍNH LÀ thiết kế. Khi nghi ngờ, hãy loại bỏ một element. Khi nghi ngờ về khoảng cách, hãy nhân đôi nó. Ảnh chụp và display title duy nhất là những viên ngọc trên cánh đồng trắng; bao quanh chúng bằng khoảng trống khiến chúng trở nên rực rỡ." similar_brands: - "**Acne Studios (acnestudios.com)** — Cùng ngôn ngữ portfolio thời trang editorial — canvas trắng tinh, đặt ảnh bất đối xứng thưa thớt, custom serif display headline, và không màu sắc ngoài đơn sắc" - "**Lemaire (lemaire.fr)** — Sự kiềm chế giống hệt: khoảng trắng như vật liệu, grid ảnh phân tán trên nền trắng tinh, serif display type cho hero title, geometric grotesque cho micro-copy" - "**Celine (celine.com)** — Cùng DNA portfolio thời trang — custom serif display headline khổng lồ, canvas trắng full-bleed, ảnh chụp là nguồn màu sắc duy nhất, và bố cục bất đối xứng chống grid" - "**The Row (therow.com)** — Cùng cách tiếp cận sang trọng thông qua loại bỏ: không màu, không shadow, không bo góc, serif title cỡ lớn nổi trên nền trắng với vị trí ảnh editorial" - "**Trang web thương hiệu của Phoebe Philo** — Hệ thống typography gần như giống hệt — custom serif display title, grotesque secondary type ở weight 400, canvas trắng tinh, và phân tán ảnh editorial không có UI chrome" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; /* Typography — Font Families */ --font-title: 'title', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-neue-haas-grotesk-display: 'neue-haas-grotesk-display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.15; --text-body-sm: 14px; --leading-body-sm: 1.2; --text-body: 18px; --leading-body: 1.2; --text-subheading: 22px; --leading-subheading: 1.2; --text-heading: 58px; --leading-heading: 1.2; --tracking-heading: -1.04px; --text-display: 158px; --leading-display: 1.2; --tracking-display: -2.84px; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-unit: 4px; --spacing-7: 7px; --spacing-9: 9px; --spacing-12: 12px; --spacing-16: 16px; --spacing-29: 29px; --spacing-37: 37px; --spacing-182: 182px; --spacing-236: 236px; /* Layout */ --card-padding: 0px; --element-gap: 7-12px; /* Named Radii */ --radius-cards: 0px; --radius-images: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-paper: #ffffff; } tailwind_v4: css: | @theme { /* Colors */ --color-paper-white: #ffffff; --color-ink-black: #000000; /* Typography */ --font-title: 'title', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-neue-haas-grotesk-display: 'neue-haas-grotesk-display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.15; --text-body-sm: 14px; --leading-body-sm: 1.2; --text-body: 18px; --leading-body: 1.2; --text-subheading: 22px; --leading-subheading: 1.2; --text-heading: 58px; --leading-heading: 1.2; --tracking-heading: -1.04px; --text-display: 158px; --leading-display: 1.2; --tracking-display: -2.84px; /* Spacing */ --spacing-7: 7px; --spacing-9: 9px; --spacing-12: 12px; --spacing-16: 16px; --spacing-29: 29px; --spacing-37: 37px; --spacing-182: 182px; --spacing-236: 236px; }