handhold___style_reference:
  info: "> giấy da ấm áp dưới những serif thì thầm — một editorial spread được sắp chữ thủ công, không một chút nhiễu màu, nơi một hairline serif weight 200 mang toàn bộ giọng điệu."

  theme: "light"

  info: "Handhold vận hành ở một register gần như thuần editorial: một canvas kem ấm (#f2f1ed) thay thế màu trắng tinh SaaS tiêu chuẩn, và một custom serif weight 200 đảm nhận toàn bộ headline, trong khi Inter ở một weight duy nhất (400) xử lý mọi thứ còn lại. Bảng màu hoàn toàn đơn sắc — 0% màu sắc — nên hệ thống phân cấp được xây dựng hoàn toàn qua scale, tracking, và độ tương phản serif/sans thay vì màu sắc. Các surface phẳng, không có shadow; cấu trúc đến từ border-radius rộng (24-32px trên card, button hình pill hoàn toàn) và tracking chặt trên serif. Kết quả mang phong cách monograph của studio thiết kế hoặc catalog in ấn hạng sang, không phải landing page B2B SaaS điển hình. Mật độ thoải mái — base 4px, section gap 48px, card padding 28-32px — với hero một cột căn giữa, thoáng đãng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, nền CTA filled — là vật mang trọng lượng thị giác duy nhất trong một bảng màu vốn trống rỗng |"
    info: "| Paper Cream | `#f2f1ed` | `--color-paper-cream` | Canvas trang, surface card, và nền mặc định — màu trắng ngà ấm áp giúp thương hiệu khác biệt với màu trắng SaaS lâm sàng |"
    info: "| Warm Border | `#dbd7cd` | `--color-warm-border` | Surface nâng cao, đường kẻ mảnh, và sự phân cách card trên card — đậm hơn canvas một tông để tạo cấu trúc mà không cần độ tương phản cao |"
    info: "| Stone Gray | `#737373` | `--color-stone-gray` | Body text phụ, label mờ, border nhẹ — không bao giờ dùng cho primary copy |"
    info: "| Ash Gray | `#999999` | `--color-ash-gray` | Tertiary text, helper copy, trạng thái disabled — giọng nói nhỏ nhất trong hệ thống chữ |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Chữ trên nền CTA tối filled, thỉnh thoảng dùng làm surface card khi cần độ tương phản cao hơn với canvas kem |"

  tokens___typography:

    bureauserif___toàn_bộ_headline_và_display_text__weight_200_là_phản_quy_tắc___hầu_hết_editorial_site_dùng_weight_300_400_cho_serif_headlines__sự_thì_thầm_siêu_nhẹ_buộc_serif_mang_cảm_giác_uy_quyền_lặng_lẽ_thay_vì_tuyên_bố__line_height_cố_định_ở_1_0_tạo_ra_baseline_chồng_lên_nhau_chặt_chẽ__trông_như_được_đặt_có_chủ_đích_thay_vì_mặc_định_trình_duyệt__tracking_khóa_ở__0_03em_trên_mọi_kích_thước__thắt_chặt_các_chữ_cái_thành_một_giọng_display_gắn_kết_____font_bureauserif:
      - "**Thay thế:** Cormorant Garamond (weight 300) hoặc EB Garamond (weight 400) — không có Google Font nào khớp chính xác weight 200; Cormorant ở weight 300 là serif gần nhất với trọng lượng thì thầm"
      - "**Weights:** 200"
      - "**Kích thước:** 20px, 28px, 40px, 72px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.03em đồng nhất trên mọi kích thước"
      - "**OpenType features:** `\"liga\" on, \"kern\" on`"
      - "**Vai trò:** Toàn bộ headline và display text. Weight 200 là phản quy tắc — hầu hết editorial site dùng weight 300-400 cho serif headlines; sự thì thầm siêu nhẹ buộc serif mang cảm giác uy quyền lặng lẽ thay vì tuyên bố. Line-height cố định ở 1.0 tạo ra baseline chồng lên nhau chặt chẽ, trông như được đặt có chủ đích thay vì mặc định trình duyệt. Tracking khóa ở -0.03em trên mọi kích thước, thắt chặt các chữ cái thành một giọng display gắn kết."

    inter___body_text__nav_items__buttons__labels__metadata___toàn_bộ_ui_không_phải_display__một_weight_duy_nhất_400_không_có_biến_thể_bold_giúp_phía_sans_trung_tính_để_serif_chiếm_ưu_thế__tracking_hơi_âm_trên_body__0_011em_ở_16px_và_gần_như_bằng_0_trên_text_nhỏ__mang_lại_cho_inter_cảm_giác_set__editorial_thay_vì_cảm_giác_web_mặc_định_____font_inter:
      - "**Thay thế:** Inter (Google Font khớp chính xác)"
      - "**Weights:** 400"
      - "**Kích thước:** 12px, 14px, 16px"
      - "**Line height:** 1.33, 1.43, 1.50"
      - "**Letter spacing:** -0.013em ở 12px, -0.011em ở 14px, -0.009em ở 16px, 0em ở 16px+"
      - "**Vai trò:** Body text, nav items, buttons, labels, metadata — toàn bộ UI không phải display. Một weight duy nhất (400) không có biến thể bold giúp phía sans trung tính để serif chiếm ưu thế. Tracking hơi âm trên body (-0.011em ở 16px) và gần như bằng 0 trên text nhỏ, mang lại cho Inter cảm giác set, editorial thay vì cảm giác web mặc định."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 16 | -0.01px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | -0.11px | `--text-body-sm` |"
      info: "| body | 16px | 24 | -0.18px | `--text-body` |"
      info: "| subheading | 20px | 20 | -0.6px | `--text-subheading` |"
      info: "| heading-sm | 28px | 28 | -0.84px | `--text-heading-sm` |"
      info: "| heading | 40px | 40 | -1.2px | `--text-heading` |"
      info: "| display | 72px | 72 | -2.16px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 24-32px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"

    layout:

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

  components:

    primary_filled_cta_button:
      vai_trò: "Element hành động có độ tương phản cao duy nhất trong hệ thống"

      info: "Nền đen (#000000), chữ trắng (#ffffff) ở Inter 14px weight 400, radius hình pill hoàn toàn (9999px), padding 10px 18px. Không border, không shadow. Hình học pill tròn trên button đơn sắc là phong cách hành động đặc trưng — nó giống như một con dấu vật lý đóng lên trang kem."

    ghost_navigation_link:
      vai_trò: "Nav items cấp cao nhất và inline links"

      info: "Inter 14px weight 400, màu chữ #000000, không gạch chân mặc định. Radius 8px từ dữ liệu border-radius áp dụng cho bất kỳ underline hoặc indicator nào. Nằm trực tiếp trên canvas kem, không có nền."

    top_announcement_bar:
      vai_trò: "Thanh thông báo mỏng trên cùng trang"

      info: "Strip full-width, Inter 12-14px weight 400, chữ #000000, không fill nền (trong suốt trên canvas). Padding dọc chặt (~8px). Thanh này sát mép trang — không inset, không tách biệt khỏi canvas kem."

    editorial_display_headline:
      vai_trò: "Hero và section titles"

      info: "bureauSerif weight 200, kích thước 40-72px, line-height 1.0, letter-spacing -0.03em. Căn giữa. Trọng lượng siêu nhẹ ở kích thước lớn với tracking chặt tạo ra cảm giác thì thầm lặng lẽ, được sắp chữ thủ công — đây là lựa chọn thị giác định hình toàn bộ hệ thống."

    body_subtitle:
      vai_trò: "Copy hỗ trợ dưới headlines"

      info: "Inter 16px weight 400, màu #000000, line-height 1.5, letter-spacing -0.009em. Căn giữa bên dưới display headlines. Không có màu mờ — ngay cả subtitle copy cũng giữ màu đen hoàn toàn, để độ tương phản serif/sans và kích thước làm công việc phân cấp."

    partner_logo_strip:
      vai_trò: "Hàng bằng chứng xã hội bên dưới hero"

      info: "Hàng ngang các logo thương hiệu đơn sắc (aikido, Parim, LIVEFORCE, finbite, ParcelTracker), wordmarks Inter 16px hoặc SVG marks thang độ xám. Khoảng cách đều nhau (~32-40px column gap), căn giữa trên canvas kem. Logo được render ở #000000 — không xử lý màu."

    card_surface:
      vai_trò: "Content cards và feature blocks"

      info: "Nền #ffffff (cao hơn canvas kem một bậc), border-radius 24-32px, padding 28-32px. Không shadow, không border. Radius lớn là lựa chọn đặc trưng — cards trông như những tấm slab mềm, bo tròn thay vì panel sắc cạnh."

    navigation_bar:
      vai_trò: "Navigation cố định phía trên"

      info: "Nền trong suốt trên canvas kem. Logo trái, nav links và sign-in phải. Inter 14px weight 400, #000000. Chiều cao tối thiểu (~56-64px), không border dưới, không fill nền — nó nổi trên canvas."

    sign_in_link:
      vai_trò: "Hành động nav phụ"

      info: "Inter 14px weight 400, chữ #000000, không nền, không border. Đặt căn phải trong nav bar. Trọng lượng thị giác ngang bằng nav link — không có xử lý 'button' riêng cho sign-in."

  do_s_and_don_ts:

    do:
      - "Dùng bureauSerif weight 200 cho mọi headlines — không bao giờ thay thế bằng weight serif nặng hơn; sự thì thầm chính là bản sắc"
      - "Chỉ dùng Inter weight 400 cho mọi text không phải display — không đưa vào biến thể bold, medium, hoặc semibold"
      - "Đặt line-height của serif headline chính xác là 1.0 — điều này tạo ra baseline editorial chặt chẽ, chồng lên nhau, định nghĩa giọng display"
      - "Áp dụng -0.03em letter-spacing cho mọi text serif bất kể kích thước — tracking đồng nhất là thứ làm serif cảm thấy gắn kết trên toàn bộ scale"
      - "Dùng #f2f1ed làm canvas trang — không bao giờ dùng pure white #ffffff cho nền trang; kem ấm là nền tảng của thương hiệu"
      - "Xây dựng sự phân cách component qua radius (24-32px) và whitespace, không phải shadow hay border — hệ thống cố tình không có shadow"
      - "Dùng button hình pill (9999px radius) cho mọi hành động — không có button góc sắc hoặc bo nhẹ trong hệ thống này"

    don_t:
      - "Không đưa vào bất kỳ màu sắc nào — bảng màu 0% colorful theo thiết kế; thêm xanh, đỏ, hoặc xanh lá phá vỡ register editorial"
      - "Không dùng weight bold hoặc semibold trong bất kỳ font family nào — hệ thống nói ở đúng một weight mỗi family"
      - "Không đặt serif line-height trên 1.0 — leading thoải mái phá hủy cảm giác editorial chặt chẽ"
      - "Không dùng #ffffff làm nền trang hoặc section — kem ấm là bất khả thương lượng; trắng chỉ dành cho surface card và chữ trên button"
      - "Không thêm drop shadows, glows, hoặc bất kỳ hiệu ứng nâng cao nào — xử lý surface phẳng là nguyên tắc cốt lõi"
      - "Không dùng border mỏng hơn 1px hoặc sáng hơn #dbd7cd để phân cách cấu trúc — dựa vào radius và whitespace thay vào đó"
      - "Không trộn serif và sans trong một khối text — headings là serif, body là sans, ranh giới giữa chúng phải tuyệt đối"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f2f1ed` | Nền toàn trang — base kem ấm |"
    info: "| 1 | Card | `#ffffff` | Cards và panel nâng cao cần màu trắng sạch trên nền kem |"
    info: "| 2 | Ink Surface | `#000000` | CTA buttons filled và khối UI tối |"

  elevation:

    info: "Không có shadow ở bất kỳ đâu. Cấu trúc được xây dựng hoàn toàn qua độ tương phản màu giữa canvas kem, surface card trắng, và mực đen. Border được dùng một cách tiết kiệm — thiết kế dựa vào radius rộng (24-32px) và whitespace để xác định ranh giới component thay vì elevation hay drop shadows."

  imagery:

    info: "Hình ảnh tối giản và mang tính trang trí hơn là thông tin. Hero được neo bởi một illustration ribbon/wave xanh-vàng uốn lượn tràn full-width — đây là element có màu sắc duy nhất trên trang và mang phong cách chữ ký thương hiệu hơn là ảnh chụp màn hình sản phẩm. Bên dưới hero, một hàng logo đối tác đơn sắc cung cấp bằng chứng xã hội. Không có product photography, không có UI screenshots, và không có lifestyle imagery trên trang hiển thị. Hệ thống mặc định là pure typography trên canvas kem, với wave illustration là điểm nhấn biểu cảm duy nhất."

  layout:

    info: "Hero một cột căn giữa với serif display headline, Inter subtitle, và một CTA button filled duy nhất — tất cả xếp chồng và căn giữa với khoảng không dọc thoáng đãng. Hero nằm trên canvas kem full-width không có khung hình. Bên dưới, một wave illustration xanh/vàng trang trí trải dài edge-to-edge như một section divider. Nội dung sau đó chảy theo các band căn giữa xen kẽ: partner logo strip, tiếp theo có thể là feature sections ở dạng xếp chồng hoặc hai cột. Nhịp điệu tổng thể rộng rãi và editorial — section gap rộng (48px+), không sidebar, không multi-column grids trong vùng hiển thị. Navigation là top bar tối giản với logo trái, links phải, trong suốt trên canvas kem."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #000000"
    - "Background: #f2f1ed"
    - "Card surface: #ffffff"
    - "Border: #dbd7cd"
    - "Muted text: #737373"
    - "primary action: #000000 (filled action)"

    3_example_component_prompts:

    - "Tạo một hero section: canvas #f2f1ed, layout căn giữa. Display headline ở 72px bureauSerif weight 200, #000000, line-height 1.0, letter-spacing -2.16px. Subtitle ở 16px Inter weight 400, #000000, căn giữa. Primary CTA button: nền #000000, chữ #ffffff ở 14px Inter weight 400, radius 9999px, padding 10px 18px, không shadow."

    - "Tạo một feature card: nền #ffffff, border-radius 32px, padding 32px. Không shadow, không border. Headline ở 28px bureauSerif weight 200, #000000, line-height 1.0, letter-spacing -0.84px. Body text ở 16px Inter weight 400, #000000, line-height 1.5. Khoảng cách 24px giữa headline và body."

    - "Tạo một partner logo strip: hàng full-width trên canvas #f2f1ed, 5 logo đơn sắc #000000, căn giữa với khoảng cách 40px giữa mỗi logo, không label, padding dọc 48px phía trên và dưới."

  typographic_philosophy:

    info: "Hệ thống thực thi một hợp đồng hai font, hai weight nghiêm ngặt: bureauSerif ở 200 cho display, Inter ở 400 cho mọi thứ khác. Đây không phải giới hạn — đây là một tuyên bố thiết kế. Bằng cách từ chối thêm biến thể weight, whisper-weight của serif trở thành thứ ồn ào nhất trên trang, và sự trung tính của sans trở nên vô hình. Một AI agent xây dựng trang mới không được đưa vào weight 500/600/700 để tạo điểm nhấn — điểm nhấn đến từ việc chuyển đổi font family, tăng kích thước, và điều chỉnh tracking mà thôi."

  similar_brands:

    - "**Linear** — Cùng sự kiềm chế đơn sắc với một surface pha tông ấm duy nhất và độ tương phản typographic serif/sans — dù Linear nghiêng về tối hơn"
    - "**Pitch** — Typography editorial với custom serif headlines trên nền neutral canvas, mật độ thoải mái, và hình học card bo tròn"
    - "**Vercel** — Chủ nghĩa tối giản cực đoan với bảng màu gần như bằng không, whitespace rộng rãi, và display typography cỡ lớn làm element thị giác chính"
    - "**Stripe** — Nhịp điệu spacing thoải mái, pattern hero căn giữa, và việc sử dụng tông trung tính ấm thay vì đen/trắng thuần"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-cream: #f2f1ed;
          --color-warm-border: #dbd7cd;
          --color-stone-gray: #737373;
          --color-ash-gray: #999999;
          --color-pure-white: #ffffff;
        
          /* Typography — Font Families */
          --font-bureauserif: 'bureauSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.11px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: -0.18px;
          --text-subheading: 20px;
          --leading-subheading: 20;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 28;
          --tracking-heading-sm: -0.84px;
          --text-heading: 40px;
          --leading-heading: 40;
          --tracking-heading: -1.2px;
          --text-display: 72px;
          --leading-display: 72;
          --tracking-display: -2.16px;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-regular: 400;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 28-32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 24-32px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-canvas: #f2f1ed;
          --surface-card: #ffffff;
          --surface-ink-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-cream: #f2f1ed;
          --color-warm-border: #dbd7cd;
          --color-stone-gray: #737373;
          --color-ash-gray: #999999;
          --color-pure-white: #ffffff;
        
          /* Typography */
          --font-bureauserif: 'bureauSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.11px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: -0.18px;
          --text-subheading: 20px;
          --leading-subheading: 20;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 28;
          --tracking-heading-sm: -0.84px;
          --text-heading: 40px;
          --leading-heading: 40;
          --tracking-heading: -1.2px;
          --text-display: 72px;
          --leading-display: 72;
          --tracking-display: -2.16px;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        }