# Aurora > # Aurora — Style Reference ## Prompt Content ``` # Aurora — Style Reference > chân trời tự chủ lúc bình minh — buồng lái trắng tinh nhìn ra xa lộ ngập nắng, một mặt đồng hồ xanh điện trên dashboard. **Theme:** light Giao diện của Aurora giống một xa lộ mở: canvas trắng trải rộng, chữ navy đậm đọc như vạch kẻ đường, và một điểm nhấn xanh điện duy nhất báo hiệu hành động giống như đèn xi-nhan. Hero là góc nhìn dashcam full-bleed với headline trắng 90px đè lên — ảnh chụp đảm nhận vai trò cảm xúc, UI đứng sang một bên. Bên dưới fold, bề mặt chuyển sang card xám nhạt mát, đoạn văn hiện dần từng chữ khi người dùng scroll, và gradient cyan-to-cobalt đặc trưng chỉ dành cho những khoảnh khắc xứng đáng với tên tuổi thương hiệu — hiếm hoi, sống động, luôn có chủ đích. Mọi thứ đều là hình chữ nhật với góc bo 8px, không đổ bóng, không trang trí hoa mỹ; chiều sâu đến từ việc xếp lớp màu sắc và tỷ lệ, không bao giờ đến từ độ cao. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Horizon Navy | `#001733` | `--color-horizon-navy` | Văn bản chính, nav text, heading fills, viền ảnh tối, nền section — mực chủ đạo của hệ thống, không bao giờ là đen tuyền | | Signal Blue | `linear-gradient(269.64deg, #18dcdc -20.36%, #006aed 109.5%)` | `--color-signal-blue` | Nền action chính, nút CTA đã fill, trạng thái nav active, nút icon tròn, link accent trên bề mặt tối — cobalt sống động xứng đáng với cú click; Gradient đặc trưng cho những khoảnh khắc định nghĩa thương hiệu — nơi duy nhất cyan xuất hiện, neo giữ nhận diện thị giác | | Cyan Dawn | `#18dcdc` | `--color-cyan-dawn` | Gradient stop cho gradient đặc trưng của Aurora — không bao giờ dùng làm fill đặc, chỉ là nốt mở đầu của dải quang phổ | | Slate Whisper | `#68748d` | `--color-slate-whisper` | Body text phụ, helper copy mờ, meta không active — xám mát lùi lại phía sau Horizon Navy | | Graphite Dim | `#464e5d` | `--color-graphite-dim` | Văn bản cấp ba và viền link trong ngữ cảnh body — tối hơn Slate nửa bậc để nhấn nhẹ | | Fog | `#d1d6e0` | `--color-fog` | Gạch chân heading, hairline borders trên phần tử gần chữ — nét stroke nhìn thấy nhẹ nhất trong hệ thống | | Mist | `#e6e9f0` | `--color-mist` | Section divider, card borders, footer separators — xám mát gần như vô hình để phân cách cấu trúc | | Hailstone | `#f3f4f8` | `--color-hailstone` | Bề mặt card, nền panel phụ, highlight wash nhẹ — bước đầu tiên rời khỏi trắng tinh | | Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, nền nav, card fill, chữ nút trên Signal Blue — nền tảng mọi thứ khác nổi lên trên | | Coal | `#000000` | `--color-coal` | Icon fill trên bề mặt sáng, fallback section tối full-bleed, logo mark — dùng hạn chế, Horizon Navy xử lý hầu hết các tác vụ tối | ## Tokens — Typography ### Inter — Tất cả interface và editorial type — Inter là typeface duy nhất. Weight 500 cho nav và label, weight 400 cho body, weight 600 để nhấn mạnh trong body. Dải kích thước cực rộng (caption 12px đến display 90px) với tracking tight ở đầu lớn khiến Inter mang cảm giác kiến trúc hơn là thân thiện; nó mang tinh thần xa lộ lúc bình minh. · `--font-inter` - **Thay thế:** system-ui, -apple-system, 'Segoe UI', sans-serif - **Weights:** 400, 500, 600 - **Cỡ chữ:** 12, 14, 16, 20, 24, 36, 44, 52, 64, 90 - **Line height:** 0.96, 1.20, 1.30, 1.40, 1.50 - **Letter spacing:** -0.04em ở 64-90px, -0.038em ở 36-44px, -0.03em ở 20-24px, normal ở 12-16px - **OpenType features:** `'ss01' on, 'cv11' on` - **Vai trò:** Tất cả interface và editorial type — Inter là typeface duy nhất. Weight 500 cho nav và label, weight 400 cho body, weight 600 để nhấn mạnh trong body. Dải kích thước cực rộng (caption 12px đến display 90px) với tracking tight ở đầu lớn khiến Inter mang cảm giác kiến trúc hơn là thân thiện; nó mang tinh thần xa lộ lúc bình minh. ### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial` - **Weights:** 400 - **Cỡ chữ:** 13px - **Line height:** 1.2 - **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả ### Type Scale | Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.3 | — | `--text-caption` | | body-sm | 14px | 1.4 | — | `--text-body-sm` | | body | 16px | 1.5 | — | `--text-body` | | subheading | 20px | 1.2 | -0.6px | `--text-subheading` | | subheading-lg | 24px | 1.2 | -0.72px | `--text-subheading-lg` | | heading-sm | 36px | 1.1 | -1.368px | `--text-heading-sm` | | heading | 44px | 1 | -1.672px | `--text-heading` | | heading-lg | 52px | 0.97 | -2.08px | `--text-heading-lg` | | display | 64px | 0.96 | -2.56px | `--text-display` | | hero | 90px | 0.96 | -3.6px | `--text-hero` | ## Tokens — Spacing & Shapes **Đơn vị cơ bản:** 4px **Density:** comfortable ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 4 | 4px | `--spacing-4` | | 8 | 8px | `--spacing-8` | | 12 | 12px | `--spacing-12` | | 16 | 16px | `--spacing-16` | | 20 | 20px | `--spacing-20` | | 24 | 24px | `--spacing-24` | | 28 | 28px | `--spacing-28` | | 32 | 32px | `--spacing-32` | | 36 | 36px | `--spacing-36` | | 44 | 44px | `--spacing-44` | | 48 | 48px | `--spacing-48` | | 72 | 72px | `--spacing-72` | | 80 | 80px | `--spacing-80` | | 116 | 116px | `--spacing-116` | | 120 | 120px | `--spacing-120` | | 128 | 128px | `--spacing-128` | ### Border Radius | Phần tử | Giá trị | |---------|-------| | cards | 8px | | badges | 4px | | buttons | 8px | | iconButtons | 9999px | ### Layout - **Page max-width:** 1280px - **Section gap:** 96px - **Card padding:** 24px - **Element gap:** 8px ## Components ### Top Navigation Bar **Vai trò:** Điều hướng chính của site Nền Paper White, cao 64-72px, fixed ở đầu trang. Logo (Aurora wordmark + ký hiệu vòng cung) căn trái ở 20px. Nav links bằng Inter 14px weight 500 Horizon Navy, gap ngang 28px. Primary CTA 'Schedule a call →' ở xa bên phải dưới dạng nút Signal Blue đã fill với chữ Paper White và icon mũi tên nhỏ. Không đổ bóng — nav đọc như một phần liền mạch của canvas. ### Primary Filled Button **Vai trò:** Call-to-action chính Nền Signal Blue (#006aed), chữ Paper White (#ffffff), Inter 14px weight 500, radius 8px. Padding ngang 16px, padding dọc 14px. Icon mũi tên inline (→) cỡ 12px ở bên phải label. Dùng cho 'Schedule a call', form submit, và các khoảnh khắc chuyển đổi cấp cao nhất. ### Ghost Text Link **Vai trò:** Điều hướng inline phụ Không nền, không viền. Inter 14px weight 500 Horizon Navy, tùy chọn gạch chân khi hover. Radius 8px (chỉ quan trọng cho focus ring). Dùng trong nav, footer, và tham chiếu inline trong body. ### Circular Arrow Button **Vai trò:** Tín hiệu tiếp tục trên card Hình tròn hoàn hảo (radius 9999px), đường kính 48-56px, nền Signal Blue, icon mũi tên phải Paper White căn giữa. Nằm ở góc dưới bên phải của Experience Cards. Hình tròn cố tình phá vỡ quy tắc 8px rectilinear của hệ thống — đây là nơi duy nhất Aurora cho phép đường cong, thu hút mắt vào call-to-action. ### Hero Video Section **Vai trò:** Tuyên ngôn thương hiệu above-the-fold Video nền full-viewport-height (100vh) góc nhìn dashcam trên xa lộ, hơi tối đi với lớp phủ Horizon Navy ở độ mờ ~30%. Headline đè lên bằng Inter weight 400 (hoặc 500) cỡ 64-90px, Paper White, căn trái, nằm ở 1/3 dưới bên trái. Một Experience Card nổi ở góc dưới bên phải. Một stats bar chạy dọc theo cạnh dưới. ### Hero Stats Bar **Vai trờ:** Ticker uy tín Dải full-width ở cuối hero, trong suốt hoặc Paper White ở độ mờ 80%. Bốn khối stat phân bố đều: label tracking chữ hoa nhỏ (12px Inter 500, letter-spacing 0.08em, Horizon Navy) phía trên một con số lớn hơn (14-16px Inter 400, Horizon Navy). Phân cách bởi hairline Mist 1px. ### Experience Card **Vai trò:** Callout nội dung nổi bật nổi trên hero Card Paper White, radius 8px, rộng khoảng 360px. Trên cùng: ảnh chụp một chiếc xe tải, full-bleed đến mép card, không ghi đè radius trên. Bên dưới: padding 16px xung quanh label 'EXPERIENCING' chữ hoa nhỏ (10-12px Inter 500, letter-spacing 0.12em, Slate Whisper) và một title link (16px Inter 500 Horizon Navy) đọc 'Meet the Aurora Driver'. Circular Arrow Button ở góc dưới bên phải. ### Text Reveal Section **Vai trò:** Editorial copy điều khiển bằng scroll Cột căn giữa hoặc căn phải ở 50% chiều rộng trang, tối đa 540px. Inter 24-36px weight 400, line-height 1.4-1.5. Copy bắt đầu ở Fog (#d1d6e0) và dần dần chuyển sang Horizon Navy (#001733) khi vào viewport — hiệu ứng opacity hiện dần từng chữ hoặc từng dòng. Nhiều đoạn văn nối tiếp nhau, mỗi đoạn cách nhau 40-60px dọc. ### Product Image Tile **Vai trò:** Trưng bày ảnh chụp xe tải Ảnh chụp xe tải gắn Aurora (góc 3/4 phía trước ưu tiên), cạnh sắc (radius 8px) hoặc crop hình chữ nhật cứng, không có chữ đè lên. Tỷ lệ khung hình thay đổi (3:2 hoặc 4:3) nhưng các tile căn chỉnh theo cột masonry lỏng ở bên trái trang. Khoảng cách giữa các tile: 24px dọc. ### Eyebrow Label / Badge **Vai trò:** Phân loại section và tag Inter 10-12px weight 500, letter-spacing 0.10-0.14em chữ hoa. Không nền fill — chỉ text, Slate Whisper hoặc Horizon Navy. Radius 4px dành cho badge đã fill hiếm hoi (không có nền fill, chỉ là hộp padding 4px). Nằm phía trên title section như một pre-header nhẹ nhàng. ### Section Divider **Vai trò:** Phân cách cấu trúc giữa các dải trang Hairline ngang 1px duy nhất bằng Mist (#e6e9f0), full container width, không trang trí khác. Khoảng cách 96px phía trên và dưới đường kẻ. Không có dải nền xen kẽ — trang là Paper White xuyên suốt, card Hailstone tạo nhịp điệu thị giác duy nhất. ### Nav Footer **Vai trò:** Điều hướng cuối trang và pháp lý Viền trên 1px Mist. Inter 14px weight 400 Slate Whisper cho pháp lý, 14px weight 500 Horizon Navy cho cột link. Ba hoặc bốn cột link căn trái, brand mark và bản quyền căn phải. Không nền fill — nằm trên Paper White. ## Do's and Don'ts ### Nên làm - Dùng Inter ở mọi cấp độ — không bao giờ thay thế bằng typeface phụ; sự nhất quán về typography chính là thương hiệu. - Đặt display type (52-90px) ở line-height 0.96-1.00 với letter-spacing -0.04em — tracking tight khiến headline trông như một khối kiến trúc duy nhất, không phải một câu. - Dùng Signal Blue (#006aed) cho chính xác một mục đích trên mỗi bề mặt: action chính. Không bao giờ dùng làm trang trí, không bao giờ làm nền fill, không bao giờ trên phần tử thụ động. - Dành gradient Aurora Spectrum cho một hoặc hai khoảnh khắc định nghĩa thương hiệu trên mỗi trang — logo, hero, hoặc một feature spotlight duy nhất. Coi nó như một mẫu sơn, không phải một chủ đề. - Xếp lớp chiều sâu bằng màu bề mặt (Paper White → Hailstone → Signal Blue → Horizon Navy) thay vì box-shadow. Bóng đổ không tồn tại trong hệ thống này. - Giữ tất cả góc container ở 8px và tất cả badge ở 4px. Hình tròn duy nhất trong hệ thống là Circular Arrow Button — hãy để nó là duy nhất. - Căn trái headline và để chúng thở với lề trái. Hero headline neo ở 1/3 dưới bên trái; không bao giờ căn giữa. ### Không nên làm - Không dùng đen tuyền (#000000) cho body text — Horizon Navy (#001733) là mực. Dành màu đen cho icon, logo, và bề mặt đảo ngược hiếm hoi. - Không thêm box-shadow vào card, button, nav, hoặc modal. Độ cao đến từ sự thay đổi màu bề mặt, không bao giờ từ blur. - Không đưa vào màu nhấn phụ. Hệ thống là đơn sắc: mực Horizon Navy, action Signal Blue, gradient Aurora Spectrum. Không xanh lá, cam, hoặc hồng. - Không căn giữa đoạn văn body. Text Reveal Sections và tất cả editorial copy đều căn trái (hoặc thỉnh thoảng căn phải trong cột phải) — text căn giữa phá vỡ ẩn dụ xa lộ. - Không dùng pill buttons (radius 9999px) cho CTA tiêu chuẩn. Circular Arrow Button là phần tử tròn duy nhất; mọi thứ khác là 8px. - Không áp dụng letter-spacing -0.04em cho body text dưới 20px. Tracking tight chỉ là xử lý display — body type nên thở ở tracking normal. - Không dùng icon màu Signal Blue trừ khi chúng ở bên trong Circular Arrow Button. Icon ở nơi khác là Coal (#000000) hoặc Horizon Navy. ## Surfaces | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|-------|---------| | 0 | Paper White Canvas | `#ffffff` | Nền toàn trang, lớp nền text hero overlay, nền nav | | 1 | Hailstone Card | `#f3f4f8` | Bề mặt card nâng cao, panel phụ, input wells | | 2 | Mist Border | `#e6e9f0` | Hairline structural dividers, footer separators | | 3 | Signal Blue Accent | `#006aed` | CTA fills, trạng thái active, nút icon tròn | | 4 | Horizon Navy Field | `#001733` | Lớp phủ video hero tối, làm tối section, inverted cards | ## Elevation Aurora không có bóng đổ. Chiều sâu được xây dựng hoàn toàn từ việc xếp lớp màu bề mặt: Paper White canvas → Hailstone card → Signal Blue accent → Horizon Navy field. Hệ thống coi box-shadow như một khái niệm xa lạ; nếu một component cần cảm giác 'nổi lên trên', nó sẽ nhận màu bề mặt tối hơn, không phải blur. ## Imagery Hình ảnh là nhiếp ảnh tài liệu xa lộ — góc nhìn dashcam của xe tải thật trên xa lộ thật, chụp dưới ánh sáng ban ngày tự nhiên, hơi giảm bão hòa. Không studio lighting, không CGI, không abstract gradients. Hero là góc nhìn kính chắn gió người thứ nhất đặt người xem vào bên trong xe. Ảnh hỗ trợ cho thấy phần cứng của Aurora gắn trên xe tải thật (cận cảnh mảng cảm biến, vòm lidar, giá nóc) với tính chân thực gồ ghề — dầu mỡ, nhựa đường, chrome. Hình ảnh được chứa trong khung radius 8px, không bao giờ full-bleed ngoại trừ hero và header Experience Card. Xử lý màu tự nhiên; không duotone, không lớp phủ tint. Ảnh trưng bày sản phẩm chiếm ưu thế hơn lifestyle hoặc hình ảnh trừu tượng — xe tải CHÍNH LÀ thương hiệu. ## Layout Hero video full-bleed chiếm 100vh, với nav fixed phía trên đè lên. Bên dưới fold, nội dung nằm trong container max-width 1280px, căn trái. Trang xen kẽ giữa hai cột neo trái: cột hẹp bên trái (rộng 40%) chứa ảnh sản phẩm xếp chồng theo masonry lỏng, và cột rộng bên phải (rộng 50-55%) chứa editorial copy hiện dần khi scroll. Các section được phân cách bởi gap dọc 96px và một hairline Mist 1px duy nhất. Không card grids, không pricing tables, không feature matrices — layout là editorial, không phải dashboard. Navigation là một thanh ngang duy nhất; không sidebar, không mega-menu. Trang đọc từ trên xuống dưới như một câu chuyện tuyến tính duy nhất, không phải một trung tâm link. ## Text Reveal Pattern Chuyển động đặc trưng của Aurora. Đoạn văn editorial bắt đầu ở độ mờ 25% trong Fog (#d1d6e0) và dần dần chuyển sang độ mờ hoàn toàn trong Horizon Navy (#001733) khi mỗi từ hoặc dòng vượt qua đường trung tâm viewport. Cách triển khai: chia text thành các span, gắn opacity với vị trí scroll qua IntersectionObserver, stagger 40ms mỗi từ. Đây không phải fade — đó là hiệu ứng mực dần dần thấm vào, phản chiếu ẩn dụ 'tự chủ dần dần' của thương hiệu. Không bao giờ dùng hiệu ứng này trên nav, button, hoặc meta label; chỉ dành cho đoạn văn body từ 20 từ trở lên. Quá trình hiện mất khoảng 1.2 giây cho mỗi đoạn văn. ## Gradient Discipline Gradient Aurora Spectrum (Cyan Dawn → Signal Blue) là tên tuổi thương hiệu được hiện thực hóa. Nó xuất hiện trong chính xác ba ngữ cảnh: (1) nền hoặc điểm nhấn logo wordmark, (2) một tuyên bố thương hiệu cấp hero duy nhất, và (3) khối highlight tính năng hiếm hoi. Nó không bao giờ xuất hiện trên button, không bao giờ trên nền của section nhiều màn hình, và không bao giờ là trạng thái hover. Khi bạn dùng nó, bạn đang nói 'đây là khoảnh khắc Aurora' — vì vậy hãy dùng nó tối đa một lần mỗi trang. ## Agent Prompt Guide primary action: #006aed (filled action) Tạo Primary Action Button: nền #006aed, chữ #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng xử lý đã fill này cho CTA chính. ## Similar Brands - **Waymo** — Cùng thẩm mỹ nhiếp ảnh tài liệu xa lộ và layout editorial canvas sáng; cả hai đều xử lý chủ đề tự lái như phóng sự trung thực thay vì cảnh tượng khoa học viễn tưởng - **Rivian** — Cùng hệ thống typography navy-đậm-trên-trắng với một điểm nhấn action xanh dương duy nhất và tracking tight trên display headline cỡ lớn - **Tesla Energy** — Cùng ngôn ngữ component rectilinear radius 8px, không bóng đổ, chiều sâu chỉ từ màu bề mặt, và một màu action chính sáng trên nền bảng màu gần như đơn sắc - **Figure AI** — Cùng pattern scroll-reveal editorial, ảnh sản phẩm cột trái ghép với text tiến triển cột phải, và bảng màu hạn chế với một điểm nhấn xanh dương duy nhất ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-horizon-navy: #001733; --color-signal-blue: #006aed; --gradient-signal-blue: linear-gradient(269.64deg, #18dcdc -20.36%, #006aed 109.5%); --color-cyan-dawn: #18dcdc; --color-slate-whisper: #68748d; --color-graphite-dim: #464e5d; --color-fog: #d1d6e0; --color-mist: #e6e9f0; --color-hailstone: #f3f4f8; --color-paper-white: #ffffff; --color-coal: #000000; /* Typography — Font Families */ --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.3; --text-body-sm: 14px; --leading-body-sm: 1.4; --text-body: 16px; --leading-body: 1.5; --text-subheading: 20px; --leading-subheading: 1.2; --tracking-subheading: -0.6px; --text-subheading-lg: 24px; --leading-subheading-lg: 1.2; --tracking-subheading-lg: -0.72px; --text-heading-sm: 36px; --leading-heading-sm: 1.1; --tracking-heading-sm: -1.368px; --text-heading: 44px; --leading-heading: 1; --tracking-heading: -1.672px; --text-heading-lg: 52px; --leading-heading-lg: 0.97; --tracking-heading-lg: -2.08px; --text-display: 64px; --leading-display: 0.96; --tracking-display: -2.56px; --text-hero: 90px; --leading-hero: 0.96; --tracking-hero: -3.6px; /* 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-36: 36px; --spacing-44: 44px; --spacing-48: 48px; --spacing-72: 72px; --spacing-80: 80px; --spacing-116: 116px; --spacing-120: 120px; --spacing-128: 128px; /* Layout */ --page-max-width: 1280px; --section-gap: 96px; --card-padding: 24px; --element-gap: 8px; /* Border Radius */ --radius-md: 4px; --radius-lg: 8px; /* Named Radii */ --radius-cards: 8px; --radius-badges: 4px; --radius-buttons: 8px; --radius-iconbuttons: 9999px; /* Surfaces */ --surface-paper-white-canvas: #ffffff; --surface-hailstone-card: #f3f4f8; --surface-mist-border: #e6e9f0; --surface-signal-blue-accent: #006aed; --surface-horizon-navy-field: #001733; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-horizon-navy: #001733; --color-signal-blue: #006aed; --color-cyan-dawn: #18dcdc; --color-slate-whisper: #68748d; --color-graphite-dim: #464e5d; --color-fog: #d1d6e0; --color-mist: #e6e9f0; --color-hailstone: #f3f4f8; --color-paper-white: #ffffff; --color-coal: #000000; /* Typography */ --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.3; --text-body-sm: 14px; --leading-body-sm: 1.4; --text-body: 16px; --leading-body: 1.5; --text-subheading: 20px; --leading-subheading: 1.2; --tracking-subheading: -0.6px; --text-subheading-lg: 24px; --leading-subheading-lg: 1.2; --tracking-subheading-lg: -0.72px; --text-heading-sm: 36px; --leading-heading-sm: 1.1; --tracking-heading-sm: -1.368px; --text-heading: 44px; --leading-heading: 1; --tracking-heading: -1.672px; --text-heading-lg: 52px; --leading-heading-lg: 0.97; --tracking-heading-lg: -2.08px; --text-display: 64px; --leading-display: 0.96; --tracking-display: -2.56px; --text-hero: 90px; --leading-hero: 0.96; --tracking-hero: -3.6px; /* 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-36: 36px; --spacing-44: 44px; --spacing-48: 48px; --spacing-72: 72px; --spacing-80: 80px; --spacing-116: 116px; --spacing-120: 120px; --spacing-128: 128px; /* Border Radius */ --radius-md: 4px; --radius-lg: 8px; } ```