lightdash___style_reference:
  info: "> pixel-grid tím trên giấy vẽ kỹ thuật"

  theme: "light"

  info: "Lightdash hoạt động như một command center dành cho developer, mang phong cách điềm tĩnh: nền gần trắng với typography slate-gray, đường viền hairline tinh tế, và một màu tím bão hòa (#5e4cff) làm điểm nhấn cho mọi tương tác. Brand voice tự tin và nhẹ nhàng — headline được đặt bằng custom geometric sans (Britti Sans) ở kích thước 48–76px với tracking cực kỳ chặt (-0.025em), tạo cảm giác kiến trúc hơn là trang trí. Body copy dùng Inter ở 14–18px với letter-spacing hơi âm, giữ cho thông tin dày đặc vẫn dễ đọc mà không nặng nề. Các surface phân lớp nhẹ nhàng từ canvas #ffffff đến section #f6f8fa và card bo tròn 12px. Một mosaic pixel-art tím trong hero là điểm trang trí duy nhất — một cái gật đầu có chủ đích cho bản sắc 'code-native'. Các component phẳng và không viền theo mặc định; độ cao được tạo từ rgba shadow nhiều lớp pha màu slate (#272835) thay vì xám trung tính, giúp mọi card luôn đúng thương hiệu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang chính, bề mặt card, input fills |"
    info: "| Cloud Mist | `#f6f8fa` | `--color-cloud-mist` | Nền section thay thế, lớp surface phụ bên dưới trắng |"
    info: "| Frost Tint | `#eceff3` | `--color-frost-tint` | Surface cấp ba, khối nền mờ |"
    info: "| Ash Border | `#cdd2d9` | `--color-ash-border` | Đường phân cách hairline, viền card, đường kẻ bảng |"
    info: "| Mist Border | `#c1c7d0` | `--color-mist-border` | Viền phụ, outline trạng thái disabled |"
    info: "| Fog Text | `#a4abb8` | `--color-fog-text` | Text hướng dẫn, gạch chân link trong body copy, placeholder text |"
    info: "| Steel Text | `#818898` | `--color-steel-text` | Metadata mờ, timestamp, caption text |"
    info: "| Slate Body | `#666d80` | `--color-slate-body` | Body text phụ, mô tả, đoạn văn hỗ trợ |"
    info: "| Graphite Heading | `#36394a` | `--color-graphite-heading` | Heading chính, body text đậm, nội dung có độ nhấn cao |"
    info: "| Midnight Ink | `#272835` | `--color-midnight-ink` | Surface tối, announcement bar, nền code terminal, nền primary button |"
    info: "| Onyx | `#1a1b25` | `--color-onyx` | Text đậm nhất, surface tối có độ tương phản cao |"
    info: "| Volt Violet | `#5e4cff` | `--color-volt-violet` | Primary CTA fill, active link, brand accent — tím rực rỡ trên nền slate trung tính là điểm nhấn màu sắc duy nhất của toàn bộ hệ thống |"
    info: "| Lavender Wash | `#c8ccf3` | `--color-lavender-wash` | Nền accent mờ, mid-tone pixel-art hero, tag chips |"
    info: "| Lilac Whisper | `#dfdbff` | `--color-lilac-whisper` | Surface accent cấp ba, tô màu hàng được chọn, callout nhẹ |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    britti_sans_trial_semibold___display_headlines_và_hero_copy__tracking__0_025em_ở_76px_và_line_height_0_95_nén_chặt_khiến_text_mang_cảm_giác_kiến_trúc_và_giống_code__font_thay_thế__space_grotesk_bold_hoặc_general_sans_semibold_____font_britti_sans_trial_semibold:
      - "**Font thay thế:** Space Grotesk Bold"
      - "**Weights:** 600"
      - "**Sizes:** 18px, 48px, 56px, 57px, 76px"
      - "**Line height:** 0.95-1.00"
      - "**Letter spacing:** -0.025em ở 56-76px, -0.02em ở 48px"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Vai trò:** Display headlines và hero copy. Tracking -0.025em ở 76px và line-height 0.95 nén chặt khiến text mang cảm giác kiến trúc và giống code. Font thay thế: Space Grotesk Bold hoặc General Sans Semibold."

    britti_sans_medium___section_headings_h2_h3__nav_items__ui_labels_được_nhấn_mạnh__mang_cá_tính_thương_hiệu_xuống_cấp_subhead__font_thay_thế__space_grotesk_medium_____font_britti_sans_medium:
      - "**Font thay thế:** Space Grotesk Medium"
      - "**Weights:** 500"
      - "**Sizes:** 14px, 16px, 18px, 20px, 24px, 32px"
      - "**Line height:** 1.20-1.30"
      - "**Letter spacing:** -0.02em ở 24-32px, -0.01em ở 18-20px, +0.01em ở 14-16px"
      - "**Vai trò:** Section headings (H2/H3), nav items, UI labels được nhấn mạnh. Mang cá tính thương hiệu xuống cấp subhead. Font thay thế: Space Grotesk Medium."

    inter___body_copy__đoạn_văn__mô_tả__tracking_âm_nhẹ__0_01_đến__0_02em_giữ_cho_văn_bản_dài_vẫn_dày_đặc_nhưng_dễ_đọc__font_thay_thế__inter_đã_có_sẵn_trên_google_____font_inter:
      - "**Font thay thế:** Inter (Google)"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 9px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 24px"
      - "**Line height:** 1.33-1.63"
      - "**Letter spacing:** -0.0200em, -0.0150em, -0.0100em"
      - "**Vai trò:** Body copy, đoạn văn, mô tả. Tracking âm nhẹ (-0.01 đến -0.02em) giữ cho văn bản dài vẫn dày đặc nhưng dễ đọc. Font thay thế: Inter đã có sẵn trên Google."

    inter_variable___ui_controls__button__badge__form_labels__nav_links___workhorse_cho_các_phần_tử_tương_tác_____font_inter_variable:
      - "**Font thay thế:** Inter (Google)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px"
      - "**Line height:** 1.43-1.70"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** UI controls, button, badge, form labels, nav links — workhorse cho các phần tử tương tác."

    ibm_plex_mono___code_snippets__terminal_output__inline__code__elements__báo_hiệu_đối_tượng_developer_first_____font_ibm_plex_mono:
      - "**Font thay thế:** IBM Plex Mono (Google)"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** -0.0200em"
      - "**Vai trò:** Code snippets, terminal output, inline `<code>` elements. Báo hiệu đối tượng developer-first."

    britti_sans_trial_regular___britti_sans_trial_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_britti_sans_trial_regular:
      - "**Weights:** 400"
      - "**Sizes:** 48px"
      - "**Line height:** 1, 1.2"
      - "**Letter spacing:** -0.02"
      - "**Vai trò:** Britti Sans Trial Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    micro_5___micro_5___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_micro_5:
      - "**Weights:** 400"
      - "**Sizes:** 31px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Micro 5 — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.14px | `--text-caption` |"
      info: "| body-sm | 14px | 1.63 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.05 | -1px | `--text-heading-lg` |"
      info: "| display | 76px | 0.95 | -1.9px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "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: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 8px |"
      info: "| cards | 12px |"
      info: "| badges | 999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| special | 80px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-sm` |"
      info: "| subtle | `rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(39, 40, 53, 0.1) 0px 0px 0px 1px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(39, 40, 53, 0.1) 0px 0px 0px 1px, rgba(39, 40, 53, 0...` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(39, 40, 53, 0.05) 0px 0px 0px 1px, rgba(39, 40, 53, ...` | `--shadow-subtle-4` |"
      info: "| lg | `rgba(0, 0, 0, 0.01) 0px 54px 21px 0px, rgba(0, 0, 0, 0.05...` | `--shadow-lg` |"

    layout:

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

  components:

    announcement_bar:
      vai_trò: "Thanh quảng cáo đầu trang"

      info: "Thanh tối #1a1b25 full-width. Text 12px Inter Variable màu trắng, căn giữa, kèm inline link màu #c8ccf3. Padding 8px dọc. Không bo góc."

    primary_navigation:
      vai_trò: "Nav sticky đầu trang với brand và auth"

      info: "Nền trắng, chiều cao 64px, dropdown bo góc 8px. Logo (glyph tia sét) màu #5e4cff bên trái, nav links màu #36394a ở 14px Inter Medium, Login là text link, 'Book a demo' là ghost button (viền 1px #cdd2d9, radius 8px), 'Start for free' là filled button #272835 với text trắng và radius 8px."

    ghost_button:
      vai_trò: "Secondary CTA (Book a demo, Try live demo)"

      info: "Nền trắng, viền 1px #cdd2d9, radius 8px, padding 10px 16px, text 14px Inter Medium #36394a. Hover làm đậm viền thành #818898."

    primary_filled_button:
      vai_trò: "Hành động chính (Start for free, Sign up)"

      info: "Nền filled #272835, text trắng, radius 8px, padding 10px 20px, 14px Inter Medium. Hoặc biến thể brand-violet: fill #5e4cff, text trắng, radius 8px, dùng cho một hero CTA mỗi trang."

    violet_accent_button:
      vai_trò: "Hành động chính trong hero"

      info: "Fill #5e4cff, text trắng, radius 8px, padding 12px 24px, 14-16px Inter Medium. Là điểm bão hòa duy nhất trên một trang vốn đơn sắc — dùng tiết kiệm, tối đa một cái mỗi viewport."

    tab_toggle:
      vai_trò: "Công tắc đối tượng (For developers / For business users)"

      info: "Container dạng pill, radius 999px, nền inactive #f6f8fa, nền active trắng với shadow nhẹ trên tab đang active. Text 14px Inter Medium, inactive #666d80, active #36394a."

    hero_section:
      vai_trò: "Headline và hình ảnh phía trên fold"

      info: "Canvas trắng #ffffff. Headline 56-76px Britti Sans Semibold #36394a với tracking -0.025em. Body 16-18px Inter Regular #666d80. Trang trí mosaic pixel-art tím neo ở cạnh phải. CTA xếp ngang với khoảng cách 8-12px."

    pixel_art_hero_decoration:
      vai_trò: "Yếu tố trang trí thương hiệu"

      info: "Các ô vuông tím rải rác kích thước 4px-12px trong một lưới lỏng, neo ở góc trên bên phải của hero. Màu sắc: #5e4cff (bão hòa), #c8ccf3 (mờ), #dfdbff (nhạt), #ffffff (khoảng trắng). Là điểm trang trí duy nhất trong hệ thống."

    product_preview_card:
      vai_trò: "Ảnh chụp màn hình sản phẩm trong khung trình duyệt"

      info: "Bề mặt trắng với radius 12px và shadow nhiều lớp (xem elevation). Chứa window chrome kiểu macOS ở trên, sau đó là UI sản phẩm bên trong. Nằm trên nền section #f6f8fa."

    code_terminal_card:
      vai_trò: "Khối code/terminal tối nhúng"

      info: "Nền #1a1b25, radius 12px, padding 16px, text IBM Plex Mono 12px màu #a4abb8 với syntax tokens màu #5e4cff và #c8ccf3. Tạo độ tương phản thị giác với trang trắng."

    logo_grid_section:
      vai_trò: "Bằng chứng xã hội từ khách hàng/đối tác"

      info: "Nền trắng, lưới 2 hàng x 6 cột logo khách hàng, cách đều với khoảng cách hàng 40px. Logo hiển thị đơn sắc #36394a hoặc màu brand gốc ở tỷ lệ 60%."

    testimonial_block:
      vai_trò: "Bằng chứng xã hội dạng trích dẫn"

      info: "Quote 18-20px Inter Regular #36394a căn giữa, max-width 600px, có icon pixel-art tím nhỏ (#5e4cff) phía trước. Hàng avatar 5 ảnh chân dung bên dưới trong vòng tròn 80px."

    feature_card:
      vai_trò: "Điểm nổi bật của tính năng trong lưới 2 hoặc 3 cột"

      info: "Bề mặt trắng, radius 12px, padding 16px, viền 1px #cdd2d9, không shadow theo mặc định. Heading 24px Britti Medium #36394a, body 14-16px Inter #666d80. Có thể có icon tím ở trên cùng màu #5e4cff."

    input_field:
      vai_trò: "Text input / form control"

      info: "Nền trắng, viền 1px #cdd2d9, radius 8px, padding 10px 12px, text 14px Inter Regular #36394a. Placeholder #a4abb8. Focus ring: 2px #5e4cff ở độ mờ 20%."

    badge___tag:
      vai_trò: "Nhãn trạng thái hoặc danh mục"

      info: "Hình pill (radius 999px), nền #f6f8fa hoặc #dfdbff, text 12px Inter Medium, padding 4px 10px, text #36394a hoặc #5e4cff."

  do_s_and_don_ts:

    do:
      - "Dùng #5e4cff (Volt Violet) cho chính xác một primary CTA mỗi viewport — không bao giờ ghép với màu accent khác trên cùng một màn hình."
      - "Đặt display headlines bằng Britti Sans Semibold ở 48-76px với letter-spacing -0.025em; tracking chặt này là chữ ký của brand voice."
      - "Đặt body copy bằng Inter ở 14-18px với tracking -0.01 đến -0.02em, không bao giờ dùng màu #000000 thuần — dùng #36394a (Graphite Heading) cho text đậm và #666d80 (Slate Body) cho mô tả."
      - "Dùng radius 12px cho tất cả card và radius 8px cho tất cả button, input, và nav elements — hai giá trị này là hằng số cấu trúc của hệ thống."
      - "Card mặc định có viền 1px #cdd2d9 và không shadow; chỉ dùng shadow nhiều lớp cho hero product previews và feature cards được nâng lên."
      - "Dùng mosaic pixel-art tím (ô #5e4cff, #c8ccf3, #dfdbff, #ffffff) làm điểm trang trí duy nhất — nó là ornament duy nhất của thương hiệu."
      - "Pha màu tất cả shadow với giá trị rgba của #272835, không bao giờ dùng xám trung tính — điều này giữ cho elevation luôn đúng thương hiệu."

    don_t:
      - "Đừng thêm màu accent chromatic khác — hệ thống chạy trên slate neutrals cộng với một màu tím."
      - "Đừng dùng #000000 cho body text; thương hiệu đọc là #36394a (Graphite) mềm hơn và khác biệt hơn."
      - "Đừng căn giữa body copy trong feature sections — chỉ hero headlines và testimonials mới căn giữa; mọi thứ khác căn trái."
      - "Đừng áp drop shadow nặng cho standard cards; viền 1px là mặc định, shadow chỉ dùng khi cần elevation."
      - "Đừng đặt headlines với line-height > 1.10; line-height 0.95 ở 76px là sự nén có chủ đích."
      - "Đừng dùng font Inter cho display sizes trên 32px — Britti Sans sở hữu display tier, Inter sở hữu body và UI."
      - "Đừng dùng hình tròn với radius trên 16px cho UI tiêu chuẩn; 80px và 999px dành riêng cho các phần tử đặc biệt (tab toggles, full-width brand blocks)."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang mặc định |"
    info: "| 1 | Cloud Section | `#f6f8fa` | Dải section xen kẽ, feature blocks |"
    info: "| 2 | Frost Block | `#eceff3` | Khối nội dung lõm, callout nhẹ |"
    info: "| 3 | Card Surface | `#ffffff` | Card nâng lên trên section pha màu, radius 12px, viền hairline |"
    info: "| 4 | Terminal | `#1a1b25` | Bề mặt code/terminal tối nhúng trong trang sáng |"

  elevation:

    - "**Hero product preview:** `rgba(0,0,0,0.05) 0px 2px 5px 0px, rgba(0,0,0,0.04) 0px 9px 9px 0px, rgba(0,0,0,0.02) 0px 20px 12px 0px, rgba(0,0,0,0.01) 0px 35px 14px 0px, rgba(0,0,0,0.01) 0px 0px 0px 1px`"
    - "**Branded card:** `rgba(39,40,53,0.1) 0px 0px 0px 1px`"
    - "**Feature card (elevated):** `rgba(39,40,53,0.1) 0px 0px 0px 1px, rgba(39,40,53,0.08) 0px 24px 24px -12px, rgba(39,40,53,0.08) 0px 12px 12px -6px, rgba(39,40,53,0.08) 0px 6px 6px -3px, rgba(39,40,53,0.08) 0px 2px 2px -1px`"
    - "**Soft card (no elevation):** `rgba(39,40,53,0.05) 0px 0px 0px 1px, rgba(39,40,53,0.01) 0px 50px 20px 0px, rgba(39,40,53,0.02) 0px 30px 18px 0px, rgba(39,40,53,0.04) 0px 13px 13px 0px, rgba(39,40,53,0.05) 0px 3px 7px 0px`"

  imagery:

    info: "Imagery tối giản và chức năng. Hero dùng mosaic pixel-art tùy chỉnh gồm các ô vuông tím (#5e4cff, #c8ccf3, #dfdbff) làm yếu tố trang trí duy nhất. Ảnh chụp màn hình sản phẩm xuất hiện bên trong card khung trình duyệt với macOS chrome, luôn đặt trên nền trắng. Ảnh chụp màn hình code/terminal dùng bề mặt tối #1a1b25 với IBM Plex Mono và syntax tokens tím. Logo khách hàng đơn sắc #36394a trong lưới 2x6 gọn gàng. Avatar trong testimonials hiển thị dưới dạng crop tròn 80px. Không có lifestyle photography, không có ảnh full-bleed, không có gradient trừu tượng — hình ảnh chỉ là sản phẩm, code, logo, hoặc họa tiết pixel tím."

  layout:

    info: "Layout căn giữa, max-width 1200px với padding trái/phải rộng rãi. Hero chia bất đối xứng: hai phần ba bên trái là headline + sub + CTA, một phần ba bên phải là mosaic pixel-art. Bên dưới hero, nội dung xen kẽ giữa các dải trắng #ffffff và #f6f8fa với khoảng cách section 40px. Feature sections dùng lưới card 2 hoặc 3 cột với radius 12px. Product preview là một card full-width duy nhất với khung browser-chrome. Logo khách hàng nằm trong lưới 2x6 căn giữa. Testimonials căn giữa với max-width 600px. Navigation là một thanh trắng sticky 64px với logo trái, links giữa, auth phải. Density comfortable — các trang thở với khoảng trắng thay vì nhồi nhét thông tin."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #36394a (Graphite Heading)"
    - "background: #ffffff (Canvas White)"
    - "border: #cdd2d9 (Ash Border)"
    - "accent: #5e4cff (Volt Violet)"
    - "secondary surface: #f6f8fa (Cloud Mist)"
    - "primary action: #5e4cff (filled action)"

    3_5_prompt_component_mẫu:
    - "Tạo Primary Action Button: nền #5e4cff, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho main CTA."

    - "*Feature card*: Bề mặt trắng, radius 12px, padding 16px, viền 1px #cdd2d9, không shadow. Icon tím #5e4cff ở trên cùng (24px). Heading 24px Britti Sans Medium #36394a, letter-spacing -0.48px. Body 16px Inter Regular #666d80, line-height 1.50."

    - "*Product preview card*: Bề mặt trắng với thanh browser-chrome phía trên (3 chấm đèn giao thông, #f6f8fa). Radius 12px, shadow nhiều lớp pha màu #272835. Chứa ảnh chụp màn hình sản phẩm bên trong full-width với padding trong 8px."

    - "*Code terminal card*: Nền #1a1b25, radius 12px, padding 16px. Text IBM Plex Mono 12px — comments màu #818898, keywords màu #5e4cff, strings màu #c8ccf3, plain text màu #a4abb8."

    - "*Tab toggle*: Pill ngoài radius 999px, nền #f6f8fa. Hai label 14px Inter Medium, inactive #666d80, active #36394a trên fill trắng với viền 1px #cdd2d9 nhẹ và shadow 2px. Padding 8px 20px trên mỗi tab."

  signature_moves:

    info: "Ba lựa chọn định hình nhận diện thị giác của Lightdash và cần được giữ nguyên trên mọi màn hình mới:"

    - "**Một màu tím mỗi viewport.** Hệ thống chạy trên slate. Một CTA #5e4cff duy nhất mỗi màn hình là tải màu tối đa. Sự kiềm chế này khiến màu tím có cảm giác được bật lên thay vì chỉ trang trí."

    - "**Britti Sans chỉ ở display tier.** Font tùy chỉnh xuất hiện ở 48px trở lên. Inter xử lý mọi thứ dưới 32px. Trộn các tier tạo ra hệ thống phân cấp rõ ràng: brand voice ở trên cùng, functional clarity ở dưới."

    - "**Slate-tinted shadows.** Mọi shadow trong hệ thống dùng phiên bản rgba của #272835, không phải xám trung tính. Lựa chọn tinh tế này có nghĩa là ngay cả các surface được nâng lên cũng có cảm giác được cắt từ cùng một chất liệu thương hiệu thay vì trôi nổi trong không gian chung."

  similar_brands:

    - "**Linear** — Cùng sự kiềm chế một accent (màu tím của Linear so với violet của Lightdash) và cùng sự kết hợp display-headline + tight-tracking trên nền gần trắng."
    - "**Vercel** — Hệ thống monochrome-first với một accent bão hòa duy nhất, card viền hairline, và khối code/terminal hướng đến developer nhúng trong trang sáng."
    - "**Cal.com** — Công cụ dev mã nguồn mở với canvas trắng, typography slate-gray, và accent tím dùng tiết kiệm chỉ cho primary actions."
    - "**Cursor** — Landing page sản phẩm code-first pha trộn bề mặt UI trắng sạch với terminal preview tối, đặt trong custom geometric sans ở kích thước display lớn."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-cloud-mist: #f6f8fa;
          --color-frost-tint: #eceff3;
          --color-ash-border: #cdd2d9;
          --color-mist-border: #c1c7d0;
          --color-fog-text: #a4abb8;
          --color-steel-text: #818898;
          --color-slate-body: #666d80;
          --color-graphite-heading: #36394a;
          --color-midnight-ink: #272835;
          --color-onyx: #1a1b25;
          --color-volt-violet: #5e4cff;
          --color-lavender-wash: #c8ccf3;
          --color-lilac-whisper: #dfdbff;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-trial-semibold: 'Britti Sans Trial Semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-medium: 'Britti Sans Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-britti-sans-trial-regular: 'Britti Sans Trial Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-micro-5: 'Micro 5', 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.14px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.63;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1px;
          --text-display: 76px;
          --leading-display: 0.95;
          --tracking-display: -1.9px;
        
          /* 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-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 26px;
          --radius-full: 80px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 12px;
          --radius-badges: 999px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-special: 80px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 9px 9px 0px, rgba(0, 0, 0, 0.02) 0px 20px 12px 0px, rgba(0, 0, 0, 0.01) 0px 35px 14px 0px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px;
          --shadow-subtle: rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px, rgba(39, 40, 53, 0.08) 0px 24px 24px -12px, rgba(39, 40, 53, 0.08) 0px 12px 12px -6px, rgba(39, 40, 53, 0.08) 0px 6px 6px -3px, rgba(39, 40, 53, 0.08) 0px 2px 2px -1px;
          --shadow-subtle-4: rgba(39, 40, 53, 0.05) 0px 0px 0px 1px, rgba(39, 40, 53, 0.01) 0px 50px 20px 0px, rgba(39, 40, 53, 0.02) 0px 30px 18px 0px, rgba(39, 40, 53, 0.04) 0px 13px 13px 0px, rgba(39, 40, 53, 0.05) 0px 3px 7px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.01) 0px 54px 21px 0px, rgba(0, 0, 0, 0.05) 0px 30px 18px 0px, rgba(0, 0, 0, 0.09) 0px 13px 13px 0px, rgba(0, 0, 0, 0.1) 0px 3px 7px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-cloud-section: #f6f8fa;
          --surface-frost-block: #eceff3;
          --surface-card-surface: #ffffff;
          --surface-terminal: #1a1b25;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-cloud-mist: #f6f8fa;
          --color-frost-tint: #eceff3;
          --color-ash-border: #cdd2d9;
          --color-mist-border: #c1c7d0;
          --color-fog-text: #a4abb8;
          --color-steel-text: #818898;
          --color-slate-body: #666d80;
          --color-graphite-heading: #36394a;
          --color-midnight-ink: #272835;
          --color-onyx: #1a1b25;
          --color-volt-violet: #5e4cff;
          --color-lavender-wash: #c8ccf3;
          --color-lilac-whisper: #dfdbff;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-trial-semibold: 'Britti Sans Trial Semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-britti-sans-medium: 'Britti Sans Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-britti-sans-trial-regular: 'Britti Sans Trial Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-micro-5: 'Micro 5', 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.14px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.63;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1px;
          --text-display: 76px;
          --leading-display: 0.95;
          --tracking-display: -1.9px;
        
          /* 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-44: 44px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 26px;
          --radius-full: 80px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 9px 9px 0px, rgba(0, 0, 0, 0.02) 0px 20px 12px 0px, rgba(0, 0, 0, 0.01) 0px 35px 14px 0px, rgba(0, 0, 0, 0.01) 0px 0px 0px 1px;
          --shadow-subtle: rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-2: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px;
          --shadow-subtle-3: rgba(39, 40, 53, 0.1) 0px 0px 0px 1px, rgba(39, 40, 53, 0.08) 0px 24px 24px -12px, rgba(39, 40, 53, 0.08) 0px 12px 12px -6px, rgba(39, 40, 53, 0.08) 0px 6px 6px -3px, rgba(39, 40, 53, 0.08) 0px 2px 2px -1px;
          --shadow-subtle-4: rgba(39, 40, 53, 0.05) 0px 0px 0px 1px, rgba(39, 40, 53, 0.01) 0px 50px 20px 0px, rgba(39, 40, 53, 0.02) 0px 30px 18px 0px, rgba(39, 40, 53, 0.04) 0px 13px 13px 0px, rgba(39, 40, 53, 0.05) 0px 3px 7px 0px;
          --shadow-lg: rgba(0, 0, 0, 0.01) 0px 54px 21px 0px, rgba(0, 0, 0, 0.05) 0px 30px 18px 0px, rgba(0, 0, 0, 0.09) 0px 13px 13px 0px, rgba(0, 0, 0, 0.1) 0px 3px 7px 0px;
        }