basement_studio___style_reference:
  info: "> Một xưởng in ảo lúc 3 giờ sáng — chữ nén khổng lồ tràn ra khỏi canvas đen tuyền, một tia lửa cam trên nav, mọi thứ còn lại đều trắng hoặc xám ma quái."

  theme: "dark"

  info: "Thẩm mỹ void thuần khiết — trang mở ra như một hình chữ nhật đen với một mục nav màu cam duy nhất và dòng chữ thì thầm 'Scroll to Explore', sau đó bùng nổ thành display type khổng lồ 87px. Canvas #000000 là tuyệt đối, không phải 'xám đen' — không có surface gradients, không có depth layers, không có decorative noise. Geist 87px weight 600 với letter-spacing -0.04em là neo thị giác: nén, rộng, cơ khí. Điểm nhấn duy nhất, màu cam than hồng #ff4d00, chỉ xuất hiện trên mục nav đang active — không bao giờ trên CTA, không bao giờ trên button — khiến nó trông như đèn báo hiệu, không phải màu thương hiệu. Các ô logo client có viền grid màu #454545 tạo cảm giác tủ hồ sơ dày đặc, kiểu kiểm kê trên nền đen tuyền."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ember Signal | `#ff4d00` | `--color-ember-signal` | Chỉ dùng cho trạng thái active của nav — xuất hiện trên một phần tử tương tác duy nhất như một đèn báo nóng, không bao giờ dùng cho button hay CTA; sự hiếm hoi chính là điểm đặc trưng |"
    info: "| Void | `#000000` | `--color-void` | Nền trang, button fill, SVG fills — đen tuyệt đối, không phải gần đen |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Text chính, nhãn nav, text button, body copy |"
    info: "| Fog | `#e5e7eb` | `--color-fog` | Màu viền trên nav, card, button, logo grid dividers — khung xương cấu trúc hiện rõ trên nền đen |"
    info: "| Ash | `#c4c4c4` | `--color-ash` | Text phụ, subheading, body copy giảm nhấn, SVG fills |"
    info: "| Graphite | `#757575` | `--color-graphite` | Text cấp ba, nhãn mờ, icon fills |"
    info: "| Carbon | `#454545` | `--color-carbon` | Màu viền card/tile — dùng trên ô logo grid để xác định cấu trúc mà không gây sáng |"
    info: "| Obsidian | `#2e2e2` | `--color-obsidian` | Nền phần tử phụ, hover states, SVG fills |"
    info: "| Cinder | `#1a1a1a` | `--color-cinder` | Nền input, viền input — bề mặt duy nhất khác biệt so với đen tuyệt đối |"
    info: "| Smudge | `#666666` | `--color-smudge` | SVG illustration fills, decorative icon tones |"

  tokens___typography:

    geist___họ_font_duy_nhất_cho_mọi_loại_chữ___nav__body__display__heading__label__headline_87px_weight_600_với_line_height_0_89_là_chữ_ký_của_hệ_thống__text_cao_hơn_khoảng_cách_cap_height_của_chính_nó__các_chữ_cái_va_chạm_nhau_ở_tỷ_lệ_lớn__letter_spacing__0_04em_ở_kích_thước_display_nén_tracking_đến_mức_gần_như_chạm_nhau__feature_flag__ss01__kích_hoạt_các_dạng_glyph_thay_thế_đặc_trưng_của_geist__dùng_một_font_duy_nhất_cho_mọi_thứ_từ_caption_12px_đến_display_87px_tạo_ra_giọng_typographic_nguyên_khối___không_pha_trộn_thể_loại_____font_geist:
      - "**Thay thế:** Inter, Helvetica Neue"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 12px, 13px, 15px, 16px, 20px, 24px, 38px, 76px, 87px"
      - "**Line height:** 0.89–1.50 (chặt nhất ở kích thước lớn nhất: 0.89 ở 87px, 0.90 ở 76px)"
      - "**Letter spacing:** -0.04em ở 76-87px, -0.03em ở 38px, -0.02em ở 20-24px"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Vai trò:** Họ font duy nhất cho mọi loại chữ — nav, body, display, heading, label. Headline 87px weight 600 với line-height 0.89 là chữ ký của hệ thống: text cao hơn khoảng cách cap-height của chính nó, các chữ cái va chạm nhau ở tỷ lệ lớn. Letter-spacing -0.04em ở kích thước display nén tracking đến mức gần như chạm nhau. Feature flag 'ss01' kích hoạt các dạng glyph thay thế đặc trưng của Geist. Dùng một font duy nhất cho mọi thứ từ caption 12px đến display 87px tạo ra giọng typographic nguyên khối — không pha trộn thể loại."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| heading-sm | 20px | 1.23 | -0.4px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.07 | -0.48px | `--text-heading` |"
      info: "| heading-lg | 38px | 1 | -1.14px | `--text-heading-lg` |"
      info: "| display | 87px | 0.89 | -3.48px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "compact"

    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: "| 64 | 64px | `--spacing-64` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| global | 0px — zero radius everywhere, no exceptions |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 128px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    ghost_navigation_link:
      vai_trò: "Mục nav chính"

      info: "Nền trong suốt, text #ffffff ở 13px Geist weight 500, không padding, không border, không radius. Trạng thái active: chuyển sang màu #ff4d00 — vị trí duy nhất điểm nhấn này xuất hiện trong toàn bộ hệ thống."

    contact_us_button:
      vai_trò: "CTA chính trong nav"

      info: "Nền #000000, text #ffffff ở 13px Geist weight 500, border-radius 0px, padding 4px tất cả các cạnh, border: 1px solid #e5e7eb. Hộp góc sắc trên thanh nav đen — chỉ phân biệt được nhờ hình chữ nhật viền."

    scroll_to_explore_label:
      vai_trò: "Lời nhắc cuộn / CTA môi trường"

      info: "Nền trong suốt, text #ffffff ở 15px Geist weight 400, kèm glyph mũi tên xuống. Không có button chrome. Nằm ở giữa dưới cùng của full-black hero viewport."

    client_logo_tile:
      vai_trò: "Ô grid bằng chứng xã hội"

      info: "Nền trong suốt, border 1px solid #454545, radius 0px, không padding rõ ràng (nội dung căn giữa trong ô grid chiều rộng bằng nhau). Logo SVG màu trắng. Grid layout 8 cột, lát gạch dày đặc — không có khoảng cách giữa các ô, các border chồng lên các ô liền kề."

    section_label:
      vai_trò: "Header ngữ cảnh nhỏ (ví dụ: 'Trusted by Visionaries')"

      info: "Text #757575 ở 13px Geist weight 400, không trang trí. Xuất hiện phía trên các khối nội dung như một bộ phân loại mờ — nhẹ hơn body text, nặng hơn caption."

    display_headline:
      vai_trò: "Heading chính của hero"

      info: "Text #ffffff ở 87px Geist weight 600, line-height 0.89, letter-spacing -0.04em, font-feature-settings 'ss01'. Khối full-width, text wrap để lấp đầy chiều rộng viewport. Yếu tố thị giác chiếm ưu thế của trang — không trang trí, không gạch chân, không gradient — khối type nén thuần khiết."

    body_paragraph:
      vai_trò: "Body copy mô tả sub-headline"

      info: "Text #c4c4c4 ở 15px Geist weight 400, line-height 1.5. Đặt trong cột giới hạn (~300-350px width) bên dưới display headline. Màu xám giảm từ trắng tạo sự phụ thuộc thị giác mà không cần thay đổi kích thước."

    text_input:
      vai_trò: "Trường nhập liệu form"

      info: "Nền #1a1a1a, border #1a1a1a (bằng phẳng — border hòa với nền), text #ffffff ở 15px Geist weight 400, border-radius 0px, padding ngang 4px, padding dọc 0px. Bề mặt input là nền duy nhất không phải đen trong hệ thống."

    nav_badge___count:
      vai_trò: "Nhãn số trên mục nav (ví dụ: số lượng mục showcase)"

      info: "Badge superscript hoặc inline nhỏ màu #757575 ở 12px Geist weight 400. Không nền, không border, không radius. Chỉ báo đếm thuần typographic."

    wordmark:
      vai_trò: "Logo thương hiệu trong nav"

      info: "'basement.' màu #ffffff Geist weight 600 ở ~16px. Dấu chấm là một phần của brand mark. Không icon, không logomark — chỉ logotype."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #000000 làm nền trang duy nhất — không bao giờ thay thế bằng màu gần đen như #0a0a0a hay #111111; void tuyệt đối là có chủ đích."
      - "Áp dụng border-radius 0px cho mọi phần tử — button, card, input, badge, tất cả component. Bất kỳ góc bo tròn nào cũng phá vỡ hệ thống."
      - "Chỉ dành #ff4d00 riêng cho trạng thái active của nav. Không bao giờ dùng trên button, CTA, icon hay phần tử trang trí."
      - "Đặt display type (38px+) với font-feature-settings: 'ss01' và letter-spacing tối thiểu -0.02em, mở rộng lên -0.04em ở 76-87px."
      - "Dùng border 1px solid #454545 trên grid tile và border 1px solid #e5e7eb trên phần tử tương tác (button, mục nav) — hai sắc độ viền này tạo hệ thống phân cấp hai tầng."
      - "Duy trì Geist làm typeface duy nhất trên mọi kích thước từ caption 12px đến display 87px — không có font phụ hay font trang trí."
      - "Dùng #c4c4c4 cho body copy dưới headline thay vì trắng hoàn toàn, tạo hệ thống phân cấp độ sáng thông qua độ sáng chứ không chỉ kích thước."

    không_nên_làm:
      - "Không bao giờ thêm box-shadow, drop-shadow hay glow — thiết kế không có elevation; chiều sâu được tạo bằng type scale và màu sắc, không phải shadow."
      - "Không bao giờ dùng góc bo tròn — không 2px, không 4px. Radius 0px là bất khả thương lượng trên mọi component."
      - "Không bao giờ giới thiệu typeface thứ hai — không cho decorative headline, không cho code block, không cho quote."
      - "Không bao giờ đặt #ff4d00 trên nền, fill hay hình dạng trang trí — nó chỉ tồn tại như tín hiệu màu text trên một phần tử."
      - "Không bao giờ dùng trắng (#ffffff) cho text mô tả cấp body — dùng #c4c4c4 hoặc #757575 để giữ display headline là đỉnh độ sáng."
      - "Không bao giờ thêm gradient vào nền hay text — hệ thống flat, matte và nhị phân trong cách áp dụng màu."
      - "Không bao giờ áp dụng padding lớn hơn 16px cho inline hoặc small component — hệ thống spacing compact (đơn vị cơ sở 4px) và các bố trí grid dày đặc không nên thở quá nhiều."

  elevation:

    info: "Zero elevation — không shadow, không bề mặt nổi, không blur. Toàn bộ giao diện tồn tại trên một mặt phẳng Z. Chiều sâu được xây dựng hoàn toàn thông qua tương phản type scale (12px vs 87px) và tương phản độ sáng (trắng vs #757575 vs đen). Sự phẳng này có tính cấu trúc: thêm bất kỳ shadow nào sẽ gợi ý một bề mặt không tồn tại trong void này."

  imagery:

    info: "Logo client là SVG đơn sắc trắng trên nền trong suốt, đặt trong grid có viền cứng — không có khoảng thở, không có ảnh hover state. Không nhiếp ảnh, không minh họa, không 3D. Ngôn ngữ thị giác hoàn toàn là typographic và iconographic. Logo tile hoạt động như mục nhập danh mục kiểm kê hơn là khoảnh khắc showcase. Trang có tính text-dominant ở mức cực đoan: hero là 100% type trên nền đen, không có imagery. Icon style khi có mặt là mono-white SVG tối giản có outline/fill ở kích thước nhỏ. Thiết kế cố tình kháng cự atmospheric imagery — void CHÍNH LÀ art direction."

  layout:

    info: "Canvas #000000 full-bleed không có max-width constraint trên hero. Navigation là thanh trên cố định với wordmark bên trái, link ở giữa, CTA contact bên phải. Viewport đầu tiên hoàn toàn đen chỉ có nav hiển thị cộng với 'Scroll to Explore' ở giữa dưới cùng — một sự tiết lộ sân khấu trước khi nội dung xuất hiện. Bên dưới fold: display headline full-width trải dài viewport, sau đó là cột body paragraph có chiều rộng giới hạn (~350px) căn trái. Phần client logo sử dụng grid 8 cột chiều rộng bằng nhau với border 1px đã thu gọn (#454545) — các ô chia sẻ border, không có khoảng cách, tạo lưới dày đặc. Nhịp section hào phóng giữa các section chính (gap 128px) nhưng nội bộ compact. Không có dải sáng/tối xen kẽ — toàn bộ trang duy trì nền void xuyên suốt."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Text (chính): #ffffff"
    - "Text (phụ): #c4c4c4"
    - "Text (cấp ba/mờ): #757575"
    - "Nền: #000000"
    - "Viền (cấu trúc): #454545"
    - "Viền (tương tác): #e5e7eb"
    - "Điểm nhấn active: #ff4d00 (chỉ nav)"
    - "Bề mặt input: #1a1a1a"

    ví_dụ_component_prompts:

    - "Hero Section: Nền #000000 full-viewport. Headline 87px Geist weight 600, #ffffff, line-height 0.89, letter-spacing -3.5px, font-feature-settings 'ss01'. Body paragraph phụ 15px Geist weight 400, #c4c4c4, line-height 1.5, max-width 350px, đặt bên dưới headline. Nhãn 'Scroll to Explore' 15px #ffffff căn giữa dưới cùng viewport."

    - "Navigation Bar: Nền #000000, full-width. Wordmark 'basement.' màu #ffffff Geist weight 600 16px căn trái. Nav link 13px Geist weight 500 #ffffff căn giữa, mục active màu #ff4d00. Button 'Contact Us' căn phải: fill #000000, border 1px solid #e5e7eb, radius 0px, padding 4px, text #ffffff 13px weight 500."

    - "Client Logo Grid: Grid 8 cột, các ô chia sẻ border 1px solid #454545 đã thu gọn, radius 0px, nền #000000. Mỗi ô chứa logo SVG trắng căn giữa. Không có khoảng cách — border thu gọn. Grid trải dài toàn bộ chiều rộng nội dung."

    - "Text Input Field: Nền và border-color #1a1a1a, border-radius 0px, padding ngang 4px, padding dọc 0px, text #ffffff 15px Geist weight 400. Bề mặt input là nền duy nhất không phải void trong hệ thống."

    - "Section Label + Content Block: Section label 13px Geist weight 400 #757575, phía trên heading. Heading 38px Geist weight 600 #ffffff letter-spacing -1.14px line-height 1.0. Margin-top 128px giữa các section chính."

  similar_brands:

    - "**Linear** — Typeface Geist, nền tối tuyệt đối, màu nhấn đơn dành cho trạng thái active, hình dạng component zero-radius"
    - "**Vercel** — Canvas đen thuần, hệ thống phân cấp type chỉ trắng, bảng màu trung tính đơn sắc với một điểm nhấn sống động, triết lý bề mặt phẳng"
    - "**Rauno / Personal studios** — Một typeface duy nhất dùng trên mọi kích thước, bản sắc typographic là thiết kế thị giác chính, không có imagery trang trí"
    - "**MSCHF** — Display type nén ở kích thước mạnh mẽ, component zero-radius brutalist, copy bất kính kết hợp với hệ thống thị giác kiềm chế"
    - "**Resend** — Font Geist, nền đen thuần, hệ thống border #e5e7eb cho phần tử grid cấu trúc, bảng màu tối thiểu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember-signal: #ff4d00;
          --color-void: #000000;
          --color-chalk: #ffffff;
          --color-fog: #e5e7eb;
          --color-ash: #c4c4c4;
          --color-graphite: #757575;
          --color-carbon: #454545;
          --color-obsidian: #2e2e2;
          --color-cinder: #1a1a1a;
          --color-smudge: #666666;
        
          /* Typography — Font Families */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.23;
          --tracking-heading-sm: -0.4px;
          --text-heading: 24px;
          --leading-heading: 1.07;
          --tracking-heading: -0.48px;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.14px;
          --text-display: 87px;
          --leading-display: 0.89;
          --tracking-display: -3.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-64: 64px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 128px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-global: 0px — zero radius everywhere, no exceptions;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember-signal: #ff4d00;
          --color-void: #000000;
          --color-chalk: #ffffff;
          --color-fog: #e5e7eb;
          --color-ash: #c4c4c4;
          --color-graphite: #757575;
          --color-carbon: #454545;
          --color-obsidian: #2e2e2;
          --color-cinder: #1a1a1a;
          --color-smudge: #666666;
        
          /* Typography */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.23;
          --tracking-heading-sm: -0.4px;
          --text-heading: 24px;
          --leading-heading: 1.07;
          --tracking-heading: -0.48px;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.14px;
          --text-display: 87px;
          --leading-display: 0.89;
          --tracking-display: -3.48px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-64: 64px;
          --spacing-128: 128px;
        }