blueyard_capital___style_reference:
  info: "> Sunset editorial observatory. Một đường chân trời đào ấm loang dần vào trắng tinh, một headline cỡ lớn nổi giữa khoảng âm bản, và một thiên thể 3D duy nhất treo bên dưới như hành tinh trong một monograph in ấn."

  theme: "light"

  info: "BlueYard Capital mang phong cách một ấn phẩm editorial in ấn được ngụy trang thành homepage của quỹ đầu tư mạo hiểm: một canvas trắng rộng lớn được neo bởi một mảng màu đào ấm, một headline Instrument Sans cỡ lớn duy nhất, và một tác phẩm hình cầu được render 3D hoạt động như ảnh bìa tạp chí. Bảng màu 98% là achromatic — một màu gần đen ấm (#3a3a3e) đảm nhận toàn bộ trọng lượng chữ trên nền trắng tinh — với ba sắc thái màu nhạt (đào, oải hương, hồng) chỉ xuất hiện làm nền card và đường viền mảnh, không bao giờ là nút chức năng. Cards phẳng, không viền hoặc viền mảnh, nổi trên whitespace thay vì nằm trong hộp đổ bóng. Navigation gần như không có: một wordmark hai dòng nhỏ và một ô hamburger. Toàn bộ site thu hút sự chú ý qua sự tiết chế và tỷ lệ, chứ không phải chrome."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, fill nút ghost — sân khấu chính cho mọi thứ khác |"
    info: "| Graphite Ink | `#3a3a3e` | `--color-graphite-ink` | Chữ chính, màu link, stroke icon, viền mảnh, viền nút ghost — màu gần đen ấm mang 97% trọng lượng typography |"
    info: "| Deep Carbon | `#090b11` | `--color-deep-carbon` | Chữ nhấn, stroke nav, viền card đậm — hơi lạnh và cứng hơn Graphite Ink, dành cho những khoảnh khắc tương phản tối đa |"
    info: "| Ash Veil | `#b5b0b0` | `--color-ash-veil` | Nền body mờ, viền mềm — xám ấm dùng cho các dải nền phụ bên dưới canvas chính |"
    info: "| Apricot Wash | `#ffcf9e` | `--color-apricot-wash` | Nền và viền card — điểm nhấn màu chủ đạo, dùng làm fill ấm hoặc viền mảnh trên các card nổi bật |"
    info: "| Iris Mist | `#babfff` | `--color-iris-mist` | Nền và viền card — oải hương lạnh làm đối trọng với Apricot Wash, kết hợp với đào trên các card portfolio hoặc tính năng |"
    info: "| Fuchsia Bloom | `#e3a2ef` | `--color-fuchsia-bloom` | Nền card — fill hồng rực rỡ, màu bão hòa nhất trong hệ thống, xuất hiện dưới dạng khối đặc thay vì viền |"
    info: "| Polar Blue | `#bfe0f7` | `--color-polar-blue` | Tông nền mềm — xanh da trời nhạt dùng làm nền card hoặc section phụ hiếm hoi, làm mát bảng màu đào/oải hương/hồng ấm |"

  tokens___typography:

    instrument_sans___typeface_duy_nhất__dùng_cho_mọi_ui_element__mọi_headline__mọi_caption__weight_400_là_body_và_display_mặc_định__weight_500_dùng_tiết_kiệm_cho_nav_label_và_nhấn_mạnh__điểm_đặc_trưng__instrument_sans_là_một_humanist_geometric_grotesque_có_hiệu_chỉnh_quang_học___kết_hợp_với_negative_tracking_mạnh_ở_kích_thước_display__tạo_ra_typography_chặt_chẽ__hiện_đại__gần_như_cao_cấp__mang_phong_cách_editorial_chứ_không_phải_saas_____font_instrument_sans:
      - "**Thay thế:** Inter, Söhne, hoặc General Sans"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 12px, 24px, 48px, 54px"
      - "**Line height:** 1.00, 1.20, 1.50"
      - "**Letter spacing:** -0.36px ở 12px, -0.24px ở 24px, -1.62px ở 54px, -0.54px ở 48px"
      - "**Vai trò:** Typeface duy nhất. Dùng cho mọi UI element, mọi headline, mọi caption. Weight 400 là body và display mặc định; weight 500 dùng tiết kiệm cho nav label và nhấn mạnh. Điểm đặc trưng: Instrument Sans là một humanist geometric grotesque có hiệu chỉnh quang học — kết hợp với negative tracking mạnh ở kích thước display, tạo ra typography chặt chẽ, hiện đại, gần như cao cấp, mang phong cách editorial chứ không phải SaaS."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.36px | `--text-caption` |"
      info: "| body | 24px | 1.5 | -0.24px | `--text-body` |"
      info: "| heading | 48px | 1.2 | -0.54px | `--text-heading` |"
      info: "| display | 54px | 1 | -1.62px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 90 | 90px | `--spacing-90` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 90px"
      - "**Card padding:** 12px"
      - "**Element gap:** 5px"

  components:

    centered_editorial_headline:
      vai_trò: "Khối typography hero"

      info: "Headline canh giữa full-width ở 54px Instrument Sans weight 400, line-height 1.0, letter-spacing -1.62px, màu #3a3a3e. Nằm ở 1/3 trên của viewport với padding trên rộng (~90px). Có thể có subtitle 24px bên dưới với gap 24px. Không gạch chân, không trang trí — tỷ lệ và tracking tự làm nhiệm vụ."

    apricot_bordered_card:
      vai_trò: "Card nội dung nổi bật với viền ấm"

      info: "Bề mặt card trắng với viền 1px #ffcf9, padding trong 12px, radius 0px. Chữ bên trong dùng #3a3a3 ở 12-24px. Không đổ bóng. Viền đào là tín hiệu duy nhất — mang cảm giác ấm áp, đánh dấu thủ công, không phải trang trí."

    apricot_fill_card:
      vai_trò: "Card đào đặc"

      info: "Nền #ffcf9 đầy đủ, padding 12px, radius 0px. Chữ tối (#3a3a3e) đạt độ tương phản AAA (13.7:1). Dùng tiết kiệm — một card mỗi section — để đánh dấu một mục duy nhất được làm nổi bật."

    lavender_bordered_card:
      vai_trò: "Card đối trọng lạnh"

      info: "Bề mặt trắng với viền 1px #babfff, padding 12px, radius 0px. Kết hợp trực quan với card Apricot trên lưới portfolio hoặc team để tạo nhịp điệu ấm/lạnh."

    fuchsia_fill_card:
      vai_trò: "Card màu đặc rực rỡ"

      info: "Nền #e3a2ef đầy đủ, padding 12px, radius 0px, chữ #090b11 (tương phản 10:1). Element bão hòa nhất trong hệ thống — xuất hiện dưới dạng một khối duy nhất, không bao giờ lặp lại trong một hàng."

    polar_blue_surface_band:
      vai_trò: "Nền section mềm mại"

      info: "Dải #bfe0f7 full-bleed dùng làm nền section — không viền, không radius. Tạo khoảng dừng mát mẻ giữa các khoảnh khắc đào ấm."

    wordmark_lockup:
      vai_trò: "Nhận diện thương hiệu ở góc trên bên trái"

      info: "Chữ in hoa hai dòng 'BLUE / YARD' trong Instrument Sans weight 500 ở 12px, line-height 1.0, letter-spacing -0.36px, màu #3a3a3e. Không logo, không container — chỉ là chữ xếp chặt vào góc trên bên trái."

    hamburger_menu_button:
      vai_trò: "Trigger navigation chính"

      info: "Một ô vuông trắng 40x40px ở góc trên bên phải với viền #3a3a3 mảnh và icon hamburger ba dòng canh giữa bên trong. Radius 0px, không fill. Đường viền ô vuông là chrome duy nhất — toàn bộ nav chỉ là một tap target duy nhất này."

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

      body_text_được_style_làm_link: "màu #3a3a3, không gạch chân mặc định, gạch chân 1px khi hover bằng #3a3a3e. Weight giữ nguyên 400. Links kế thừa kích thước chữ xung quanh."

    full_bleed_3d_artwork_stage:
      vai_trò: "Neo hình ảnh tạo không khí"

      info: "Hình cầu render lớn hoặc vật thể 3D trừu tượng được đặt ở nửa dưới của viewport, tràn ra ngoài cạnh dưới. Không khung, không viền, không caption. Nền dùng gradient đào sang trắng dạng radial mềm. Tác phẩm là hero, không phải hình minh họa hỗ trợ."

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

      info: "Đường 1px màu #3a3a3 trải dài toàn bộ chiều rộng nội dung. Không đường đôi, không chấm, không ngắt trang trí. Element cấu trúc rõ rệt nhất trong một hệ thống vốn tránh viền."

  do_s_and_don_ts:

    do:
      - "Giữ 97%+ tất cả chữ và viền trong #3a3a3 — để màu gần đen ấm mang toàn bộ giao diện"
      - "Chỉ dùng ba sắc thái màu (#ffcf9, #babfff, #e3a2ef) làm nền card hoặc viền mảnh 1px, không bao giờ dùng làm chữ hoặc icon"
      - "Đặt mọi radius thành 0px — cards, buttons, tags, và nav đều có góc vuông sắc"
      - "Chỉ dùng Instrument Sans weight 500 cho nav label và wordmark; dùng weight 400 cho mọi thứ khác kể cả display headline 54px"
      - "Áp dụng -1.62px tracking cho kích thước display 54px và siết chặt tỷ lệ xuống dưới; không bao giờ dùng positive letter-spacing"
      - "Neo mỗi section với 90px khoảng thở dọc trên và dưới; để canvas trắng làm nhiệm vụ phân cấp"
      - "Để một tác phẩm 3D hoặc ảnh chiếm nửa dưới của hero — full-bleed, không caption, tràn khung"

    don_t:
      - "Không thêm shadow, glow, hoặc bề mặt nổi — hệ thống cố tình phẳng và dựa trên viền"
      - "Không bo góc bất kỳ element nào, bao gồm buttons, cards, và tags — radius 0px là đặc trưng"
      - "Không dùng màu chromatic làm nền button hoặc màu chữ — đào, oải hương, và hồng chỉ dành cho card"
      - "Không thêm nút CTA chính hiển thị bằng màu thương hiệu; hệ thống dùng ghost button fill trắng trên viền #3a3a3"
      - "Không dùng positive letter-spacing ở bất kỳ đâu; hệ thống tracking chặt, đặc biệt ở kích thước display"
      - "Không dùng drop shadow dưới card hoặc ảnh; dựa vào whitespace và hairlines để phân tách các lớp"
      - "Không thêm gradient trang trí vào UI components; gradient chỉ dành cho atmospheric hero washes"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang mặc định — bề mặt chủ đạo chiếm phần lớn viewport |"
    info: "| 1 | Ash Band | `#b5b0b0` | Nền section xám ấm mềm dùng làm dải yên tĩnh bên dưới canvas chính |"
    info: "| 2 | Polar Blue Field | `#bfe0f7` | Tông nền xanh da trời nhạt mát, dùng làm nền section full-bleed để tạo sự đa dạng |"
    info: "| 3 | Apricot Field | `#ffcf9` | Fill card đào ấm — đánh dấu một card duy nhất được làm nổi bật mỗi section |"
    info: "| 4 | Fuchsia Field | `#e3a2ef` | Fill card hồng rực rỡ — bề mặt bão hòa nhất, dùng làm khối nhấn đơn lẻ |"

  elevation:

    - "**Cards:** `none — bề mặt phẳng, không box-shadow`"
    - "**Buttons:** `none — bề mặt phẳng, không box-shadow`"
    - "**Navigation:** `none — bề mặt phẳng, không box-shadow`"

  imagery:

    info: "Nhận diện thị giác được neo bởi các vật thể 3D render lớn, không caption — chủ yếu là dạng hình cầu hoặc hành tinh với hiệu ứng hạt, đặt trên nền gradient radial đào sang trắng ấm. Hình ảnh tràn ra ngoài mép viewport, không khung, không viền, không caption. Không có photography, stock illustration, hoặc iconography trang trí. Khi icon xuất hiện, chúng là glyph dạng nét mảnh gần giống Instrument Sans trong #3a3a3e. Tác phẩm 3D chiếm 40-60% viewport và hoạt động như một tấm bìa tạp chí hơn là ảnh chụp màn hình sản phẩm."

  layout:

    info: "Mô hình trang full-bleed với nội dung canh giữa hoặc canh trái trong một max-width ngầm ~1200px. Hero là pattern định nghĩa: một headline Instrument Sans cỡ lớn canh giữa ở 1/3 trên, với một tác phẩm 3D lớn treo ở nửa dưới tràn ra ngoài cạnh dưới. Bên dưới hero, trang chảy trong các dải trắng và tông màu nhẹ xen kẽ (xám tro, xanh polar) với padding dọc 90px phân cách mỗi section. Cards xuất hiện trong lưới một cột hoặc 2-3 cột với gap 5-12px. Navigation tối thiểu: một wordmark hai dòng nhỏ ở góc trên bên trái và một ô hamburger duy nhất ở góc trên bên phải — không mega-menu, không thanh nav ngang. Nhịp điệu tổng thể rộng rãi và mang phong cách editorial, với các section nội dung thở chứ không nhồi nhét."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #3a3a3e (chính) / #090b11 (nhấn)"
    - "background: #ffffff (canvas) / #b5b0b0 (ash band) / #bfe0f7 (polar blue)"
    - "border: #3a3a3e (hairline) / #ffcf9e (peach accent) / #babfff (lavender accent)"
    - "accent: #ffcf9e (apricot) / #babfff (iris) / #e3a2ef (fuchsia)"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompts:"
    - "Centered Hero Headline: 54px Instrument Sans weight 400, #3a3a3e, line-height 1.0, letter-spacing -1.62px, canh giữa, với padding trên 90px trên canvas #ffffff. Có thể có subtitle 24px bên dưới cùng màu với gap 24px."
    - "Apricot-Bordered Featured Card: bề mặt trắng, viền 1px #ffcf9e, padding 12px, radius 0px, chữ #3a3a3e 12-24px bên trong, không shadow, gap 5px đến card tiếp theo."
    - "Fuchsia Fill Highlight Block: nền #e3a2ef đầy đủ, padding 12px, radius 0px, chữ #090b11 ở 24px weight 400, letter-spacing -0.24px. Dùng một lần mỗi trang như một điểm nhấn đơn lẻ."
    - "Hamburger Nav Button: ô vuông trắng 40x40px với viền 1px #3a3a3e, radius 0px, icon hamburger ba dòng canh giữa trong #3a3a3e. Đặt ở góc trên bên phải với margin 12px."
    - "Hairline Section Divider: đường 1px solid #3a3a3e trải dài toàn bộ chiều rộng nội dung (~1200px), container cao 0px, dùng giữa các section thay cho chuyển đổi màu nền."

  color_system_philosophy:

    info: "Bảng màu được cấu trúc như một thang bề mặt 5 bước thay vì mô hình primary/secondary truyền thống: trắng (canvas) → ash (dải xám ấm) → polar blue (khoảng dừng mát) → apricot (điểm nhấn ấm) → fuchsia (điểm kỳ dị rực rỡ). Peach (#ffcf9e) là chromatic chủ lực, được dùng nhiều gấp 4 lần lavender và gấp 5 lần fuchsia. Ba sắc thái chromatic chia sẻ khoảng giá trị độ sáng tương tự (~85% lightness) nên chúng đọc như một họ vật liệu card thay vì các màu thương hiệu cạnh tranh. Màu chữ là đơn khối: #3a3a3e xử lý 97% tất cả rendering chữ, với #090b11 dành cho những khoảnh khắc nhấn mạnh tối đa. Đây là một hệ thống dùng màu sắc như một hình thức phân loại (đây là loại card gì?) thay vì trang trí."

  typography_philosophy:

    info: "Instrument Sans là typeface duy nhất. Hệ thống dùng bốn kích thước (12, 24, 48, 54) với bước nhảy 4.5x từ caption lên display — đây là thang editorial, không phải thang UI. Body text nằm ở 24px rộng rãi thay vì 16px thông thường, mang lại cho mọi đoạn văn mật độ tạp chí in ấn. Kích thước display 54px kết hợp với line-height 1.0 tạo ra một headline một dòng; headline không bao giờ được thiết kế để xuống dòng. Negative letter-spacing tỷ lệ thuận với kích thước: -3% ở 12px (-0.36px) đến -3% ở 54px (-1.62px), tạo ra các chữ cái gắn kết chặt chẽ mang cảm giác cao cấp hơn là doanh nghiệp. Weight 500 chỉ dùng cho wordmark và nav label — weight 400 mang mọi thứ khác kể cả display text lớn nhất."

  similar_brands:

    - "**Stripe Press** — Cùng sự tiết chế monograph editorial: một typeface, canvas trắng, headline lớn canh giữa kết hợp với hình ảnh không khí đơn lẻ — không có SaaS chrome"
    - "**Index Ventures** — Các site quỹ đầu tư mạo hiểm xử lý homepage như một ấn phẩm in ấn, với headline cỡ lớn và navigation tối thiểu dựa trên một trigger menu duy nhất"
    - "**Koto Studio** — Thẩm mỹ portfolio agency branding với các điểm nhấn card màu nhạt (đào, oải hương, hồng) trên nền trắng với góc vuông 0px sắc và không shadow"
    - "**The Browser Company** — Một gradient khí quyển ấm duy nhất trên canvas sáng kết hợp với một vật thể 3D cỡ lớn đơn lẻ làm neo hình ảnh hero"
    - "**Are.na** — Giao diện yên tĩnh, dẫn dắt bằng chữ, dùng màu gần đen ấm làm màu chữ duy nhất trên nền trắng, với các sắc thái chromatic chỉ xuất hiện dưới dạng dải bề mặt"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-graphite-ink: #3a3a3e;
          --color-deep-carbon: #090b11;
          --color-ash-veil: #b5b0b0;
          --color-apricot-wash: #ffcf9e;
          --color-iris-mist: #babfff;
          --color-fuchsia-bloom: #e3a2ef;
          --color-polar-blue: #bfe0f7;
        
          /* Typography — Font Families */
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.36px;
          --text-body: 24px;
          --leading-body: 1.5;
          --tracking-body: -0.24px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: -0.54px;
          --text-display: 54px;
          --leading-display: 1;
          --tracking-display: -1.62px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-60: 60px;
          --spacing-90: 90px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 90px;
          --card-padding: 12px;
          --element-gap: 5px;
        
          /* Border Radius */
          --radius-lg: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-ash-band: #b5b0b0;
          --surface-polar-blue-field: #bfe0f7;
          --surface-apricot-field: #ffcf9;
          --surface-fuchsia-field: #e3a2ef;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-graphite-ink: #3a3a3e;
          --color-deep-carbon: #090b11;
          --color-ash-veil: #b5b0b0;
          --color-apricot-wash: #ffcf9e;
          --color-iris-mist: #babfff;
          --color-fuchsia-bloom: #e3a2ef;
          --color-polar-blue: #bfe0f7;
        
          /* Typography */
          --font-instrument-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.36px;
          --text-body: 24px;
          --leading-body: 1.5;
          --tracking-body: -0.24px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: -0.54px;
          --text-display: 54px;
          --leading-display: 1;
          --tracking-display: -1.62px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-60: 60px;
          --spacing-90: 90px;
        
          /* Border Radius */
          --radius-lg: 10px;
        }