obviously___style_reference: info: "> Claymation vui nhộn trên nền giấy trắng. Zams đặt những sinh vật play-doh hình học thân thiện lên nền trắng sạch, gần như phòng thí nghiệm, để một màu tím rực rỡ duy nhất làm toàn bộ công việc về màu sắc, và một serif ấm áp đảm nhiệm phần ấm áp của typography." theme: "light" info: "Zams vận hành một hệ thống thị giác song ngữ: một thẩm mỹ doanh nghiệp tối giản nghiêm ngặt, lấy serif làm đầu, kết hợp với dàn nhân vật claymation mũm mĩm, màu kẹo ngọt — chính là hiện thân của các AI worker. Nền trắng là một sân khấu có chủ đích — nó để CTA tím (#7451f2), các pattern chấm chấm tinh tế, và các linh vật pastel gánh vác toàn bộ cá tính thị giác, trong khi phần chrome xung quanh (tab, logo tích hợp, huy hiệu tuân thủ) vẫn lặng lẽ hoạt động. Headline dùng serif ấm (Lustria) với negative tracking dày, body và UI chạy trên DM Sans, và các label như \"COMING SOON\", \"EVAN\", \"YOUR NEXT HIRE\" chuyển sang Martian Mono để tạo giọng kỹ thuật, gần như nhật ký build cho từng section. Các component có góc vuông: 4px corners, hairline borders, một button shadow nhẹ, và không có gradient trang trí. Tổng thể mang giọng doanh nghiệp đáng tin cậy nhưng không khô khan — các linh vật phá vỡ sự căng thẳng, và các meta-label monospace báo hiệu \"sản phẩm này được kỹ thuật hóa, không phải lắp ráp.\"" tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|---------|" info: "| Iris Violet | `#7451f2` | `--color-iris-violet` | Nút CTA filled chính, active tab indicator, điểm nhấn màu duy nhất trong toàn bộ hệ thống. Một màu tím rực rỡ trên nền gần như không màu tạo sự hiện diện thương hiệu mà không gây nhiễu màu |" info: "| Deep Iris | `#5952a1` | `--color-deep-iris` | Viền action outlined/ghost, tím phụ cho secondary buttons và stroke accents. Tông tối hơn của primary — giữ nguyên hệ thương hiệu khi cần bề mặt nhẹ hơn |" info: "| Cobalt Info | `#0072c6` | `--color-cobalt-info` | Accent xanh dương cho badges, validation surfaces, và status label ngắn. Không nâng lên làm màu CTA chính |" info: "| Powder Blue | `#d6e5ff` | `--color-powder-blue` | Form states trung tính, badge text, và UI feedback nhẹ nhàng khi màu cần giữ ở mức khiêm tốn. |" info: "| Graphite Ink | `#272727` | `--color-graphite-ink` | Màu text chính, heading strokes, icon fills, footer text — màu gần đen chủ đạo tạo giọng cho nền trắng |" info: "| Slate | `#5d5d5d` | `--color-slate` | Body text và tông viền chủ lực — paragraphs, helper copy, và các hairline rules phân cách section |" info: "| Ash | `#4f4f4f` | `--color-ash` | Secondary text, nav metadata, tối hơn Slate một chút để nhấn mạnh mà không chuyển sang đen |" info: "| Mauve Dust | `#a69ea7` | `--color-mauve-dust` | Dividers mờ, rules disabled-ish, viền cấp ba — tông viền nhẹ nhất vẫn đọc được trên nền trắng |" info: "| Fog | `#858585` | `--color-fog` | Placeholder text, captions ít nhấn mạnh, màu trung tính lùi nhất cho meta bị giảm chú ý |" info: "| Charcoal Hairline | `#333333` | `--color-charcoal-hairline` | Link text và image borders khi cần màu đen mềm hơn #272727 |" info: "| Mist | `#e0e0e0` | `--color-mist` | Light borders, button outline borders, table dividers, card edges — tông hairline sáng |" info: "| Soft Snow | `#f6f6f6` | `--color-soft-snow` | Surface elevation nhẹ cho cards và section bands trên nền trắng — đủ tương phản để định nghĩa một panel mà không làm tối trang |" info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, button text trên nền tím, card surfaces, footer background — màu nền chủ đạo |" info: "| Pure Black | `#000000` | `--color-pure-black` | Text tương phản tối đa, decorative SVG fills, và các viền sâu nhất khi cần độ mờ hoàn toàn |" tokens___typography: lustria___display_và_headline_serif___serif_duy_nhất_trong_hệ_thống__dùng_cho_hero_headlines__section_titles__và_feature_headings_ở_32_52px__negative_tracking_mạnh__0_05em_ở_52px_siết_chặt_các_chữ_lustria_rộng_để_chúng_mang_cảm_giác_đương_đại_thay_vì_editorial__lựa_chọn_đặc_trưng__một_serif_bo_tròn_ấm_áp_trên_layout_trắng_tối_giản_mang_lại_cho_sản_phẩm_doanh_nghiệp_một_giọng_nhân_văn__gần_như_editorial_____font_lustria: - "**Thay thế:** DM Serif Display, Playfair Display, hoặc Lora — các Google font miễn phí thay thế với độ ấm bo tròn tương tự." - "**Weights:** 400" - "**Kích thước:** 20px, 32px, 36px, 42px, 52px" - "**Line height:** 1.10–1.20" - "**Letter spacing:** -0.0190em đến -0.0500em" - "**Vai trò:** Display và headline serif — serif duy nhất trong hệ thống. Dùng cho hero headlines, section titles, và feature headings ở 32–52px. Negative tracking mạnh (-0.05em ở 52px) siết chặt các chữ Lustria rộng để chúng mang cảm giác đương đại thay vì editorial. Lựa chọn đặc trưng: một serif bo tròn ấm áp trên layout trắng tối giản mang lại cho sản phẩm doanh nghiệp một giọng nhân văn, gần như editorial." dm_sans___body_và_ui_workhorse___paragraphs__buttons__nav_links__captions__helper_text__icons_aligned_labels__geometric_humanist_sans_đảm_nhiệm_toàn_bộ_lớp_chức_năng_từ_micro_tags_9px_đến_body_16px__positive_tracking_nhẹ_ở_kích_thước_nhỏ_0_02em_giữ_cho_text_badge_nhỏ_dễ_đọc__negative_tracking_nhẹ_ở_16px_giúp_body_copy_có_cảm_giác_chặt_chẽ_hơn_____font_dm_sans: - "**Thay thế:** Inter, Manrope, hoặc Plus Jakarta Sans — các free font gần tương đương." - "**Weights:** 400, 500, 600, 700" - "**Kích thước:** 9px, 12px, 14px, 15px, 16px" - "**Line height:** 1.20–1.60" - "**Letter spacing:** -0.0200em đến 0.0200em" - "**Vai trò:** Body và UI workhorse — paragraphs, buttons, nav links, captions, helper text, icons-aligned labels. Geometric humanist sans đảm nhiệm toàn bộ lớp chức năng từ micro-tags 9px đến body 16px. Positive tracking nhẹ ở kích thước nhỏ (0.02em) giữ cho text badge nhỏ dễ đọc; negative tracking nhẹ ở 16px giúp body copy có cảm giác chặt chẽ hơn." martian_mono___giọng_meta_label_và_build_log___section_eyebrows__your_next_hire___trusted_by___integrations___security__tên_persona__evan__status_pills__coming_soon__và_micro_tags_viết_hoa__positive_tracking__0_02em_củng_cố_cách_xử_lý_all_caps__chuyển_từ_dm_sans_sang_martian_mono_cho_các_label_này_là_nước_đi_typography_đặc_trưng_của_hệ_thống__nó_mang_lại_cho_trang_một_giọng__developer_changelog__xếp_lớp_trên_thẩm_mỹ_claymation_thân_thiện_____font_martian_mono: - "**Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Space Mono — các free monospace font thay thế với đặc điểm hình học tương tự." - "**Weights:** 400, 500" - "**Kích thước:** 11px, 16px" - "**Line height:** 1.20–1.27" - "**Letter spacing:** 0.0130em đến 0.0220em" - "**Vai trò:** Giọng meta-label và build-log — section eyebrows (\"YOUR NEXT HIRE\", \"TRUSTED BY\", \"INTEGRATIONS\", \"SECURITY\"), tên persona (\"EVAN\"), status pills (\"COMING SOON\"), và micro-tags viết hoa. Positive tracking (~0.02em) củng cố cách xử lý all-caps. Chuyển từ DM Sans sang Martian Mono cho các label này là nước đi typography đặc trưng của hệ thống: nó mang lại cho trang một giọng 'developer changelog' xếp lớp trên thẩm mỹ claymation thân thiện." type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|---------|------------|-------------|----------------|-------|" info: "| mono-sm | 11px | 1.2 | 0.22px | `--text-mono-sm` |" info: "| caption | 14px | 1.4 | — | `--text-caption` |" info: "| body | 16px | 1.6 | 0.32px | `--text-body` |" info: "| subheading | 20px | 1.2 | — | `--text-subheading` |" info: "| heading-sm | 32px | 1.2 | — | `--text-heading-sm` |" info: "| heading | 36px | 1.2 | -0.68px | `--text-heading` |" info: "| heading-lg | 42px | 1.1 | -2.02px | `--text-heading-lg` |" info: "| display | 52px | 1.1 | -2.6px | `--text-display` |" tokens___spacing___shapes: base_unit: "8px" density: "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: "| 104 | 104px | `--spacing-104` |" border_radius: info: "| Element | Giá trị |" info: "|---------|---------|" info: "| nav | 4px |" info: "| cards | 4px |" info: "| badges | 100px |" info: "| buttons | 4px |" shadows: info: "| Tên | Giá trị | Token |" info: "|-----|---------|-------|" info: "| sm | `rgba(0, 0, 0, 0.2) 0px 2px 4px 0px` | `--shadow-sm` |" layout: - "**Page max-width:** 1200px" - "**Section gap:** 64px" - "**Card padding:** 16-24px" - "**Element gap:** 8-16px" components: primary_cta_button: vai_trò: "Nút tím filled cho action chính của trang (\"GET EARLY ACCESS\", \"REQUEST CUSTOM WORKER\")." background: "#7451f2. Text: #ffffff trong DM Sans 12–14px weight 600, letter-spacing 0.24px. Padding: 10–12px dọc, 16–20px ngang. Border-radius: 4px. Box-shadow: rgba(0,0,0,0.2) 0px 2px 4px 0px. Uppercase tùy chọn. Shadow duy nhất trong hệ thống — nâng button vừa đủ để cảm thấy có thể nhấn mà không phá vỡ thẩm mỹ phẳng." outlined_secondary_button: vai_trò: "Action ít nhấn mạnh hơn đặt cạnh primary CTA (\"EXPLORE AI WORKERS\", \"VISIT TRUST CENTER\")." background: "transparent hoặc #ffffff. Text: #272727 trong DM Sans 12–14px weight 500. Border: 1px solid #5d5d5d hoặc #5952a1 cho biến thể viền tím. Border-radius: 4px. Padding: giống primary. Không shadow." ghost_nav_link: vai_trò: "Mục điều hướng trên cùng (\"INTEGRATIONS\", \"PRICING\", \"BLOG\", \"LOG IN\")." text: "#272727 trong DM Sans 12px weight 500, letter-spacing 0.24px, uppercase. Không gạch chân mặc định; chuyển màu nhẹ sang #7451f2 khi hover. Padding: 8px ngang." top_navigation_bar: vai_trò: "Header trên cùng dạng sticky trên tất cả các trang." background: "#ffffff. Chiều cao ~64px. Logo \"zams\" với icon starburst bên trái, nav links ở giữa hoặc lệch trái, ghost \"LOG IN\" + filled \"GET EARLY ACCESS\" tím bên phải. Hairline border dưới: 1px #e0e0e0." hero_section: vai_trò: "Bố cục màn hình đầu tiên cho landing page." chia_hai_cột_trên_desktop__trái: "serif headline (Lustria 52px weight 400, -2.6px tracking) màu #272727, DM Sans sub-text (16px, line-height 1.6) màu #5d5d5d, chồng primary + outlined button. Phải: product preview (chat UI mock) với 5 linh vật mascot xếp thành một hàng phía trước. Vertical padding rộng (80–96px)." trust_logo_strip: vai_trò: "Band bằng chứng xã hội ngay dưới hero (\"TRUSTED BY\")." info: "Martian Mono 11px uppercase eyebrow \"TRUSTED BY\" căn giữa màu #858585 với letter-spacing 0.22px. Hàng logo đối tác đơn sắc hoặc đủ màu (lasagna, HUSK, PERFORM, Google Cloud, espresso, Golden Proportions Marketing) trên nền Paper White. Logo cân bằng thị giác, không bị khóa trong grid." persona_tab_navigation: vai_trò: "Tab switcher để giới thiệu năm AI worker (Evan, Atlas, Nico, Nova, Iris)." info: "Năm tab cell bằng chiều rộng trong một hàng ngang, cách nhau bằng divider dọc 1px #e0e0e0. Tab active có badge tròn nhỏ phía trên trong DM Sans. Mỗi tab: tên persona trong DM Sans 15–16px weight 500 #272727 + role label (\"Meeting Prep\", \"CRM Manager\") trong DM Sans 12px #858585. Tab background: #ffffff, active-state background: #f6f6f6. Pill \"COMING SOON\" trong Martian Mono 11px nằm trên các tab inactive." feature_section_text___illustration: vai_trò: "Mô tả dài về khả năng của một AI worker." layout_hai_cột: "cột trái là Lustria 42px headline màu #272727, DM Sans 16px body màu #5d5d5d, primary CTA button. Cột phải: linh vật mascot đơn lẻ cộng với hàng logo tích hợp \"CONNECTS WITH\". Background: #ffffff. Spacing: 64–80px vertical gap." ai_worker_mascot_illustration: vai_trò: "Nhân vật 3D đại diện cho mỗi AI worker — một tài sản thương hiệu đặc trưng." info: "Dạng claymation hình học (kim tự tháp, hình cầu, hình trụ, ngũ giác, giọt nước) với màu pastel bão hòa (xanh lá, xanh dương, xanh ngọc, vàng, hồng/magenta), bề mặt mờ mềm mại như play-doh, hai mắt lồi, và nụ cười nhỏ. Đặt ở giữa hoặc dưới cùng bên phải của feature sections. Mỗi linh vật là một cặp hình dạng–màu sắc độc đáo, tạo cho persona một silhouette riêng biệt." coming_soon_pill_badge: vai_trò: "Chỉ báo trạng thái trên tab cho persona chưa ra mắt." background: "#ffffff. Border: 1px solid #e0e0e0. Border-radius: 100px (full pill). Text: Martian Mono 11px uppercase màu #5d5d5d, letter-spacing 0.22px. Padding: 2px 6–8px." section_eyebrow_label: vai_trò: "Meta-label monospace nằm phía trên mọi section title." info: "Luôn là Martian Mono 11px uppercase, letter-spacing 0.22px, màu #858585 hoặc #5d5d5d, căn giữa hoặc căn trái. Ví dụ trong hệ thống: \"YOUR NEXT HIRE\", \"TRUSTED BY\", \"INTEGRATIONS\", \"SECURITY\", \"CUSTOM AI WORKERS\". Hoạt động như section header kiểu build-log, tương phản với headline serif ấm áp bên dưới." integrations_grid: vai_trò: "Grid kiểu bento lớn chứa logo đối tác cho section \"Connect Anything\"." info: "Multi-column asymmetric grid trên nền Paper White với pattern chấm chấm/grid texture tinh tế. Mỗi cell: border 1px #e0e0e0, radius 4px, padding 16–24px, căn giữa logo đối tác đủ màu. Cell trung tâm chứa serif headline \"Connect Anything\" và outlined button \"EXPLORE INTEGRATIONS\"." security___trust_card: vai_trò: "Section hai cột củng cố tuân thủ doanh nghiệp." trái: "Martian Mono \"SECURITY\" eyebrow + Lustria 36–42px headline (\"No training on your data\") + DM Sans body copy + outlined button \"VISIT TRUST CENTER\". Phải: bốn con dấu tuân thủ hình tròn (AICPA SOC, GDPR, HIPAA, CCPA) với màu thương hiệu chính xác, xếp thành một hàng. Background: #ffffff hoặc #f6f6f6." custom_workers_banner: vai_trò: "Card quảng cáo nội tuyến giữa trang (\"Custom AI Workers\")." background: "#f6f6f6. Border-radius: 4px. Padding: 16–24px. Trái: icon linh vật tròn nhỏ + DM Sans 16px weight 600 headline + DM Sans 14px weight 400 body. Phải: primary violet filled button \"REQUEST CUSTOM WORKER\". Hairline border #e0e0e0 ngăn cách với nền trắng xung quanh." dotted_grid_background_pattern: vai_trò: "Texture tinh tế dùng trong integrations và feature sections." info: "CSS dot pattern lặp lại trên nền Paper White hoặc Soft Snow — các chấm #e0e0e0 nhỏ ở khoảng cách 16–24px đều đặn. Thêm texture xúc giác mà không cạnh tranh với nội dung. Element bề mặt không phải màu sắc đặc trưng nhất trong hệ thống." do_s_and_don_ts: nên_làm: - "Dùng #7451f2 Iris Violet làm điểm nhấn màu duy nhất — mọi filled CTA, mọi active state, mọi viền tím trong hệ thống." - "Đặt mọi section title trong Lustria 32–52px với negative tracking từ -0.02em đến -0.05em; không bao giờ thay thế headline bằng sans-serif." - "Thêm tiền tố cho mọi section bằng Martian Mono 11px uppercase eyebrow màu #858585 (TRUSTED BY, INTEGRATIONS, SECURITY, YOUR NEXT HIRE)." - "Giữ tất cả corner radii ở 4px cho cards/buttons và 100px cho pill badges — không giá trị nào khác." - "Dùng dotted-grid background pattern trong feature và integrations sections; để hero trên nền Paper White sạch." - "Ghép primary CTA với một outlined secondary button, gap ngang 16–24px — không bao giờ xếp chồng hai filled violet." - "Giữ body copy ở 16px DM Sans với line-height 1.6 màu #5d5d5d Slate, không phải #272727 Graphite Ink (dành riêng cho headings)." không_nên_làm: - "Đừng thêm điểm nhấn màu thứ hai — hệ thống là đơn sắc + một màu tím, không phải đa màu." - "Đừng dùng Martian Mono cho body copy hoặc văn bản dài — dành riêng cho uppercase labels dưới 16px." - "Đừng thêm shadows vào cards, nav, hoặc images — shadow rgba(0,0,0,0.2) 0px 2px 4px 0px duy nhất chỉ thuộc về primary CTA button." - "Đừng dùng #5952a1 làm background cho filled button — nó là màu viền cho outlined action, không phải fill." - "Đừng render headings trong DM Sans hoặc body copy trong Lustria — ánh xạ font-vai trò là nghiêm ngặt." - "Đừng dùng gradients, glassmorphism, hoặc colored glows trên bất kỳ bề mặt nào — surfaces là flat hoặc gần flat." - "Đừng dùng nhiều hơn hai typeface trên mỗi màn hình — hệ thống là Lustria (serif display) + DM Sans (UI) + Martian Mono (labels)." surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|--------|-----|---------|----------|" info: "| 0 | Paper White | `#ffffff` | Base canvas cho toàn bộ trang — sân khấu nơi mọi thứ đặt lên. |" info: "| 1 | Soft Snow | `#f6f6f6` | Bước elevation đầu tiên cho cards, banner panels, và các section band xen kẽ. |" info: "| 2 | Powder Blue | `#d6e5ff` | Info-state surface — nền pha màu cho status badges và highlight wash. |" info: "| 3 | Iris Violet | `#7451f2` | Brand surface — filled CTA, lớp UI thu hút sự chú ý cao nhất. |" elevation: - "**Primary CTA button:** `rgba(0, 0, 0, 0.2) 0px 2px 4px 0px`" imagery: info: "Nhân vật chính của ngôn ngữ thị giác là bộ linh vật claymation 3D — các dạng hình học mũm mĩm (kim tự tháp, hình cầu, hình trụ, ngũ giác, giọt nước) với màu pastel bão hòa (xanh lá, xanh dương, xanh ngọc, vàng, hồng) có bề mặt play-doh mờ, hai mắt lồi, và nụ cười nhỏ. Mỗi linh vật là một cặp hình dạng–màu sắc độc đáo, tạo cho các persona AI worker một silhouette riêng biệt. Chúng xuất hiện trong hero như một nhóm, và riêng lẻ trong mỗi feature section. Product screenshots là các mock chat UI sạch, theme sáng, trông giống cửa sổ macOS gốc. Không gian thị giác còn lại chủ yếu là logo đối tác đủ màu (Notion, HubSpot, Salesforce, Slack, Gong, v.v.) được trình bày ở màu thương hiệu gốc. Không có ảnh chụp lối sống. Ngôn ngữ icon (trong nav, compliance, eyebrows) là monochrome line icons màu #272727 hoặc monospace text trong Martian Mono. Tỷ lệ hình ảnh so với văn bản tổng thể là khoảng 30/70 nghiêng về văn bản — hình ảnh nhấn mạnh chứ không chi phối." layout: info: "Các section full-bleed, nội dung căn giữa ở ~1200px max-width. Hero là split 50/50: serif headline + body + chồng button bên trái, product preview với nhóm linh vật bên phải. Bên dưới hero, trang chuyển sang nhịp điệu các section một cột căn giữa (headline, eyebrow, subhead, body) với eyebrow luôn ở dạng Martian Mono uppercase. Feature sections là split 2 cột text-trái / illustration-phải xen kẽ. Integrations section là asymmetric bento grid với CTA căn giữa. Navigation là một top bar tối giản — logo trái, ba nav links và hai utility buttons phải — không sidebar, không mega-menu. Spacing rộng rãi: 64–96px giữa các section, 16–24px bên trong cards. Backgrounds xen kẽ Paper White và Soft Snow để tạo nhịp điệu section mà không dựa vào divider nặng." agent_prompt_guide: info: "Quick Color Reference" - "text primary: #272727 Graphite Ink" - "text body: #5d5d5d Slate" - "text muted: #858585 Fog" - "background canvas: #ffffff Paper White" - "background subtle: #f6f6f6 Soft Snow" - "border hairline: #e0e0e0 Mist" - "accent / primary action: #7451f2 (filled action)" - "outlined action border: #5952a1 Deep Iris" - "info state: #0072c6 text trên nền #d6e5ff" info: "3-5 Ví dụ Component Prompts" - "Tạo Primary Action Button: background #7451f2, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính." - "Persona tab: border separator 1px #e0e0e0 giữa các cell. Active cell background #f6f6f6, inactive #ffffff. Cell padding 16px. Tên persona trong DM Sans 15px weight 500 #272727, role label trong DM Sans 12px #858585. Pill COMING SOON phía trên cell inactive: border 1px #e0e0e0, radius 100px, text Martian Mono 11px uppercase #5d5d5d, padding 2px 8px." - "Integrations grid card: Nền trắng, border 1px #e0e0e0, radius 4px, padding 24px, logo đối tác căn giữa với màu thương hiệu gốc. Card nằm trên dotted-grid background pattern (chấm #e0e0e0 trên nền #ffffff)." - "Security & Trust row: Cột trái — Martian Mono 11px 'SECURITY' eyebrow màu #858585, Lustria 36px headline màu #272727, DM Sans 16px body màu #5d5d5d, outlined button 'VISIT TRUST CENTER' (1px #5d5d5d, radius 4px). Cột phải — bốn con dấu tuân thủ hình tròn 48–64px (AICPA SOC, GDPR, HIPAA, CCPA) với màu thương hiệu gốc, gap 16px." similar_brands: - "**Clay** — Cùng thẩm mỹ nhân vật 3D claymation/play-doh với dạng hình học pastel bão hòa — cả hai site đều dàn dựng linh vật dễ thương trên nền tối giản sạch sẽ." - "**Mem** — Cùng serif ấm (họ Lustria) cho headlines kết hợp với minh họa linh vật 3D vui nhộn trên nền giấy trắng — kỷ luật typography và màu sắc gần như giống hệt." - "**Linear** — Cùng layout căn giữa giới hạn max-width, hairline borders, chrome gần như không màu, và một màu accent rực rỡ duy nhất cho primary actions." - "**Notion** — Cùng canvas Paper White, section bands Soft Snow (#f6f6f6), component corners 4px, và một UI chức năng yên tĩnh để nội dung và minh họa làm công việc tạo cá tính." - "**Intercom** — Cùng độ tin cậy enterprise-SaaS được làm mềm bằng minh họa thân thiện và một màu accent đậm duy nhất — cả hai đều mang cảm giác 'được kỹ thuật hóa nhưng vẫn có tính người'." quick_start: css_custom_properties: css: | :root { /* Colors */ --color-iris-violet: #7451f2; --color-deep-iris: #5952a1; --color-cobalt-info: #0072c6; --color-powder-blue: #d6e5ff; --color-graphite-ink: #272727; --color-slate: #5d5d5d; --color-ash: #4f4f4f; --color-mauve-dust: #a69ea7; --color-fog: #858585; --color-charcoal-hairline: #333333; --color-mist: #e0e0e0; --color-soft-snow: #f6f6f6; --color-paper-white: #ffffff; --color-pure-black: #000000; /* Typography — Font Families */ --font-lustria: 'Lustria', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-martian-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Typography — Scale */ --text-mono-sm: 11px; --leading-mono-sm: 1.2; --tracking-mono-sm: 0.22px; --text-caption: 14px; --leading-caption: 1.4; --text-body: 16px; --leading-body: 1.6; --tracking-body: 0.32px; --text-subheading: 20px; --leading-subheading: 1.2; --text-heading-sm: 32px; --leading-heading-sm: 1.2; --text-heading: 36px; --leading-heading: 1.2; --tracking-heading: -0.68px; --text-heading-lg: 42px; --leading-heading-lg: 1.1; --tracking-heading-lg: -2.02px; --text-display: 52px; --leading-display: 1.1; --tracking-display: -2.6px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --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-104: 104px; /* Layout */ --page-max-width: 1200px; --section-gap: 64px; --card-padding: 16-24px; --element-gap: 8-16px; /* Border Radius */ --radius-md: 4px; --radius-full: 100px; /* Named Radii */ --radius-nav: 4px; --radius-cards: 4px; --radius-badges: 100px; --radius-buttons: 4px; /* Shadows */ --shadow-sm: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px; /* Surfaces */ --surface-paper-white: #ffffff; --surface-soft-snow: #f6f6f6; --surface-powder-blue: #d6e5ff; --surface-iris-violet: #7451f2; } tailwind_v4: css: | @theme { /* Colors */ --color-iris-violet: #7451f2; --color-deep-iris: #5952a1; --color-cobalt-info: #0072c6; --color-powder-blue: #d6e5ff; --color-graphite-ink: #272727; --color-slate: #5d5d5d; --color-ash: #4f4f4f; --color-mauve-dust: #a69ea7; --color-fog: #858585; --color-charcoal-hairline: #333333; --color-mist: #e0e0e0; --color-soft-snow: #f6f6f6; --color-paper-white: #ffffff; --color-pure-black: #000000; /* Typography */ --font-lustria: 'Lustria', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-martian-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Typography — Scale */ --text-mono-sm: 11px; --leading-mono-sm: 1.2; --tracking-mono-sm: 0.22px; --text-caption: 14px; --leading-caption: 1.4; --text-body: 16px; --leading-body: 1.6; --tracking-body: 0.32px; --text-subheading: 20px; --leading-subheading: 1.2; --text-heading-sm: 32px; --leading-heading-sm: 1.2; --text-heading: 36px; --leading-heading: 1.2; --tracking-heading: -0.68px; --text-heading-lg: 42px; --leading-heading-lg: 1.1; --tracking-heading-lg: -2.02px; --text-display: 52px; --leading-display: 1.1; --tracking-display: -2.6px; /* 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-104: 104px; /* Border Radius */ --radius-md: 4px; --radius-full: 100px; /* Shadows */ --shadow-sm: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px; }