concrete_club_studio___style_reference:
  info: "> 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"

  info: "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:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| 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 |"
    info: "| 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 |"
    info: "| 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 |"
    info: "| 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 |"
    info: "| 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 |"
    info: "| 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:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.17 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.14 | -0.42px | `--text-body-sm` |"
      info: "| body | 16px | 1.19 | -0.48px | `--text-body` |"
      info: "| subheading | 26px | 1.15 | — | `--text-subheading` |"
      info: "| heading | 48px | 0.78 | — | `--text-heading` |"
      info: "| heading-lg | 112px | 0.78 | — | `--text-heading-lg` |"
      info: "| display | 300px | 0.73 | -9px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 230 | 230px | `--spacing-230` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| 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"

      info: "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"

      info: "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"

      info: "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"

      info: "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"

      info: "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à"

      info: "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"

      info: "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"

      info: "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:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Bone White Canvas | `#f5f6f5` | Nền trang mặc định và panel biên tập sáng |"
    info: "| 1 | Dusty Rose Field | `#e296bb` | Hero band và section nội dung ấm — bề mặt chữ ký của thương hiệu |"
    info: "| 2 | Charcoal Spread | `#212121` | Section biên tập tối full-bleed — đảo ngược trang thành type trắng |"
    info: "| 3 | Ink Black | `#000000` | Bề mặt nội dung tương phản tối đa |"

  elevation:

    info: "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:

    info: "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:

    info: "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:

    - "**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."

    - "**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."

    - "**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)."

    - "**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."

    - "**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;
        }