adcker___style_reference:
  info: "> Poster brutalism khổng lồ trên nền giấy bảo tàng ấm áp"

  theme: "light"

  info: "Adcker vận hành như một khối nguyên khối thuần typography: một nền cream ấm, một mực gần-đen, và display type lớn đến mức trở thành kiến trúc. Toàn bộ giao diện xoay quanh sự căng thẳng giữa headline editorial cỡ lớn và metadata siêu nhẹ, không có điểm nhấn màu sắc nào làm giảm tác động. Mọi quyết định thị giác đều mang tính editorial — trải nghiệm này giống như trang mở đầu của một tạp chí in, không phải một sản phẩm phần mềm. Độ bão hòa màu 0% là có chủ đích: màu sắc sẽ làm loãng đi sự uy quyền mà quy mô typography thuần túy đã tạo ra. Yếu tố phi chữ duy nhất phá vỡ không gian đơn sắc là một bức ảnh chân dung tự nhiên được nhúng trực tiếp vào bên trong headline, xem hình ảnh như dấu câu chứ không phải trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Ink Black | `#191919` | `--color-ink-black` | Toàn bộ text, headline, border, link color — màu foreground duy nhất trong toàn bộ hệ thống. Gần-đen thay vì đen tuyền giúp thêm độ ấm, hài hòa với nền cream |"
    info: "| Bone Canvas | `#efedea` | `--color-bone-canvas` | Nền trang, bề mặt card, nav bar — nền trắng ngà ấm giúp mực gần-đen đọc với độ tương phản cao (15.1:1 AAA) mà không cảm thấy khô cứng hay lâm sàng |"
    info: "| Stone Veil | `#e3e1de` | `--color-stone-veil` | Biến thể bề mặt nhẹ so với Bone Canvas — dùng hạn chế cho panel phụ hoặc nền section để tạo chiều sâu mà không đưa màu sắc vào |"

  tokens___typography:

    nhm___hệ_thống_type_chính__từ_body_16_21px_đến_display_cực_lớn_173_185px__weight_400_đảm_nhận_cả_metadata_siêu_nhẹ_lẫn_headline_display_185px___hệ_thống_tin_tưởng_vào_quy_mô_để_tạo_hierarchy_thay_vì_dùng_bold_weight__letter_spacing_được_thắt_chặt_mạnh_xuống__0_05em_ở_kích_thước_display_để_ngăn_các_khoảng_trống_lớn_bên_trong_chữ_trông_rỗng_____font_nhm:
      - "**Thay thế:** Neue Haas Grotesk, Inter, Helvetica Neue"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 16, 21, 173, 185"
      - "**Line height:** 0.78, 1.00, 1.10, 1.20"
      - "**Letter spacing:** -0.8px tại 16px, -1.05px tại 21px, -8.65px tại 173px, -9.25px tại 185px"
      - "**Vai trò:** Hệ thống type chính, từ body (16-21px) đến display cực lớn (173-185px). Weight 400 đảm nhận cả metadata siêu nhẹ lẫn headline display 185px — hệ thống tin tưởng vào quy mô để tạo hierarchy thay vì dùng bold weight. Letter-spacing được thắt chặt mạnh xuống -0.05em ở kích thước display để ngăn các khoảng trống lớn bên trong chữ trông rỗng."

    psl___display_tầm_trung_cho_subheading_và_section_title__nằm_giữa_body_text_và_display_cực_lớn__dùng__0_015em_tracking_để_kiểm_soát_mật_độ_ở_kích_thước_display_nhỏ_hơn_____font_psl:
      - "**Thay thế:** Inter, Söhne"
      - "**Weights:** 400"
      - "**Kích thước:** 34, 69"
      - "**Line height:** 1.00, 1.20"
      - "**Letter spacing:** -0.51px tại 34px, -1.035px tại 69px"
      - "**Vai trò:** Display tầm trung cho subheading và section title. Nằm giữa body text và display cực lớn, dùng -0.015em tracking để kiểm soát mật độ ở kích thước display nhỏ hơn."

    psr___body_text_thay_thế_ở_21px_với_tracking_bình_thường___dùng_cho_đoạn_văn_dài_hơn__nơi_spacing_nhm_quá_chặt_sẽ_gây_khó_chịu_____font_psr:
      - "**Thay thế:** Inter, system-ui"
      - "**Weights:** 400"
      - "**Kích thước:** 21"
      - "**Line height:** 1.00"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Body text thay thế ở 21px với tracking bình thường — dùng cho đoạn văn dài hơn, nơi spacing nhm quá chặt sẽ gây khó chịu."

    kumbh_sans___họ_display_thay_thế_ở_kích_thước_cực_lớn__dùng_chung__0_05em_tracking_và_line_height_0_78_0_80_với_nhm__cung_cấp_điểm_đối_trọng_hình_học_với_nét_neo_grotesque_của_nhm_để_tạo_biến_thể_typography_trong_các_lockup_display_____font_kumbh_sans:
      - "**Thay thế:** Kumbh Sans (Google Fonts)"
      - "**Weights:** 400"
      - "**Kích thước:** 173, 185"
      - "**Line height:** 0.78, 0.80"
      - "**Letter spacing:** -8.65px tại 173px, -9.25px tại 185px"
      - "**Vai trò:** Họ display thay thế ở kích thước cực lớn, dùng chung -0.05em tracking và line-height 0.78-0.80 với nhm. Cung cấp điểm đối trọng hình học với nét neo-grotesque của nhm để tạo biến thể typography trong các lockup display."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.2 | -0.8px | `--text-caption` |"
      info: "| body | 21px | 1 | -1.05px | `--text-body` |"
      info: "| subheading | 34px | 1 | -0.51px | `--text-subheading` |"
      info: "| heading | 69px | 1 | -1.035px | `--text-heading` |"
      info: "| display | 173px | 0.78 | -8.65px | `--text-display` |"
      info: "| display-lg | 185px | 0.8 | -9.25px | `--text-display-lg` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 200px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8px"

  components:

    top_navigation_bar:
      vai_trò: "Site header tối giản"

      info: "Thanh cố định với logo (Adcker) căn trái và text 'Menu' căn phải. Không có background fill hay border — nằm trực tiếp trên Bone Canvas. Toàn bộ text ở 16px nhm 400, màu Ink Black. Việc không có container nhìn thấy được củng cố thẩm mỹ editorial, không viền."

    editorial_display_headline:
      vai_trò: "Lockup typography hero"

      info: "Text căn giữa ở 173-185px nhm 400, line-height 0.78-0.80, letter-spacing -0.05em. Text lấp đầy chiều rộng viewport. Ảnh và media được nhúng inline trong luồng text (không phải overlay), cắt theo hình dạng của ký tự mà chúng thay thế. Không background, không border, không shadow — sự hiện diện typography thuần túy trên Bone Canvas."

    metadata_label:
      vai_trò: "Chú thích editorial nhỏ"

      info: "Chú thích text nhỏ như 'Showreel' hoặc 'We're built for' ở 16-21px nhm 400, màu Ink Black. Đặt với khoảng trắng rộng rãi cạnh element display chính. Các label này hoạt động như tín hiệu định hướng nhẹ nhàng thay vì element tương tác."

    showreel_player:
      vai_trò: "Container trình chiếu video"

      info: "Khung video full-bleed hoặc lớn trên Bone Canvas, được tham chiếu bởi label metadata 'Showreel'. Không có chrome, controls, hay border nhìn thấy được — video CHÍNH LÀ component. 0px radius, không shadow."

    case_study_card:
      vai_trò: "Mục portfolio dự án"

      info: "Card phẳng trên Bone Canvas, không border hay shadow. Khoảng cách bên trong: 32px padding. Chứa tiêu đề dự án ở kích thước heading (69px) và metadata ở kích thước caption (16px). Hình ảnh sát mép, 0px radius, kéo dài đến cạnh card."

    text_link:
      vai_trò: "Navigation inline"

      info: "Link có gạch chân với 2px padding-bottom và 20px padding-right spacing. Dùng màu Ink Black với border-bottom cùng màu. Không fill, không background, không thay đổi màu trạng thái tương tác — gạch chân CHÍNH LÀ affordance tương tác."

    section_divider:
      vai_trò: "Ngắt section trực quan"

      info: "Không có element divider nhìn thấy được — các section được phân cách chỉ bằng khoảng cách dọc 200px. Nền cream chảy liền mạch giữa các khối nội dung, với quy mô khổng lồ của display type tạo ra ranh giới section ngầm."

    full_bleed_image_block:
      vai_trò: "Trình diễn nhiếp ảnh"

      info: "Hình ảnh edge-to-edge ở 0px radius, không border, không shadow. Nhiếp ảnh mang tính tự nhiên và con người — tông da ấm, biểu cảm tự nhiên, không dàn dựng studio. Hình ảnh có thể được nhúng trong lockup text hoặc đứng riêng như section full-viewport."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng kích thước display ở 173px hoặc 185px — bất kỳ kích thước nào giữa 70px và 170px sẽ phá vỡ thái cực typography mà hệ thống xây dựng"
      - "Duy trì line-height 0.78-0.80 cho display type để giữ cho headline khổng lồ không bị xa nhau theo chiều dọc"
      - "Đặt letter-spacing thành -0.05em trên tất cả display text (cả nhm và Kumbh Sans) để bù đắp cho khoảng trống rộng ở kích thước cực lớn"
      - "Dùng section gap 200px đầy đủ giữa các khối nội dung chính — spacing quá chặt ở đây sẽ làm suy yếu sự trang trọng editorial"
      - "Nhúng ảnh inline trong lockup text display thay vì đặt chúng như element riêng biệt bên cạnh text"
      - "Giữ tất cả text weight 400 trừ khi gọi rõ nhm 700 weight — hệ thống lấy hierarchy từ quy mô, không phải weight"
      - "Để Bone Canvas (#efedea) đóng vai trò vừa là background vừa là bề mặt — kỷ luật đơn sắc chính là điểm mấu chốt"

    không_nên_làm:
      - "Không bao giờ đưa chromatic color, brand accent, hay semantic state color vào — độ bão hòa màu 0% chính là hệ thống"
      - "Không bao giờ áp dụng border-radius cho bất kỳ element nào — tất cả góc đều sắc (0px) để giữ cảm giác editorial brutalism"
      - "Không bao giờ dùng shadow, glow, hay elevation effect — hệ thống hoàn toàn phẳng"
      - "Không bao giờ dùng body text lớn hơn 21px hoặc nhỏ hơn 16px — khoảng cách giữa body và display là cố ý và rất lớn"
      - "Không bao giờ dùng CTA button căn giữa với fill màu — element tương tác là text link có gạch chân, không phải button"
      - "Không bao giờ đặt display type ở line-height trên 0.85 — leading chặt là thứ làm cho text 185px trông giống một vật thể điêu khắc duy nhất"
      - "Không bao giờ overlay text trên nền tối để tạo độ tương phản — thay vào đó, hãy đảo ngược bằng cách dùng Ink Black (#191919) làm bề mặt đầy đủ, không phải là một treatment"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone Canvas | `#efedea` | Nền trang chính và bề mặt chi phối |"
    info: "| 2 | Stone Veil | `#e3e1de` | Bề mặt phụ để tạo lớp tinh tế |"
    info: "| 3 | Ink Black | `#191919` | Bề mặt đảo ngược cho section tối hoặc khối tương phản |"

  imagery:

    info: "Nhiếp ảnh được dùng hạn chế nhưng có tác động cao — một chân dung người tự nhiên hiển thị, cắt sát và nhúng trực tiếp trong headline display dưới dạng nội dung inline. Cách xử lý là thô: màu tự nhiên, tông da ấm, không filter hay grading nào có thể xung đột với nền cream. Hình ảnh không có border, không radius, không shadow — chúng nằm sát trên Bone Canvas. Vai trò của hình ảnh là dấu câu, không phải trang trí: một bức ảnh duy nhất cắt ngang bức tường chữ tạo ra tác động lớn hơn một grid gallery. Không có illustration, không icon hiển thị, không đồ họa trừu tượng. Hệ thống giao tiếp qua type thuần túy, với nhiếp ảnh là element phi chữ duy nhất."

  layout:

    info: "Mô hình trang là full-bleed với căn giữa nội dung. Hero là một tuyên bố typography khổng lồ căn giữa ('THE ART * ( ) OF HACKING SOCIAL') lấp đầy viewport theo chiều dọc, với một bức ảnh nhỏ nhúng inline trong text. Navigation là top bar tối giản — logo trái, 'Menu' phải — nằm trực tiếp trên nền cream, không container hay border. Hero tràn edge-to-edge với khoảng thở rộng rãi (200px) giữa các section. Không có cấu trúc grid nhìn thấy được, không card layout, không sidebar. Nhịp điệu nội dung là: display editorial cỡ lớn → metadata nhẹ nhàng → media nhúng → khoảng trắng lớn → lặp lại. Layout đọc như một poster cuộn, không phải trang web truyền thống."

  agent_prompt_guide:

    info: "Tham chiếu màu nhanh:"
    - "Canvas/background: #efedea (Bone Canvas)"
    - "Text/headlines: #191919 (Ink Black)"
    - "Borders/dividers: #191919 (Ink Black)"
    - "Accent: không có (hệ thống đơn sắc)"
    - "primary action: không có màu CTA riêng biệt"
    - "Surface variation: #e3e1de (Stone Veil)"

    info: "Ví dụ Component Prompts:"

    - "Editorial Display Headline: Căn giữa text 'BUILD SOMETHING' ở 185px dùng nhm 400, màu #191919, letter-spacing -9.25px, line-height 0.80, trên nền #efedea. Text lấp đầy chiều rộng viewport."

    - "Top Navigation Bar: Đặt 'Adcker' ở nhm 700, 16px ở góc trên bên trái và 'Menu' ở nhm 400, 16px ở góc trên bên phải. Cả hai màu #191919. Không background, không border, không padding ngoài 4px dọc."

    - "Metadata Label: Đặt label text nhỏ 'Showreel' ở 16px nhm 400, màu #191919, với 15px padding từ element display text gần nhất. Không background, không border."

    - "Case Study Card: Tạo section với tiêu đề dự án ở 69px psl 400, màu #191919 (letter-spacing -1.035px), 32px padding, trên nền #efedea. Bên dưới, một caption ở 16px nhm 400, màu #191919."

    - "Full-Bleed Photography: Đặt một chân dung tự nhiên edge-to-edge ở 0px radius, không border, không shadow, trực tiếp trên canvas #efedea. Hình ảnh nên có tông ấm và tự nhiên, không filter."

  elevation_philosophy:

    info: "Hệ thống này có zero elevation. Không shadow, không glow, không overlay, không chiều sâu z-axis. Chiều sâu được truyền đạt độc quyền qua quy mô typography, khoảng trắng, và độ tương phản giữa nền cream và mực đen. Các element thường được 'nâng lên' (card, modal, popover) nằm sát trên cùng một mặt phẳng với mọi thứ khác, chỉ được phân biệt bằng mật độ nội dung và khoảng cách. Sự phẳng này không phải là ràng buộc — nó là ngôn ngữ thiết kế. Chỉ cần đưa vào một shadow duy nhất cũng sẽ phá vỡ ẩn dụ poster editorial định nghĩa toàn bộ nhận diện thị giác."

  similar_brands:

    - "**Buck (buck.co)** — Cùng display type editorial cỡ lớn và kỷ luật đơn sắc với ảnh nhúng trong headline"
    - "**Gunner (phong cách gunnercooke.com)** — Quy mô typography cực đoan, độ bão hòa màu 0%, và cùng cách xử lý trang poster editorial"
    - "**Resn (resn.co.nz)** — Thẩm mỹ creative agency táo bạo với headline display khổng lồ và gần như không có chromatic color"
    - "**Locomotive (locomotive.ca)** — Cách tiếp cận typography-như-kiến-trúc với bề mặt phẳng và canvas trắng ngà ấm"
    - "**Ueno (ueno.co)** — Layout creative agency brutalism với kích thước type cực lớn và media nhúng trong lockup text"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #191919;
          --color-bone-canvas: #efedea;
          --color-stone-veil: #e3e1de;
        
          /* Typography — Font Families */
          --font-nhm: 'nhm', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-psl: 'psl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-psr: 'psr', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-kumbh-sans: 'Kumbh Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.2;
          --tracking-caption: -0.8px;
          --text-body: 21px;
          --leading-body: 1;
          --tracking-body: -1.05px;
          --text-subheading: 34px;
          --leading-subheading: 1;
          --tracking-subheading: -0.51px;
          --text-heading: 69px;
          --leading-heading: 1;
          --tracking-heading: -1.035px;
          --text-display: 173px;
          --leading-display: 0.78;
          --tracking-display: -8.65px;
          --text-display-lg: 185px;
          --leading-display-lg: 0.8;
          --tracking-display-lg: -9.25px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-112: 112px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 200px;
          --card-padding: 32px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-bone-canvas: #efedea;
          --surface-stone-veil: #e3e1de;
          --surface-ink-black: #191919;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #191919;
          --color-bone-canvas: #efedea;
          --color-stone-veil: #e3e1de;
        
          /* Typography */
          --font-nhm: 'nhm', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-psl: 'psl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-psr: 'psr', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-kumbh-sans: 'Kumbh Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.2;
          --tracking-caption: -0.8px;
          --text-body: 21px;
          --leading-body: 1;
          --tracking-body: -1.05px;
          --text-subheading: 34px;
          --leading-subheading: 1;
          --tracking-subheading: -0.51px;
          --text-heading: 69px;
          --leading-heading: 1;
          --tracking-heading: -1.035px;
          --text-display: 173px;
          --leading-display: 0.78;
          --tracking-display: -8.65px;
          --text-display-lg: 185px;
          --leading-display-lg: 0.8;
          --tracking-display-lg: -9.25px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-112: 112px;
          --spacing-200: 200px;
        }