axiom___style_reference:
  info: "> Cửa sổ terminal lúc nửa đêm — nền đen phẳng, text monospaced, và một con trỏ màu cam nhấp nháy"

  theme: "dark"

  info: "Axiom là giao diện tối mang phong cách terminal, nơi mọi ký tự đều monospaced, mọi bề mặt đều gần như đen tuyền, và một gam cam ấm duy nhất đảm nhận toàn bộ công việc tạo điểm nhấn màu sắc. Ngôn ngữ thiết kế vay mượn từ code editor và CLI tools — không gradient, gần như không đổ bóng, không bo tròn mềm mại — thay vào đó, thông tin được phân tầng qua những chuyển dịch tinh tế giữa các gam tối trung tính (từ nền #000000 đến card #191919, rồi border #202020) để UI trông giống như một file log được định dạng gọn gàng. BerkeleyMono đảm nhận toàn bộ giọng điệu, từ hero headline đến nav label, mang đến cho sản phẩm một cảm giác engineering-native, báo hiệu đối tượng người dùng trước khi báo hiệu thương hiệu. Màu cam xuất hiện như một công cụ chính xác: phần nền của primary CTA, log-bar visualization, và border trái 2px đánh dấu các editorial case-study card — không bao giờ mang tính trang trí, luôn luôn có chức năng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Void | `#000000` | `--color-void` | Nền trang, nav fill, bề mặt terminal |"
    info: "| Carbon | `#111111` | `--color-carbon` | Bề mặt chính, nền card, hero canvas |"
    info: "| Graphite | `#191919` | `--color-graphite` | Nền card nâng cao, fill case-study card |"
    info: "| Iron | `#202020` | `--color-iron` | Hairline border, divider, phân cách tinh tế |"
    info: "| Slate | `#3a3a3a` | `--color-slate` | Border mờ, icon stroke, đường kẻ phụ |"
    info: "| Pewter | `#505050` | `--color-pewter` | Divider nhẹ, decorative rule |"
    info: "| Steel | `#606060` | `--color-steel` | Text cấp ba, chi tiết icon, label không hoạt động |"
    info: "| Ash | `#7e7e7e` | `--color-ash` | Muted helper text, chú thích nhỏ |"
    info: "| Fog | `#b4b4b4` | `--color-fog` | Text phụ, label text, body mờ |"
    info: "| Chalk | `#d9d9d9` | `--color-chalk` | Border sáng, stroke chi tiết trên icon |"
    info: "| Paper | `#eeeeee` | `--color-paper` | Text chính, nav link, heading fill, button text |"
    info: "| Ember | `#da5c2c` | `--color-ember` | Điểm nhấn cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp lên màu primary CTA |"

  tokens___typography:

    berkeleymono___typeface_đa_năng___headline__body__nav__button__code__table_cell__logo__weight_400_dùng_cho_văn_xuôi_và_ui_label__weight_700_dành_riêng_cho_nhấn_mạnh_và_primary_cta__cấu_trúc_hình_học_monospaced_thống_nhất_thương_hiệu_và_báo_hiệu_đối_tượng_kỹ_sư__mọi_dòng_text__bao_gồm_navigation_và_button_label__đều_nằm_trong_lưới_monospaced_này___không_có_proportional_fallback_cho_nội_dung_____font_berkeleymono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Fira Code"
      - "**Weights:** 400, 700"
      - "**Cỡ chữ:** 12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px"
      - "**Line height:** 1.0–1.71"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Typeface đa năng — headline, body, nav, button, code, table cell, logo. Weight 400 dùng cho văn xuôi và UI label; weight 700 dành riêng cho nhấn mạnh và primary CTA. Cấu trúc hình học monospaced thống nhất thương hiệu và báo hiệu đối tượng kỹ sư. Mọi dòng text, bao gồm navigation và button label, đều nằm trong lưới monospaced này — không có proportional fallback cho nội dung."

    inter___lớp_text_phụ___icon_label_nhỏ__chữ_nhỏ__chú_thích_cấp_ba_nơi_proportional_letterform_giảm_mật_độ_thị_giác_xuống_dưới_baseline_mono____font_inter:
      - "**Thay thế:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 12px, 14px, 16px"
      - "**Line height:** 1.33–1.50"
      - "**Vai trò:** Lớp text phụ — icon label nhỏ, chữ nhỏ, chú thích cấp ba nơi proportional letterform giảm mật độ thị giác xuống dưới baseline mono"

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 14px | 1.71 | — | `--text-body` |"
      info: "| heading-sm | 18px | 1.56 | — | `--text-heading-sm` |"
      info: "| heading | 20px | 1.4 | — | `--text-heading` |"
      info: "| heading-lg | 24px | 1.33 | — | `--text-heading-lg` |"
      info: "| display | 32px | 1.25 | — | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 9999px |"
      info: "| cards | 2px |"
      info: "| icons | 9999px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40px"
      - "**Card padding:** 32px"
      - "**Element gap:** 16px"

  components:

    primary_cta_button:
      vai_trò: "Hero call-to-action, neo chuyển đổi"

      info: "Filled button với nền #da5c2c, text #eeeeee, BerkeleyMono 16px weight 700, border-radius 2px, padding 10px 16px. Ký tự mũi tên (→) theo sau label. Không đổ bóng, không hover lift — chỉ thay đổi màu sắc."

    ghost_button:
      vai_trò: "Hành động phụ bên cạnh primary CTA"

      info: "Nền trong suốt, border 1px #3a3a3a, text #eeeeee, BerkeleyMono 16px weight 400, radius 2px, padding 10px 16px. Ký tự mũi tên theo sau label. Nằm trong nav dưới dạng \"Sign up\" và inline dưới dạng \"Sign up for free\"."

    top_navigation_bar:
      vai_trò: "Navigation chính của trang, sticky khi cuộn"

      info: "Nền #000000, full-width, padding ngang 16px. Logo (triangle mark + wordmark) bên trái, nav link ở giữa bằng BerkeleyMono 14px weight 400 #eeeeee kèm dropdown chevron, cụm login/signup/demo bên phải. Chiều cao ~56px. Hairline border dưới #202020 tùy chọn."

    announcement_banner:
      vai_trò: "Dải cập nhật sản phẩm ở đầu trang"

      info: "Dải full-width #111111, text BerkeleyMono 12px weight 400 #eeeeee, căn giữa hoặc căn trái. Icon đóng × bên phải. Tinh tế, không sặc sỡ — thông điệp là điểm nhấn."

    case_study_card:
      vai_trò: "Đơn vị testimonial khách hàng trong horizontal scroller"

      info: "Nền #191919, radius 2px, padding 32px. Border trái 2px solid #da5c2c chạy suốt chiều cao — màu sắc duy nhất trong card, hoạt động như một tag phân loại. Logo khách hàng ở trên, headline BerkeleyMono 18px weight 400 #eeeeee, body text 14px, quote 14px italic-weight trong sub-card #111111 lồng nhau, footer avatar + tên + vai trò, link \"case study →\" có gạch chân ở dưới."

    logo_grid_cell:
      vai_trò: "Hiển thị logo khách hàng trong social-proof band"

      info: "Nền #111111, radius 2px, logo grayscale căn giữa, chiều cao ~80px, padding 24px. Hai hàng, mỗi hàng sáu cell. Logo hiển thị dưới dạng đơn sắc #eeeeee hoặc #b4b4b4."

    product_screenshot_panel:
      vai_trò: "Hình ảnh hero — UI sản phẩm observability"

      info: "Mock sản phẩm full-width với chrome #111111, radius 2px, divider trong #202020. Tab bar (Datasets, Stream, Query, Dashboards, Monitor, Flows) bằng BerkeleyMono 12px với active tab có gạch chân. Hàng histogram log-bar màu xanh (#2a7fff range) là màu nội thất duy nhất; bảng kết quả bên dưới trong #111111 với cột monospaced BerkeleyMono 12px và row divider #3a3a3a."

    arrow_decoration_field:
      vai_trò: "Kết cấu nền ở phía bên phải hero"

      info: "Các ký tự `>` lặp lại bằng BerkeleyMono 12px weight 400 #3a3a3a, sắp xếp theo mô hình chéo hướng về bên phải. Lấp đầy khoảng trống phía sau hero copy mà không thêm trọng lượng thị giác — một terminal-style marquee báo hiệu \"dữ liệu đang truyền\"."

    tag___pill:
      vai_trò: "Label phân loại phía trên nội dung card (ví dụ: SAVINGS, SIMPLICITY)"

      info: "Nền trong suốt, BerkeleyMono 12px weight 400 #606060 viết hoa, padding 0px. Label thuần typography, không border, không fill — thuật ngữ nằm phía trên card headline dưới dạng editorial metadata."

    pill_icon_badge:
      vai_trò: "Badge hình tròn nhỏ hoặc wrapper icon"

      info: "Radius 9999px, đường kính ~24px, fill #111111 hoặc #202020, glyph icon trắng căn giữa. Dùng cho utility icon và feature marker."

    chevron_arrow_link:
      vai_trò: "Link inline với chỉ báo hướng"

      info: "Text có gạch chân BerkeleyMono 14px weight 400 #eeeeee, theo sau bởi glyph `→` cùng màu. Xuất hiện ở footer card (\"Hapn case study →\") và gợi ý kề CTA (\"Book a demo →\")."

    log_bar_histogram:
      vai_trò: "Trực quan hóa dữ liệu trong UI sản phẩm và marketing"

      info: "Các hàng thanh hình chữ nhật chặt chẽ bằng #2a7fff hoặc #da5c2c (điểm nhấn Ember), cao 4-8px, khoảng cách 2-4px. Đại diện cho khối lượng sự kiện theo thời gian. Không có label trục trong ngữ cảnh marketing — bản thân mô hình thanh là hình ảnh trực quan."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng BerkeleyMono cho tất cả UI text bao gồm nav, button và label — trộn proportional font sẽ phá vỡ thẩm mỹ terminal"
      - "Phân tầng bề mặt theo các bước #000000 → #111111 → #191919 → #202020; không bao giờ dùng box-shadow để tạo độ nổi"
      - "Sử dụng #da5c2c (Ember) riêng cho primary action fill, log-bar visualization và border trái 2px trên case-study card"
      - "Đặt tất cả border-radius là 2px cho container, card và button; dành 9999px cho icon badge nhỏ và tag pill dưới 32px"
      - "Đặt border trái màu cam 2px trên editorial/customer card như một dấu hiệu phân loại — đó là dấu câu màu sắc duy nhất trong các khối nội dung"
      - "Sử dụng arrow glyph (→) inline sau action label trong BerkeleyMono để báo hiệu chuyển động về phía trước và củng cố nhịp điệu CLI"
      - "Neo nền trang ở #000000 thuần và để text trắng giấy (#eeeeee) đảm nhận toàn bộ hệ thống phân cấp thông qua weight (400 vs 700) và kích thước"

    không_nên_làm:
      - "Không đưa vào gradient, drop shadow ngoài hairline 1px/2px duy nhất, hoặc nền màu — hệ thống cố tình phẳng"
      - "Không sử dụng proportional sans-serif font (Inter, system-ui) cho headline, nav hoặc button label — BerkeleyMono là bất khả nhượng cho nhận diện thương hiệu"
      - "Không áp dụng #da5c2c cho text, icon hoặc border ngoài CTA fill, log bar và case-study left border — nó mất ý nghĩa khi bị rải rác"
      - "Không bo tròn góc trên 2px cho card, panel hoặc button — hình học sắc cạnh phân biệt điều này với các quy ước soft-corner SaaS điển hình"
      - "Không thêm section light-theme hoặc màu bề mặt thay thế — toàn bộ sản phẩm chỉ có dark-mode và bất kỳ bề mặt sáng nào cũng phá vỡ hệ thống"
      - "Không sử dụng nền badge màu cho trạng thái (success/error/warning) — chỉ truyền đạt trạng thái thông qua ký hiệu BerkeleyMono và xử lý border"
      - "Không đặt hình ảnh hoặc nhiếp ảnh không phải là UI sản phẩm hoặc logo grayscale — ngôn ngữ hình ảnh là screenshot, log pattern và arrow texture, không phải lifestyle photography"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Void | `#000000` | Nền trang, nav, terminal canvas |"
    info: "| 1 | Carbon | `#111111` | Bề mặt nội dung chính, hero background, announcement strip, logo cell |"
    info: "| 2 | Graphite | `#191919` | Card nâng cao, case-study panel, khối lồng nhau |"
    info: "| 3 | Iron | `#202020` | Border, divider, phân cách bên trong tinh tế |"

  elevation:

    - "**Button, bề mặt tương tác nhỏ:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`"

  imagery:

    info: "Hình ảnh chủ yếu là product UI screenshot — dashboard observability thực tế với histogram log-bar màu xanh và bảng kết quả monospaced. Hình ảnh trang trí được giới hạn ở các ký tự mũi tên `>` lặp lại với độ tương phản thấp #3a3a3a tạo thành mô hình dữ liệu đang truyền phía sau hero. Logo khách hàng được hiển thị dưới dạng grayscale (#eeeeee hoặc #b4b4b4) trên cell #111111 phẳng — không nhiếp ảnh, không lifestyle imagery, không 3D render trừu tượng. Product screenshot CHÍNH LÀ hero."

  layout:

    info: "Full-bleed dark canvas với nội dung được giới hạn trong cột căn giữa max-width ~1200px. Hero là một khối text căn trái (terminal prompt `~/` phía trên headline monospaced hai dòng) kết hợp với arrow texture bên phải và product screenshot full-width bên dưới. Nhịp điệu section ổn định: hero → product screenshot → social proof logo grid (2×6) → case-study card cuộn ngang (3–4 card hiển thị, tràn với chevron ←→) → footer. Khoảng cách giữa các section là 40–64px. Case-study scroller phá vỡ lưới tĩnh bằng chuyển động ngang, gợi ý tương tác driven-by-scroll. Navigation là top bar đơn giản không có sticky mega-menu — mọi nav link là một dòng BerkeleyMono duy nhất với chevron dropdown tùy chọn."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #eeeeee"
    - "background: #000000"
    - "surface (card): #111111"
    - "elevated surface: #191919"
    - "border / divider: #202020"
    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA fill."
    - "primary action: không có màu CTA riêng biệt"

    3_ví_dụ_component_prompt:
    - "Xây dựng một customer case-study card: nền #191919, radius 2px, padding 32px, border trái 2px solid #da5c2c chạy suốt chiều cao. Logo khách hàng ở trên bằng #eeeeee. Headline BerkeleyMono 18px weight 400 #eeeeee. Khối quote lồng trong #111111 với padding 16px, BerkeleyMono 14px weight 400 #b4b4b4. Hàng footer: avatar hình tròn 24px + tên BerkeleyMono 14px weight 700 #eeeeee + vai trò 14px weight 400 #606060. Link dưới cùng BerkeleyMono 14px gạch chân #eeeeee với mũi tên →."
    - "Xây dựng một product screenshot panel: khung ngoài #111111, radius 2px. Tab bar bằng BerkeleyMono 12px weight 400 #b4b4b4 với tab đang hoạt động được gạch chân #eeeeee. Hàng histogram gồm các thanh cao 4px bằng #2a7fff với khoảng cách 2px trên toàn bộ chiều rộng. Bảng kết quả bằng BerkeleyMono 12px weight 400 #eeeeee với row divider #3a3a3a và cột timestamp #606060. Không đổ bóng, không phần tử trong bo tròn."

  similar_brands:

    - "**Vercel** — Cùng thẩm mỹ developer dark-mode với monospaced accent typography và canvas gần như đen, mặc dù Vercel dùng Geist Mono thay vì BerkeleyMono"
    - "**Linear** — Giao diện dark-first với góc 2px sắc cạnh, bề mặt phẳng và một màu nhấn ấm duy nhất cho primary action trên nền đen thuần"
    - "**Fly.io** — UI sản phẩm engineering-native sử dụng monospaced type xuyên suốt, bề mặt gần như đen được phân tầng với hairline border và một điểm nhấn màu sắc duy nhất cho CTA"
    - "**PlanetScale** — Trang sản phẩm database dark-mode với typography monospaced code-style, bề mặt card phẳng và một điểm nhấn cam ấm duy nhất trên primary CTA"
    - "**Railway** — Dark UI nền tảng developer với bố cục lấy cảm hứng từ terminal, body text monospaced và phân tầng bề mặt gần như đen thay vì đổ bóng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #000000;
          --color-carbon: #111111;
          --color-graphite: #191919;
          --color-iron: #202020;
          --color-slate: #3a3a3a;
          --color-pewter: #505050;
          --color-steel: #606060;
          --color-ash: #7e7e7e;
          --color-fog: #b4b4b4;
          --color-chalk: #d9d9d9;
          --color-paper: #eeeeee;
          --color-ember: #da5c2c;
        
          /* Typography — Font Families */
          --font-berkeleymono: 'BerkeleyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.71;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.56;
          --text-heading: 20px;
          --leading-heading: 1.4;
          --text-heading-lg: 24px;
          --leading-heading-lg: 1.33;
          --text-display: 32px;
          --leading-display: 1.25;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 2px;
          --radius-icons: 9999px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-carbon: #111111;
          --surface-graphite: #191919;
          --surface-iron: #202020;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #000000;
          --color-carbon: #111111;
          --color-graphite: #191919;
          --color-iron: #202020;
          --color-slate: #3a3a3a;
          --color-pewter: #505050;
          --color-steel: #606060;
          --color-ash: #7e7e7e;
          --color-fog: #b4b4b4;
          --color-chalk: #d9d9d9;
          --color-paper: #eeeeee;
          --color-ember: #da5c2c;
        
          /* Typography */
          --font-berkeleymono: 'BerkeleyMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.71;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.56;
          --text-heading: 20px;
          --leading-heading: 1.4;
          --text-heading-lg: 24px;
          --leading-heading-lg: 1.33;
          --text-display: 32px;
          --leading-display: 1.25;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }