ohdada___style_reference: info: "> Editorial gallery wall" theme: "light" info: "OhDada vận hành trên ngôn ngữ thị giác gallery-catalog: hai tông neutral nhẹ, phấn (warm cream và lavender-gray) đan xen làm canvas full-bleed cho từng section, và một màu saddle brown bão hòa duy nhất đảm nhận toàn bộ công việc typographic và cấu trúc. Điểm nhấn typographic đặc trưng là sự kết hợp GrandSlang-Roman weight 100 — một display serif siêu mảnh — với Neue Haas Grotesk, khiến tên thương hiệu thì thầm qua những nét calligraphic mảnh như sợi tóc, trong khi text hỗ trợ nằm gọn trong nét grotesque sắc sảo, có cấu trúc. Đây là layout mật độ thấp, ưu tiên hình ảnh, nơi product photography (các tác phẩm điêu khắc động học với tông xanh dương và nâu trên nền trắng) cung cấp toàn bộ màu sắc mà UI từ chối sử dụng. Giao diện tối giản đến mức kiềm chế của editorial: viền mảnh như sợi tóc, hầu như không có shadow, không gradient, và các component cảm giác như những tấm catalog in ấn chứ không phải bề mặt phần mềm." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|------|" info: "| Chalk Cream | `#e6e0d9` | `--color-chalk-cream` | Canvas trang chính và nền section phụ; tông trắng ấm giúp chữ nâu và ảnh điêu khắc trông có chủ đích hơn là vô cảm |" info: "| Lavender Stone | `#b7b3be` | `--color-lavender-stone` | Nền section thay thế và canvas hero; tạo điểm nhấn lạnh, phấn làm đối trọng với cream ấm mà không phá vỡ kỷ luật achromatic |" info: "| Saddle Brown | `#5d3a19` | `--color-saddle-brown` | Tất cả heading, body copy, link text, và viền mảnh — giọng màu duy nhất trong hệ thống, được dùng như điểm nhấn vẽ bằng mực trên nền neutral nhạt; viền tương tác ghost và outlined; link và navigation control mang stroke nâu 1px thay vì nền đầy, giữ bề mặt yên tĩnh |" info: "| Ink Black | `#000000` | `--color-ink-black` | Chỉ dùng cho decorative SVG fill; không bao giờ dùng cho UI text hoặc surface element |" tokens___typography: grandslang_roman___chỉ_dùng_cho_brand_mark_và_large_display_headings___dùng_ở_58px__cho_wordmark_và_section_titles__weight_100_là_toàn_bộ_đặc_trưng__nét_serif_mảnh_như_sợi_tóc__đọc_như_được_vẽ_chứ_không_phải_typeset__thay_thế__cormorant_garamond_ultralight_hoặc_italiana__gần_đúng_với_độ_mảnh_cực_đoan_và_cấu_trúc_serif_tương_phản_cao_____font_grandslang_roman: - "**Thay thế:** Cormorant Garamond Ultralight" - "**Weights:** 100" - "**Sizes:** 58px" - "**Line height:** 1.00" - "**Letter spacing:** normal" - "**Vai trò:** Chỉ dùng cho brand mark và large display headings — dùng ở 58px+ cho wordmark và section titles. Weight 100 là toàn bộ đặc trưng: nét serif mảnh như sợi tóc, đọc như được vẽ chứ không phải typeset. Thay thế: Cormorant Garamond Ultralight hoặc Italiana, gần đúng với độ mảnh cực đoan và cấu trúc serif tương phản cao." neue_haas_grotesk_display___tất_cả_body_copy__navigation__secondary_headings__và_product_labels__weight_400_cho_body__500_cho_emphasis__hình_học_neo_grotesque_đóng_vai_trò_nền_neutral_cho_display_serif_biểu_cảm___một_baseline_swiss_type_có_chủ_đích_để_grandslang_tỏa_sáng__thay_thế__inter__neue_haas_unica__hoặc_helvetica_neue_____font_neue_haas_grotesk_display: - "**Thay thế:** Inter" - "**Weights:** 400, 500" - "**Sizes:** 16px, 17px, 72px" - "**Line height:** 1.00, 1.18, 1.20" - "**Letter spacing:** normal" - "**Vai trò:** Tất cả body copy, navigation, secondary headings, và product labels. Weight 400 cho body, 500 cho emphasis. Hình học neo-grotesque đóng vai trò nền neutral cho display serif biểu cảm — một baseline Swiss-type có chủ đích để GrandSlang tỏa sáng. Thay thế: Inter, Neue Haas Unica, hoặc Helvetica Neue." type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| body-sm | 16px | 1.18 | — | `--text-body-sm` |" info: "| display | 58px | 1 | — | `--text-display` |" info: "| display-lg | 72px | 1 | — | `--text-display-lg` |" tokens___spacing___shapes: base_unit: "6px" density: "compact" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 5 | 5px | `--spacing-5` |" info: "| 10 | 10px | `--spacing-10` |" info: "| 115 | 115px | `--spacing-115` |" info: "| 144 | 144px | `--spacing-144` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| cards | 0px |" info: "| images | 0px |" info: "| buttons | 0px |" layout: - "**Section gap:** 115px" - "**Card padding:** 40px" - "**Element gap:** 10px" components: hero_wordmark: vai_trò: "Hiển thị nhận diện thương hiệu" info: "Section full-bleed Lavender Stone (#b7b3be). GrandSlang-Roman weight 100 ở 58–72px, Saddle Brown (#5d3a19), đặt trên hai dòng với line-height 1.0 chặt. Không logo mark, không icon — chữ chính là thương hiệu. Lề trái rộng, text căn trái ở 1/3 trang." hero_subtitle: vai_trò: "Tagline bên dưới wordmark" info: "Neue Haas Grotesk weight 400 ở 16px, màu Chalk Cream (#e6e0d9) trên nền Lavender Stone. Ba dòng ngắn xếp chồng với nhịp dọc 5px. Sự kết hợp cream-trên-lavender có độ tương phản thấp có chủ đích — subtitle được đọc thứ hai, không phải thứ nhất." section_title_display: vai_trò: "Heading section chính" info: "Neue Haas Grotesk weight 500 ở 58px, Saddle Brown (#5d3a19) trên nền Chalk Cream. Line-height 1.0 chặt. Không gạch chân, không trang trí. Xuất hiện như element nội dung đầu tiên trong mỗi section với top padding 115px." product_card___editorial: vai_trò: "Mục sản phẩm trong catalog" info: "Ảnh full-bleed bên phải (rộng 50%), tên sản phẩm bằng Neue Haas Grotesk italic weight 400 ở 17px, Saddle Brown, căn dưới-cùng bên trái của cột ảnh. Không border, không shadow, không background card — ảnh nằm trực tiếp trên canvas Chalk Cream. Tên sản phẩm là metadata duy nhất hiển thị." outlined_link: vai_trò: "Navigation và inline links" info: "Text Saddle Brown (#5d3a19) bằng Neue Haas Grotesk weight 400 ở 16–17px, border dưới 1px Saddle Brown, không background fill. Right margin 10px khi nhóm. Border đóng vai trò tín hiệu clickable; riêng text sẽ quá yên tĩnh." section_divider: vai_trò: "Ngắt section ngầm" info: "Không có rule hiển thị. Các section phân cách qua sự đan xen màu nền (Chalk Cream → Lavender Stone → Chalk Cream) và vertical padding 115px. Khoảng thở của layout chính là divider." product_photography_frame: vai_trò: "Hình ảnh sản phẩm điêu khắc" info: "Crop ảnh edge-to-edge với radius 0px, không border, không shadow. Ảnh lấp đầy cột từ mép này sang mép kia. Chủ thể được chụp trên tường trắng hoặc gallery neutral — bản thân ảnh tự tạo độ tương phản với nền cream." navigation_bar: vai_trò: "Navigation cấp cao nhất" info: "Full-width, trong suốt, nằm trực tiếp trên màu nền của section hiện tại. Neue Haas Grotesk weight 400 ở 16px, Saddle Brown, các mục inline cách nhau bằng spacing, không background fill, không shadow, không có hành vi sticky." do_s_and_don_ts: do: - "Chỉ dùng GrandSlang-Roman weight 100 cho wordmark và display headings — không bao giờ đặt bold hoặc trên 72px" - "Đan xen Chalk Cream (#e6e0d9) và Lavender Stone (#b7b3be) làm nền section full-bleed để tạo nhịp điệu mà không thêm màu mới" - "Áp dụng top/bottom padding 115px cho tất cả section chính để duy trì khoảng thở gallery-wall" - "Đặt tất cả body và navigation text bằng Neue Haas Grotesk weight 400–500, Saddle Brown (#5d3a19), 16–17px" - "Đánh dấu link và interactive element bằng border dưới 1px Saddle Brown thay vì background đầy" - "Dùng border-radius 0px trên tất cả component — cards, buttons, images, và product frames đều có góc sắc" - "Để product photography là nguồn màu bổ sung duy nhất (xanh dương, trắng từ tác phẩm điêu khắc); bản thân UI chỉ dùng ba tông" don_t: - "Không thêm gradient, drop shadow, hoặc hiệu ứng elevation — hệ thống flat theo thiết kế" - "Không dùng góc bo tròn trên bất kỳ element nào; radius 0px là cấu trúc cốt lõi của cảm giác editorial" - "Không thêm màu thứ tư vào bảng màu — Saddle Brown, Chalk Cream, và Lavender Stone là toàn bộ vốn từ vựng chromatic" - "Không đặt GrandSlang-Roman dưới 58px hoặc ở weight nào khác ngoài 100; nó mất đi cá tính ở kích thước nhỏ" - "Không dùng nền button đầy cho primary action; dùng outlined-link treatment với border nâu" - "Không căn giữa body text — layout căn trái xuyên suốt, kể cả trong hero" - "Không thêm hover animation, color transition, hoặc motion; giao diện đọc như một catalog in ấn" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 1 | Cream Canvas | `#e6e0d9` | Nền trang chính và product section |" info: "| 2 | Lavender Plinth | `#b7b3be` | Nền hero và accent section, tạo chuyển dịch tông màu mà không thêm họ màu mới |" elevation: info: "Không shadow, không blur, không bề mặt xếp chồng. Chiều sâu đến từ sự đan xen các dải nền cream và lavender-stone cùng chiều sâu tự nhiên của product photography trên nền UI phẳng." imagery: info: "Product photography chiếm ưu thế và là nguồn màu duy nhất ngoài ba tông UI. Tác phẩm điêu khắc được chụp trong studio sạch, ánh sáng tốt trên tường trắng hoặc gallery neutral — crop chặt, thẳng góc, cho thấy toàn bộ tác phẩm động học. Không lifestyle context, không con người, không nền trang trí. Treatment là high-key, tự nhiên, không chỉnh sửa. Các hình khối xanh dương và nâu của tác phẩm điêu khắc vô tình lặp lại bảng màu UI, không phải do art direction. Icon hoàn toàn vắng mặt trong giao diện. Tỷ lệ hình ảnh: image-forward trên product pages, text-only trên hero." layout: info: "Mô hình trang full-bleed không có max-width container — nội dung căn theo mép trang với lề trái rộng. Hero là dải Lavender Stone full-viewport với wordmark căn trái ở khoảng 10% từ mép trái, không có bố cục căn giữa. Các section đan xen giữa dải Chalk Cream và Lavender Stone, cách nhau bằng vertical padding 115px. Product sections dùng split 2 cột: tên sản phẩm bằng italic serif ở 1/3 bên trái, ảnh full-bleed lấp đầy 2/3 bên phải. Navigation là top bar tối giản với inline links, không logo block, không hamburger. Nhịp điệu tổng thể là editorial — các dải lớn yên tĩnh, một sản phẩm mỗi section, không có card grid hoặc multi-column feature blocks." agent_prompt_guide: info: "Quick Color Reference:" - "text: #5d3a19 (Saddle Brown)" - "background: #e6e0d9 (Chalk Cream)" - "border: #5d3a19 (Saddle Brown, 1px hairline)" - "accent surface: #b7b3be (Lavender Stone)" - "primary action: #5d3a19 (outlined action border)" info: "Example Component Prompts:" - "Tạo một hero wordmark block: nền full-bleed Lavender Stone (#b7b3be), top padding 115px. Headline 'Oh DaDa' đặt bằng GrandSlang-Roman weight 100, 72px, màu #5d3a19, line-height 1.0, căn trái với lề trái ~10%. Bên dưới cách 40px, subtitle ba dòng bằng Neue Haas Grotesk weight 400, 16px, màu #e6e0d9, line-height 1.18." - "Tạo một section title: nền Chalk Cream (#e6e0d9). Heading 'Products' bằng Neue Haas Grotesk weight 500, 58px, màu #5d3a19, line-height 1.0, top padding 115px, căn trái." - "Tạo một product card: nền Chalk Cream (#e6e0d9), split hai cột. Cột phải (rộng 65%) là ảnh sản phẩm edge-to-edge với radius 0px. Cột trái (rộng 35%) chứa tên sản phẩm 'Kaskasi' đặt bằng Neue Haas Grotesk italic weight 400, 17px, màu #5d3a19, căn dưới cùng của cột." - "Tạo một outlined navigation link: Neue Haas Grotesk weight 400, 16px, màu #5d3a19, border dưới 1px solid #5d3a19, right margin 10px, không background fill, không padding." - "Tạo một section transition: chuyển từ nền Chalk Cream (#e6e0d9) sang Lavender Stone (#b7b3be), vertical padding 115px, không border hoặc shadow hiển thị giữa các section." elevation_philosophy: info: "Hệ thống không có elevation. Các component nằm sát canvas — không drop shadow, không blur, không bề mặt xếp lớp. Chiều sâu được gợi ý qua sự đan xen màu nền (Chalk Cream ↔ Lavender Stone) và độ tương phản giữa UI phẳng với product photography có chiều sâu. Sự vắng mặt của elevation này là cấu trúc cốt lõi: nó giữ cho giao diện đọc như một catalog gallery in ấn chứ không phải bề mặt phần mềm." similar_brands: - "**Maison & Objet** — Cùng layout catalog editorial với các dải section full-bleed, product photography là nguồn màu duy nhất, và minimal sans-serif hỗ trợ xung quanh một display face đặc biệt" - "**Hem (hem.com)** — Cùng sự đan xen nền hai tông phẳng, display headings cỡ lớn weight thấp, và kỷ luật dùng một màu nhấn ấm duy nhất cho tất cả text và border" - "**Atelier Bingo** — Cùng nhịp điệu gallery-portfolio: canvas neutral yên tĩnh đan xen với dải accent, ảnh sản phẩm góc sắc sát mép trang, và sự kiềm chế là nguyên tắc thiết kế chính" - "**Menu Space (menu.space)** — Cùng các section đan xen warm cream và muted cool-gray, interactive element chỉ là hairline, và sự kết hợp giữa thin display serif với grotesque neutral" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-chalk-cream: #e6e0d9; --color-lavender-stone: #b7b3be; --color-saddle-brown: #5d3a19; --color-ink-black: #000000; /* Typography — Font Families */ --font-grandslang-roman: 'GrandSlang-Roman', 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-body-sm: 16px; --leading-body-sm: 1.18; --text-display: 58px; --leading-display: 1; --text-display-lg: 72px; --leading-display-lg: 1; /* Typography — Weights */ --font-weight-thin: 100; --font-weight-regular: 400; --font-weight-medium: 500; /* Spacing */ --spacing-unit: 6px; --spacing-5: 5px; --spacing-10: 10px; --spacing-115: 115px; --spacing-144: 144px; /* Layout */ --section-gap: 115px; --card-padding: 40px; --element-gap: 10px; /* Named Radii */ --radius-cards: 0px; --radius-images: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-cream-canvas: #e6e0d9; --surface-lavender-plinth: #b7b3be; } tailwind_v4: css: | @theme { /* Colors */ --color-chalk-cream: #e6e0d9; --color-lavender-stone: #b7b3be; --color-saddle-brown: #5d3a19; --color-ink-black: #000000; /* Typography */ --font-grandslang-roman: 'GrandSlang-Roman', 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-body-sm: 16px; --leading-body-sm: 1.18; --text-display: 58px; --leading-display: 1; --text-display-lg: 72px; --leading-display-lg: 1; /* Spacing */ --spacing-5: 5px; --spacing-10: 10px; --spacing-115: 115px; --spacing-144: 144px; }