# CLOU architects > # CLOU architects — Style Reference **CLOU architects** — Style Reference ## Prompt Content ``` # CLOU architects — Style Reference > mực trên giấy kem **Theme:** light CLOU architects vận hành trong một vũ trụ hai màu triệt để: kem ấm (#fffffc) và đen tuyệt đối (#000000). Không có màu nào khác được phép xuất hiện trong giao diện — mọi sắc thái còn lại đều đến từ ảnh kiến trúc tràn vào bố cục. Hệ thống được xây dựng trên một geometric sans-serif duy nhất (Circular Std) đẩy đến cực hạn: headline đạt 200px+, letter-spacing thắt chặt mạnh ở tỷ lệ lớn, và line-height nén xuống 0.80 cho display copy. Nền kem được chọn là off-white có chủ đích (không phải #ffffff), giúp tránh sự chói gắt khi đặt cạnh typography đen chủ đạo và mang lại cho trang cảm giác như giấy, như tường gallery ấm áp. Navigation là một thanh đen dày; body là khoảng kem rộng rãi; "trang trí" duy nhất chính là nhiếp ảnh — full-bleed, không khung, chính là dự án thực tế. Đây là một hệ thống thiết kế hầu như không nói gì về mặt thị giác để kiến trúc có thể nói lên tất cả. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Giấy Kem | `#fffffc` | `--color-cream-paper` | Page canvas, bề mặt card, button fills — màu off-white hơi ấm ngăn độ tương phản chói gắt với mực đen, mang lại cho toàn bộ site cảm giác ấm áp của giấy in thay vì cảm giác màn hình kỹ thuật số | | Mực Đen | `#000000` | `--color-ink-black` | Toàn bộ text, border, navigation background, button borders, icon strokes — màu foreground duy nhất trong hệ thống, dùng ở độ bão hòa hoàn toàn, không giảm opacity | ## Tokens — Typography ### Circular Std — Kiểu chữ duy nhất cho toàn bộ UI và editorial text. Dùng weight 400 cho body, nav và caption; weight 700 cho emphasis và display-level statements. Các kích thước display (109–201px) với tracking thắt chặt và line-height 0.80 tạo ra headline hoạt động như các đối tượng kiến trúc — mỗi từ chiếm không gian vật lý, gần như các yếu tố chịu lực. · `--font-circular-std` - **Thay thế:** Inter, Geist, General Sans - **Weights:** 400, 700 - **Kích thước:** 13, 17, 20, 25, 32, 34, 50, 109, 134, 166, 201px - **Line height:** 0.80, 1.00, 1.06, 1.10, 1.15, 1.50 - **Letter spacing:** -0.07em ở 201px, -0.05em ở 166px, -0.03em ở 109–134px, -0.012em ở 50px, -0.01em ở 32–34px - **Vai trò:** Kiểu chữ duy nhất cho toàn bộ UI và editorial text. Dùng weight 400 cho body, nav và caption; weight 700 cho emphasis và display-level statements. Các kích thước display (109–201px) với tracking thắt chặt và line-height 0.80 tạo ra headline hoạt động như các đối tượng kiến trúc — mỗi từ chiếm không gian vật lý, gần như các yếu tố chịu lực. ### Type Scale | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 13px | 1.5 | — | `--text-caption` | | body-sm | 17px | 1.5 | — | `--text-body-sm` | | body | 20px | 1.5 | — | `--text-body` | | subheading | 25px | 1.15 | — | `--text-subheading` | | heading-sm | 34px | 1.1 | -0.34px | `--text-heading-sm` | | heading | 50px | 1.06 | -0.6px | `--text-heading` | | heading-lg | 109px | 1 | -3.27px | `--text-heading-lg` | | display | 134px | 1 | -4.02px | `--text-display` | | display-lg | 166px | 0.8 | -8.3px | `--text-display-lg` | | display-xl | 201px | 0.8 | -14.07px | `--text-display-xl` | ## Tokens — Spacing & Shapes **Density:** comfortable ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 5 | 5px | `--spacing-5` | | 8 | 8px | `--spacing-8` | | 10 | 10px | `--spacing-10` | | 11 | 11px | `--spacing-11` | | 13 | 13px | `--spacing-13` | | 17 | 17px | `--spacing-17` | | 25 | 25px | `--spacing-25` | | 50 | 50px | `--spacing-50` | | 59 | 59px | `--spacing-59` | | 84 | 84px | `--spacing-84` | | 101 | 101px | `--spacing-101` | | 134 | 134px | `--spacing-134` | | 168 | 168px | `--spacing-168` | | 174 | 174px | `--spacing-174` | ### Border Radius | Element | Giá trị | |---------|-------| | tags | 0px | | cards | 0px | | inputs | 0px | | buttons | 0px | ### Shadows | Tên | Giá trị | Token | |------|-------|-------| | subtle | `rgb(0, 0, 0) 0px 0px 0px 1px` | `--shadow-subtle` | ### Layout - **Page max-width:** 1440px - **Section gap:** 84px - **Card padding:** 25px - **Element gap:** 17px ## Components ### Black Navigation Bar **Vai trò:** Site navigation cấp cao nhất Thanh đen full-bleed (#000000) với text màu kem (#fffffc). Logo ở ngoài cùng bên trái, nav links căn trái bên cạnh, language switcher căn phải. Padding khoảng 17px dọc, 25px ngang. Links dùng Circular Std 17px weight 400; link active/hover có gạch chân kem 1px (nhìn thấy trên 'Info' trong ảnh chụp màn hình). Chiều cao gọn — không có padding rộng rãi, thanh này là một dải chứ không phải một panel. ### Display Headline **Vai trò:** Hero và các câu mở đầu section Circular Std weight 400 ở 134–201px, line-height 0.80–1.00, letter-spacing -3 đến -14px tùy kích thước. Màu #000000 trên nền kem. Không italic, không all-caps, không trang trí — kích thước và độ tương phản weight làm tất cả công việc. Dấu chấm ở cuối là lựa chọn chấm câu đặc trưng (ví dụ: 'We do social space.'). ### Body Text Block **Vai trò:** Đoạn văn và copy mô tả Circular Std weight 400 ở 20px, line-height 1.50, màu #000000 trên nền kem. Căn trái, không thụt lề dòng đầu, không hyphenation. Lề trái rộng (lên đến 59px) để tạo cột text không trải dài toàn bộ chiều rộng. Độ dài dòng được cố tình ngắn để mang cảm giác editorial print thay vì web copy. ### Underlined Nav Link **Vai trò:** Mục navigation đang active hoặc hover Circular Std 17px weight 400, màu kem (#fffffc) trên nav bar đen, với gạch chân kem 1px ngay bên dưới text. Gạch chân sát baseline, không gap, không offset — giống dấu mực của máy in hơn là CSS border. ### Outlined Action Button **Vai trò:** Hành động chính hoặc phụ (không có biến thể filled) Circular Std weight 400 ở 17px, text #000000, border 1px solid #000000, background #fffffc. Padding 17px ngang x ~8px dọc. Radius 0px — không bo tròn. Không fill state, không shadow, không gradient. Button là một khung, không phải một khối. ### Full-Bleed Project Image **Vai trò:** Hiển thị ảnh kiến trúc Không frame, không border, không caption, không background card. Ảnh trải dài edge-to-edge trong container của nó, chỉ có nội dung vốn có của nó cung cấp màu sắc. Không bo góc (radius 0). Tỷ lệ khung hình thay đổi theo dự án nhưng luôn rộng (landscape). Ảnh mang toàn bộ trọng lượng cảm xúc và màu sắc của trang. ### Language Switcher **Vai trò:** Chuyển đổi ngôn ngữ bản địa hóa Góc trên bên phải của nav bar, Circular Std 13px weight 400, màu kem trên nền đen. Định dạng: 'En / 中文' với dấu gạch chéo phân cách. Không dropdown — luôn hiển thị dưới dạng text toggle phẳng. ### Logo Mark **Vai trò:** Nhận diện thương hiệu trong nav Wordmark 'CLOU', Circular Std 17px weight 700, màu kem trên nền nav đen. Không icon mark — thuần typography, chữ hoa, tracking chặt. ### Section Divider **Vai trò:** Phân cách trực quan giữa các khối nội dung Không có divider rõ ràng. Sự phân cách đạt được nhờ khoảng cách dọc 84px giữa các khối và nhịp điệu ảnh/text xen kẽ. Nền kem là liên tục — không có thay đổi màu nền giữa các section. ## Do's and Don'ts ### Do - Dùng #fffffc cho tất cả page backgrounds và #000000 cho tất cả text, border và icon — hệ thống hoàn toàn hai màu - Đặt display headline ở 109px+ với letter-spacing từ -0.03em đến -0.07em và line-height 0.80–1.00 để phù hợp với thái độ typography kiến trúc - Dùng weight 400 cho cả body và display; chỉ dành weight 700 cho logo và emphasis mạnh - Để ảnh chạy full-bleed không border, không bo góc, không background card — radius phải là 0 trên tất cả components - Duy trì nhịp điệu dọc 84px giữa các section chính và 17–25px cho inline element spacing - Kết thúc display statement bằng dấu chấm để tạo giọng điệu khẳng định, hoàn chỉnh ('We do social space.') - Dùng outlined button (border #000000 1px trên fill #fffffc) cho mọi hành động clickable — không bao giờ thêm filled black button ### Don't - Không bao giờ đưa màu thứ ba vào giao diện — mọi nội dung màu sắc phải đến từ ảnh dự án - Không dùng #ffffff thuần cho backgrounds — độ ấm nhẹ của #fffffc là toàn bộ tâm trạng - Không áp dụng border-radius cho bất kỳ element nào; hệ thống hoàn toàn trực giao - Không giảm opacity trên màu đen để tạo tông xám — dùng màu đen thật hoặc không dùng màu đó - Không đặt display headline nhỏ hơn 109px — các kích thước sub-display (50–90px) phá vỡ tỷ lệ editorial - Không thêm drop shadows ngoài border 1px solid thỉnh thoảng — thiết kế phẳng, không nâng lên - Không dùng all-caps cho body hoặc display text; sentence case với dấu chấm kết thúc là giọng điệu của hệ thống ## Surfaces | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|-------|---------| | 1 | Giấy Kem | `#fffffc` | Page canvas, background mặc định cho tất cả nội dung body | | 2 | Mực Đen | `#000000` | Navigation bar và bất kỳ bề mặt inverted nào — bề mặt tối duy nhất trong hệ thống | ## Imagery Nhiếp ảnh là màu sắc duy nhất trong hệ thống và chiếm không gian thị giác chủ đạo. Tất cả imagery đều là ảnh kiến trúc thực tế — nội thất, ngoại thất và chi tiết công trình — chụp trong ánh sáng có sẵn, không qua xử lý màu hậu kỳ hoặc filter. Ảnh chạy full-bleed edge-to-edge với zero border, không bo góc, không background card. Không có illustration, không có đồ họa trừu tượng, không có icon nào ngoài một bộ nhỏ các UI glyph (mũi tên, đóng), và không có yếu tố trang trí. 'Phong cách imagery' duy nhất là ảnh kiến trúc tài liệu ở độ phân giải cao nhất có thể, được phép lấp đầy viewport và đưa bảng màu riêng của nó — đỏ, xanh dương, xanh lá, ánh sáng ấm — vào một trang vốn đơn sắc. ## Layout Max-width 1440px căn giữa, mặc dù hero và ảnh full-bleed thoát khỏi ràng buộc này. Trang theo mô hình editorial cuộn dọc: dải nav đen ở trên cùng, một display-headline hero, sau đó là nhịp điệu lặp lại: ảnh full-bleed, tiếp theo là khối body text ngắn, tiếp theo là ảnh tiếp theo. Cột text hẹp (căn trái, max ~600px) và nằm về bên trái, trong khi ảnh trải dài toàn bộ chiều rộng. Không có card grids, không có multi-column feature blocks, không có pricing tables. Các section được phân cách bằng khoảng trắng (84px) thay vì divider hoặc background xen kẽ. Bố cục đọc giống như một chuyên khảo kiến trúc in ấn — một câu khẳng định, một ảnh, một câu khẳng định, một ảnh. ## Agent Prompt Guide **Quick Color Reference** - text: #000000 - background: #fffffc - border: #000000 - accent: none - primary action: không có màu CTA riêng biệt **Example Component Prompts** 1. *Display headline*: 'Build bold spaces.' trong Circular Std weight 400, size 166px, line-height 0.80, letter-spacing -8.3px, màu #000000 trên canvas #fffffc. Kết thúc bằng dấu chấm. 2. *Outlined button*: Text 'View Project' trong Circular Std weight 400, 17px, #000000, bên trong border 1px solid #000000 trên fill #fffffc, padding 8px 17px, radius 0px. 3. *Navigation bar*: Thanh #000000 full-bleed, padding dọc 17px, ngang 25px. Bên trái: 'CLOU' trong Circular Std weight 700, 17px, #fffffc. Bên cạnh: 'Projects Info Contact' trong weight 400, 17px, #fffffc, với mục active được gạch chân 1px. Bên phải: 'En / 中文' ở 13px, #fffffc. 4. *Body paragraph*: 'Combining smart creativity with commercial savvy, we take our clients' challenges and transform them into exceptionally innovative design.' trong Circular Std weight 400, 20px, line-height 1.50, #000000, max-width ~480px, căn trái với lề trái 59px. 5. *Full-bleed project image*: Một ảnh kiến trúc landscape, không border, không radius, không caption, trải dài toàn bộ chiều rộng viewport ở tỷ lệ khung hình gốc. ## Typography Philosophy Circular Std là toàn bộ giọng nói của hệ thống. Type scale không phải là dần dần — nó mang tính editorial: body sống ở 17–25px, sau đó nhảy trực tiếp lên 50px cho secondary headings, và sau đó nhảy vọt lên 109–201px cho display. Đây là một scale được thiết kế cho một trang tạp chí, không phải dashboard. Letter-spacing rất chặt ở kích thước lớn (-0.07em ở 201px) là thứ làm cho headline 201px không giống logo — các chữ cái kéo về phía nhau để tạo thành một khối mực đặc. Line-height 0.80 ở kích thước display cho phép các dòng gần như chạm nhau, tạo ra các khối typography dày đặc. Weight là nhị phân: 400 là mặc định, 700 chỉ dùng cho wordmark và emphasis hiếm hoi. Sự kiềm chế này có nghĩa là khi 700 xuất hiện, nó mang trọng lượng không cân xứng. ## Similar Brands - **Herzog & de Meuron** — Cùng bố cục editorial hai màu triệt để với headline sans-serif display khổng lồ và ảnh kiến trúc full-bleed là nguồn màu sắc duy nhất - **Pentagram** — Cùng kiến trúc trang đơn sắc (thường là đen-trên-trắng) nơi typography mang toàn bộ thương hiệu và nhiếp ảnh được để không khung - **OMA / Rem Koolhaas** — Cùng chủ nghĩa tối đa typography — headline display cỡ lớn với tracking chặt, zero border-radius, và khoảng trắng lớn giữa các khối nội dung thưa thớt - **Snøhetta** — Cùng canvas kem/off-white yên tĩnh với ảnh dự án full-bleed và navigation chrome tối giản ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-cream-paper: #fffffc; --color-ink-black: #000000; /* Typography — Font Families */ --font-circular-std: 'Circular Std', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.5; --text-body-sm: 17px; --leading-body-sm: 1.5; --text-body: 20px; --leading-body: 1.5; --text-subheading: 25px; --leading-subheading: 1.15; --text-heading-sm: 34px; --leading-heading-sm: 1.1; --tracking-heading-sm: -0.34px; --text-heading: 50px; --leading-heading: 1.06; --tracking-heading: -0.6px; --text-heading-lg: 109px; --leading-heading-lg: 1; --tracking-heading-lg: -3.27px; --text-display: 134px; --leading-display: 1; --tracking-display: -4.02px; --text-display-lg: 166px; --leading-display-lg: 0.8; --tracking-display-lg: -8.3px; --text-display-xl: 201px; --leading-display-xl: 0.8; --tracking-display-xl: -14.07px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-bold: 700; /* Spacing */ --spacing-5: 5px; --spacing-8: 8px; --spacing-10: 10px; --spacing-11: 11px; --spacing-13: 13px; --spacing-17: 17px; --spacing-25: 25px; --spacing-50: 50px; --spacing-59: 59px; --spacing-84: 84px; --spacing-101: 101px; --spacing-134: 134px; --spacing-168: 168px; --spacing-174: 174px; /* Layout */ --page-max-width: 1440px; --section-gap: 84px; --card-padding: 25px; --element-gap: 17px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-inputs: 0px; --radius-buttons: 0px; /* Shadows */ --shadow-subtle: rgb(0, 0, 0) 0px 0px 0px 1px; /* Surfaces */ --surface-cream-paper: #fffffc; --surface-ink-black: #000000; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-cream-paper: #fffffc; --color-ink-black: #000000; /* Typography */ --font-circular-std: 'Circular Std', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.5; --text-body-sm: 17px; --leading-body-sm: 1.5; --text-body: 20px; --leading-body: 1.5; --text-subheading: 25px; --leading-subheading: 1.15; --text-heading-sm: 34px; --leading-heading-sm: 1.1; --tracking-heading-sm: -0.34px; --text-heading: 50px; --leading-heading: 1.06; --tracking-heading: -0.6px; --text-heading-lg: 109px; --leading-heading-lg: 1; --tracking-heading-lg: -3.27px; --text-display: 134px; --leading-display: 1; --tracking-display: -4.02px; --text-display-lg: 166px; --leading-display-lg: 0.8; --tracking-display-lg: -8.3px; --text-display-xl: 201px; --leading-display-xl: 0.8; --tracking-display-xl: -14.07px; /* Spacing */ --spacing-5: 5px; --spacing-8: 8px; --spacing-10: 10px; --spacing-11: 11px; --spacing-13: 13px; --spacing-17: 17px; --spacing-25: 25px; --spacing-50: 50px; --spacing-59: 59px; --spacing-84: 84px; --spacing-101: 101px; --spacing-134: 134px; --spacing-168: 168px; --spacing-174: 174px; /* Shadows */ --shadow-subtle: rgb(0, 0, 0) 0px 0px 0px 1px; } ```