monologue___style_reference:
  info: "> Một thư viện nhung với một tia xanh lam duy nhất. Một căn phòng tối rộng lớn nơi một headline serif in nghiêng duy nhất thu hút sự chú ý và một tia sáng cyan báo hiệu hành động."

  theme: "dark"

  info: "Monologue hoạt động như một canvas biên tập tối, phủ trong sắc gần-đen với một xung teal điện duy nhất. Nhận diện thị giác được neo bởi Instrument Serif ở tỷ lệ ấn tượng — headline in nghiêng từ 28px đến 400px tạo ra trọng lượng trang bìa tạp chí, với brand wordmark trải dài toàn bộ viewport như chữ màu xám ma. DM Mono xử lý chrome UI/kỹ thuật: label, tag và chú thích cấu trúc đọc như metadata hệ thống hơn là copy. Bề mặt mờ và mỏng như giấy trên nền tối; một nút download trắng đơn độc và card sản phẩm gradient teal cung cấp các điểm có trọng lượng vật lý duy nhất. Tâm trạng là workstation đêm khuya kết hợp với ấn phẩm xa xỉ — tự tin, yên tĩnh và có quan điểm typography rõ ràng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Electric Cyan | `#19d0e8` | `--color-electric-cyan` | Accent text, accent border, bề mặt video card, điểm nhấn gradient trên màn hình sản phẩm — xung màu duy nhất trong một hệ thống achromatic |"
    info: "| Sky Signal | `#44ccff` | `--color-sky-signal` | Cyan phụ cho gradient stop và chiếu sáng màn hình sản phẩm |"
    info: "| Deep Teal | `#062f34` | `--color-deep-teal` | Nền card surface, gradient shadow stop — neo card sản phẩm teal trong bóng tối |"
    info: "| Void Black | `#000000` | `--color-void-black` | Canvas trang, nền chính — trường tối không bị gián đoạn |"
    info: "| Obsidian | `#010101` | `--color-obsidian` | Bề mặt gần-đen thay thế khi canvas dịch chuyển nhẹ khỏi màu đen thuần |"
    info: "| Midnight Surface | `#191919` | `--color-midnight-surface` | Bề mặt nâng cao — card, panel, overlay container nằm một bước trên void |"
    info: "| Graphite | `#282828` | `--color-graphite` | Bề mặt trung cấp và nền button trung tính — bề mặt điều khiển tương tác |"
    info: "| Charcoal | `#363636` | `--color-charcoal` | Bề mặt card phụ cho container xếp chồng hoặc nhóm |"
    info: "| Slate | `#3f3f3f` | `--color-slate` | Bề mặt shadow sâu và độ cao cấp ba |"
    info: "| Steel Gray | `#7f7f7f` | `--color-steel-gray` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp lên màu CTA chính |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Text chính, nền bề mặt sáng, nút download, phần tử tương phản cao |"
    info: "| Ghost Gray | `#c0c0c0` | `--color-ghost-gray` | Lớp highlight nhẹ và độ sáng bề mặt mờ |"

  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ả"

    instrument_serif___display_và_heading___serif_biên_tập_in_nghiêng_ở_tỷ_lệ_ấn_tượng__brand_wordmark_đạt_400px_lấp_đầy_viewport__section_headline_ở_64_96px__letter_spacing_âm_thắt_chặt_serif_thành_mật_độ_display_tạp_chí_nhỏ_gọn_____font_instrument_serif:
      - "**Thay thế:** Playfair Display, EB Garamond, Cormorant Garamond"
      - "**Weights:** 400"
      - "**Sizes:** 28px, 30px, 32px, 40px, 48px, 64px, 70px, 72px, 96px, 393px, 403px"
      - "**Line height:** 1.0–1.3"
      - "**Letter spacing:** -0.04em ở 64px trở lên; -0.03em ở 48px; 0.008em ở 32px"
      - "**Vai trò:** Display và heading — serif biên tập in nghiêng ở tỷ lệ ấn tượng. Brand wordmark đạt 400px lấp đầy viewport; section headline ở 64–96px. Letter-spacing âm thắt chặt serif thành mật độ display tạp chí nhỏ gọn."

    dm_mono___mono_ui_chrome___label__tag__metadata__button_text__tem__made_by_every__label_nút_download__chú_thích_tính_năng__đọc_như_metadata_hệ_thống__cỡ_32px_xuất_hiện_trong_label_thiết_bị_sản_phẩm_____font_dm_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10px, 12px, 14px, 15px, 16px, 18px, 20px, 32px"
      - "**Line height:** 1.2–1.5"
      - "**Letter spacing:** -0.01em ở 20px; 0.015–0.021em ở 10–14px (tracking dương nhẹ cho tag/caps)"
      - "**Vai trò:** Mono UI chrome — label, tag, metadata, button text, tem 'MADE BY EVERY', label nút download, chú thích tính năng. Đọc như metadata hệ thống. Cỡ 32px xuất hiện trong label thiết bị sản phẩm."

    geist___body_text___17px_một_weight_cho_đoạn_văn_và_mô_tả__cỡ_body_lớn_hơn_mặc_định_17_so_với_16_giúp_copy_có_không_gian_thở_giữa_ui_chrome_dày_đặc_____font_geist:
      - "**Thay thế:** Inter, system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 17px"
      - "**Line height:** 1.4"
      - "**Vai trò:** Body text — 17px một weight cho đoạn văn và mô tả. Cỡ body lớn hơn mặc định (17 so với 16) giúp copy có không gian thở giữa UI chrome dày đặc."

    system_ui___fallback_body_và_link_text___xuất_hiện_trong_ngữ_cảnh_tiện_ích_nơi_system_font_phù_hợp____font_system_ui:
      - "**Thay thế:** Inter, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.5"
      - "**Vai trò:** Fallback body và link text — xuất hiện trong ngữ cảnh tiện ích nơi system font phù hợp"

    sf_pro_display_regular___sf_pro_display_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sf_pro_display_regular:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.4"
      - "**Letter spacing:** -0.006"
      - "**Vai trò:** SF Pro Display Regular — đượ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ò | Cỡ | Line Height | Letter Spacing | Token |"
      info: "|---------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | 0.21px | `--text-caption` |"
      info: "| body | 17px | 1.4 | — | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.1 | 0.26px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.1 | -1.44px | `--text-heading` |"
      info: "| heading-lg | 72px | 1 | -2.16px | `--text-heading-lg` |"
      info: "| display | 96px | 0.9 | -3.84px | `--text-display` |"

  tokens___spacing___shapes:

    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: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 72 | 72px | `--spacing-72` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 100000px |"
      info: "| cards | 18px |"
      info: "| large | 12px |"
      info: "| small | 4px |"
      info: "| medium | 8px |"
      info: "| buttons | 100000px |"
      info: "| productDevice | 40px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.7) 3px 3px 2px 0px inset, rgba(255, 255, ...` | `--shadow-subtle` |"
      info: "| sm | `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, ...` | `--shadow-sm` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.63) 0px 0px 0px 1px` | `--shadow-subtle-2` |"
      info: "| md | `rgb(14, 93, 102) 6px 6px 10px 0px inset, rgba(255, 255, 2...` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 10px"

  components:

    brand_wordmark_background:
      vai_trò: "Type full-viewport mang tính khí quyển"

      info: "Từ 'Monologue' được render bằng Instrument Serif ở ~400px, xám nhạt (#c0c0c0 đến #d1d1d1 gradient nhạt dần thành trắng), được đặt tràn ra ngoài mép viewport. Hoạt động như watermark/ghost text — phần tử nền chính, không phải heading. z-index nằm sau tất cả nội dung."

    product_device_card:
      vai_trò: "Hình ảnh sản phẩm hero"

      info: "Thân tròn màu trắng (#ffffff) với radius 40px, rộng ~360px. Chứa màn hình gradient teal tối (linear-gradient(rgb(32,177,195), rgb(3,67,75))) với kết cấu hiển thị pixel/dot-matrix, và một lưới loa ở bên trái được render dưới dạng lưới chấm đen. Nút 'Download' dạng pill với icon Apple nằm ở cuối màn hình. Nhiều lớp shadow inset và outset tạo ra chất lượng vật lý, hữu hình. Huy hiệu 'MADE BY EVERY' stamp nhô ra từ mép trên."

    every_stamp_badge:
      vai_trò: "Huy hiệu ghi nhận thương hiệu"

      info: "Huy hiệu màu navy (#1a3a4a) có viền lượn sóng/scalloped, rộng ~140px, được đặt chồng lên mép trên của card sản phẩm. 'MADE BY' bằng DM Mono 10px trắng phía trên 'EVERY' bằng DM Mono 18–20px trắng. Shadow inset đậm (rgba(0,0,0,0.7) 3px 3px 2px inset) tạo cảm giác dập nổi như tem thư. Gắn vào thiết bị sản phẩm ở phía trên."

    download_button_light_pill:
      vai_trò: "CTA download chính"

      info: "Nền trắng (#ffffff), text đen và icon Apple, DM Mono 12px. Bo tròn hoàn toàn (radius 100000px). Rộng ~120px × cao 32px. Tối giản — không viền, không shadow. Phần tử sáng duy nhất trên canvas tối, tạo trọng lượng tiêu điểm tương phản cao."

    watch_video_card:
      vai_trò: "CTA phụ / xem trước video"

      info: "Bề mặt tối pha teal ở góc trên bên phải của hero. Chứa một thumbnail video nhỏ (crop ngang, ~80px) với overlay nút phát 'Watch video', cùng label 'Introducing Monologue notes' bằng serif in nghiêng trắng 14–16px. Góc bo tròn 8px. Hoạt động như một hành động phụ nhẹ nhàng."

    section_heading_italic_serif:
      vai_trò: "Tiêu đề section biên tập"

      info: "Instrument Serif 400 italic, 64–72px, trắng (#ffffff). Căn trái. Letter-spacing âm -0.04em thắt chặt serif. Chiều rộng tối đa hai dòng tạo cảm giác cột tạp chí. Đi kèm với subheading bằng Geist 17px #7f7f7f hoặc trắng với độ mờ giảm."

    feature_annotation_row:
      vai_trò: "Chú thích tính năng kèm hình ảnh sản phẩm"

      bố_cục_hai_cột: "bên trái có label DM Mono 12–14px (ví dụ 'Auto formatting') màu trắng với letter-spacing dương, cùng mô tả Geist 17px màu xám mờ (#7f7f7f). Bên phải có card ảnh chụp màn hình sản phẩm với UI soạn email. Khoảng cách hàng 10px giữa label và mô tả."

    email_composition_card:
      vai_trò: "Ảnh chụp màn hình tính năng sản phẩm"

      info: "Bề mặt tối (#191919 hoặc tương tự), bo tròn 8–12px, hiển thị UI soạn email nháp. Chứa các trường 'To:', 'Subject:', 'From:' bằng DM Mono, và body text bằng Geist. Vùng nội dung sử dụng gradient teal-to-dark làm nền. Đây là hình ảnh 'Monologue in action' — minh họa đầu ra giọng nói được định dạng tự động."

    testimonial_block:
      vai_trò: "Trích dẫn bằng chứng xã hội"

      info: "Bố cục căn giữa. Text trích dẫn Instrument Serif italic 24–28px trắng. Bên dưới: placeholder avatar hình tròn nhỏ, tên bằng DM Mono 12px, và chức danh/vai trò bằng DM Mono 10px màu xám mờ. Padding dọc 40–60px. Tối giản — không có nền card, nổi trên void."

    language_pill:
      vai_trò: "Tag tính năng / chỉ báo hỗ trợ ngôn ngữ"

      info: "DM Mono 12px, text trắng hoặc xám mờ, không nền, không viền. Được sắp xếp thành hàng ngang ở cuối section. Mục đầu tiên (tên ngôn ngữ) được style bằng Instrument Serif italic làm sub-label của section. Bố cục bo tròn hoàn toàn với khoảng cách ~20px giữa các pill."

    accent_text_link:
      vai_trò: "Link nhấn mạnh nội tuyến"

      info: "Text Electric Cyan (#19d0e8), Geist hoặc DM Mono, thường in nghiêng. Được dùng cho từ 'Every' trong subtext hero và các điểm nhấn nội tuyến khác. Cyan xuất hiện tối đa 2–3 lần mỗi màn hình — luôn là dấu chấm câu nhỏ, không bao giờ là nền CTA đầy đủ."

    ghost_button:
      vai_trò: "Button text phụ"

      info: "Nền trong suốt, viền 1px trắng hoặc xám, text trắng bằng DM Mono 12px, radius 8px, padding dọc 8–10px, padding ngang 14–16px. Được dùng cho các hành động phụ khi nền sáng primary không phù hợp."

  do_s_and_don_ts:

    do:
      - "Sử dụng Instrument Serif italic ở 64–96px cho section headline — trọng lượng biên tập là chữ ký chính của thương hiệu"
      - "Để brand wordmark tràn ra ngoài mép viewport ở ~400px như một lớp nền ghost"
      - "Sử dụng DM Mono cho tất cả UI chrome, label, button và metadata — không bao giờ dùng proportional font cho chú thích hệ thống"
      - "Áp dụng accent teal (#19d0e8) tối đa 2–3 lần mỗi viewport — nó nên cảm giác như một tia lửa, không phải một lớp phủ"
      - "Sử dụng radius bo tròn hoàn toàn (100000px) cho tất cả pill, tag và nút download"
      - "Sử dụng radius 18–40px cho card và thiết bị sản phẩm — độ bo tròn rộng rãi báo hiệu tính hữu hình vật lý"
      - "Xếp lớp shadow inset + outset phức tạp trên card thiết bị sản phẩm để tạo chất lượng vật thể thực trên canvas void"

    don_t:
      - "Không sử dụng accent màu sáng hoặc ấm — hệ thống tối một cách tu viện với một điểm teal lạnh duy nhất"
      - "Không sử dụng drop shadow nặng trên text hoặc card phẳng — độ cao nên được dành riêng cho thiết bị sản phẩm và tem"
      - "Không sử dụng Inter hoặc geometric sans cho heading — serif in nghiêng là nhận diện thương hiệu bất khả thương lượng"
      - "Không sử dụng cỡ heading nhỏ (dưới 28px) cho Instrument Serif — nó cần tỷ lệ để hoạt động"
      - "Không áp dụng teal làm nền button hoặc bề mặt lớn — nó thuộc về text, viền mỏng và gradient"
      - "Không sử dụng góc nhọn (< 4px radius) trên phần tử tương tác — hệ thống bo cong mọi thứ"
      - "Không căn giữa đoạn văn body — căn trái để có hành vi cột biên tập, chỉ căn giữa cho testimonial và wordmark"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#000000` | Canvas trang, nền không bị gián đoạn |"
    info: "| 1 | Midnight | `#191919` | Card, panel, container nâng cao |"
    info: "| 2 | Graphite | `#282828` | Bề mặt tương tác, nền button, UI nâng cao |"
    info: "| 3 | Charcoal | `#363636` | Nền card lồng nhau, khối nội dung nhóm |"
    info: "| 4 | Paper | `#ffffff` | Bề mặt sáng đảo ngược — nút download, thân thiết bị sản phẩm |"

  elevation:

    - "**Product device card:** `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px, rgba(0, 0, 0, 0.5) 1px 1px 1px 0px inset, rgba(0, 0, 0, 0.7) 2px 2px 12px 0px inset`"
    - "**Stamp/badge:** `rgba(0, 0, 0, 0.7) 3px 3px 2px 0px inset, rgba(255, 255, 255, 0.25) 3px 2px 2px 0px`"
    - "**Raised card:** `rgba(0, 0, 0, 0.63) 0px 0px 0px 1px`"
    - "**Teal gradient card:** `rgb(14, 93, 102) 6px 6px 10px 0px inset, rgba(255, 255, 255, 0.2) 4px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px`"

  imagery:

    info: "Hình ảnh tối giản và tập trung vào sản phẩm. Hình ảnh chủ đạo là card thiết bị sản phẩm — một vật thể vật lý, hữu hình được render với nhiều lớp shadow để cảm giác như một thiết bị thực đặt trên bề mặt tối. Ảnh chụp màn hình soạn email xuất hiện dưới dạng minh họa tính năng bên trong card tối, hiển thị đầu ra của sản phẩm thay vì đồ họa trừu tượng. Nền mang kết cấu vải/gợn sóng nhẹ (gợn sóng nước tối) tạo thêm chiều sâu khí quyển mà không cần hình ảnh cụ thể. Không có nhiếp ảnh, không có ảnh phong cách sống, không có người — sản phẩm LÀ hero, và mọi thứ khác là bầu không khí typography."

  layout:

    info: "Canvas tối full-bleed với nội dung được giới hạn trong max-width ~1200px. Hero là bố cục chia đôi: nửa trái giữ headline và nút download trong khoảng trắng rộng rãi, nửa phải giữ video card teal ở góc trên. Wordmark 'Monologue' khổng lồ trải dài toàn bộ chiều rộng viewport như watermark nền, tràn ra ngoài container nội dung. Bên dưới fold, các section xen kẽ giữa khối text căn giữa và bố cục hai cột (text-trái, ảnh chụp màn hình sản phẩm-phải). Nhịp điệu dọc rộng rãi — khoảng cách section 80px tạo không gian thở giữa các khối thông tin dày đặc. Hàng hỗ trợ ngôn ngữ nằm như một dải ngang gần cuối, một dòng, với label serif in nghiêng 'Supports 100+ languages' neo ở mép trái."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #ffffff"
    - "background: #000000"
    - "card surface: #191919"
    - "border / hairline: #282828"
    - "accent: #19d0e8"
    - "primary action: #282828 (filled action)"

    3_5_prompt_component_mẫu:

    - "**Hero section với ghost brand wordmark**: Nền full-bleed đen (#000000). Instrument Serif italic, 72px, #ffffff, letter-spacing -0.04em cho headline. DM Mono 12px, #7f7f7f cho subtext. Wordmark 'Monologue' ghost bằng Instrument Serif ~400px, #c0c0c0, được đặt làm lớp nền tuyệt đối tràn viewport. Geist 17px, #7f7f7f cho mô tả body."

    - "**Product device card**: Thân tròn trắng (#ffffff) radius 40px, rộng 360px. Chứa màn hình gradient teal tối (linear-gradient(rgb(32,177,195), rgb(3,67,75))) với kết cấu dot-matrix. Nút 'Download' pill trắng (DM Mono 12px, icon Apple, radius 100000px) nằm ở cuối màn hình. Shadow nhiều lớp: rgba(0,0,0,0.25) 0px 4px 4px, rgba(255,255,255,0.25) 1px 1px 2px, rgba(0,0,0,0.5) 1px 1px 1px inset, rgba(0,0,0,0.7) 2px 2px 12px inset."

    - "**Section heading với bố cục tính năng hai cột**: Cột trái: Instrument Serif italic 64px, #ffffff, letter-spacing -0.04em. Geist 17px, #7f7f7f cho subtext. Cột phải: card tối (#191919, radius 8px) chứa ảnh chụp màn hình sản phẩm. Khoảng cách dọc 80px từ section trước. Khoảng cách hàng 10px giữa label và mô tả trong chú thích tính năng."

    - "**Language pill row**: Dải ngang ở cuối section. Neo trái: 'Supports 100+ languages' bằng Instrument Serif italic, 28px, #ffffff. Tiếp theo là tag DM Mono 12px (#7f7f7f): 'English', 'Portuguese', 'Cantonese', 'Japanese', 'Korean', 'Russian', 'Italian'. Khoảng cách 20px giữa các tag, không nền."

    - "**Testimonial block**: Căn giữa, không nền card. Instrument Serif italic 28px, #ffffff cho trích dẫn. Bên dưới: placeholder avatar hình tròn 32px (#282828). Tên bằng DM Mono 12px trắng, vai trò bằng DM Mono 10px #7f7f7f. Padding dọc 60px trên và dưới."

  gradient_system:

    hai_họ_gradient_riêng_biệt: "(1) **Teal signal gradient** — linear-gradient(rgb(32,177,195) 0%, rgb(3,67,75) 100%) — được sử dụng độc quyền trên màn hình thiết bị sản phẩm và nền card soạn email. Gradient này tạo ra trường màu bão hòa duy nhất của thương hiệu. (2) **Light fade gradient** — linear-gradient(rgb(209,209,209) 0%, rgb(255,255,255) 100%) — được áp dụng cho text wordmark ghost và các loại chữ xám tỷ lệ lớn khác cần nhạt dần thành giá trị sáng hơn. Teal gradient luôn hướng dọc với cyan sáng hơn ở trên; light gradient luôn hướng dọc với xám đậm hơn ở trên. Không sử dụng gradient chéo hoặc nhiều stop."

  typography_pairing_philosophy:

    info: "Hệ thống sử dụng mô hình biên tập ba font: Instrument Serif (display), DM Mono (UI/metadata hệ thống) và Geist (body). Serif mang giọng nói và cá tính; mono mang chức năng và độ chính xác; sans mang văn xuôi dễ đọc. Không bao giờ trộn lẫn các vai trò này. Headline luôn là Instrument Serif italic — italic là một điểm đánh dấu thương hiệu, không phải tùy chọn style. Mono text thường sử dụng letter-spacing dương (0.015–0.021em) ở cỡ nhỏ để tạo cho label chất lượng có chủ đích, giãn cách. Serif text luôn sử dụng tracking âm ở cỡ display để thắt chặt cảm giác display tạp chí."

  similar_brands:

    - "**Linear** — Cùng canvas tối với khoảng cách rộng rãi, sử dụng accent hạn chế và trình bày sản phẩm biên tập"
    - "**Vercel** — Bề mặt gần-đen tương tự, label mono cho chrome hệ thống và một accent mát mẻ duy nhất trên nền đơn sắc"
    - "**Raycast** — Ứng dụng năng suất dark-mode với typography UI mono và một accent màu sắc duy nhất cho phần tử tương tác"
    - "**Every.to** — Ấn phẩm mẹ sử dụng cùng cặp Instrument Serif italic + DM Mono cho trang sản phẩm biên tập"
    - "**Things 3** — UI tối cao cấp với bo tròn rộng rãi, phép ẩn dụ card vật lý và triết lý accent màu hạn chế"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-cyan: #19d0e8;
          --color-sky-signal: #44ccff;
          --color-deep-teal: #062f34;
          --color-void-black: #000000;
          --color-obsidian: #010101;
          --color-midnight-surface: #191919;
          --color-graphite: #282828;
          --color-charcoal: #363636;
          --color-slate: #3f3f3f;
          --color-steel-gray: #7f7f7f;
          --color-paper-white: #ffffff;
          --color-ghost-gray: #c0c0c0;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-serif: 'Instrument Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sf-pro-display-regular: 'SF Pro Display Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.21px;
          --text-body: 17px;
          --leading-body: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: 0.26px;
          --text-heading: 48px;
          --leading-heading: 1.1;
          --tracking-heading: -1.44px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.16px;
          --text-display: 96px;
          --leading-display: 0.9;
          --tracking-display: -3.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-72: 72px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 52px;
          --radius-full-2: 56px;
          --radius-full-3: 60px;
          --radius-full-4: 100px;
          --radius-full-5: 900px;
          --radius-full-6: 100000px;
        
          /* Named Radii */
          --radius-tags: 100000px;
          --radius-cards: 18px;
          --radius-large: 12px;
          --radius-small: 4px;
          --radius-medium: 8px;
          --radius-buttons: 100000px;
          --radius-productdevice: 40px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.7) 3px 3px 2px 0px inset, rgba(255, 255, 255, 0.25) 3px 2px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px, rgba(0, 0, 0, 0.5) 1px 1px 1px 0px inset, rgba(0, 0, 0, 0.7) 2px 2px 12px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.63) 0px 0px 0px 1px;
          --shadow-md: rgb(14, 93, 102) 6px 6px 10px 0px inset, rgba(255, 255, 255, 0.2) 4px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-midnight: #191919;
          --surface-graphite: #282828;
          --surface-charcoal: #363636;
          --surface-paper: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-cyan: #19d0e8;
          --color-sky-signal: #44ccff;
          --color-deep-teal: #062f34;
          --color-void-black: #000000;
          --color-obsidian: #010101;
          --color-midnight-surface: #191919;
          --color-graphite: #282828;
          --color-charcoal: #363636;
          --color-slate: #3f3f3f;
          --color-steel-gray: #7f7f7f;
          --color-paper-white: #ffffff;
          --color-ghost-gray: #c0c0c0;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-serif: 'Instrument Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sf-pro-display-regular: 'SF Pro Display Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.21px;
          --text-body: 17px;
          --leading-body: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: 0.26px;
          --text-heading: 48px;
          --leading-heading: 1.1;
          --tracking-heading: -1.44px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.16px;
          --text-display: 96px;
          --leading-display: 0.9;
          --tracking-display: -3.84px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-72: 72px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 52px;
          --radius-full-2: 56px;
          --radius-full-3: 60px;
          --radius-full-4: 100px;
          --radius-full-5: 900px;
          --radius-full-6: 100000px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.7) 3px 3px 2px 0px inset, rgba(255, 255, 255, 0.25) 3px 2px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px, rgba(0, 0, 0, 0.5) 1px 1px 1px 0px inset, rgba(0, 0, 0, 0.7) 2px 2px 12px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.63) 0px 0px 0px 1px;
          --shadow-md: rgb(14, 93, 102) 6px 6px 10px 0px inset, rgba(255, 255, 255, 0.2) 4px 4px 4px 0px, rgba(255, 255, 255, 0.25) 1px 1px 2px 0px;
        }