artu___style_reference: info: "> Gallery wall trên nền giấy trắng. ARTU xem trình duyệt như một bảo tàng trải rộng — ảnh sản phẩm cỡ lớn, đường kẻ mảnh (hairline rules), và một mảng xanh chanh duy nhất ở mép dưới để khép kín không gian." theme: "light" info: "ARTU hoạt động như một phòng trưng bày nội thất dưới dạng trình duyệt: một font neo-grotesque tùy chỉnh với một weight duy nhất, canvas trắng tinh, ảnh sản phẩm lấp đầy viewport, và hầu như không có UI chrome hiển thị. Sự kỷ luật ở đây là cực đoan — chỉ có một weight, một họ font, hai màu bề mặt, và khoảng trống âm (negative space) đảm nhận vai trò mà shadow và gradient thường làm ở nơi khác. Màu sắc được sử dụng một cách phẫu thuật: màu xanh chanh có độ bão hòa cao (#d7ff66) chỉ xuất hiện ở band footer như một tín hiệu kết thúc, trong khi màu đỏ thô (#ff1313) xuất hiện dưới dạng đường viền mảnh và nét icon — cố tình không đạt độ tương phản, nó hoạt động như nhịp điệu đồ họa, không phải thông tin. Kết quả mang phong cách giống một trang sách nghệ thuật hơn là một trang thương mại: sản phẩm là bố cục, bố cục là khoảng trắng, và UI là một đường đen mảnh của thanh navigation viết hoa ở mép trên." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, khung ảnh — toàn bộ site nằm trên nền trắng tinh |" info: "| Ink Black | `#000000` | `--color-ink-black` | Toàn bộ chữ, đường viền mảnh, navigation, gạch chân link, khung ảnh — màu cấu trúc duy nhất |" info: "| Terminal Lime | `#d7ff66` | `--color-terminal-lime` | Band footer, mảng highlight bề mặt, điểm nhấn kết thúc — màu xanh bão hòa cao báo hiệu ranh giới trang, giống như mép màu đóng một bức tường gallery |" info: "| Signal Red | `#ff1313` | `--color-signal-red` | Nét viền trang trí, đường viền icon, đường kẻ mảnh trong bố cục editorial — được dùng ở độ tương phản dưới ngưỡng đọc được, như dấu câu đồ họa, không bao giờ là body text |" tokens___typography: helveticaneuepro___họ_font_phổ_quát_cho_navigation__body__heading__input_và_footer___weight_duy_nhất_trên_site_400__được_đặt_viết_hoa_toàn_bộ_ở_nav_và_footer__với_tracking_dương_0_0140em_0_0240em_tạo_cho_weight_đơn_này_nhịp_điệu_cơ_học__kiểu_catalog____font_helveticaneuepro: - "**Thay thế:** Neue Haas Grotesk, Inter, Helvetica Now" - "**Weights:** 400" - "**Cỡ chữ:** 18px, 20px, 24px, 32px" - "**Line height:** 1.00–1.20" - "**Letter spacing:** 0.0140em ở body, tăng dần lên 0.0240em ở display — tracking dương ở mọi nơi là đi ngược mặc định của neo-grotesque và là dấu ấn của thương hiệu" - "**Vai trò:** Họ font phổ quát cho navigation, body, heading, input và footer — weight duy nhất trên site (400), được đặt viết hoa toàn bộ ở nav và footer, với tracking dương 0.0140em–0.0240em tạo cho weight đơn này nhịp điệu cơ học, kiểu catalog" type_scale: info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| body-sm | 18px | 1.2 | 0.014px | `--text-body-sm` |" info: "| body | 20px | 1.2 | 0.014px | `--text-body` |" info: "| subheading | 24px | 1.15 | 0.022px | `--text-subheading` |" info: "| heading | 32px | 1 | 0.024px | `--text-heading` |" tokens___spacing___shapes: base_unit: "4px" density: "spacious" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 8 | 8px | `--spacing-8` |" info: "| 11 | 11px | `--spacing-11` |" info: "| 14 | 14px | `--spacing-14` |" info: "| 17 | 17px | `--spacing-17` |" info: "| 18 | 18px | `--spacing-18` |" info: "| 29 | 29px | `--spacing-29` |" info: "| 31 | 31px | `--spacing-31` |" info: "| 32 | 32px | `--spacing-32` |" info: "| 37 | 37px | `--spacing-37` |" info: "| 42 | 42px | `--spacing-42` |" info: "| 80 | 80px | `--spacing-80` |" info: "| 108 | 108px | `--spacing-108` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| tags | 0px |" info: "| cards | 0px |" info: "| images | 0px |" info: "| buttons | 0px |" layout: - "**Page max-width:** 1440px" - "**Section gap:** 32px" - "**Card padding:** 0px" - "**Element gap:** 11px" components: top_navigation_bar: vai_trò: "Global navigation cố định" header_một_hàng: "logo ('artu' chữ thường, weight 400, 18–20px, màu đen) ở mép trái, sau đó là PRODUCTS, STORES, ABOUT, NEWS, CONTACTS viết hoa toàn bộ ở weight 400 với tracking 0.022em, cách nhau bằng dấu phẩy, không phải dấu gạch. Mép phải: EN, CART (0), MENU, cùng weight và kiểu chữ. Không có background fill, không có border, padding-top 17px, column-gap 32px giữa các item, nằm trực tiếp trên nền trắng." full_bleed_hero_image: vai_trò: "Tuyên bố mở đầu viewport" info: "Ảnh sản phẩm edge-to-edge không có caption, không có overlay, không có button. Radius 0px, không border, trải dài toàn bộ chiều rộng viewport. Bản thân ảnh CHÍNH LÀ hero — khung duy nhất là một đường hairline đen 1px (border-bottom trên section) ngăn cách nó với khối tiếp theo." editorial_image_grid: vai_trò: "Gallery sản phẩm dạng cuộn" info: "Bố cục đa cột bất đối xứng kết hợp ảnh sản phẩm tỷ lệ 1:1, 3:4 và 2:3 ở các kích thước khác nhau (khoảng 3–4 cột, ảnh chiếm 40–55% viewport). Khoảng trắng giữa các ảnh, không có caption hay tiêu đề, radius 0px, không border. Bố cục mang cảm giác được tuyển chọn, không phải dạng lưới đều." hairline_divider: vai_trò: "Phân cách section" info: "Đường kẻ ngang 1px solid black (#000000), full-width hoặc content-width, được dùng giữa các section chính của trang. Mang cấu trúc thị giác mà padding và gap thường đảm nhận ở nơi khác." decorative_red_border: vai_trò: "Điểm nhấn đồ họa editorial" info: "Đường nét mảnh màu đỏ (#ff1313) được dùng một cách tiết kiệm bên trong các khối nội dung và xung quanh icon — một dấu hiệu đồ họa, không phải một container. Độ tương phản cố tình dưới ngưỡng WCAG; nó tồn tại để được nhìn thấy như một đường kẻ, không phải để đọc như chữ." carousel_arrows: vai_trò: "Điều khiển slider ảnh" info: "Hai mũi tên đen đơn giản (← →) ở cỡ 18–20px, đặt ở góc dưới-phải của khối hero image, trên lề trắng giữa ảnh và hairline divider. Không có hình tròn, không có fill — chỉ là glyph trong #000000 với stroke weight 1px." lime_footer_band: vai_trò: "Kết thúc trang / site footer" info: "Band full-width tô màu #d7ff66, không có chữ bên trong, hoạt động như một bức tường màu đóng trang. Nằm bên dưới toàn bộ nội dung, chiều cao được xác định bởi footer padding (~24–32px). Màu xanh tươi là màu duy nhất chiếm diện tích thực trong bố cục." footer_link_row: vai_trò: "Navigation phụ" info: "Nếu có, nằm ngay phía trên lime band: viết hoa toàn bộ, weight 400, 18px, các link cách nhau bằng dấu phẩy trong #000000 với margin-bottom 29–37px giữa các hàng. Kế thừa hệ thống typography viết hoa của nav." image_thumbnail_link: vai_trò: "Teaser sản phẩm" info: "Ảnh sản phẩm không khung, radius 0px, tùy chọn border đen 1px, không có caption bên dưới. Hoạt động như một link trực quan trong gallery — bản thân ảnh là affordance, không phải button." do_s_and_don_ts: nên_làm: - "Chỉ dùng một họ font (HelveticaNeuePro hoặc thay thế bằng Neue Haas Grotesk) và một weight (400) trên toàn bộ site" - "Đặt toàn bộ navigation và footer text ở dạng viết hoa với tracking dương 0.014–0.024em" - "Dành #d7ff66 cho footer band hoặc một bề mặt kết thúc duy nhất — không bao giờ trải rộng màu này khắp trang" - "Dùng hairline 1px solid #000000 cho tất cả divider section và border ảnh" - "Để ảnh sản phẩm lấp đầy viewport ở radius 0px, không có overlay text hay CTA" - "Giữ border-radius 0px trên mọi ảnh, card, button và tag — sự sắc cạnh là thương hiệu" không_nên_làm: - "Không thêm weight thứ hai, font serif hay display face — 400 Helvetica là hệ thống" - "Không dùng #ff1313 cho body text, heading hay CTA — độ tương phản 3.9:1 trên nền trắng chính là điểm mấu chốt; nó chỉ thuộc về các nét trang trí mảnh" - "Không thêm drop shadow, gradient hay hiệu ứng kính — site phẳng theo thiết kế" - "Không dùng góc bo tròn trên bất kỳ element nào — không phải ảnh, không phải button, không phải tag" - "Không tô màu xanh chanh tràn trang — nó chỉ xuất hiện dưới dạng footer band kết thúc" - "Không thêm sticky header, sidebar hay modal — bố cục là một gallery scroll liên tục" - "Không phá vỡ quy ước nav viết hoa bằng menu item viết hoa-thường hay heading dạng câu" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|---------|---------|" info: "| 0 | Canvas | `#ffffff` | Nền toàn trang, khung ảnh |" info: "| 1 | Footer Band | `#d7ff66` | Band màu kết thúc đóng trang |" imagery: info: "Nhiếp ảnh là toàn bộ nhận diện thị giác. Ảnh sản phẩm full-bleed, độ phân giải cao của ghế và nội thất, được chụp trong ánh sáng nội thất ấm áp với bóng đổ tự nhiên trên nền sàn trắng hoặc gỗ. Hero ảnh đầu tiên lấp đầy toàn bộ viewport edge-to-edge. Phần gallery sử dụng bố cục editorial bất đối xứng với ảnh ở nhiều tỷ lệ và kích thước hỗn hợp (1:1, 3:4, 2:3) được sắp xếp với khoảng trắng rộng rãi, không caption, không overlay. Không có illustration, không có icon ngoài một vài dấu hiệu nét đỏ mảnh, không có đồ họa trừu tượng, và không có ảnh phong cách sống — vật thể luôn là chủ thể, được chụp trong bối cảnh nhưng không bao giờ được trang trí." layout: info: "Gallery scroll một cột, một trang. Viewport đầu tiên là một hero photograph full-bleed với thanh navigation mảnh ở trên (logo trái, menu item cách nhau bằng dấu phẩy, language/cart/menu phải) và carousel arrows tối giản ở góc dưới-phải của ảnh. Bên dưới hero là một hairline divider đen 1px, sau đó là editorial image grid rộng rãi pha trộn các tỷ lệ bất đối xứng — thumbnail nhỏ, square vừa và ảnh portrait lớn ở các chiều rộng khác nhau (khoảng 25–55% trang), tất cả trên nền trắng với khoảng trắng không rộng hơn 32px. Trang kết thúc với một lime-green footer band (#d7ff66) full-width cao khoảng 24–32px. Cảm giác tổng thể giống một trang catalog in ấn — typography nằm ở lề, nhiếp ảnh chiếm trung tâm, và lime band đóng kín không gian." agent_prompt_guide: tham_chiếu_màu_nhanh: - "text: #000000" - "background: #ffffff" - "border: #000000 (hairline 1px)" - "accent surface: #d7ff66 (chỉ footer band)" - "decorative stroke: #ff1313 (đường mảnh, độ tương phản dưới ngưỡng đọc)" - "primary action: không có màu CTA riêng biệt" 3_5_ví_dụ_component_prompts: - "**Top Navigation Bar** — Nền trắng, không border. Trái: logo 'artu' ở 400 HelveticaNeuePro 20px, #000000, chữ thường. Phải của logo, cách nhau bằng dấu phẩy: PRODUCTS, STORES, ABOUT, NEWS, CONTACTS ở weight 400, viết hoa toàn bộ, tracking 0.022em, #000000. Phải cùng: EN, CART (0), MENU cùng style. Padding-top 17px, gap 32px giữa các item, row gap 11px. Không background fill, không sticky behavior." - "**Full-bleed Hero Image** — Ảnh edge-to-edge trải rộng 100% chiều rộng viewport, radius 0px, không border ngoại trừ hairline 1px solid #000000 ở dưới. Không overlay text, không caption, không button. Góc dưới-phải: hai mũi tên đen 18px (← →) ở stroke weight 1px, nằm trên lề trắng bên dưới ảnh, cách mép phải 32px." - "**Editorial Image Grid Section** — Canvas trắng, grid 3 cột bất đối xứng nơi các ảnh có kích thước độc lập (một ảnh rộng 55%, một ảnh 40%, một ảnh 45%, một ảnh 30%, v.v.) với gap 32px. Tất cả ảnh ở radius 0px, không border, không caption. Bên dưới grid, một hairline divider full-width 1px solid #000000, sau đó 32px khoảng trắng, rồi đến footer band." - "**Lime Footer Band** — Dải full-width tô #d7ff66, chiều cao ~24–32px được xác định bởi padding, không có chữ bên trong, không border. Nó là một bức tường màu thuần túy đóng trang; không element nào khác trên site được dùng màu này." - "**Decorative Red Hairline** — Đường kẻ 1px solid #ff1314 được dùng như một dấu hiệu đồ họa bên trong khối nội dung editorial, hoặc như một horizontal rule giữa hai ảnh xếp chồng, hoặc như một khung mảnh quanh một icon nhỏ. Độ tương phản cố tình thấp trên nền trắng — nó được nhìn thấy như một đường kẻ, không phải đọc như chữ." single_weight_typography_philosophy: info: "Toàn bộ site chỉ dùng HelveticaNeuePro ở weight 400. Không có bold, không có light, không có italic. Hệ thống phân cấp được xây dựng hoàn toàn thông qua kích thước (18, 20, 24, 32px), kiểu chữ (logo chữ thường so với nav/footer viết hoa), và tracking (0.014em body → 0.024em display). Tracking dương trên một neo-grotesque là điều không theo quy ước — nó đẩy kiểu chữ về phía giọng điệu catalog/spec-sheet thay vì cảm giác chặt chẽ, dày đặc của Helvetica web mặc định. Khi tái tạo hệ thống này, hãy chống lại sự thôi thúc thêm weight bold cho heading; hệ thống phân cấp thị giác phải đến từ scale và khoảng trắng một mình." similar_brands: - "**Vitra** — Cùng kỷ luật catalog nội thất: canvas trắng, ảnh sản phẩm là toàn bộ bố cục, hairline rules, nav cách nhau bằng dấu phẩy, và hầu như không có UI trang trí" - "**HAY (hay.dk)** — Chia sẻ typography neo-grotesque single-weight và editorial image grids, dù HAY dùng màu sắc thoải mái hơn" - "**Massimo (massimolubicz.com)** — Cùng sự kiềm chế brand-book-as-website: font đơn, bề mặt phẳng, trang ưu tiên nhiếp ảnh, không shadow hay gradient" - "**Fellow (fellowproducts.com)** — Thương hiệu sản phẩm chuyên biệt xem site như một gallery — hero image lớn, nav tối giản, một màu nhấn duy nhất dùng tiết kiệm" - "**Aarke** — Site sản phẩm cao cấp với canvas trắng, ảnh sản phẩm, nav đen mảnh, và một màu nhấn đậm duy nhất dành cho các khoảnh khắc kết thúc" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-canvas-white: #ffffff; --color-ink-black: #000000; --color-terminal-lime: #d7ff66; --color-signal-red: #ff1313; /* Typography — Font Families */ --font-helveticaneuepro: 'HelveticaNeuePro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-body-sm: 18px; --leading-body-sm: 1.2; --tracking-body-sm: 0.014px; --text-body: 20px; --leading-body: 1.2; --tracking-body: 0.014px; --text-subheading: 24px; --leading-subheading: 1.15; --tracking-subheading: 0.022px; --text-heading: 32px; --leading-heading: 1; --tracking-heading: 0.024px; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-unit: 4px; --spacing-8: 8px; --spacing-11: 11px; --spacing-14: 14px; --spacing-17: 17px; --spacing-18: 18px; --spacing-29: 29px; --spacing-31: 31px; --spacing-32: 32px; --spacing-37: 37px; --spacing-42: 42px; --spacing-80: 80px; --spacing-108: 108px; /* Layout */ --page-max-width: 1440px; --section-gap: 32px; --card-padding: 0px; --element-gap: 11px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-images: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-canvas: #ffffff; --surface-footer-band: #d7ff66; } tailwind_v4: css: | @theme { /* Colors */ --color-canvas-white: #ffffff; --color-ink-black: #000000; --color-terminal-lime: #d7ff66; --color-signal-red: #ff1313; /* Typography */ --font-helveticaneuepro: 'HelveticaNeuePro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-body-sm: 18px; --leading-body-sm: 1.2; --tracking-body-sm: 0.014px; --text-body: 20px; --leading-body: 1.2; --tracking-body: 0.014px; --text-subheading: 24px; --leading-subheading: 1.15; --tracking-subheading: 0.022px; --text-heading: 32px; --leading-heading: 1; --tracking-heading: 0.024px; /* Spacing */ --spacing-8: 8px; --spacing-11: 11px; --spacing-14: 14px; --spacing-17: 17px; --spacing-18: 18px; --spacing-29: 29px; --spacing-31: 31px; --spacing-32: 32px; --spacing-37: 37px; --spacing-42: 42px; --spacing-80: 80px; --spacing-108: 108px; }