butt_studio___style_reference:
  info: "> gallery wall với một serif wordmark khổng lồ"

  theme: "light"

  info: "BUTT Studio là một portfolio mang phong cách editorial, nơi chữ được xem như kiến trúc: một wordmark Caslon khổng lồ trải dài từ mép này sang mép kia ở đầu trang, bị cắt ngang bởi một hình minh họa hữu cơ đan xuyên qua các ký tự. Bên dưới hero, hệ thống thu gọn thành một ledger ba cột mang phong cách clinical với thông tin liên hệ, khách hàng và tính năng bằng sans-serif nhẹ nhàng, sau đó mở ra thành grid dự án hai cột rộng rãi. Màu sắc gần như vắng bóng hoàn toàn — mực đen mờ trên nền giấy xám ấm, với một badge chàm đậm duy nhất làm điểm nhấn màu sắc duy nhất. Cảm giác như một tạp chí in bỗng nhiên sống động: serif display đầy tự tin, sans body tiện dụng, không gradient, không chrome bo tròn, không bóng đổ trang trí."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền, button outlines, structural strokes — màu duy nhất mang thông tin |"
    info: "| Paper | `#ffffff` | `--color-paper` | Bề mặt card, thumbnail covers, văn bản đảo màu trên nền tối |"
    info: "| Carbon | `#131313` | `--color-carbon` | Nền tile dự án tối, bề mặt gần đen cho video panels |"
    info: "| Bone Gray | `#e0e0e0` | `--color-bone-gray` | Canvas trang, neutral button fills — nền xám ấm mà toàn bộ bố cục nằm trên đó |"
    info: "| Studio Indigo | `#31338e` | `--color-studio-indigo` | Điểm nhấn màu duy nhất — STUDIO pill badge, và bất kỳ điểm nhấn thương hiệu đậm nào. Màu bão hòa duy nhất trong hệ thống |"

  tokens___typography:

    helvetica___mọi_thành_phần_utility__body__danh_sách__button_và_link_trên_site__chỉ_dùng_một_weight___không_bold__không_medium__quyết_định_dùng_helvetica_weight_400_ở_20px_cho_body_không_phải_16px_là_có_chủ_đích__văn_bản_phải_có_cảm_giác_như_ấn_phẩm_in__không_phải_ui__letter_spacing_chặt_hơn_ở_kích_thước_lớn__0_03em_giúp_40px_không_bị_thoáng_____font_helvetica:
      - "**Thay thế:** Helvetica Neue, Inter, hoặc Arial làm system fallback"
      - "**Weights:** 400"
      - "**Sizes:** 20px body, 40px subhead"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.03em ở 20px, -0.02em ở 40px"
      - "**Role:** Mọi thành phần utility, body, danh sách, button và link trên site. Chỉ dùng một weight — không bold, không medium. Quyết định dùng Helvetica weight 400 ở 20px cho body (không phải 16px) là có chủ đích: văn bản phải có cảm giác như ấn phẩm in, không phải UI. Letter-spacing chặt hơn ở kích thước lớn (-0.03em) giúp 40px không bị thoáng."

    caslon___hero_wordmark_và_mọi_serif_accent__một_weight_duy_nhất_của_custom_display_serif___được_chọn_vì_các_nét_tương_phản_cao_và_ball_terminals_tạo_cảm_giác_như_chữ_in_editorial__không_phải_web_type__font_này_chính_là_thương_hiệu__mọi_thứ_khác_chỉ_là_scaffolding_____font_caslon:
      - "**Thay thế:** Playfair Display, Cormorant Garamond, hoặc bất kỳ didone/transitional serif tương phản cao nào"
      - "**Weights:** 400"
      - "**Sizes:** 42px display, phóng to để lấp đầy viewport ở cấp wordmark"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.02em ở kích thước display, thu hẹp gần như bằng 0 ở body"
      - "**Role:** Hero wordmark và mọi serif accent. Một weight duy nhất của custom display serif — được chọn vì các nét tương phản cao và ball terminals tạo cảm giác như chữ in editorial, không phải web type. Font này CHÍNH LÀ thương hiệu; mọi thứ khác chỉ là scaffolding."

    sometimes_times___sometimes_times___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sometimes_times:
      - "**Weights:** 400"
      - "**Sizes:** 20px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** -0.02"
      - "**Role:** Sometimes Times — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 20px | 1.2 | -0.6px | `--text-body` |"
      info: "| heading | 42px | 1 | -0.84px | `--text-heading` |"
      info: "| display | 200px | 1 | -4px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 70 | 70px | `--spacing-70` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px (sắc cạnh, như giấy in) |"
      info: "| badges | 50px-68px (pill bo tròn, gần như stadium) |"
      info: "| buttons | 50px (hình pill) |"

    layout:

      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    wordmark_hero:
      role: "Khối nhận diện của site"

      info: "Caslon display full-bleed được đặt quá khổ (khoảng 200-280px) để một từ duy nhất lấp đầy chiều rộng viewport. Letter-spacing chặt (-0.02em đến -0.04em) để các nét gần như chạm nhau. Một hình minh họa tương tác có thể đan ngang qua các ký tự, phá vỡ baseline — đây là signature move."

    studio_pill_badge:
      role: "Con dấu thương hiệu chồng lên wordmark"

      info: "Capsule border-radius 50-68px. Fill #31338 (Studio Indigo). Text Helvetica 20px, trắng, weight 400, letter-spacing -0.02em. Nằm ở góc dưới bên trái của ký tự đầu tiên, chồng một phần lên nó. UI element có màu sắc duy nhất trên site."

    three_column_info_ledger:
      role: "Navigation chính và metadata block bên dưới hero"

      info: "Ba cột bằng nhau chỉ được phân cách bằng whitespace, không có divider. Cột trái: tên liên hệ + email + social handle bằng Helvetica 20px đen. Cột giữa: danh sách 'Selected Clients' (adidas, Boiler Room, Chloé, Google, Instagram, Nike, Warner Records, Sony Music). Cột phải: danh sách 'Features' với tên ấn phẩm và năm. Tất cả văn bản đen, không link nào được style khác biệt, tất cả weight 400."

    project_tile_light:
      role: "Mục dự án tiêu chuẩn với video thumbnail"

      info: "Grid item hai cột. Thumbnail là video player tỷ lệ 16:9 (được tint màu, thường là gradient hồng/magenta hoặc xanh lam đằng sau các đối tượng 3D dạng kính). Bên dưới: tên dự án bằng Caslon 42px, đen, tiếp theo là mô tả bằng Helvetica 20px. Tùy chọn button 'Download' hình pill 50px trong #e0e0e0 với chữ đen."

    project_tile_dark:
      role: "Mục dự án đảo màu để tạo nhịp điệu thị giác"

      info: "Cùng kích thước với light tile nhưng nửa bên phải là panel carbon-đen #131313 với các indicator tiến trình trắng tối giản (bốn gạch ngang trắng ngắn) ở phía dưới — mô phỏng scrubber của video player. Dùng để xen kẽ với light tiles."

    download_button:
      role: "Hành động pill trung tính"

      info: "Pill border-radius 50px. Fill #e0e0e0 (Bone Gray). Padding 5px trên/dưới, 20px trái/phải. Text Helvetica 20px đen, weight 400, letter-spacing -0.02em. Không border, không shadow. Nằm inline với tiêu đề dự án."

    video_thumbnail:
      role: "Bản xem trước có thể click cho media dự án"

      info: "Hình chữ nhật full-bleed tỷ lệ 16:9, không border, không radius. Icon play hình tam giác trắng ở giữa (không có nền). Đằng sau icon: 3D render hoặc animation frame đầy màu sắc — đây là những nơi duy nhất màu bão hòa xuất hiện, và chúng là content, không phải UI."

    page_divider:
      role: "Ngắt quãng thị giác giữa các mục dự án"

      info: "Đường kẻ ngang 1px solid #000000 trải dài toàn bộ chiều rộng nội dung, với 180px không gian dọc ở mỗi bên. Hoạt động như section break trong catalog in."

  do_s_and_don_ts:

    do:
      - "Đặt hero wordmark quá khổ bằng Caslon weight 400, tracking chặt (-0.02em), để một từ lấp đầy toàn bộ chiều rộng viewport"
      - "Dùng #e0e0e0 làm canvas trang — không bao giờ dùng trắng tinh ở cấp trang; chỉ dành #ffffff cho bề mặt card"
      - "Dùng Studio Indigo #31338 chính xác một lần trên mỗi surface làm điểm nhấn màu duy nhất"
      - "Đặt body text ở 20px Helvetica weight 400 với letter-spacing -0.03em — lớn hơn và chặt hơn web convention"
      - "Cho button và STUDIO badge radius pill 50px — đây là các element bo tròn duy nhất trong hệ thống"
      - "Phân cách các project tiles bằng hairline đen 1px và 180px không gian dọc để tạo cảm giác như catalog in"
      - "Để các hình minh họa tương tác đâm xuyên hoặc đan qua các ký tự serif trong hero"

    don_t:
      - "Không thêm bất kỳ màu nào khác ngoài bốn màu trung tính và Studio Indigo — không gradient, không tint, không hover-state color shifts"
      - "Không dùng shadow, glow, hoặc elevation — thiết kế phẳng như in ấn, không có chiều sâu giả tạo"
      - "Không thêm border-radius vào cards, tiles, hoặc thumbnails — chúng phải sắc cạnh như giấy cắt"
      - "Không đặt body text dưới 20px hoặc thêm bold/medium weights cho Helvetica — weight 400 là weight duy nhất tồn tại"
      - "Không dùng Caslon cho bất cứ thứ gì dưới hero — chỉ dành cho wordmark và tiêu đề dự án để giữ sức nặng của nó"
      - "Không thêm underline, màu sắc, hoặc icon cho link trong danh sách khách hàng/tính năng — chúng được đọc như plain text có chủ đích"
      - "Không căn giữa body text hoặc list items — các cột ledger được căn trái như trang liên hệ"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone Gray Canvas | `#e0e0e0` | Nền trang — nền giấy trắng ấm mà toàn bộ site nằm trên đó |"
    info: "| 2 | Paper Card | `#ffffff` | Bề mặt card trắng cho chi tiết dự án, inline blocks |"
    info: "| 3 | Carbon Plate | `#131313` | Video panels tối và feature blocks cho các phần tương phản |"
    info: "| 4 | Studio Indigo Plate | `#31338` | Badge chàm và bất kỳ accent wash nào |"

  elevation:

    - "**Page Divider:** `1px solid #000000 — đường cấu trúc duy nhất trong hệ thống`"

  imagery:

    info: "Hình ảnh tập trung ở hero — một hình minh họa tương tác full-width (dây leo cà chua và chùm quả) đan xuyên qua các ký tự serif, phá vỡ wordmark. Bên dưới fold, project thumbnails là video stills tỷ lệ 16:9: các 3D render và motion frames bão hòa, high-key với tông hồng, magenta, xanh lam và đỏ ấm. Đây là content (bản thân tác phẩm), không phải UI decoration. Không stock photography, không lifestyle imagery, không icon dùng làm minh họa."

  layout:

    info: "Hero full-bleed, không có max-width — wordmark co giãn để lấp đầy viewport. Bên dưới hero, nội dung nằm trong một cột rộng không bị ràng buộc với khoảng trống trái/phải rộng rãi. Một ledger ba cột trải dài trang (contact / clients / features) không có divider giữa các cột. Các mục dự án được sắp xếp trong grid hai cột, xen kẽ light tiles (card trắng + video thumbnail) với dark tiles (carbon-black video panel) để tạo nhịp điệu. Khoảng cách dọc rộng rãi: 180px giữa các phần chính, 70px giữa các project cards. Navigation gần như vắng bóng — trang là một scroll duy nhất, wordmark CHÍNH LÀ navigation."

  agent_prompt_guide:

  quick_color_reference:
    - "background: #e0e0e0"
    - "text: #000000"
    - "card surface: #ffffff"
    - "border: #000000"
    - "accent: #31338e (Studio Indigo)"
    - "primary action: không có màu CTA riêng biệt"

  3_5_example_component_prompts:

    - "**Xây dựng three-column info ledger**: Nền trang Bone Gray #e0e0e0, ba cột bằng nhau chỉ phân cách bằng whitespace. Cột trái: tên liên hệ bằng Helvetica 20px weight 400 đen, sau đó email bên dưới. Cột giữa: heading 'Selected Clients' bằng Helvetica 20px đen, sau đó danh sách tên khách hàng mỗi dòng một tên. Cột phải: heading 'Features' bằng Helvetica 20px đen, sau đó danh sách ấn phẩm kèm năm. Không divider, không bullet, không link nào được style khác biệt."

    - "**Xây dựng full-bleed wordmark hero**: Nền đen #000000 tùy chọn, nhưng wordmark Caslon (hoặc Playfair Display fallback) weight 400 ở khoảng 200px, letter-spacing -0.04em, lấp đầy toàn bộ chiều rộng viewport. Màu #000000. Đặt một pill badge Studio Indigo #31338e (border-radius 50px, padding 5px 20px, text Helvetica 20px trắng) chồng lên góc dưới bên trái của ký tự đầu tiên."

    - "**Xây dựng light project tile**: Grid cell hai cột. Nửa trên: video thumbnail tỷ lệ 16:9 không border, không radius, icon play hình tam giác trắng ở giữa, đằng sau là fill kiểu 3D render bão hòa (gradient hồng/magenta). Nửa dưới: gap dọc 20px, sau đó tên dự án bằng Caslon 42px weight 400 đen, letter-spacing -0.02em, line-height 1.0. Bên dưới: gap 10px, sau đó mô tả bằng Helvetica 20px đen. Button Download hình pill 50px (fill #e0e0e0, text Helvetica 20px đen) nằm inline bên phải tiêu đề."

    - "**Xây dựng dark project tile**: Cùng kích thước với light tile, nhưng nửa bên phải là panel solid #131313. Ở dưới cùng giữa của panel tối, render bốn gạch ngang trắng ngắn (mỗi gạch ~20px rộng, 2px cao, cách nhau 8px) làm video player scrubber indicator. Không UI nào khác trên panel tối."

    - "**Xây dựng page divider**: Đường kẻ ngang 1px solid #000000 trải dài toàn bộ chiều rộng nội dung, với 180px không gian dọc phía trên và phía dưới. Không style nào khác — nó hoạt động như section break in."

  similar_brands:

    - "**Locomotive Mtl** — Cùng hero chữ full-bleed với một serif wordmark quá khổ chiếm ưu thế viewport, tiếp theo là grid dự án hai cột hạn chế"
    - "**Studio Brasch** — Ngôn ngữ portfolio editorial với display type khổng lồ, không UI chrome, và grid case-study hai cột đơn sắc"
    - "**Pentagram partner sites** — Cách xử lý portfolio như tạp chí in: serif display, sans body, hairline dividers, không decorative elevation"
    - "**Resn** — Wordmark nhận diện quá khổ đậm nét trên một màu nhấn duy nhất, với grid dự án đơn sắc phẳng bên dưới"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper: #ffffff;
          --color-carbon: #131313;
          --color-bone-gray: #e0e0e0;
          --color-studio-indigo: #31338e;
        
          /* Typography — Font Families */
          --font-helvetica: 'helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-caslon: 'Caslon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sometimes-times: 'Sometimes Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 20px;
          --leading-body: 1.2;
          --tracking-body: -0.6px;
          --text-heading: 42px;
          --leading-heading: 1;
          --tracking-heading: -0.84px;
          --text-display: 200px;
          --leading-display: 1;
          --tracking-display: -4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-70: 70px;
          --spacing-180: 180px;
        
          /* Layout */
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-full: 50px;
          --radius-full-2: 68px;
        
          /* Named Radii */
          --radius-cards: 0px (sắc cạnh, như giấy in);
          --radius-badges: 50px-68px (pill bo tròn, gần như stadium);
          --radius-buttons: 50px (hình pill);
        
          /* Surfaces */
          --surface-bone-gray-canvas: #e0e0e0;
          --surface-paper-card: #ffffff;
          --surface-carbon-plate: #131313;
          --surface-studio-indigo-plate: #31338;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper: #ffffff;
          --color-carbon: #131313;
          --color-bone-gray: #e0e0e0;
          --color-studio-indigo: #31338e;
        
          /* Typography */
          --font-helvetica: 'helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-caslon: 'Caslon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sometimes-times: 'Sometimes Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 20px;
          --leading-body: 1.2;
          --tracking-body: -0.6px;
          --text-heading: 42px;
          --leading-heading: 1;
          --tracking-heading: -0.84px;
          --text-display: 200px;
          --leading-display: 1;
          --tracking-display: -4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-70: 70px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-full: 50px;
          --radius-full-2: 68px;
        }