valiente_brands___style_reference:
  info: "> Tín hiệu khói trên nền đất sét phơi nắng. Một mảng đỏ cam khẩn cấp duy nhất gào lên giữa cánh đồng peach mờ ấm áp, được giữ chặt bởi một neo-grotesque nguyên khối và hầu như không có gì khác."

  theme: "light"

  info: "Valiente Brands là một broadcast brutalist — một tín hiệu chromatic đơn lẻ (đỏ cam rực rỡ) bắn ra trên nền canvas đất sét ấm nắng, hầu như không có bất kỳ xử lý bề mặt UI nào. Trang web là một scroll dọc với type cỡ lớn mang cảm giác monospace, navigation label neo ở góc, full-bleed cinematic video stills và portrait grid. Thẩm mỹ mượn từ biển báo khẩn cấp và tờ proof của thợ sắp chữ: mọi thứ đều in hoa, tracking âm mạnh ở kích thước display, và tước bỏ mọi trang trí. Không có card, không shadow, không gradient, không góc bo tròn — toàn bộ interface đọc như một tờ broadside in duy nhất, nơi một màu làm tất cả. White space và type scale đảm nhận hệ thống phân cấp, không phải container hay elevation."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|-------|"
    info: "| Signal Flare | `#ff1a00` | `--color-signal-flare` | Màu chromatic duy nhất trong hệ thống — dùng cho logo, toàn bộ navigation, body text, heading, icon, border và video play affordance. Đồng thời đóng vai trò là brand mark và foreground text color |"
    info: "| Sun-Baked Canvas | `#e7a196` | `--color-sun-baked-canvas` | Nền trang — một màu clay-peach ấm, dịu, làm mềm cường độ của đỏ và tạo cho toàn bộ site bầu không khí như sóng nhiệt. Mọi bề mặt mặc định đều nằm trên tông màu này |"
    info: "| Midnight Frame | `#0a0a0a` | `--color-midnight-frame` | Chỉ dành riêng cho các section full-bleed video và photography — xuất hiện dưới dạng khung tối xung quanh media được nhúng, không bao giờ là bề mặt UI hay text color |"

  tokens___typography:

    gt_pressura___typeface_làm_việc_chính_duy_nhất___đảm_nhận_mọi_thứ_từ_footer_label_12px_đến_display_headline_245px__tính_cách_neo_grotesque_với_độ_căng_cơ_học_nhẹ_khiến_nó_đọc_gần_như_monospace_ở_kích_thước_nhỏ_và_gần_như_posterized_ở_kích_thước_display__weight_giữ_ở_400_trên_toàn_bộ_hệ_thống__hệ_thống_phân_cấp_được_xây_dựng_qua_kích_thước__không_phải_weight_____font_gt_pressura:
      - "**Thay thế:** Space Grotesk, IBM Plex Mono, JetBrains Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 12, 14, 16, 18, 20, 24, 48, 95, 128, 190, 245"
      - "**Line height:** 0.80, 0.82, 1.00, 1.20"
      - "**Letter spacing:** Tracking thắt chặt đáng kể theo kích thước: -0.005em ở 12-18px (gần như khép), -0.025em ở 20-24px, -0.030em ở 48px, -0.037em ở 95px, -0.040em ở 128px, -0.043em ở 190px, và -0.050em ở 245px — kích thước display nén các chữ cái cho đến khi chúng gần như chạm nhau"
      - "**OpenType features:** `\"tnum\" on, \"ss01\" on`"
      - "**Vai trò:** Typeface làm việc chính duy nhất — đảm nhận mọi thứ từ footer label 12px đến display headline 245px. Tính cách neo-grotesque với độ căng cơ học nhẹ khiến nó đọc gần như monospace ở kích thước nhỏ và gần như posterized ở kích thước display. Weight giữ ở 400 trên toàn bộ hệ thống; hệ thống phân cấp được xây dựng qua kích thước, không phải weight."

    monument_grotesk___dành_riêng_cho_một_mục_đích__statement_headline_chính_48px__impact_led_brand_consultancy__một_grotesque_rộng_hơn__mang_tính_humanist_hơn__tương_phản_với_chất_cơ_học_của_gt_pressura_bằng_tỷ_lệ_ấm_áp_hơn_một_chút__chỉ_xuất_hiện_một_lần_mỗi_trang_ở_kích_thước_chính_xác_này_____font_monument_grotesk:
      - "**Thay thế:** Inter, Manrope, General Sans"
      - "**Weights:** 400"
      - "**Kích thước:** 48"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0400em"
      - "**Vai trò:** Dành riêng cho một mục đích: statement headline chính 48px (\"IMPACT-LED BRAND CONSULTANCY\"). Một grotesque rộng hơn, mang tính humanist hơn, tương phản với chất cơ học của GT Pressura bằng tỷ lệ ấm áp hơn một chút. Chỉ xuất hiện một lần mỗi trang ở kích thước chính xác này."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | -0.06px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | -0.07px | `--text-body-sm` |"
      info: "| body | 16px | 1.2 | -0.08px | `--text-body` |"
      info: "| subheading | 18px | 1.2 | -0.09px | `--text-subheading` |"
      info: "| subheading-lg | 20px | 1.2 | -0.5px | `--text-subheading-lg` |"
      info: "| heading | 48px | 1 | -1.44px | `--text-heading` |"
      info: "| heading-lg | 95px | 0.82 | -3.52px | `--text-heading-lg` |"
      info: "| display-sm | 128px | 0.82 | -5.12px | `--text-display-sm` |"
      info: "| display | 190px | 0.8 | -8.17px | `--text-display` |"
      info: "| display-xl | 245px | 0.8 | -12.25px | `--text-display-xl` |"

  tokens___spacing___shapes:

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

    mật_độ: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 138 | 138px | `--spacing-138` |"
      info: "| 150 | 150px | `--spacing-150` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 120-160px"
      - "**Card padding:** 0px"
      - "**Element gap:** 20px"

  components:

    corner_navigation:
      vai_trò: "Site navigation chính"

      info: "Chồng text dọc được ghim vào cạnh trên-bên trái của viewport. GT Pressura 12px, in hoa, màu #ff1a00, letter-spacing -0.005em. Các mục cách nhau 5px gap dọc. Không có background, không border, không hover indicator ngoài màu đỏ có sẵn — vị trí và màu sắc là toàn bộ affordance."

    corner_badge_top_right:
      vai_trò: "Đánh dấu vị trí / thành lập"

      info: "Hai dòng xếp chồng ở góc trên-bên phải: \"EST. IN TN\" ở 12px in hoa #ff1a00, kết hợp với icon hình tròn 40px có outline (cũng #ff1a00, stroke 1px) bên dưới. Đóng vai trò như chữ ký site cố định ở góc, đối xứng với khối nav ở phía đối diện."

    centered_logo_lockup:
      vai_trò: "Nhận diện thương hiệu ở đầu trang"

      info: "Wordmark \"VALIENTE\" bằng Monument Grotesk hoặc GT Pressura ở ~48px, màu #ff1a00, căn giữa theo chiều ngang trong header. Chữ E cuối được thay bằng một geometric mark — một B-glyph đã được biến đổi, phá vỡ nhịp điệu của wordmark. Đứng một mình, không có tagline hay text hỗ trợ."

    statement_headline:
      vai_trò: "Hero-level messaging"

      info: "48px GT Pressura (hoặc Monument Grotesk cho single hero statement), weight 400, màu #ff1a00, line-height 1.0, letter-spacing -1.92px (Monument) hoặc -1.44px (GT Pressura). Căn giữa theo chiều ngang, được kẹp bởi một em-dash dài ở bên trái để gợi ý sự tiếp nối hoặc tín hiệu broadcast."

    display_type_block:
      vai_trò: "Section marker và chuỗi chữ số cỡ lớn"

      info: "GT Pressura ở 128-245px, weight 400, line-height 0.80-0.82, màu #ff1a00, in hoa, tracking gần như chạm nhau (-0.040em đến -0.050em). Dùng cho các chuỗi chữ số mang cảm giác monospace (\"WFBCGLZU\", \"DJCTUVOCI...\") hoạt động như kết cấu thị giác hơn là nội dung có thể đọc được. Tracking âm ở kích thước này là signature — các chữ cái nén lại cho đến khi gần như hợp nhất."

    footer_bar:
      vai_trò: "Dải metadata cuối trang"

      info: "Hàng ba cột ở cuối màn hình đầu tiên: label trái (ví dụ \"BRAVERY IN PRACTICE\"), scroll prompt giữa (\"SCROLL TO VIEW MORE ↓\"), copyright phải (\"©2026\"). Tất cả GT Pressura 12px, in hoa, #ff1a00, cách nhau bằng toàn bộ chiều rộng viewport. Không background, không border — sự ấm áp của canvas giữ toàn bộ dải."

    full_bleed_video_frame:
      vai_trò: "Các section media điện ảnh"

      info: "Video hoặc ảnh tĩnh edge-to-edge lấp đầy toàn bộ chiều rộng viewport và ~40% chiều cao viewport. Play control là hình tròn 64px có outline #ff1a00 (stroke 1.5px) với glyph play hình tam giác ở giữa, đặt ở trung tâm của media. Không góc bo tròn, không overlay chrome."

    section_label_pair:
      vai_trò: "Metadata kẹp hai bên khối media"

      info: "Hai label nhỏ GT Pressura 12px in hoa #ff1a00, ghim vào cạnh trái và phải của một dải mỏng ngay bên dưới section full-bleed media. Label trái mô tả phạm vi (\"WORLDWIDE BASED\"), label phải mô tả ngày tháng hoặc trạng thái (\"EST (2025)\"). Không divider, không background — màu canvas là separator duy nhất khỏi media phía trên."

    portrait_grid:
      vai_trò: "Trưng bày đội ngũ hoặc cộng tác viên"

      info: "Grid ba cột gồm các bức ảnh chân dung vuông hoặc gần vuông, edge-to-edge, không gutter và không border. Ảnh chân dung full-bleed, không caption bên trong ảnh, không overlay. Grid nằm trực tiếp trên canvas ấm — các bức ảnh cung cấp độ tương phản tông màu duy nhất trong section."

    scroll_prompt:
      vai_trò: "Tín hiệu dẫn đường dọc"

      info: "Một indicator text ngắn (\"SCROLL TO VIEW MORE ↓\") ở GT Pressura 12px in hoa, #ff1a00, với glyph mũi tên xuống. Căn giữa trong footer bar hoặc ngay bên dưới các khối nội dung. Mũi tên là iconography duy nhất trong hệ thống ngoài play control và corner badge circle."

  do_s_and_don_ts:

    do:
      - "Dùng GT Pressura ở weight 400 cho tất cả UI text — không bao giờ đưa vào bold hay light weight, hệ thống phân cấp đến từ kích thước đơn thuần"
      - "Áp dụng #ff1a00 làm màu chromatic duy nhất cho mọi text, border và icon element; để canvas ấm #e7a196 mang bầu không khí"
      - "Đẩy display headline lên 128px hoặc lớn hơn với letter-spacing từ -0.040em đến -0.050em — tracking gần chạm nhau là signature"
      - "Ghim navigation và metadata vào bốn góc của viewport (link trên-trái, badge trên-phải, label dưới-trái, copyright dưới-phải) thay vì xây dựng thanh header truyền thống"
      - "Dùng full-bleed edge-to-edge media (video, photography) không bo tròn và không overlay chrome — để canvas là khung duy nhất"
      - "Duy trì line-height ở 0.80-0.82 cho kích thước display và 1.0-1.2 cho body text — không bao giờ đặt line-height lỏng hơn 1.2"
      - "Giữ tất cả text in hoa; hệ thống không có mixed-case hay sentence-case type"

    don_t:
      - "Không đưa vào shadow, gradient, border có radius, hay bất kỳ container-based elevation nào — trang là print phẳng, không phải các bề mặt xếp chồng"
      - "Không dùng màu fill cho CTA button; hệ thống không có filled button, chỉ có text link và outlined play control"
      - "Không thêm secondary hay tertiary text color — #ff1a00 trên #e7a196 là cặp tương phản duy nhất trong hệ thống"
      - "Không dùng card padding, gutter hay rounded corner trên bất kỳ media hay content block nào"
      - "Không trộn nhiều type family; GT Pressura xử lý mọi thứ ngoại trừ single Monument Grotesk hero headline"
      - "Không dùng weight 600 hay 700 để tạo emphasis — tăng kích thước thay vào đó"
      - "Không đặt display letter-spacing lỏng hơn -0.025em; tracking nén là thứ làm cho type có cảm giác broadcast-loud"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Sun-Baked Canvas | `#e7a196` | Nền trang mặc định — mọi text section, navigation layer và content block đều nằm trên cánh đồng clay-peach ấm áp này |"
    info: "| 2 | Midnight Frame | `#0a0a0a` | Chỉ dành cho section full-bleed video và photography — điểm khác biệt duy nhất khỏi canvas ấm, dùng để đóng khung media được nhúng |"

  elevation:

    info: "Không shadow, không elevation system, không z-depth. Hệ thống phân cấp được xây dựng hoàn toàn qua type scale, color contrast và whitespace. Các element nằm phẳng trên canvas như in trên giấy — trang hoạt động như một bề mặt duy nhất scroll dọc thay vì một chồng card."

  imagery:

    info: "Photography và video mang toàn bộ trọng lượng cảm xúc — không có illustration, không product mockup, không abstract graphic, và hầu như không có iconography. Hình ảnh mang tính điện ảnh và tối tăm: video still full-bleed đầy tâm trạng (một võ sĩ quyền anh trên võ đài, được quay qua color grade xanh lục), và các crop chân dung vuông chặt của từng cá nhân trên nhiều nền khác nhau (nội thất ấm áp, cửa sổ ánh sáng ban ngày). Xử lý luôn là full-bleed, edge-to-edge, không góc bo tròn, không mask, không overlay text. Các section ảnh tối là điểm khác biệt duy nhất khỏi canvas peach ấm — chúng đọc như những ô cửa sổ cắt vào một trang in. Sự tương phản màu sắc giữa nền đất sét ấm và media tối-mát mẻ tự nó là một design device. Icon bị giới hạn ở ba mark tổng cộng: một hamburger bar ở trên-trái, một circular badge có glyph ở trên-phải, và một mũi tên scroll xuống — tất cả đều là stroke-only outline màu #ff1a00."

  layout:

    info: "Trang là một scroll dọc không có ràng buộc ngang ngoài ~1440px max-width trên nội dung text. Màn hình đầu tiên là một canvas ấm gần như trống chỉ với bốn corner element (nav, logo, badge, footer) và một statement căn giữa — sau đó là một section video tối full-bleed, tiếp theo là một dải metadata, rồi một khối display text lớn mang cảm giác monospace, sau đó là portrait grid ba cột. Nhịp điệu là: canvas ấm trống → media tối full-bleed → khối text ấm → media tối → khối text ấm → grid ảnh. Không có hệ thống light/dark band xen kẽ — thay vào đó, canvas ấm là mặc định và full-bleed media đâm xuyên qua nó. Section gap rất lớn (120-160px), với text căn trái trong các khối và căn giữa cho hero statement. Grid nghiêm ngặt: ba cột cho portrait, full-width cho video, max-width căn giữa cho khối text. Navigation tối thiểu — chỉ là một chồng text dọc ở góc trên-bên trái, không có background container."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ff1a00"
    - "background: #e7a196"
    - "border / icon stroke: #ff1a00"
    - "accent (play control, badge circle): #ff1a00"
    - "media frame: #0a0a0a"
    - "primary action: không có màu CTA riêng biệt"

    example_component_prompts:
    - "Xây dựng hero statement headline: 48px Monument Grotesk weight 400, #ff1a00, line-height 1.0, letter-spacing -1.92px, căn giữa trên nền #e7a196, với một em-dash dài (—) đứng trước text ở bên trái."
    - "Xây dựng corner navigation block: chồng dọc các link GT Pressura in hoa (ABOUT, SERVICES, WORK, VALUES, TEAM, CONTACT, ESTIMATION) ở 12px weight 400, #ff1a00, letter-spacing -0.005em, cách nhau 5px row-gap, ghim vào góc trên-bên trái của viewport, không background."
    - "Xây dựng full-bleed video frame: khối media edge-to-edge với hình tròn 64px căn giữa trên ảnh, stroke 1.5px màu #ff1a00, chứa play triangle đặc màu #ff1a00."
    - "Xây dựng display type block: GT Pressura 190px weight 400, #ff1a00, line-height 0.80, letter-spacing -8.17px, in hoa, căn trái, dùng cho chuỗi chữ số mang cảm giác monospace."
    - "Xây dựng footer bar: một hàng duy nhất ở cuối màn hình đầu tiên, ba mục trải dài trên toàn bộ chiều rộng (trái: \"BRAVERY IN PRACTICE\", giữa: \"SCROLL TO VIEW MORE ↓\", phải: \"©2026\"), tất cả GT Pressura 12px in hoa #ff1a00, nằm trực tiếp trên canvas #e7a196, không border hay background."

  similar_brands:

    - "**STUDIO BRAD** — Cùng thẩm mỹ agency brutalist một màu — một màu chromatic rực rỡ (thường là đỏ) gào lên trên nền canvas tối giản, với type in hoa cỡ lớn và hầu như không có UI chrome"
    - "**&Walsh** — Brand consultancy với portfolio site dùng một display family duy nhất tracking âm mạnh, corner-pinned navigation, và flat full-bleed media không card container"
    - "**COLLINS** — Brand identity studio mà site coi type như toàn bộ interface — grotesque mang cảm giác monospace cỡ lớn ở kích thước display, màu sắc tối giản, và full-bleed photography làm điểm đối trọng thị giác duy nhất"
    - "**Locomotive** — Agency Canada dùng nền off-white ấm áp, type neo-grotesque in hoa cỡ lớn, và đỏ cam đậm làm chromatic accent duy nhất cho mọi thứ tương tác và văn bản"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-flare: #ff1a00;
          --color-sun-baked-canvas: #e7a196;
          --color-midnight-frame: #0a0a0a;
        
          /* Typography — Font Families */
          --font-gt-pressura: 'GT Pressura', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.06px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.07px;
          --text-body: 16px;
          --leading-body: 1.2;
          --tracking-body: -0.08px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.09px;
          --text-subheading-lg: 20px;
          --leading-subheading-lg: 1.2;
          --tracking-subheading-lg: -0.5px;
          --text-heading: 48px;
          --leading-heading: 1;
          --tracking-heading: -1.44px;
          --text-heading-lg: 95px;
          --leading-heading-lg: 0.82;
          --tracking-heading-lg: -3.52px;
          --text-display-sm: 128px;
          --leading-display-sm: 0.82;
          --tracking-display-sm: -5.12px;
          --text-display: 190px;
          --leading-display: 0.8;
          --tracking-display: -8.17px;
          --text-display-xl: 245px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -12.25px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-138: 138px;
          --spacing-150: 150px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 120-160px;
          --card-padding: 0px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-media: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-sun-baked-canvas: #e7a196;
          --surface-midnight-frame: #0a0a0a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-flare: #ff1a00;
          --color-sun-baked-canvas: #e7a196;
          --color-midnight-frame: #0a0a0a;
        
          /* Typography */
          --font-gt-pressura: 'GT Pressura', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monument-grotesk: 'Monument Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: -0.06px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.07px;
          --text-body: 16px;
          --leading-body: 1.2;
          --tracking-body: -0.08px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.09px;
          --text-subheading-lg: 20px;
          --leading-subheading-lg: 1.2;
          --tracking-subheading-lg: -0.5px;
          --text-heading: 48px;
          --leading-heading: 1;
          --tracking-heading: -1.44px;
          --text-heading-lg: 95px;
          --leading-heading-lg: 0.82;
          --tracking-heading-lg: -3.52px;
          --text-display-sm: 128px;
          --leading-display-sm: 0.82;
          --tracking-display-sm: -5.12px;
          --text-display: 190px;
          --leading-display: 0.8;
          --tracking-display: -8.17px;
          --text-display-xl: 245px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -12.25px;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-138: 138px;
          --spacing-150: 150px;
        }