shares___style_reference:
  info: "> Terminal ngà với nhịp tím — một không gian làm việc trắng lâm sàng, nơi một màu duy nhất đánh dấu mọi hành động có chủ đích."

  theme: "light"

  info: "Một giao diện fintech đơn sắc trên nền gần trắng, nơi một màu tím rực rỡ làm tất cả cuộc trò chuyện. Ngôn ngữ thị giác thưa thớt và tự tin: không gradient trang trí, không trang trí màu sắc, không hiệu ứng bóng đổ. Mọi thứ nằm trên nền phẳng porcelain với chữ than đen đậm, và màu sắc duy nhất đáng được chú ý là Signal Violet (#594ff4), được dành riêng cho hành động — nút đã điền, link đang hoạt động, brand marks. Các component dựa vào hình học thay vì chiều sâu: pill controls (99px radius), card bo góc rộng rãi (36px), và divider xám 1px mềm thay vì elevation. Typography mang tính hình học và tracking chặt chẽ, với headline lớn ở line-height nén (1.05–1.15) mang cảm giác kiến trúc hơn là editorial. Product mockup nổi trong các bố cục xếp lớp, hơi chồng lên nhau — phone + dashboard + code panel — được neo bởi một màu thương hiệu duy nhất."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Violet | `#594ff4` | `--color-signal-violet` | Primary action fill, active links, brand iconography — màu sắc duy nhất trong hệ thống, tạo độ tương phản cao và cảm giác cấp bách trên nền đơn sắc |"
    info: "| Inkstone | `#1f1f1f` | `--color-inkstone` | Primary headings, body text emphasis, dark surface fills — màu trung tính tối chủ đạo |"
    info: "| Graphite | `#333333` | `--color-graphite` | Secondary text, dense borders, icon strokes — màu trung tính được dùng nhiều nhất |"
    info: "| Slate | `#5d5d5d` | `--color-slate` | Muted body text, navigation subtext, secondary borders |"
    info: "| Smoke | `#888888` | `--color-smoke` | Tertiary text, helper copy, light borders |"
    info: "| Ash | `#b0b0b0` | `--color-ash` | Muted link text, hairline dividers, inactive borders |"
    info: "| Mist | `#e7e7e7` | `--color-mist` | Image and photo borders, very light separators |"
    info: "| Cloud | `#f6f6f6` | `--color-cloud` | Card surfaces, FAQ panels, subtle background tints — lớp elevation mềm |"
    info: "| Porcelain | `#ffffff` | `--color-porcelain` | Page canvas, button text on violet fill, primary card background — bề mặt nền chủ đạo |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Footer fill, maximum-contrast text — dùng có chừng mực cho màu tối nhất |"

  tokens___typography:

    aeonik___primary_brand_typeface_cho_mọi_văn_bản___geometric_sans_với_weight_500_medium_cho_body_ui_và_700_bold_cho_headlines__kích_thước_display_72px_56px_kết_hợp_với_line_height_chặt_1_05_1_10_tạo_ra_headline_kiến_trúc_mang_cảm_giác_được_xây_dựng_hơn_là_editorial__tracking_0_075em_áp_dụng_cho_uppercase_eyebrows_và_headings__tạo_nhịp_điệu_cao_cấp__hơi_dãn_cách_____font_aeonik:
      - "**Substitute:** Inter, DM Sans, hoặc Manrope ở weight tương ứng"
      - "**Weights:** 500, 700"
      - "**Sizes:** 14px, 15px, 16px, 17px, 18px, 20px, 26px, 36px, 56px, 72px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** 0.075em (uppercase eyebrows và display headlines)"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** Primary brand typeface cho mọi văn bản — geometric sans với weight 500 (medium) cho body/UI và 700 (bold) cho headlines. Kích thước display 72px/56px kết hợp với line-height chặt 1.05–1.10 tạo ra headline kiến trúc mang cảnh được xây dựng hơn là editorial. Tracking 0.075em áp dụng cho uppercase eyebrows và headings, tạo nhịp điệu cao cấp, hơi dãn cách."

    rubik___chỉ_dùng_inline_phụ___xuất_hiện_trong_các_widget_nhỏ__không_phải_font_hệ_thống_chính____font_rubik:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 500"
      - "**Sizes:** 14px"
      - "**Line height:** 1.50"
      - "**Role:** Chỉ dùng inline phụ — xuất hiện trong các widget nhỏ, không phải font hệ thống chính"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | 1.05px | `--text-caption` |"
      info: "| heading-sm | 20px | 1.33 | 1.5px | `--text-heading-sm` |"
      info: "| heading | 26px | 1.2 | 1.95px | `--text-heading` |"
      info: "| heading-lg | 36px | 1.15 | 2.7px | `--text-heading-lg` |"
      info: "| display | 56px | 1.1 | 4.2px | `--text-display` |"
      info: "| display-lg | 72px | 1.05 | 5.4px | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | 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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 99px |"
      info: "| cards | 36px |"
      info: "| images | 10px |"
      info: "| inputs | 16px |"
      info: "| buttons | 99px |"
      info: "| accordion | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.12) 0px 0px 60px -13px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 24px"

  components:

    pill_primary_button:
      role: "Main call-to-action — phần tử màu sắc duy nhất được điền"

      info: "Nền Signal Violet (#594ff4) đã điền, chữ trắng, border-radius 99px (full pill), Aeonik 500 ở 16px. Padding 12px 28px hoặc 16px 28px tùy kích thước. Không shadow. Hình học pill và sự tự tin một màu làm cho mọi CTA trở nên không thể nhầm lẫn trên nền đơn sắc."

    ghost_navigation_button:
      role: "Secondary header CTA — tối giản, text-and-border"

      info: "Nền trong suốt hoặc trắng với viền Signal Violet, chữ Signal Violet, radius 99px, Aeonik 500 ở 16px, padding 10px 24px. Trọng lượng thị giác nhẹ hơn primary pill, báo hiệu thứ bậc hành động phụ."

    feature_highlight_card:
      role: "Đơn vị icon + heading + description trong lưới 3 cột"

      info: "Nền trong suốt hoặc trắng, không viền. Icon ở trên cùng (Signal Violet stroke), heading bằng Aeonik 700 ở 20px Inkstone (#1f1f1f), body bằng Aeonik 500 ở 16px Slate (#5d5d5d). Nhịp dọc 16–24px giữa các phần tử. Card không mang bề mặt riêng — trang trắng CHÍNH LÀ card."

    product_showcase_card:
      role: "Section 2 cột lớn với text-left, visual-right"

      info: "Nền trắng hoặc Cloud (#f6f6f6), border-radius 36px, padding trong 32px. Cột trái: heading (Aeonik 700 36px Inkstone), body (Aeonik 500 16px Slate), CTA pill button. Cột phải: layered product mockup nổi nhẹ phía trên bề mặt card với một pattern shadow mềm duy nhất."

    faq_accordion_item:
      role: "Bảng câu hỏi/câu trả lời có thể mở rộng"

      info: "Nền Cloud (#f6f6f6), border-radius 16px, padding 20px 24px. Chữ câu hỏi bằng Aeonik 500 ở 16px Inkstone, với icon chevron nhỏ bên phải. Mặc định đóng; mở ra hiển thị body text bên dưới bằng Slate nhạt hơn. Không nhấn mạnh animation — toggle tức thì và yên lặng."

    navigation_bar:
      role: "Global navigation đầu trang"

      info: "Nền trắng, full-width, chiều cao 64–80px. Trái: logo mark (chữ 'S' hình học Signal Violet + wordmark). Giữa: nav links (Aeonik 500 16px Inkstone, với dropdown chevrons). Phải: Ghost hoặc Primary pill CTA. Viền dưới hairline bằng Ash (#b0b0b0) hoặc không — nav nổi trên nền trắng không shadow."

    layered_product_mockup_cluster:
      role: "Bố cục hero visual gồm phone, dashboard và code panels"

      info: "Ba ảnh chụp màn hình sản phẩm xếp lớp với layering có chủ đích: phone mockup front-left, dashboard panel center-right, code/JSON panel back-right. Mỗi panel có border-radius 10–16px và một pattern shadow duy nhất (rgba(0,0,0,0.12) 0 0 60px -13px) để tạo chiều sâu mềm. Biểu đồ đường xanh lá điểm nhấn bên trong dashboard là màu phụ duy nhất (từ nội dung sản phẩm, không phải design tokens)."

    stats_display_block:
      role: "Pattern số lớn + nhãn"

      info: "Số lớn bằng Aeonik 700 ở 26–36px Inkstone, với delta phần trăm nhỏ màu xanh lá muted bên dưới (product data). Nhãn bằng Aeonik 500 ở 14–16px Smoke (#888888) phía trên. Bố cục hàng ngang với khoảng cách 24–32px giữa các nhóm stat."

    section_eyebrow_label:
      role: "Heading uppercase nhỏ phía trên section titles"

      info: "Aeonik 500 ở 14–16px, letter-spacing 0.075em, uppercase, căn giữa hoặc căn trái. Màu: Inkstone hoặc Smoke. Kết hợp với heading lớn bên dưới. Nhịp eyebrow-to-headline này là signature của section."

    dark_footer:
      role: "Dải tối full-bleed ở cuối trang"

      info: "Nền Obsidian (#000000) hoặc Inkstone (#1f1f1f), chữ trắng và Slate. Links bằng Aeonik 500 ở 16px. Padding rộng rãi (48–64px dọc). Logo, nav columns và legal text trong lưới nhiều cột. Bề mặt tối duy nhất trong một trang sáng — đọc như một kết thúc dứt khoát."

    stat_badge___tag:
      role: "Nhãn hình pill nhỏ với nền violet hoặc trung tính"

      info: "Border-radius 99px, padding 4px 12px, Aeonik 500 ở 14px. Hai biến thể: nền Signal Violet với chữ trắng (active/selected), hoặc nền Cloud (#f6f6f6) với chữ Inkstone (neutral tag)."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng #594ff4 Signal Violet cho primary actions, active states và brand iconography — không bao giờ dùng cho mục đích trang trí hoặc nền"
      - "Đặt tất cả interactive buttons ở border-radius 99px để có hình học pill signature"
      - "Đặt tất cả content cards ở border-radius 36px với padding trong 32px để có cảm giác mềm mại, rộng rãi"
      - "Dùng Aeonik 500 cho body và UI, Aeonik 700 cho headings — không bao giờ trộn weight hoặc font family khác"
      - "Áp dụng letter-spacing 0.075em cho tất cả uppercase eyebrows và display headlines để có nhịp điệu cao cấp, dãn cách"
      - "Dùng #f6f6f6 Cloud làm bề mặt card để tạo elevation thông qua tint, không phải shadow"
      - "Chỉ dùng một pattern shadow mềm duy nhất cho floating product mockups — không bao giờ dùng cho buttons, cards hoặc inputs"
      - "Giữ section gaps ở 64px và element gaps ở 24px để duy trì nhịp điệu kiến trúc thoải mái"

    don_t:
      - "Không thêm màu sắc khác — hệ thống là 98% đơn sắc và bất kỳ màu mới nào cũng phá vỡ kỷ luật"
      - "Không dùng góc nhọn (0–4px) trên cards hoặc images — tất cả container phải có radius 16px+"
      - "Không áp dụng drop shadow nặng cho UI elements — chiều sâu đến từ surface tint, không phải blur"
      - "Không dùng gradient fill ở bất kỳ đâu — hệ thống phẳng theo thiết kế"
      - "Không dùng serif, slab hoặc display fonts — Aeonik (hoặc Inter/DM Sans substitute) là typeface duy nhất"
      - "Không đặt body text trên 16px hoặc headings dưới 26px — type scale jumps có chủ đích"
      - "Không dùng emoji hoặc icon set nhiều màu — icons là monoline, monocolor, stroke 1.5–2px"
      - "Không thêm animation, parallax hoặc scroll-triggered effects — hệ thống tĩnh và lâm sàng"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Porcelain | `#ffffff` | Page canvas — bề mặt nền chủ đạo |"
    info: "| 1 | Cloud | `#f6f6f6` | Bề mặt card và FAQ panel — elevation tinh tế thông qua tint, không phải shadow |"
    info: "| 2 | Signal Violet | `#594ff4` | Action surface — filled buttons và active states |"
    info: "| 3 | Inkstone | `#1f1f1f` | Dark surface — footer và inverted panels |"

  elevation:

    - "**Layered Product Mockup:** `rgba(0, 0, 0, 0.12) 0px 0px 60px -13px`"

  imagery:

    info: "Không photography, không illustration, không decorative graphics. Ngôn ngữ thị giác hoàn toàn dựa trên product mockup: màn hình phone nổi, dashboard panels và code editor windows được sắp xếp trong bố cục xếp lớp, hơi chồng lên nhau. Mockups có border-radius 10–16px và một pattern shadow mềm duy nhất. Bên trong sản phẩm, biểu đồ đường xanh lá rực rỡ (#1AAB8B approximate) cung cấp điểm nhấn màu phụ duy nhất. Sản phẩm CHÍNH LÀ hero — không có lifestyle images, không team photos, không abstract backgrounds. Icons là line-art tối giản, stroke 1.5–2px, monocolor (Signal Violet hoặc Inkstone)."

  layout:

    info: "Container centered max-width 1200px, full-bleed sections trong giới hạn đó. Hero: headline căn giữa (72px) + subtext (17–18px) xếp dọc, sau đó layered product mockup cluster bên dưới. Feature highlights: lưới 3 cột bằng nhau với icon + heading + body, căn giữa trong container. Product detail sections: 2 cột text-left / visual-right, đổi hướng xen kẽ xuống trang. FAQ: single-column căn giữa với max-width ~720px. Footer: dải tối full-bleed kéo dài edge-to-edge. Navigation: sticky top bar, trắng, chiều cao 64–80px, logo-left / nav-center / CTA-right. Section rhythm: khoảng thở dọc rộng rãi (64–96px giữa các section) với luồng liền mạch, không có dải tối xen kẽ."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #1f1f1f Inkstone"
    - "text (secondary): #5d5d5d Slate"
    - "text (muted): #888888 Smoke"
    - "background (page): #ffffff Porcelain"
    - "background (card): #f6f6f6 Cloud"
    - "border (hairline): #b0b0b0 Ash"
    - "accent / primary action: #594ff4 (filled action)"

    3_5_example_component_prompts:

    - "**Hero Section**: Nền trang trắng (#ffffff). Headline căn giữa: Aeonik 700, 72px, #1f1f1f, line-height 1.05, letter-spacing 0.075em. Subtext bên dưới: Aeonik 500, 17px, #5d5d5d, line-height 1.50. Bên dưới text, một layered product mockup cluster: phone screen (10px radius) chồng lên dashboard panel (16px radius) chồng lên code editor panel (16px radius), tất cả có shadow rgba(0,0,0,0.12) 0 0 60px -13px."

    - "**Pill Primary Button**: Nền #594ff4 Signal Violet, chữ trắng, Aeonik 500 ở 16px, border-radius 99px, padding 12px 28px, không shadow. Text: 'Get started'."

    - "**Feature Highlight Card**: Nền trong suốt (nằm trên trang trắng). Icon Signal Violet ở trên cùng (monoline, 2px stroke, kích thước 32px). Heading: Aeonik 700, 20px, #1f1f1f. Body: Aeonik 500, 16px, #5d5d5d, line-height 1.50. Khoảng cách dọc 16px giữa icon, heading và body."

    - "**FAQ Accordion Item**: Nền #f6f6f6 Cloud, border-radius 16px, padding 20px 24px. Chữ câu hỏi: Aeonik 500, 16px, #1f1f1f. Icon chevron bên phải (#1f1f1f). Không viền, không shadow."

    - "**Dark Footer**: Nền full-bleed #000000 hoặc #1f1f1f, padding dọc 64px. Lưới ba cột links bằng Aeonik 500, 16px, chữ trắng hoặc #b0b0b0. Logo mark (hình học Signal Violet + wordmark trắng) ở góc trên cùng bên trái."

  similar_brands:

    - "**Mercury** — Cùng thẩm mỹ fintech đơn sắc trên nền trắng với một màu nhấn duy nhất, pill-shaped CTAs và khoảng trắng rộng rãi — cả hai đều xem product mockup là hero visual"
    - "**Stripe** — Cam kết chung về một điểm nhấn màu sắc duy nhất trên nền trắng sạch, kỷ luật typography chặt chẽ và pill-shaped primary actions"
    - "**Linear** — Cùng radius pill-button 99px, giao diện đơn sắc với một điểm nhấn rực rỡ, và cùng triết lý elevation flat-surface-over-shadow"
    - "**Ramp** — Cùng ngôn ngữ fintech sparse white-canvas, typography than đen đậm, và điểm nhấn gần violet chỉ dùng cho actions — product UI làm phần việc thị giác nặng nhọc"
    - "**Wealthfront** — Nền tảng đầu tư đồng nghiệp với cách tiếp cận giao diện trắng lâm sàng, product cards bo góc lớn, và sử dụng màu sắc hạn chế chỉ để nhấn mạnh chức năng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-violet: #594ff4;
          --color-inkstone: #1f1f1f;
          --color-graphite: #333333;
          --color-slate: #5d5d5d;
          --color-smoke: #888888;
          --color-ash: #b0b0b0;
          --color-mist: #e7e7e7;
          --color-cloud: #f6f6f6;
          --color-porcelain: #ffffff;
          --color-obsidian: #000000;
        
          /* Typography — Font Families */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rubik: 'Rubik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: 1.05px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 1.5px;
          --text-heading: 26px;
          --leading-heading: 1.2;
          --tracking-heading: 1.95px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: 2.7px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: 4.2px;
          --text-display-lg: 72px;
          --leading-display-lg: 1.05;
          --tracking-display-lg: 5.4px;
        
          /* Typography — Weights */
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 36px;
          --radius-full: 50px;
          --radius-full-2: 60px;
          --radius-full-3: 99px;
        
          /* Named Radii */
          --radius-tags: 99px;
          --radius-cards: 36px;
          --radius-images: 10px;
          --radius-inputs: 16px;
          --radius-buttons: 99px;
          --radius-accordion: 16px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.12) 0px 0px 60px -13px;
        
          /* Surfaces */
          --surface-porcelain: #ffffff;
          --surface-cloud: #f6f6f6;
          --surface-signal-violet: #594ff4;
          --surface-inkstone: #1f1f1f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-violet: #594ff4;
          --color-inkstone: #1f1f1f;
          --color-graphite: #333333;
          --color-slate: #5d5d5d;
          --color-smoke: #888888;
          --color-ash: #b0b0b0;
          --color-mist: #e7e7e7;
          --color-cloud: #f6f6f6;
          --color-porcelain: #ffffff;
          --color-obsidian: #000000;
        
          /* Typography */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rubik: 'Rubik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: 1.05px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 1.5px;
          --text-heading: 26px;
          --leading-heading: 1.2;
          --tracking-heading: 1.95px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: 2.7px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: 4.2px;
          --text-display-lg: 72px;
          --leading-display-lg: 1.05;
          --tracking-display-lg: 5.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 36px;
          --radius-full: 50px;
          --radius-full-2: 60px;
          --radius-full-3: 99px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.12) 0px 0px 60px -13px;
        }