# Concrete Club Studio > # Concrete Club Studio — Style Reference ## Prompt Content ``` # Concrete Club Studio — Style Reference > zine biên tập phai màu nắng trên giấy hồng phấn — bố cục là một trang in, không phải màn hình **Theme:** mixed Concrete Club là một zine biên tập ấm áp trên nền hồng phấn: wordmark serif cỡ lớn chiếm ưu thế trên các mảng hồng và trắng ngà rộng rãi, các thẻ sans-serif viết hoa nhỏ dẫn dắt ánh nhìn, và một mảng mực cam-đỏ ấm duy nhất thấm xuyên suốt bố cục như điểm nhấn màu duy nhất. Các section xen kẽ giữa hồng phấn, canvas trắng ngà và than đậm — mỗi section hoạt động như một trang in riêng biệt được đóng thành một ấn phẩm. Typography chính là giao diện: một humanist serif đặc trưng (DaVinci) đảm nhận toàn bộ trọng lượng display, trong khi Helvetica Neue Light thì thầm ở tỷ lệ body và nav. Các minh họa đường nét vẽ tay phá vỡ grid ở lề phải của wordmark, làm mềm đi uy quyền typography đậm nét bằng nét duyên dáng lo-fi. Mọi thứ khác đều tiết chế — không button, không card, không shadow — trang web hoạt động như một cuốn sách nghệ thuật in, không phải một sản phẩm phần mềm. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ember Ink | `#d9462b` | `--color-ember-ink` | Màu wordmark hero, nét accent, và là văn bản màu duy nhất — một tông cam-đỏ ấm mang cảm giác mực in tay trên nền hồng. Dùng trên display headline và chi tiết minh họa chọn lọc | | Dusty Rose | `#e296bb` | `--color-dusty-rose` | Nền section chính — một tông hồng bão hòa thấp, ấm áp, làm nền cho hero band và các panel nội dung full-width. Thiết lập tông màu biên tập của site | | Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, tô màu wordmark trên section sáng, nét vẽ minh họa và đường viền. Màu trung tính chủ lực | | Charcoal | `#212121` | `--color-charcoal` | Bề mặt section tối — dùng cho các panel full-bleed đảo ngược trang thành các spread biên tập trắng trên nền đen | | Bone White | `#f5f6f5` | `--color-bone-white` | Canvas trang mặc định và nền section sáng — trắng ngà hơi ấm, kết hợp với hồng thay vì cạnh tranh | | Paper White | `#ffffff` | `--color-paper-white` | Trắng tinh khiết, dành riêng cho các khoảnh khắc tương phản tối đa và panel nội dung sáng nhất | ## Tokens — Typography ### TRJN DaVinci — Display wordmark và display type biên tập. Humanist serif ở 300px là chữ ký — nó mang tên thương hiệu và tiêu đề section. x-height cao, chi tiết ball-terminal, và độ tương phản nhẹ khiến nó có cảm giác như wood-type hơn là web type. Dùng ở tỷ lệ khổng lồ cho wordmark 'Concrete Club' và ở 14–16px cho editorial pull-quote và nhãn chương. Thay thế: Playfair Display hoặc DM Serif Display để có nét humanist editorial serif tương tự. · `--font-trjn-davinci` - **Thay thế:** Playfair Display - **Weight:** 400 - **Cỡ chữ:** 14px, 16px, 300px - **Line height:** 0.73, 0.75, 1.14, 1.19 - **Letter spacing:** -0.0300em - **Vai trò:** Display wordmark và display type biên tập. Humanist serif ở 300px là chữ ký — nó mang tên thương hiệu và tiêu đề section. x-height cao, chi tiết ball-terminal, và độ tương phản nhẹ khiến nó có cảm giác như wood-type hơn là web type. Dùng ở tỷ lệ khổng lồ cho wordmark 'Concrete Club' và ở 14–16px cho editorial pull-quote và nhãn chương. Thay thế: Playfair Display hoặc DM Serif Display để có nét humanist editorial serif tương tự. ### HelveticaNeue-Light — Body text, nhãn navigation, và các câu lệnh section viết hoa cỡ lớn. Độ mảnh weight 300 của sans này là có chủ đích — nó nằm lặng lẽ bên dưới wordmark DaVinci thay vì cạnh tranh. Ở 48px và 112px, nó trở thành statement type theo cách riêng, dùng cho chapter intro lớn và hero secondary text. Line-height chặt (0.78) khiến header nhiều dòng xếp chồng dày đặc. Thay thế: Helvetica Neue Light hoặc Inter Light. · `--font-helveticaneue-light` - **Weight:** 400 - **Cỡ chữ:** 26px, 48px, 112px - **Line height:** 0.78, 1.15 - **Vai trò:** Body text, nhãn navigation, và các câu lệnh section viết hoa cỡ lớn. Độ mảnh weight 300 của sans này là có chủ đích — nó nằm lặng lẽ bên dưới wordmark DaVinci thay vì cạnh tranh. Ở 48px và 112px, nó trở thành statement type theo cách riêng, dùng cho chapter intro lớn và hero secondary text. Line-height chặt (0.78) khiến header nhiều dòng xếp chồng dày đặc. Thay thế: Helvetica Neue Light hoặc Inter Light. ### Neue Montreal — Micro-label và chữ nhỏ — dòng bản quyền, marker vị trí, meta text tinh tế. Giọng nói sạch sẽ, trung tính nhất trong hệ thống. Thay thế: Neue Haas Grotesk hoặc Inter. · `--font-neue-montreal` - **Weight:** 400 - **Cỡ chữ:** 12px - **Line height:** 1.17 - **Vai trò:** Micro-label và chữ nhỏ — dòng bản quyền, marker vị trí, meta text tinh tế. Giọng nói sạch sẽ, trung tính nhất trong hệ thống. Thay thế: Neue Haas Grotesk hoặc Inter. ### Type Scale | Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.17 | — | `--text-caption` | | body-sm | 14px | 1.14 | -0.42px | `--text-body-sm` | | body | 16px | 1.19 | -0.48px | `--text-body` | | subheading | 26px | 1.15 | — | `--text-subheading` | | heading | 48px | 0.78 | — | `--text-heading` | | heading-lg | 112px | 0.78 | — | `--text-heading-lg` | | display | 300px | 0.73 | -9px | `--text-display` | ## Tokens — Spacing & Shapes **Density:** compact ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 5 | 5px | `--spacing-5` | | 10 | 10px | `--spacing-10` | | 30 | 30px | `--spacing-30` | | 60 | 60px | `--spacing-60` | | 230 | 230px | `--spacing-230` | ### Border Radius | Element | Giá trị | |---------|-------| | tags | 0px | | cards | 0px | | inputs | 0px | | buttons | 0px | ### Layout - **Card padding:** 30px - **Element gap:** 5-10px ## Components ### Display Wordmark **Vai trò:** Tên thương hiệu 'Concrete Club' trên hero và section opener TRJN DaVinci ở 300px, line-height 0.73, letter-spacing -0.03em. Màu là Ember Ink (#d9462b) trên bề mặt Dusty Rose, hoặc Ink Black (#000000) trên bề mặt sáng. Lấp đầy toàn bộ chiều rộng viewport trên hero. Không có padding phía trên — type tràn từ mép trên. Chữ 'e' trong 'Concrete' được thay thế hoặc chồng lên bởi một minh họa hình viên ngậm/mắt vẽ tay ở baseline. ### Uppercase Nav Tag **Vai trò:** Navigation nhỏ và nhãn chương ở đầu section HelveticaNeue-Light ở 14px, viết hoa, letter-spacing bình thường. Xếp thành 3 dòng: category / location / chapter. Màu là Ember Ink trên nền hồng, Ink Black trên nền trắng, Paper White trên nền than. Xếp chồng chặt với khoảng cách dòng 5px. Xuất hiện căn giữa phía trên wordmark trên hero, và ở góc trên bên phải dưới dạng site nav. ### Editorial Body Block **Vai trò:** Văn bản đoạn trong intro và section nội dung HelveticaNeue-Light ở 16px, line-height 1.19, letter-spacing -0.03em. Viết hoa toàn bộ, đặt trong một cột hẹp (max ~400px). Màu là Ink Black trên bề mặt sáng, Paper White trên nền than. Không có margin giữa các đoạn trong một block — các block xếp chồng chặt. ### Hand-Drawn Illustration Accent **Vai trò:** Nghệ thuật đường nét trang trí phá vỡ grid typography Minh họa đường nét đơn sắc bằng màu chromatic hiện tại của thương hiệu (Ember Ink trên nền hồng, Ink Black trên nền trắng, Paper White trên nền than). border-radius 0px, không tô màu — chỉ outline nét vẽ. Đặt ở lề phải của display wordmark, hơi chồng lên baseline. Hoạt động như một dấu hiệu chữ ký, không phải vật trang trí. ### Hero Band (Pink) **Vai trò:** Section mở đầu thiết lập thương hiệu Nền Dusty Rose (#e296bb) full-bleed, top padding 230px để đẩy wordmark xuống dưới fold của nav. Chứa: micro-description trên cùng bên trái, uppercase nav trên cùng bên phải, chapter tag căn giữa, và wordmark khổng lồ 300px. Không viền, không card, không shadow — bề mặt CHÍNH LÀ container. ### Light Editorial Section **Vai trò:** Section nội dung trên canvas trắng ngà Nền Bone White (#f5f6f5) với display wordmark 112px màu Ink Black. Bố cục cạnh nhau: wordmark trái, illustration accent nhỏ phải. Horizontal padding 60px, vertical padding 60-100px. ### Dark Inverted Section **Vai trò:** Section than đậm full-bleed cho nội dung biên tập tương phản Nền Charcoal (#212121) với văn bản Paper White. Cùng hệ thống typographic nhưng đảo ngược — HelveticaNeue-Light 16px viết hoa body, display wordmark lớn màu Paper White. Minh họa đường nét căn giữa bằng outline Paper White. Spread tối là một khoảnh khắc lật trang có chủ đích, không phải footer. ### Top-Right Site Nav **Vai trò:** Navigation tối giản ở góc trên bên phải của mọi section Xếp chồng ba dòng: location (ví dụ 'Paris, France — 11:34') / menu links (Studio, Contact, Blog) / trống. HelveticaNeue-Light 12-14px, viết hoa. Neo góc trên bên phải với padding 30px. Không nền, không viền — nằm trực tiếp trên bề mặt section. ### Top-Left Identity Tag **Vai trò:** Mô tả thương hiệu cố định ở góc trên bên trái Hai dòng chữ nhỏ viết hoa: 'The Concrete Club is a collaboration-based creative freelance collective founded by Gaétan Pautler.' HelveticaNeue-Light 12px, Ink Black trên nền sáng, Paper White trên nền tối. Neo góc trên bên trái với padding 30px. ### Chapter Marker **Vai trò:** Nhãn nhỏ chỉ section/chương hiện tại Xếp chồng ba dòng viết hoa: 'CONCRETE CLUB' / 'PARIS, WORLDWIDE' / 'CHAPTER 2'. HelveticaNeue-Light 14px, căn giữa theo chiều ngang, đặt ở một phần ba phía trên của trang, phía trên wordmark. Màu khớp với accent của bề mặt hiện tại. ### Full-Bleed Surface Section **Vai trò:** Dải màu cạnh kề cạnh Không border-radius ở bất kỳ đâu. Section lấp đầy viewport cạnh kề cạnh, không có ràng buộc max-width. Bố cục thực sự full-bleed — wordmark và nội dung được đặt với padding tương đối so với mép viewport, không phải container căn giữa. ## Do's and Don'ts ### Nên làm - Chỉ dùng TRJN DaVinci cho wordmark và display type từ 112px trở lên - Để wordmark lấp đầy toàn bộ chiều rộng viewport trên section hero — không có container max-width - Đặt tất cả body và nav text bằng HelveticaNeue-Light viết hoa — không có mixed case trong giọng biên tập - Xen kẽ giữa ba màu bề mặt (Dusty Rose, Bone White, Charcoal) trong các section full-bleed, không có viền giữa chúng - Chỉ dùng Ember Ink (#d9462b) làm màu văn bản chromatic duy nhất, và chỉ trên bề mặt Dusty Rose - Đặt minh họa vẽ tay ở lề phải của display wordmark, chồng lên baseline - Dùng top padding 230px trên hero để đẩy wordmark xuống dưới vùng nav ### Không nên làm - Không thêm button, card, hoặc bất kỳ component UI nâng cao nào — hệ thống không có bề mặt tương tác - Không áp dụng border-radius cho bất kỳ element nào — giữ tất cả các cạnh sắc và in - Không dùng shadow hoặc elevation — bề mặt chỉ được xác định bằng màu sắc - Không căn giữa nội dung trong container max-width — bố cục là edge-to-edge full-bleed - Không dùng typography mixed-case — toàn bộ hệ thống nói bằng chữ viết hoa - Không dùng Ember Ink trên bề mặt sáng hoặc tối — nó chỉ thuộc về Dusty Rose - Không thêm nền gradient hoặc nhiếp ảnh — hệ thống chỉ có màu in phẳng ## Surfaces | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|---------|---------| | 0 | Bone White Canvas | `#f5f6f5` | Nền trang mặc định và panel biên tập sáng | | 1 | Dusty Rose Field | `#e296bb` | Hero band và section nội dung ấm — bề mặt chữ ký của thương hiệu | | 2 | Charcoal Spread | `#212121` | Section biên tập tối full-bleed — đảo ngược trang thành type trắng | | 3 | Ink Black | `#000000` | Bề mặt nội dung tương phản tối đa | ## Elevation Thiết kế không dùng shadow. Hệ thống phân cấp bề mặt được truyền đạt hoàn toàn qua sự luân phiên màu trường — Dusty Rose → Bone White → Charcoal hoạt động như các trang in riêng biệt thay vì layer kỹ thuật số xếp chồng. Elevation là một phép ẩn dụ in ấn (giấy trên giấy), không phải phép ẩn dụ kỹ thuật số (card trên canvas). ## Imagery Ngôn ngữ hình ảnh chỉ có minh họa. Nghệ thuật đường nét vẽ tay bằng outline một màu — không tô màu, không gradient, không nhiếp ảnh. Minh họa xuất hiện dưới dạng accent nhỏ (khoảng 80-120px) ở lề phải của display wordmark, gợi ý các vật thể như viên ngậm/mắt, một chiếc túi có nhãn 'DAMN', hoặc đường nét tự do. Phong cách là lo-fi, bút trên giấy, hơi lắc lư — đối lập hoàn toàn với vector illustration trau chuốt. Không có product photography, không có chân dung, không có đồ họa trừu tượng ngoài các minh họa. ## Layout Bố cục biên tập full-bleed không có container max-width. Trang đọc từ trên xuống dưới như một chuỗi các dải màu full-viewport: Dusty Rose hero → Bone White section → Charcoal dark section. Trong mỗi dải, nội dung được đặt với padding rộng rãi (30-60px hai bên, 60-230px dọc) nhưng không bao giờ căn giữa trong một container cố định. Wordmark là element chiếm ưu thế trên hero và section opener, trải dài gần như cạnh kề cạnh ở 300px. Các element văn bản nhỏ (nav, chapter tag, body block) là các cột hẹp đặt trong cụm chặt. Navigation tối giản: identity tag trên cùng bên trái và menu trên cùng bên phải, cả hai đều 12-14px viết hoa. Grid lỏng lẻo và bất đối xứng — cột văn bản và accent minh họa được đặt bằng tay thay vì bám vào grid nghiêm ngặt. ## Agent Prompt Guide **Tham khảo màu nhanh** - text: #000000 (Ink Black) - background: #f5f6f5 (Bone White) - border: #000000 (Ink Black, 1px hairline) - accent: #d9462b (Ember Ink) - primary action: không có màu CTA riêng biệt **3-5 Ví dụ Component Prompt** 1. **Display Wordmark Block**: Nền Dusty Rose (#e296bb) full-bleed, top padding 230px. 'Concrete Club' khổng lồ đặt bằng TRJN DaVinci (thay thế: Playfair Display) ở 300px, line-height 0.73, letter-spacing -0.03em, màu #d9462b. Đặt một minh họa đường nét vẽ tay nhỏ (~100px) ở lề phải của wordmark, hơi chồng lên baseline của chữ cuối. 2. **Light Editorial Section**: Nền Bone White (#f5f6f5) full-bleed. Display wordmark bằng TRJN DaVinci ở 112px, line-height 0.78, màu #000000, canh trái với left padding 60px. Cột body hẹp (max 400px) bằng HelveticaNeue-Light 16px viết hoa, line-height 1.19, letter-spacing -0.03em, màu #000000, đặt ở góc phần tư phía dưới bên trái. 3. **Dark Inverted Spread**: Nền Charcoal (#212121) full-bleed. Minh họa đường nét căn giữa bằng outline #ffffff (~150px). Body text bằng HelveticaNeue-Light 16px viết hoa, line-height 1.19, màu #ffffff, đặt trong một cột hẹp căn giữa (max 500px). 4. **Top-Right Nav Cluster**: Đặt absolute góc trên bên phải với padding 30px. Xếp chồng ba dòng: 'Paris, France — 11:34' / 'Studio, Contact, Blog' / trống. HelveticaNeue-Light 12px, viết hoa, màu #000000 trên bề mặt sáng, #ffffff trên bề mặt tối. Không nền, không viền. 5. **Chapter Marker**: Căn giữa theo chiều ngang, đặt ở một phần ba phía trên của trang. Xếp chồng ba dòng viết hoa bằng HelveticaNeue-Light 14px: 'CONCRETE CLUB' / 'PARIS, WORLDWIDE' / 'CHAPTER 2'. Khoảng cách dòng 5px. Màu #d9462b trên bề mặt hồng, #000000 trên bề mặt sáng. ## Similar Brands - **Werkplaats Typografie** — Cùng bố cục biên tập full-bleed với display type serif cỡ lớn trên nền tông giấy ấm và metadata sans-serif tối giản - **Pentagram portfolio pages** — Cùng cách xử lý trang web như một spread biên tập in — type lớn tự tin, trường màu phẳng, không có UI chrome - **Stefan Sagmeister studio site** — Cùng accent minh họa vẽ tay và sẵn sàng để một màu chromatic ấm duy nhất (họ hồng/cam) mang toàn bộ nhận diện thị giác - **Locomotive MTL** — Cùng cảm quan French-creative-agency: bảng màu Dusty Rose + cam-đỏ ấm, wordmark humanist serif lớn, sans viết hoa body, section biên tập sáng/tối xen kẽ - **Spin (studio site)** — Cùng dải màu full-bleed edge-to-edge với display type khổng lồ và không border-radius hay shadow — trang là một zine, không phải app ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-ember-ink: #d9462b; --color-dusty-rose: #e296bb; --color-ink-black: #000000; --color-charcoal: #212121; --color-bone-white: #f5f6f5; --color-paper-white: #ffffff; /* Typography — Font Families */ --font-trjn-davinci: 'TRJN DaVinci', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.17; --text-body-sm: 14px; --leading-body-sm: 1.14; --tracking-body-sm: -0.42px; --text-body: 16px; --leading-body: 1.19; --tracking-body: -0.48px; --text-subheading: 26px; --leading-subheading: 1.15; --text-heading: 48px; --leading-heading: 0.78; --text-heading-lg: 112px; --leading-heading-lg: 0.78; --text-display: 300px; --leading-display: 0.73; --tracking-display: -9px; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-5: 5px; --spacing-10: 10px; --spacing-30: 30px; --spacing-60: 60px; --spacing-230: 230px; /* Layout */ --card-padding: 30px; --element-gap: 5-10px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-inputs: 0px; --radius-buttons: 0px; /* Surfaces */ --surface-bone-white-canvas: #f5f6f5; --surface-dusty-rose-field: #e296bb; --surface-charcoal-spread: #212121; --surface-ink-black: #000000; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-ember-ink: #d9462b; --color-dusty-rose: #e296bb; --color-ink-black: #000000; --color-charcoal: #212121; --color-bone-white: #f5f6f5; --color-paper-white: #ffffff; /* Typography */ --font-trjn-davinci: 'TRJN DaVinci', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-helveticaneue-light: 'HelveticaNeue-Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-neue-montreal: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.17; --text-body-sm: 14px; --leading-body-sm: 1.14; --tracking-body-sm: -0.42px; --text-body: 16px; --leading-body: 1.19; --tracking-body: -0.48px; --text-subheading: 26px; --leading-subheading: 1.15; --text-heading: 48px; --leading-heading: 0.78; --text-heading-lg: 112px; --leading-heading-lg: 0.78; --text-display: 300px; --leading-display: 0.73; --tracking-display: -9px; /* Spacing */ --spacing-5: 5px; --spacing-10: 10px; --spacing-30: 30px; --spacing-60: 60px; --spacing-230: 230px; } ```