silencio___style_reference:
  info: "> white room with floating artifacts. Một phòng trưng bày ấm áp như giấy, nơi mỗi phần tử đều xứng đáng với khoảng không âm bản, và sự im lặng là một chất liệu thiết kế có chủ đích."

  theme: "light"

  info: "Silencio vận hành như một sự im lặng thị giác — một phòng trưng bày đơn sắc nơi các vật thể trôi nổi trên nền giấy trắng ấm áp và typography gần như đảm nhận toàn bộ vai trò giao tiếp. Hệ thống loại bỏ mọi thứ không cần thiết: không điểm nhấn màu sắc, không đổ bóng, không hình khối trang trí; thay vào đó, nó dựa vào độ tương phản typography cực đoan (display 141px thì thầm bên cạnh metadata 9px) và một màu xám ấm duy nhất (#dbdad9) như là điểm khác biệt duy nhất so với đen thuần trên trắng. Các bề mặt phẳng như giấy, được phân cách bằng hairline rules và bán kính nhỏ (7.2px) thay vì độ cao. Brand voice mang phong cách như chữ viết trên tường bảo tàng: canh giữa, ngắn gọn, hơi nghiêng bởi sự im lặng, với các nhãn monospaced (PT Mono, 11px) được dùng như chữ ký lặng lẽ bên cạnh một custom Haas grotesque. Các component có cảm giác giống như trang catalog in ấn hơn là web UI — buttons có dạng full pill (129.6px), cards có một góc bo tròn duy nhất, và toàn bộ bố cục thở với sự tự tin của một căn phòng trống không."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, iconography, hairline rules, table borders — phần tử có độ tương phản cao duy nhất trên trang |"
    info: "| Paper Warm Gray | `#dbdad9` | `--color-paper-warm-gray` | Card surfaces, soft fills, điểm khác biệt màu sắc duy nhất so với trắng thuần, điểm gốc gradient nhẹ nhàng |"
    info: "| Graphite Border | `#808080` | `--color-graphite-border` | Đường chia bảng và secondary rule lines tinh tế — dùng khi #000000 có vẻ quá nặng |"
    info: "| Bleach White | `#ffffff` | `--color-bleach-white` | Màu hỗ trợ cho các điểm nhấn trang trí nhỏ khi bảng màu chính cần độ tương phản. |"

  tokens___typography:

    haasr___workhorse_grotesque_cho_body__subheadings_và_mid_size_headings__weight_100_được_dùng_để_tạo_sự_kiềm_chế_trong_ngữ_cảnh_body__weight_700_được_dùng_có_chừng_mực_để_nhấn_mạnh__font_chữ_được_dùng_nhiều_nhất_mang_toàn_bộ_trang_____font_haasr:
      - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 100, 400, 700"
      - "**Kích cỡ:** 9px, 12px, 16px, 19px, 22px, 39px, 58px"
      - "**Line height:** 0.90–1.40"
      - "**Vai trò:** Workhorse grotesque cho body, subheadings và mid-size headings. Weight 100 được dùng để tạo sự kiềm chế trong ngữ cảnh body; weight 700 được dùng có chừng mực để nhấn mạnh. Font chữ được dùng nhiều nhất mang toàn bộ trang."

    haast___display_only_face_ở_141px_với_leading_thắt_chặt_0_90__dùng_cho_hero_statements_và_các_set_pieces_độc_lập___khoảnh_khắc_duy_nhất_typography_lên_tiếng__và_nó_lên_tiếng_hết_công_suất_trên_nền_trắng_thuần_____font_haast:
      - "**Thay thế:** Neue Haas Grotesk Display, Söhne Breit, Inter Display ở weight 100"
      - "**Weights:** 100, 400"
      - "**Kích cỡ:** 141px"
      - "**Line height:** 0.90"
      - "**Vai trò:** Display-only face ở 141px với leading thắt chặt (0.90). Dùng cho hero statements và các set-pieces độc lập — khoảnh khắc duy nhất typography lên tiếng, và nó lên tiếng hết công suất trên nền trắng thuần."

    pt_mono___metadata__spec_labels__catalog_tags___tương_đương_typography_của_một_nhãn_bảo_tàng_in_ấn__chỉ_xuất_hiện_ở_11px__hoạt_động_như_một_chữ_ký_lặng_lẽ_hơn_là_copy_thông_tin_____font_pt_mono:
      - "**Thay thế:** IBM Plex Mono, JetBrains Mono"
      - "**Weights:** 400"
      - "**Kích cỡ:** 11px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Metadata, spec labels, catalog tags — tương đương typography của một nhãn bảo tàng in ấn. Chỉ xuất hiện ở 11px; hoạt động như một chữ ký lặng lẽ hơn là copy thông tin."

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 16px | 1.4 | — | `--text-body` |"
      info: "| subheading | 22px | 1.1 | — | `--text-subheading` |"
      info: "| heading-sm | 39px | 1 | — | `--text-heading-sm` |"
      info: "| heading | 58px | 0.9 | — | `--text-heading` |"
      info: "| display | 141px | 0.9 | — | `--text-display` |"

  tokens___spacing___shapes:

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

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 173 | 173px | `--spacing-173` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 7.2px |"
      info: "| buttons | 129.6px |"
      info: "| surfaces | 43.2px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 43px"
      - "**Card padding:** 29px"
      - "**Element gap:** 7px"

  components:

    pill_button:
      vai_trò: "Primary interactive element"

      info: "Full pill radius (129.6px), padding dọc 14px × ngang 29px, viền Inkwel Black 1px, fill trong suốt. Text bằng HaasR 12px weight 400 #000000. Không có trạng thái fill — outline chính là button."

    ghost_link:
      vai_trò: "Inline navigation và content links"

      info: "Không gạch chân, không đổi màu. HaasR 16px weight 400 #000000. Gạch chân chỉ xuất hiện khi hover ở 1px, #000000, offset 2px. Link đọc như một phần tiếp nối của câu, không phải một widget có thể click."

    paper_card:
      vai_trò: "Bề mặt nhóm nội dung"

      info: "Nền #dbdad9, không viền, radius 7.2px, padding 29px ở mọi phía. Không đổ bóng. Điểm khác biệt duy nhất của card so với canvas trắng là fill xám ấm — một lời thì thầm về độ cao."

    display_headline:
      vai_trò: "Hero và section set-pieces"

      info: "HaasT weight 100 ở 141px, lineHeight 0.90, màu #000000, letter-spacing normal, canh giữa. Dùng tối đa một lần mỗi viewport. Kết hợp với PT Mono 11px caption ngay bên dưới như một nhãn kiểu bảo tàng."

    museum_label:
      vai_trò: "Metadata, catalog tags, object captions"

      info: "PT Mono 11px weight 400 #000000, lineHeight 1.20, letter-spacing normal, thường viết hoa. Hoạt động như vật trang trí typography duy nhất — một chữ ký typography nhỏ bé trước hệ thống grotesque còn lại."

    hairline_divider:
      vai_trò: "Phân cách section"

      info: "1px solid #000000, full-bleed hoặc theo chiều rộng container. Bộ chia cấu trúc chính — thay thế cho đổ bóng, padding và color blocking."

    table_rule:
      vai_trò: "Phân cách hàng dữ liệu và catalog"

      info: "Viền 1px #808080. Nhẹ hơn hairline chính (#000000) để tránh làm bảng dữ liệu dày đặc trở nên nặng nề."

    floating_product_showcase:
      vai_trò: "Primary visual carrier"

      info: "Ảnh sản phẩm được render trên nền trắng trong suốt, không khung, không đổ bóng, không hộp chú thích. Sản phẩm nằm trên canvas như một hiện vật bảo tàng — bản thân trang web chính là bệ đỡ."

    centered_statement_block:
      vai_trò: "Vị trí copy editorial"

      info: "HaasR 22px weight 400, lineHeight 1.10, #000000, canh giữa, max width 640px. Dùng cho manifesto text, section openers và chữ ký SILENCIO ® VISUAL LANGUAGES."

    micro_caption:
      vai_trò: "Image credit, footnote và copy phụ trợ"

      info: "HaasR 9px weight 400 #000000, lineHeight 1.20. Text nhỏ nhất trên site — dùng cho loại copy thường được in ở 6pt trong catalog in ấn."

    navigation_anchor:
      vai_trò: "Mục menu cấp cao nhất"

      info: "HaasR 12px weight 400 #000000, letter-spacing normal, uppercase tùy chọn. Không nền, không viền, không hover fill — navigation chỉ thuần typography."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng HaasT weight 100 ở 141px cho display headlines — đây là khoảnh khắc duy nhất hệ thống được phép ồn ào"
      - "Sử dụng #dbdad9 làm điểm khác biệt bề mặt màu sắc duy nhất; mọi bề mặt khác giữ nguyên #ffffff hoặc #000000"
      - "Phân cách nội dung bằng hairline 1px #000000, không dùng padding, không đổ bóng, không color blocks"
      - "Kết hợp mọi display headline với PT Mono 11px museum label ngay bên dưới"
      - "Dùng radius 7.2px cho cards và 129.6px cho buttons — không nội suy các giá trị trung gian"
      - "Đặt lineHeight ở 0.90 cho mọi type từ 39px trở lên; leading thắt chặt là một signature, không phải sự ngẫu nhiên"
      - "Để ảnh sản phẩm trôi nổi trên nền trắng thuần, không khung, không hộp chú thích và không drop shadow"

    không_nên_làm:
      - "Không bao giờ đưa vào một màu sắc — bảng màu kết thúc ở #000000, #dbdad9, #808080 và #ffffff"
      - "Không bao giờ dùng drop shadows để tạo độ cao; gradient #dbdad9 → #ffffff là chiều sâu duy nhất hệ thống cho phép"
      - "Không bao giờ đặt type trên 141px hoặc dưới 9px — khoảng 132px là toàn bộ phổ biểu cảm"
      - "Không bao giờ dùng #0000ee hoặc bất kỳ màu link mặc định nào của trình duyệt — links là #000000, không ngoại lệ"
      - "Không bao giờ fill button với màu; pill luôn trong suốt với viền 1px #000000"
      - "Không bao giờ canh giữa body text trong đoạn văn; chỉ display statements và labels mới được canh giữa"
      - "Không bao giờ dùng shadows, blurs hoặc glows trên ảnh chụp hoặc hình ảnh sản phẩm"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền chủ đạo — sự im lặng được hiển thị |"
    info: "| 1 | Paper Card | `#dbdad9` | Điểm khác biệt ấm áp duy nhất so với trắng; cards mềm mại, fills tinh tế, điểm gốc gradient |"
    info: "| 2 | Ink Surface | `#000000` | Các khoảnh khắc đảo ngược — khối text trên nền đen, dark contrast panels |"

  elevation:

    info: "Elevation đạt được thông qua độ tương phản và hiệu ứng gradient nhẹ nhàng (#dbdad9 → #ffffff) thay vì drop shadows. Trang đọc như phẳng như giấy; chiều sâu được gợi ý bởi một mức độ ấm áp duy nhất, không phải bởi z-axis blur."

  imagery:

    info: "Ảnh sản phẩm được render như các hiện vật trôi nổi trên nền trắng thuần — các vật thể (bao bì, hộp đựng, sản phẩm) nằm trên canvas như những tác phẩm bảo tàng, không chú thích, không khung và không đổ bóng. Phong cách xử lý là high-key và đồng đều, không có bối cảnh lối sống: crop sản phẩm sát trên nền giấy trắng ấm, với bản thân vật thể đóng vai trò hero. Phong cách nhiếp ảnh là editorial-catalog — mọi sản phẩm đều được tách biệt, mọi bề mặt đều trung tính, và bản thân trang web đọc như một bức tường phòng trưng bày. Không minh họa, không đồ họa trừu tượng, không 3D renders; ngôn ngữ thị giác hoàn toàn là nhiếp ảnh và nghiêm ngặt khắc khổ."

  layout:

    info: "Trang là một bố cục canh giữa, max-width 1440px với khoảng thở rộng rãi giữa các section (43px). Hero patterns ưu tiên một dòng statement duy nhất của HaasT 141px canh giữa phía trên một nhãn PT Mono nhỏ, với các floating product artifacts được sắp xếp bất đối xứng xung quanh typography. Các section được phân cách bằng hairline rules, không phải bằng sự thay đổi màu nền — toàn bộ trang là #ffffff với #dbdad9 chỉ xuất hiện dưới dạng soft card fills. Grid lỏng lẻo: không cấu trúc cột cứng nhắc, không card grids, không pricing tables. Navigation tối giản và chỉ thuần typography. Nhịp điệu nội dung xen kẽ giữa các dải chỉ có text yên tĩnh và các dải thưa thớt chứa đầy vật thể, nơi một bức ảnh duy nhất chiếm 60–80% viewport. Cảm giác tổng thể gần với một trang art-book in ấn hơn là bố cục web truyền thống."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #000000"
    - "background: #ffffff"
    - "surface (cards/soft fills): #dbdad9"
    - "border (primary): #000000"
    - "border (secondary/table): #808080"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Display hero block**: Canvas trắng #ffffff. Headline ở 141px HaasT weight 100, #000000, line-height 0.90, canh giữa, max-width 900px. Bên dưới là nhãn PT Mono 11px #000000 đọc như caption kiểu bảo tàng. Khoảng trống dọc rộng rãi phía trên và dưới (43px+)."

    - "**Ghost pill button**: Fill trong suốt, viền 1px #000000, radius 129.6px (full pill), padding dọc 14px × ngang 29px. Label bằng HaasR 12px weight 400 #000000. Không hover fill — chỉ làm tối nhẹ text hoặc viền."

    - "**Paper card**: Nền #dbdad9, radius 7.2px, padding 29px ở mọi phía, không viền, không đổ bóng. Body text bên trong bằng HaasR 16px weight 400 #000000. Dùng cho grouped metadata, specs hoặc editorial blocks."

    - "**Floating product showcase**: Một bức ảnh sản phẩm duy nhất trên nền #ffffff thuần, không chú thích, không khung, không đổ bóng. Một nhãn PT Mono 11px nhỏ nằm cách 14px về bên phải hoặc bên dưới vật thể làm điểm neo typography duy nhất."

    - "**Editorial statement block**: Canh giữa, max-width 640px. HaasR 22px weight 400, lineHeight 1.10, #000000. Dùng cho manifesto text, section openers và các câu chữ ký như SILENCIO ® VISUAL LANGUAGES."

  gradient_system:

    info: "Một gradient duy nhất được cho phép: linear-gradient(0deg, #dbdad9, #ffffff). Dùng nó để nâng nhẹ một card hoặc section khỏi trang — không bao giờ theo chiều ngang, không bao giờ như một lớp phủ trang trí, không bao giờ có thêm điểm dừng. Gradient là công cụ chiều sâu duy nhất của hệ thống, và nó chỉ hoạt động theo một hướng: xám ấm giảm dần thành trắng."

  typography_philosophy:

    info: "Ba font chữ, ba vai trò. HaasR (grotesque, 100/400/700) là workhorse và xử lý 95% hệ thống. HaasT (display, 100/400) chỉ xuất hiện ở 141px và được dành riêng cho hero statements. PT Mono (chỉ 11px) là giọng nói nhãn bảo tàng cho metadata. Không đưa vào font thứ tư, và không dùng HaasT dưới 39px. Đặc tính hơi hình học, thắt chặt của họ Haas là signature biểu cảm duy nhất của hệ thống — hãy để nó mang sự im lặng."

  similar_brands:

    - "**Aesop** — Cùng canvas giấy ấm với một accent gray duy nhất, copy editorial được sắp chữ chặt chẽ, và ảnh sản phẩm như hiện vật trên nền trắng thuần"
    - "**COS (cosstores.com)** — Cùng hệ thống đơn sắc kiềm chế, display type lớn trên khoảng trắng rộng lớn, và ảnh sản phẩm đọc như gallery objects hơn là retail shots"
    - "**Pentagram** — Cùng kỷ luật studio về phân cấp typography với custom-feeling grotesques, màu sắc tối thiểu, và case-study layouts để tác phẩm thở trên nền trắng"
    - "**Maison Margiela** — Cùng sự kiềm chế quiet-luxury nơi sự vắng mặt của trang trí và khoảng trắng tự trở thành ngôn ngữ thiết kế, với các chi tiết typography đảm nhận phần nặng nhọc"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-warm-gray: #dbdad9;
          --color-graphite-border: #808080;
          --color-bleach-white: #ffffff;
        
          /* Typography — Font Families */
          --font-haasr: 'HaasR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haast: 'HaasT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pt-mono: 'PT Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.1;
          --text-heading-sm: 39px;
          --leading-heading-sm: 1;
          --text-heading: 58px;
          --leading-heading: 0.9;
          --text-display: 141px;
          --leading-display: 0.9;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-22: 22px;
          --spacing-29: 29px;
          --spacing-43: 43px;
          --spacing-72: 72px;
          --spacing-144: 144px;
          --spacing-173: 173px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 43px;
          --card-padding: 29px;
          --element-gap: 7px;
        
          /* Border Radius */
          --radius-lg: 7.2px;
          --radius-3xl: 43.2px;
          --radius-full: 129.6px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 7.2px;
          --radius-buttons: 129.6px;
          --radius-surfaces: 43.2px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-paper-card: #dbdad9;
          --surface-ink-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-warm-gray: #dbdad9;
          --color-graphite-border: #808080;
          --color-bleach-white: #ffffff;
        
          /* Typography */
          --font-haasr: 'HaasR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haast: 'HaasT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pt-mono: 'PT Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.1;
          --text-heading-sm: 39px;
          --leading-heading-sm: 1;
          --text-heading: 58px;
          --leading-heading: 0.9;
          --text-display: 141px;
          --leading-display: 0.9;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-10: 10px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-22: 22px;
          --spacing-29: 29px;
          --spacing-43: 43px;
          --spacing-72: 72px;
          --spacing-144: 144px;
          --spacing-173: 173px;
        
          /* Border Radius */
          --radius-lg: 7.2px;
          --radius-3xl: 43.2px;
          --radius-full: 129.6px;
        }