thisispam___style_reference:
  info: "> butter-yellow editorial broadsheet — một layout kiểu Swiss-press, nơi một tông giấy kem ấm duy nhất, chữ sắc như dao cạo, và hệ thống bề mặt zero-chrome biến mỗi lần cuộn thành một trang in."

  theme: "light"

  info: "Thisispam vận hành như một hệ thống thiết kế editorial chịu ảnh hưởng từ Thụy Sĩ: một canvas màu vàng bơ ấm kết hợp với typography mực đen sắc nét và gần như zero chrome. Ngôn ngữ thị giác vay mượn từ broadsheet in ấn — headline display lớn, tự tin nằm trong cụm uppercase khít, trong khi ảnh dự án trôi nổi trong một grid nghiêm ngặt với metadata dạng caption bên dưới. Màu sắc được sử dụng cực kỳ kỷ luật: #fff3b8 đóng vai trò vừa là nền trang vừa là điểm nhấn, để màu đen gánh toàn bộ chữ và màu trắng phân tách các khối nội dung. Không đổ bóng, không bo góc, không gradient — hệ thống dựa vào scale typography, khoảng trắng rộng rãi, và nền ấm bất thường để tạo bầu không khí. Các section xen kẽ giữa giấy vàng, trắng tinh, và đen mực, tạo nên một nhịp điệu editorial có tiết tấu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Butter Paper | `#fff3b8` | `--color-butter-paper` | Canvas trang chủ đạo cho toàn bộ section, chữ nhấn mạnh trên nền ảnh tối, đường viền link dạng hairline, và dải thứ ba trong stack bề mặt — một tông kem ấm thay thế màu trắng làm nền không khí của thiết kế |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Màu chữ chính trên mọi bề mặt, đường viền hairline và border cấu trúc, nền footer và dark-band — mọi chữ, đường kẻ, và icon đều đọc như mực in trên nền kem hoặc trắng |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Nền section trắng và bề mặt card phân tách các dải vàng, chữ inverse trên footer đen, và bề mặt modal ngôn ngữ |"
    info: "| Wheat | `#f1e4a4` | `--color-wheat` | Màu nền input field mờ trên canvas vàng — một tông kem hơi đậm hơn giúp form field lùi vào nền ấm mà không mất phân cấp bề mặt |"
    info: "| Signal Red | `#ff0000` | `--color-signal-red` | Chỉ thị active-state và current-section trong hamburger nav menu — một vạch đỏ duy nhất đánh dấu vị trí hiện tại trong menu, là điểm khác biệt màu sắc duy nhất so với hệ thống đen-trên-kem |"

  tokens___typography:

    ot_neue_montreal___workhorse_chính_bao_phủ_display_headlines__navigation__buttons__và_labels___lockup_58px_weight_700_với_leading_0_90_là_giọng_poster_editorial_đặc_trưng__xử_lý_uppercase_nhất_quán_ở_mọi_kích_thước_____font_ot_neue_montreal:
      - "**Thay thế:** Space Grotesk hoặc Neue Haas Grotesk Display"
      - "**Weights:** 500, 700"
      - "**Kích thước:** 11px, 16px, 32px, 58px"
      - "**Line height:** 0.90–2.55 (0.90 ở display, 1.00 ở heading, 1.20 ở subheading, 1.43 ở body, 2.55 ở list label thoáng)"
      - "**Vai trò:** Workhorse chính bao phủ display headlines, navigation, buttons, và labels — lockup 58px weight-700 với leading 0.90 là giọng poster editorial đặc trưng; xử lý uppercase nhất quán ở mọi kích thước."

    abc_diatype___secondary_humanist_sans_cho_body_copy__footer_details__input_fields__và_modal_message___ấm_hơn_và_dễ_đọc_hơn_montreal_hình_học__được_dùng_khi_cần_đọc_dài_hoặc_phân_cấp_nhẹ_nhàng_hơn_____font_abc_diatype:
      - "**Thay thế:** Inter hoặc Söhne"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 13px, 14px"
      - "**Line height:** 1.20–2.15"
      - "**Vai trò:** Secondary humanist sans cho body copy, footer details, input fields, và modal message — ấm hơn và dễ đọc hơn Montreal hình học, được dùng khi cần đọc dài hoặc phân cấp nhẹ nhàng hơn."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.43 | — | `--text-caption` |"
      info: "| heading | 32px | 1 | — | `--text-heading` |"
      info: "| display | 58px | 0.9 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 0px"
      - "**Element gap:** 12px"

  components:

    top_navigation_bar:
      vai_trò: "Header site tối giản với logo và menu trigger"

      info: "Thanh top cố định trên nền trong suốt hoặc vàng. Bên trái: wordmark 'PAM' ở 11px OT Neue Montreal weight 500, #000000, uppercase, với hairline 1px mực đen bên dưới. Bên phải: icon hamburger 24px (ba đường kẻ 1px #000000). Chiều cao ~56px, padding ngang 24px."

    hamburger_menu_icon:
      vai_trò: "Nút kích hoạt menu trong nav"

      info: "Ba đường kẻ ngang 1px #000000 xếp chồng, rộng 24px, khoảng cách giữa các đường kẻ 2px. Không nền, không border, không hover state ngoại trừ một đường chỉ thị #ff0000 xuất hiện bên dưới khi active."

    full_bleed_hero_section:
      vai_trò: "Ảnh editorial mở đầu với headline display phủ lên"

      info: "Ảnh edge-to-edge (không border-radius) với headline display ở góc dưới-trái hoặc dưới-giữa. Headline ở 58px OT Neue Montreal weight 700, #ffffff, line-height 0.90, uppercase. Một cụm từ nhấn mạnh duy nhất bằng #fff3b8 nằm inline trong chữ trắng. Caption tùy chọn 11px phía trên headline ở weight 500."

    project_grid_card:
      vai_trò: "Tile dự án portfolio trong work grid"

      info: "Bề mặt trắng (#ffffff) với radius 0px và không đổ bóng. Ảnh full-width contained (không full-bleed, giữ nguyên chiều rộng cột). Bên dưới ảnh: label dự án ở 11px OT Neue Montreal weight 500 uppercase, #000000, margin trên 4px. Stat counter căn phải ở 32px weight 700, #000000. Không border giữa ảnh và caption."

    stat_counter:
      vai_trò: "Badge số đi kèm với project card hoặc section"

      info: "Số căn phải ở 32px OT Neue Montreal weight 700, #000000 (ví dụ '4K+', '16+', '300+'). Đi kèm dọc với caption label dự án ở 11px weight 500. Trên section vàng, stat vẫn giữ #000000."

    brand_directory_list:
      vai_trò: "Cột trung tâm chứa tên khách hàng hoặc đối tác trên canvas vàng"

      info: "Nằm trên nền #fff3b8. Cột đơn căn giữa, max-width ~360px. Mỗi item ở 13px ABC Diatype weight 400, #000000, uppercase, row gap 8px. Không bullet, không link underline — tên đọc như một cột typographic phẳng."

    section_display_heading:
      vai_trò: "Headline mở đầu lớn cho một section mới của trang"

      info: "OT Neue Montreal weight 700 ở 32–58px, line-height 0.90–1.00, uppercase, #000000 trên dải trắng/vàng, #ffffff trên footer đen. Kích thước 58px chỉ xuất hiện ở hero; 32px phục vụ tất cả các section opener tiếp theo."

    dark_footer_block:
      vai_trò: "Khối contact và dự án kết thúc trang"

      info: "Dải #000000 full-width với padding dọc 24–48px. Display heading ở 32px weight 700, #ffffff, uppercase, căn trái. Khối contact ba cột ở 13px ABC Diatype weight 400, #ffffff, với tiêu đề cột ở weight 700. Không divider giữa các cột."

    input_field_yellow_context:
      vai_trò: "Input form trên canvas butter-yellow"

      info: "Fill #f1e4a4, border 1px #000000, radius 2px, padding ngang 16px, padding dọc 12px. Placeholder và value text ở 14px ABC Diatype weight 400, #000000. Không focus ring — border dày lên hoặc fill tối đi khi focus."

    language_switcher_modal:
      vai_trò: "Overlay căn giữa yêu cầu người dùng xem site bằng tiếng Anh"

      info: "Card #ffffff, căn giữa viewport, radius 0px, padding 24px, không đổ bóng, không border. Message ở 14px ABC Diatype weight 400, #000000. Hai tùy chọn hành động ('Yes' / 'No') ở 14px weight 700, #000000, cách nhau ~80px — không có nút, chỉ là text link."

    emphasis_inline_text:
      vai_trò: "Cụm từ được tô sáng trong display headline"

      info: "Một chuỗi con của display headline #ffffff được đổi màu thành #fff3b8 (ví dụ 'VOTRE MARQUE' trong 'DESIGN PRÉCIS ET EXIGEANT, AU SERVICE DE VOTRE MARQUE'). Cùng font, weight, và kích thước với chữ xung quanh — màu sắc là điểm khác biệt duy nhất."

    nav_active_indicator:
      vai_trò: "Đánh dấu item hiện tại trong hamburger menu"

      info: "Một đường kẻ ngang 1px #ff0000 bên dưới menu item đang active. Chỉ xuất hiện ở trạng thái menu mở; không có màu đỏ nào khác được sử dụng trên toàn bộ site."

  do_s_and_don_ts:

    do:
      - "Sử dụng #fff3b8 làm canvas chủ đạo cho toàn bộ section, không chỉ làm accent nhỏ"
      - "Đặt border-radius thành 0px trên cards, buttons, và modals; chỉ dành 2px cho input fields"
      - "Áp dụng uppercase cho tất cả navigation, button, và label text ở mọi kích thước"
      - "Đặt display headlines ở 58px OT Neue Montreal weight 700 với line-height 0.90 để có giọng poster editorial"
      - "Xen kẽ nền section giữa #fff3b8, #ffffff, và #000000 để tạo nhịp điệu trang in"
      - "Sử dụng #fff3b8 làm inline emphasis text trên nền ảnh tối hoặc nền đen"
      - "Sử dụng hairline 1px #000000 cho tất cả border; dựa vào tương phản màu và dải, không phải đổ bóng, để phân tách layer"

    don_t:
      - "Không thêm box-shadows, drop-shadows, hoặc bất kỳ elevation nào ngoài border 1px"
      - "Không giới thiệu màu sắc mới — hệ thống chỉ có đen, trắng, kem, và một chỉ thị đỏ duy nhất"
      - "Không sử dụng trung tính xám nhạt — giữ nguyên #000000 cho text và border hoặc #ffffff cho bề mặt"
      - "Không điều chỉnh letter-spacing; giữ tracking ở normal trên mọi kích thước và weight"
      - "Không căn giữa body copy — giữ editorial text căn trái ngay cả trong khối bố cục căn giữa"
      - "Không trộn nhiều hơn hai type family trên một màn hình"
      - "Không tô interactive elements bằng #fff3b8 làm nền button đặc — vàng là màu canvas và emphasis, không phải button fill"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Yellow Paper | `#fff3b8` | Canvas ấm chủ đạo cho brand-list và các section xen kẽ |"
    info: "| 2 | Paper White | `#ffffff` | Dải section trắng và bề mặt card, cấp độ sáng nhất phía trên nền vàng |"
    info: "| 3 | Wheat Fill | `#f1e4a4` | Bề mặt input field trên canvas vàng |"
    info: "| 4 | Ink Black | `#000000` | Footer tối và section inverse — dải sâu nhất trong nhịp điệu trang |"

  elevation:

    info: "Zero shadow theo thiết kế. Hệ thống từ chối hoàn toàn elevation — sự phân tách giữa các layer đạt được thông qua các dải màu xen kẽ (vàng → trắng → đen) và border hairline 1px mực đen, không bao giờ thông qua độ sâu đổ bóng. Bán kính non-zero duy nhất được quan sát trong codebase là 2px trên một input field duy nhất."

  imagery:

    info: "Nhiếp ảnh editorial chất lượng cao là phương tiện hình ảnh duy nhất: ảnh sản phẩm và phong cách sống tông ấm (một chiếc điện thoại trên khay gốm với ly cocktail, một túi tote với brand mark in, quần áo trên người mẫu). Xử lý full-bleed cho hero, contained trong grid column cho work section. Không illustration, không đồ họa trừu tượng, không 3D render. Icon tối thiểu — chỉ có hamburger và một glyph mũi tên nhỏ, cả hai đều là outline 1px. Nhiếp ảnh là bầu không khí; type là cấu trúc."

  layout:

    info: "Trang là một broadsheet editorial cuộn dọc với nhịp điệu ba dải nghiêm ngặt. Hero là ảnh full-bleed với headline display uppercase căn dưới. Work section nằm trên #ffffff trong grid 3 cột gồm ảnh full-width với metadata dạng caption bên dưới mỗi tile. Brand list là cột đơn căn giữa trên canvas #fff3b8. Trang kết thúc với footer tối #000000 trong 3 cột. Ngắt section được tạo bằng cách chuyển đổi dải màu full-width, không phải bằng divider nhìn thấy được. Nội dung căn trái để dễ đọc editorial; chỉ brand list và display headings được căn giữa. Navigation là top bar tối giản với wordmark căn trái và hamburger trigger căn phải."

  agent_prompt_guide:

    quick_color_reference:
    - "Background: #fff3b8 (butter-yellow canvas)"
    - "Surface: #ffffff (white section)"
    - "Text: #000000 (ink black)"
    - "Inverse Text: #ffffff (on black band)"
    - "Accent (emphasis text, link border): #fff3b8"
    - "primary action: #fff3b8 (filled action)"

    example_component_prompts:
    - "**Hero Section:** Nền ảnh full-bleed, không radius. Display headline căn dưới ở 58px OT Neue Montreal weight 700, #ffffff, line-height 0.90, uppercase. Một chuỗi emphasis con bằng #fff3b8 inline trong chữ trắng. Caption tùy chọn 11px phía trên headline ở weight 500, #ffffff."
    - "**Project Grid Card:** Bề mặt #ffffff, radius 0px, không đổ bóng. Ảnh contained full-column-width. Label dự án ở 11px OT Neue Montreal weight 500 uppercase, #000000, gap 4px phía trên. Stat counter ở 32px weight 700, #000000, căn phải."
    - "**Brand Directory List:** Nền #fff3b8, cột đơn căn giữa, max-width 360px. Mỗi item ở 13px ABC Diatype weight 400, #000000, uppercase, row gap 8px. Không bullets, không underlines."
    - "**Dark Footer Block:** Nền #000000, padding dọc 48px. Display heading ở 32px OT Neue Montreal weight 700, #ffffff, uppercase, căn trái. Ba cột chi tiết liên hệ ở 13px ABC Diatype weight 400, #ffffff, với tiêu đề cột ở weight 700."
    - "**Language Switcher Modal:** Card #ffffff căn giữa viewport, radius 0px, padding 24px, không đổ bóng, không border. Message ở 14px ABC Diatype weight 400, #000000. Hai tùy chọn text ở 14px weight 700, #000000 cách nhau 80px — không có button chrome, chỉ text."

  color_discipline_rule:

    info: "Hệ thống chạy trên chính xác ba tông bề mặt (#fff3b8, #ffffff, #000000) cộng với một đường kẻ mực 1px duy nhất. Màu vàng bơ không phải là màu thương hiệu theo nghĩa thông thường — nó là giấy của trang. Mỗi section là một trong ba nền, và bản sắc của thiết kế đến từ nhịp điệu chuyển đổi giữa chúng, không phải từ việc sử dụng màu sắc trang trí. Bất kỳ bề mặt mới nào phải là một trong ba màu này, và bất kỳ accent nào cũng phải đã tồn tại trong bảng màu."

  typography_discipline_rule:

    info: "OT Neue Montreal ở weight 700 là giọng display và heading ở mọi kích thước từ 32px trở lên; weight 500 xử lý labels, captions, và nav. ABC Diatype được dành riêng cho body copy, footer details, và form fields ở 13–14px. Cả hai luôn được đặt uppercase cho UI chrome (nav, buttons, labels) và sentence case chỉ cho đoạn văn dài. Letter-spacing luôn ở normal — không bao giờ tracked out hoặc in. Line-height co lại khi kích thước tăng: 1.43 ở body, 1.20 ở subheading, 1.00 ở heading, 0.90 ở display."

  similar_brands:

    - "**Pentagram** — Cùng hệ thống editorial Swiss-grid với display type sans-serif hình học uppercase và ảnh dự án full-bleed"
    - "**Bureau Cool** — Chung canvas kem ấm, border hairline, và bề mặt card zero-shadow với headline display editorial lớn"
    - "**Anagrama** — Cùng nhịp điệu agency-portfolio: dải màu xen kẽ, grid card góc vuông, và kỹ thuật nhấn mạnh một màu thương hiệu"
    - "**Made Thought** — Sự kiềm chế giống hệt: bảng màu ba tông, khoảng thở dọc rộng rãi, và display type đặt trong cụm uppercase khít trên ảnh"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-butter-paper: #fff3b8;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-wheat: #f1e4a4;
          --color-signal-red: #ff0000;
        
          /* Typography — Font Families */
          --font-ot-neue-montreal: 'OT Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.43;
          --text-heading: 32px;
          --leading-heading: 1;
          --text-display: 58px;
          --leading-display: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 0px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-sm: 2px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-inputs: 2px;
          --radius-modals: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-yellow-paper: #fff3b8;
          --surface-paper-white: #ffffff;
          --surface-wheat-fill: #f1e4a4;
          --surface-ink-black: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-butter-paper: #fff3b8;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-wheat: #f1e4a4;
          --color-signal-red: #ff0000;
        
          /* Typography */
          --font-ot-neue-montreal: 'OT Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.43;
          --text-heading: 32px;
          --leading-heading: 1;
          --text-display: 58px;
          --leading-display: 0.9;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-sm: 2px;
        }