schema___style_reference: info: "> Sân khấu keynote đen mực với những bức tranh tường rực rỡ như confetti" theme: "mixed" info: "Schema by Figma vận hành trên nền kiến trúc đơn sắc mạnh mẽ, bị xuyên thủng bởi các bức tranh tường hình học phẳng màu đậm. UI sử dụng đen tuyền, gần đen và trắng với viền xám mảnh — không có đổ bóng, bán kính tối thiểu, không có điểm nhấn màu trong chính giao diện. Màu sắc chỉ xuất hiện dưới dạng nghệ thuật trang trí (hình tròn, lục giác, hình chữ nhật với màu tím, xanh ngọc, đỏ rượu vang, xanh lá, cam) và làm nền cho ảnh chân dung diễn giả. Typography là yếu tố nổi bật nhất: custom display face của Figma ở kích thước 56–86px với tracking âm cực mạnh (-0.02em) và line-height chặt 0.90 khiến headline có cảm giác như được khắc chứ không phải sắp chữ. Phần hero đảo ngược quy ước với nền đen và nút Register viền ngoài cỡ lớn; các section nội dung sau đó xen kẽ qua các dải màu full-bleed trước khi kết thúc bằng grid diễn giả trắng sạch." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|------|" info: "| Obsidian | `#000000` | `--color-obsidian` | Nền hero, viền cấu trúc dày, nét vẽ icon — tạo không khí sân khấu keynote tương phản cao cho phần mở đầu |" info: "| Ink | `#0f0f0f` | `--color-ink` | Văn bản body và heading trên nền sáng, viền section tối |" info: "| Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card diễn giả, văn bản section sáng trên hero tối |" info: "| Ash | `#e2e2e2` | `--color-ash` | Viền mảnh, icon fill nhẹ, đường phân cách cấu trúc giữa các vùng UI |" info: "| Mint Wash | `#c7f8fb` | `--color-mint-wash` | Nền highlight xanh ngọc, dải trang trí, điểm nhấn mềm phía sau nội dung. Không nâng lên thành màu CTA chính |" info: "| Emerald Band | `#24cb71` | `--color-emerald-band` | Nền section accent full-bleed — một dải ngang xanh lá tươi kết thúc bố cục hero |" tokens___typography: source_sans_pro___source_sans_pro___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_source_sans_pro: - "**Weights:** 400" - "**Sizes:** 16px" - "**Line height:** 1.2" - "**Vai trò:** Source Sans Pro — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" figma_sans_display___headline_và_display_copy___được_dùng_ở_56_86px_cho_hero__schema_by_figma___meet_our_speakers__với_leading_chặt_0_90_1_10_và_tracking__0_02em_khiến_chữ_có_cảm_giác_như_được_khắc_từ_một_khối__weight_400_là_chủ_đạo__700_dành_cho_nhấn_mạnh_____font_figma_sans_display: - "**Thay thế:** Inter Tight hoặc variable sans custom như General Sans" - "**Weights:** 400, 700" - "**Sizes:** 16, 24, 32, 56, 72, 86" - "**Line height:** 0.90–1.40" - "**Letter spacing:** -0.02em ở 72–86px, -0.01em ở 24–32px, 0.03em cho một số ngữ cảnh 16px" - "**Vai trò:** Headline và display copy — được dùng ở 56–86px cho hero ('Schema by Figma', 'Meet our speakers!') với leading chặt (0.90–1.10) và tracking -0.02em khiến chữ có cảm giác như được khắc từ một khối. Weight 400 là chủ đạo; 700 dành cho nhấn mạnh." figma_sans_text___body__nav__nhãn_nút__văn_bản_hỗ_trợ__mặt_chữ_văn_bản_đồng_hành_ở_kích_thước_khiêm_tốn_13_18px_với_weight_400_làm_mặc_định_và_600_cho_nút_nhãn___0_02em_ở_13px_giúp_chữ_nhỏ_không_bị_lỏng_lẻo__0_03em_ở_18px_tạo_độ_thoáng_cho_nhãn_____font_figma_sans_text: - "**Thay thế:** Inter hoặc Söhne" - "**Weights:** 400, 600" - "**Sizes:** 13, 16, 18" - "**Line height:** 1.20–1.22" - "**Letter spacing:** -0.02em ở 13px, 0.03em ở 18px" - "**Vai trò:** Body, nav, nhãn nút, văn bản hỗ trợ. Mặt chữ văn bản đồng hành ở kích thước khiêm tốn (13–18px) với weight 400 làm mặc định và 600 cho nút/nhãn. -0.02em ở 13px giúp chữ nhỏ không bị lỏng lẻo; 0.03em ở 18px tạo độ thoáng cho nhãn." figma_mono___code_hoặc_đoạn_metadata___được_dùng_tiết_chế_ở_16px_với_tracking_0_03em_để_tạo_điểm_nhấn_monospaced_mang_tính_kiến_trúc_giữa_thế_giới_chữ_proportional____font_figma_mono: - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono" - "**Weights:** 400" - "**Sizes:** 16" - "**Line height:** 1.30–1.40" - "**Letter spacing:** 0.03em" - "**Vai trò:** Code hoặc đoạn metadata — được dùng tiết chế ở 16px với tracking 0.03em để tạo điểm nhấn monospaced mang tính kiến trúc giữa thế giới chữ proportional" figma_vf_normal_700_75___figma_vf_normal_700_75___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_figma_vf_normal_700_75: - "**Weights:** 400" - "**Sizes:** 24px" - "**Line height:** 1.2" - "**Vai trò:** Figma VF-normal-700-75 — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả" figma_vf_normal_400_100___figma_vf_normal_400_100___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_figma_vf_normal_400_100: - "**Weights:** 400" - "**Sizes:** 16px" - "**Line height:** 1.2" - "**Letter spacing:** 0.03" - "**Vai trò:** Figma VF-normal-400-100 — đượ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 | 13px | 1.2 | -0.26px | `--text-caption` |" info: "| body | 16px | 1.2 | — | `--text-body` |" info: "| body-md | 18px | 1.22 | 0.54px | `--text-body-md` |" info: "| subheading | 24px | 1.2 | -0.24px | `--text-subheading` |" info: "| heading-sm | 32px | 1.1 | -0.32px | `--text-heading-sm` |" info: "| heading | 56px | 1 | -1.12px | `--text-heading` |" info: "| heading-lg | 72px | 0.9 | -1.44px | `--text-heading-lg` |" info: "| display | 86px | 0.9 | -1.72px | `--text-display` |" tokens___spacing___shapes: đơn_vị_cơ_bản: "8px" density: "thoải mái" 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: "| 48 | 48px | `--spacing-48` |" info: "| 64 | 64px | `--spacing-64` |" info: "| 80 | 80px | `--spacing-80` |" info: "| 120 | 120px | `--spacing-120` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| tags | 0px |" info: "| cards | 0px |" info: "| buttons | 0px |" info: "| speaker-images | 0px |" layout: - "**Page max-width:** 1200px" - "**Section gap:** 60px" - "**Card padding:** 16px" - "**Element gap:** 24px" components: top_navigation_bar: vai_trò: "Header cố định trên tất cả các section" info: "Trong suốt trên hero đen, Paper trên các section sáng. Bên trái: logo monogram nhỏ (32px vuông, fill Obsidian hoặc Paper). Bên phải: 2–4 text link (FAQ, Agenda) ở 16px Figma Sans Text weight 400, tracking 0.03em. Padding ngang 16px, dọc 20px. Không có background fill, không viền." hero_outlined_register_button: vai_trò: "Hành động chính trên hero tối" info: "Full-width trên hero, cao 56–64px. Viền Paper 1px, không fill, chữ Paper. Radius 0px. Chữ ở 18–24px Figma Sans Text weight 400, căn giữa. Khi hover, fill thành Paper với chữ Obsidian." eyebrow_label: vai_trò: "Tiêu đề phụ của section (VIRTUAL, SPEAKERS, REGISTER)" info: "12–13px Figma Sans Text weight 400 hoặc 600, in hoa qua CSS, tracking 0.03em. Màu Ink trên section sáng, Paper trên section tối. Cách headline 16–24px phía trên." display_headline: vai_trò: "Tiêu đề hero của section ('Schema by Figma', 'Meet our speakers!', 'Join us virtually!')" info: "Figma Sans Display weight 400, 56–86px, line-height 0.90–1.00, letter-spacing -0.02em. Màu Ink trên section sáng, Paper trên hero tối. Không giới hạn max-width — lấp đầy cột có sẵn." geometric_mural_banner: vai_trò: "Dải phân cách section full-bleed trang trí giữa hero và nội dung" info: "Full viewport width, cao ~200–300px. Nghệ thuật 2D phẳng: hình tròn, chữ nhật, lục giác, chevron với bảng màu bão hòa (indigo #4a4afc, lavender #b8b3ff, teal #c7f8fb, maroon #7a2e2, orange #ff6b2c, emerald #24cb71, yellow #ffe74a). Không gradient, không đổ bóng. Cạnh cứng/đường thẳng nơi khối chạm vào canvas." speaker_portrait_card: vai_trò: "Diễn giả trong grid" info: "Ảnh chân dung vuông, radius 0px, lấp đầy grid 4 cột. Mỗi ảnh chân dung nằm trên nền màu đặc (mint, emerald, indigo, lavender, orange, yellow). Bên dưới: tên ở Figma Sans Text weight 600 tại 18px, chức danh/vai trò ở Figma Sans Text weight 400 tại 16px — cả hai đều màu Ink. Khoảng cách 24px giữa ảnh và chữ, 48px giữa các card theo chiều dọc." event_status_notice: vai_trò: "Banner trạng thái nội tuyến ('Event ended')" info: "Khối căn giữa hoặc căn phải. Icon cảnh báo hình tam giác nhỏ (~24px, fill Ink) phía trên nhãn. Nhãn ở Figma Sans Text weight 600 tại 18–24px, subtext ở 16px weight 400. Nằm trên dải Mint Wash xanh ngọc." full_bleed_color_section: vai_trò: "Dải nội dung ngang với nền màu" info: "Edge-to-edge, cao ~200–400px, chữ Paper hoặc Ink tùy theo độ tương phản. Padding trong 60px trên/dưới, 24–48px trái/phải. Không viền, không radius, không đổ bóng." date_time_metadata_block: vai_trò: "Ngày và giờ sự kiện dưới headline hero" hai_dòng: "ngày in đậm (16–18px Figma Sans Text weight 600) phía trên khoảng thời gian (16–18px weight 400). Kế thừa màu chữ từ section (Paper trên hero tối). Khoảng cách 8–16px giữa các dòng." grid_section_header: vai_trò: "Khối tiêu đề section phía trên grid card (ví dụ: \"Meet our speakers!\")" info: "Eyebrow label + display headline, căn trái. Khoảng cách 24px giữa label và headline. Cách grid 48–60px phía trên." do_s_and_don_ts: nên_làm: - "Dùng 0px border-radius trên tất cả card, nút, ảnh và tag — góc sắc là điều bắt buộc" - "Kết hợp hero tối với nút outlined lớn (viền Paper 1px, không fill); fill nó khi hover" - "Áp dụng Figma Sans Display ở 56–86px với tracking -0.02em và line-height 0.90–1.00 cho bất kỳ headline nào cần cảm giác được khắc" - "Đạt tracking 0.03em trên các label nhỏ (13–18px) để tạo độ thoáng cho eyebrow in hoa và nav link" - "Xen kẽ các dải màu full-bleed (Mint Wash #c7f8fb, Emerald Band #24cb71) giữa các section tối và sáng để tạo nhịp điệu thị giác" - "Sử dụng viền Ash (#e2e2e2) 1px để phân cách mảnh; dành viền Ink (#0f0f0f) để nhấn mạnh trên section sáng" - "Giữ UI đơn sắc — chỉ để màu xuất hiện trong tranh tường trang trí và nền ảnh diễn giả, không bao giờ trong controls" không_nên_làm: - "Không thêm border-radius vào bất kỳ element nào — góc sắc định nghĩa tính cách poster của hệ thống" - "Không sử dụng đổ bóng, phát sáng hoặc hiệu ứng mờ — flat là ngôn ngữ elevation duy nhất ở đây" - "Không đưa vào màu CTA có sắc — hệ thống cố tình đơn sắc, hành động là outlined hoặc text-only" - "Không đặt body text dưới 16px; caption có thể xuống 13px nhưng không nhỏ hơn" - "Không để display headline vượt quá line-height 0.90–1.00 — leading chặt là điều khiến chúng mang cảm giác kiến trúc" - "Không color-fill nút với màu thương hiệu; outlined Paper-on-Obsidian là pattern nút duy nhất trong hệ thống" - "Không ngăn cách các section sáng bằng dải xám — chỉ dùng full-bleed color hoặc luồng Paper-to-Paper liền mạch" surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|-------|---------|" info: "| 0 | Dark Hero Canvas | `#000000` | Phần mở đầu, thiết lập tông editorial, chứa Register CTA và tranh tường trang trí |" info: "| 1 | Colored Band | `#c7f8fb` | Dải xanh ngọc ngăn cách hero với nội dung |" info: "| 1 | Colored Band | `#24cb71` | Dải section xanh lá |" info: "| 2 | Paper | `#ffffff` | Canvas nội dung chính cho grid diễn giả và section văn bản |" elevation: info: "Thiết kế phẳng không đổ bóng — sự phân tách đạt được qua cạnh cứng, khối màu và viền mảnh 1px màu Ash (#e2e2e2) hoặc Ink. Việc không có đổ bóng là một lựa chọn editorial có chủ đích: mọi element được in phẳng lên trang như một tấm poster, không bao giờ nổi lên trên nó." imagery: info: "Trang web sử dụng hình minh họa hình học phẳng màu đậm làm dải phân cách hero: hình tròn, chữ nhật, lục giác, chevron và chấm tròn với bảng màu bão hòa (indigo, lavender, teal, maroon, orange, emerald, yellow) với cạnh cứng đường thẳng và không có gradient hay đổ bóng. Ảnh chân dung diễn giả là ảnh đen trắng hoặc giảm bão hòa, mỗi ảnh đặt trên nền màu đặc (mint, emerald, indigo, lavender, orange, yellow) để tạo hiệu ứng poster-grid. Icon tối giản và đơn sắc — một glyph cảnh báo hình tam giác duy nhất là yếu tố iconographic hiển thị. Tổng thể xử lý mang phong cách editorial-poster: không ảnh mềm, không ảnh lối sống, không chiều sâu — mọi thứ hoặc là màu phẳng, chữ phẳng, hoặc ảnh phẳng trên nền màu phẳng." layout: info: "Trang tuân theo mô hình dải từ trên xuống dưới. Mở đầu bằng hero đen full-bleed (khối nội dung căn giữa hoặc căn trái, Register CTA outlined full-width) chảy vào một banner tranh tường hình học cao ~250px trải rộng viewport. Bên dưới tranh tường, một dải xanh ngọc nhạt (Mint Wash) chứa CTA phụ 'Join us virtually!' và thông báo trạng thái sự kiện, tiếp theo là một dải xanh lá tươi (Emerald Band). Trang sau đó kết thúc bằng vùng nội dung trắng max-width 1200px với khoảng cách section dọc 60px, mở đầu bằng section header căn trái (eyebrow + display headline) phía trên grid 4 cột card diễn giả. Navigation là một top bar tối giản — logo trái, 2 text link phải, trong suốt trên hero tối và Paper trên section sáng. Không có sidebar, không có sticky header ngoài nav, và không có modal overlay." agent_prompt_guide: tham_chiếu_màu_nhanh: - "text trên nền sáng: #0f0f0f (Ink)" - "text trên hero tối: #ffffff (Paper)" - "nền trang: #ffffff (Paper)" - "nền hero: #000000 (Obsidian)" - "viền mảnh: #e2e2e2 (Ash)" - "dải section accent 1: #c7f8fb (Mint Wash)" - "dải section accent 2: #24cb71 (Emerald Band)" - "hành động chính: không có màu CTA riêng biệt" ví_dụ_component_prompts: - "**Hero tối với nút Register outlined**: Nền Obsidian (#000000) full-bleed, nội dung căn trái với padding ngang 60px. Eyebrow 'VIRTUAL' ở 13px Figma Sans Text weight 400, in hoa, tracking 0.03em, màu Paper. Headline 'Schema by Figma' ở 72px Figma Sans Display weight 400, line-height 0.90, letter-spacing -1.44px, Paper. Khối ngày/giờ ở 18px Figma Sans Text, Paper, khoảng cách 16px giữa các dòng. Nút Register: full-width trong cột nội dung, cao 64px, viền Paper 1px, radius 0px, không fill, 'Register' ở 24px Figma Sans Text weight 400 căn giữa, chữ Paper." - "**Card diễn giả trong grid 4 cột**: Ảnh chân dung radius 0px, tỷ lệ 1:1, đặt trên nền lavender (#b8b3ff) đặc. Khoảng cách 24px bên dưới ảnh, sau đó tên 'Loredana Crisan' ở 18px Figma Sans Text weight 600 màu Ink, chức danh 'Chief Design Officer / Figma' ở 16px weight 400 màu Ink với khoảng cách dòng 4px. Các card cách nhau 48px dọc và 24px ngang; grid nằm trong container max-width 1200px với padding section 60px phía trên." - "**Dải phân cách tranh tường hình học**: Full-bleed, cao 250px, không padding. Xếp các hình phẳng: hình tròn indigo (#4a4afc) 200px dưới-trái, hình chữ nhật lavender (#b8b3ff) 120px trên-giữa, hình lục giác maroon (#7a2e2e) 80px phải-giữa trên hình vuông mint (#c7f8fb) 120px, hình tròn orange (#ff6b2c) 60px xa bên phải, hình chữ nhật emerald (#24cb71) 180px dưới-phải. Không gradient, không đổ bóng, không border-radius." - "**Section header sáng**: Nền Paper. Eyebrow 'SPEAKERS' ở 13px Figma Sans Text weight 600, in hoa, tracking 0.03em, màu Ink. Khoảng cách 16px đến headline 'Meet our speakers!' ở 56px Figma Sans Display weight 400, line-height 1.00, letter-spacing -1.12px, Ink. Khoảng cách 60px bên dưới đến grid." - "**Thông báo trạng thái sự kiện trên dải màu**: Section full-bleed Mint Wash (#c7f8fb), padding dọc 60px, khối nội dung căn phải. Icon cảnh báo hình tam giác Ink 24px, khoảng cách 16px, nhãn 'Event ended' ở 18px Figma Sans Text weight 600 Ink, subtext 'This event has already ended.' ở 16px weight 400 Ink." similar_brands: - "**Config (Figma's annual conference)** — Cùng typography Figma Sans Display ở tỷ lệ hero, cùng phong cách nghệ thuật poster-mural, cùng UI đơn sắc với dải màu full-bleed" - "**Apple Event pages** — Hero đen với CTA outlined lớn, display type editorial ở tỷ lệ cực đại, chuyển tiếp dải màu full-bleed giữa các section" - "**Figma Config 2022–2024 microsites** — Hệ thống minh họa hình học phẳng màu đặc giống hệt và cặp Figma Sans, với ảnh chân dung diễn giả trên nền màu đặc" - "**Are.na event pages** — Layout editorial-poster, góc 0px sắc, UI đơn sắc được điểm xuyết bằng dải section màu đậm phẳng" - "**It's Nice That conference coverage** — Thẩm mỹ design-zine với headline display cỡ lớn, tracking chặt và khối màu trang trí full-bleed" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-obsidian: #000000; --color-ink: #0f0f0f; --color-paper: #ffffff; --color-ash: #e2e2e2; --color-mint-wash: #c7f8fb; --color-emerald-band: #24cb71; /* Typography — Font Families */ --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-sans-display: 'Figma Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-sans-text: 'Figma Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-mono: 'Figma Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-figma-vf-normal-700-75: 'Figma VF-normal-700-75', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-vf-normal-400-100: 'Figma VF-normal-400-100', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.2; --tracking-caption: -0.26px; --text-body: 16px; --leading-body: 1.2; --text-body-md: 18px; --leading-body-md: 1.22; --tracking-body-md: 0.54px; --text-subheading: 24px; --leading-subheading: 1.2; --tracking-subheading: -0.24px; --text-heading-sm: 32px; --leading-heading-sm: 1.1; --tracking-heading-sm: -0.32px; --text-heading: 56px; --leading-heading: 1; --tracking-heading: -1.12px; --text-heading-lg: 72px; --leading-heading-lg: 0.9; --tracking-heading-lg: -1.44px; --text-display: 86px; --leading-display: 0.9; --tracking-display: -1.72px; /* Typography — Weights */ --font-weight-regular: 400; --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-48: 48px; --spacing-64: 64px; --spacing-80: 80px; --spacing-120: 120px; /* Layout */ --page-max-width: 1200px; --section-gap: 60px; --card-padding: 16px; --element-gap: 24px; /* Border Radius */ --radius-2xl: 20px; /* Named Radii */ --radius-tags: 0px; --radius-cards: 0px; --radius-buttons: 0px; --radius-speaker-images: 0px; /* Surfaces */ --surface-dark-hero-canvas: #000000; --surface-colored-band: #c7f8fb; --surface-colored-band: #24cb71; --surface-paper: #ffffff; } tailwind_v4: css: | @theme { /* Colors */ --color-obsidian: #000000; --color-ink: #0f0f0f; --color-paper: #ffffff; --color-ash: #e2e2e2; --color-mint-wash: #c7f8fb; --color-emerald-band: #24cb71; /* Typography */ --font-source-sans-pro: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-sans-display: 'Figma Sans Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-sans-text: 'Figma Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-mono: 'Figma Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-figma-vf-normal-700-75: 'Figma VF-normal-700-75', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-figma-vf-normal-400-100: 'Figma VF-normal-400-100', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 13px; --leading-caption: 1.2; --tracking-caption: -0.26px; --text-body: 16px; --leading-body: 1.2; --text-body-md: 18px; --leading-body-md: 1.22; --tracking-body-md: 0.54px; --text-subheading: 24px; --leading-subheading: 1.2; --tracking-subheading: -0.24px; --text-heading-sm: 32px; --leading-heading-sm: 1.1; --tracking-heading-sm: -0.32px; --text-heading: 56px; --leading-heading: 1; --tracking-heading: -1.12px; --text-heading-lg: 72px; --leading-heading-lg: 0.9; --tracking-heading-lg: -1.44px; --text-display: 86px; --leading-display: 0.9; --tracking-display: -1.72px; /* Spacing */ --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px; --spacing-80: 80px; --spacing-120: 120px; /* Border Radius */ --radius-2xl: 20px; }