# Laura Monin > # Laura Monin — Style Reference ## Prompt Content ``` # Laura Monin — Style Reference > editorial gallery wall, white marble, ink stamp **Theme:** light 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 | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | 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 | | 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 | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.15 | — | `--text-caption` | | body-sm | 14px | 1.2 | — | `--text-body-sm` | | body | 18px | 1.2 | — | `--text-body` | | subheading | 22px | 1.2 | — | `--text-subheading` | | heading | 58px | 1.2 | -1.04px | `--text-heading` | | display | 158px | 1.2 | -2.84px | `--text-display` | ## Tokens — Spacing & Shapes **Đơn vị cơ sở:** 4px **Density:** comfortable ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 7 | 7px | `--spacing-7` | | 9 | 9px | `--spacing-9` | | 12 | 12px | `--spacing-12` | | 16 | 16px | `--spacing-16` | | 29 | 29px | `--spacing-29` | | 37 | 37px | `--spacing-37` | | 182 | 182px | `--spacing-182` | | 236 | 236px | `--spacing-236` | ### Border Radius | Element | Giá trị | |---------|-------| | cards | 0px | | images | 0px | | 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 Ả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 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 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) 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 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** 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 | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|-------|---------| | 1 | Paper | `#ffffff` | Nền toàn trang — tông bề mặt duy nhất cho canvas, card và image wrapper | ## Elevation 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 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 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** 1. **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. 2. **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. 3. **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. 4. **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. 5. **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 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; } ```