# WalletConnect > # WalletConnect — Style Reference **WalletConnect** sử dụng phong cách thiết kế tối giản, tập trung vào độ rõ ràng và tin cậy. Giao diện ưu tiên typography sans-serif nhẹ, khoảng trắng rộng rãi và bảng màu trung tính với điểm nhấn xanh dương tinh tế. Các thành phần như card, button và modal được bo tròn nhẹ, tạo cảm giác hiện đại và dễ tiếp cận. Hệ thống lưới (grid) linh hoạt, hỗ trợ responsive, giúp nội dung luôn được trình bày gọn gàng trên mọi thiết bị. Biểu tượng (icon) và illustration được đơn giản hó ## Prompt Content ``` # WalletConnect — Style Reference > Những khối cobalt trên nền giấy da — các monolith xanh lam bão hòa nổi trên sa mạc trắng ấm, với các góc bo tròn làm mềm vẻ kỹ thuật nghiêm túc. **Theme:** light WalletConnect Pay là một thương hiệu thanh toán crypto xanh điện nằm gọn trong một canvas sạch, sáng: bề mặt off-white ấm áp, typography indigo-đen, và các card bo tròn cỡ lớn mang cảm giác consumer fintech hơn là công cụ hạ tầng. Điểm nhấn đặc trưng là một hero panel cobalt rực rỡ (radius 40px) đặt trên nền gần trắng, neo giữ một layout xen kẽ giữa ảnh sản phẩm full-bleed và khoảng trắng rộng rãi. Typography sử dụng KHTeka, một geometric humanist mang giọng điệu kỹ thuật nhưng thân thiện ở các weight 400–700, với màu navy đậm #1b2045 thay thế cho đen thuần để tạo cảm giác đọc ấm hơn. Các component tối giản một cách tự tin — pill-shaped buttons, ghost CTA, hairline borders, và hầu như không có shadow, để màu xanh bão hòa làm tất cả công việc tạo cảm xúc. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Electric Cobalt | `#006cff` | `--color-electric-cobalt` | Hero panels, filled buttons, active nav indicators, link accents — tín hiệu thương hiệu chính, được dùng như một bề mặt full-bleed thay vì màu nút nhỏ để chiếm ưu thế trên trang | | Indigo Action | `#4672ff` | `--color-indigo-action` | Primary filled action buttons và border của chúng — một màu xanh hơi sáng hơn, thiên về tím dành cho các bề mặt tương tác cần cảm giác được nhấn và có thể click | | Deep Indigo | `#1b2045` | `--color-deep-indigo` | Primary text, headings, và dark button borders — thay thế đen thuần bằng một navy ấm mang vẻ uy quyền mà không gay gắt như #000 | | Sky Tint | `#66a7ff` | `--color-sky-tint` | Hover states, subtle outlined button borders, secondary navigation accents — một companion desaturated của Electric Cobalt cho các khoảnh khắc xanh không chiếm ưu thế | | Glacial Wash | `#cce2ff` | `--color-glacial-wash` | Nền xanh nhạt, soft highlight washes, tag fills, và light section dividers — kết nối canvas trắng với thương hiệu xanh mà không có độ tương phản gay gắt | | Parchment | `#f9f9f9` | `--color-parchment` | Page background canvas — một màu gần trắng ấm làm mềm sự khô cứng của trắng thuần và giảm mỏi mắt khi lướt trang dài | | Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, input fields, button text, elevated panels — lớp bề mặt sáng nhất nằm trên Parchment | | Mist | `#e9e9e9` | `--color-mist` | Hairline borders, input outlines, subtle dividers giữa các section — màu đường viền cấu trúc yên tĩnh nhất | | Silver | `#bbbbbb` | `--color-silver` | Secondary surface fills, placeholder backgrounds, disabled states | | Pewter | `#b3b3b3` | `--color-pewter` | Shadow base color và muted icon tints | | Fog | `#9a9a9a` | `--color-fog` | Muted body text, secondary metadata, inactive form labels | | Steel | `#787878` | `--color-steel` | Input placeholder text, tertiary captions, subtle icon strokes | | Slate | `#6c6c6c` | `--color-slate` | Link text ở trạng thái nghỉ, secondary body copy | | Graphite | `#4f4f4f` | `--color-graphite` | Mid-tier body text, descriptions, helper copy cần lùi lại sau headings | | Charcoal | `#303030` | `--color-charcoal` | Dark section borders, footer dividers | | Obsidian | `#202020` | `--color-obsidian` | Dark footer background, dark section panels, card borders trên bề mặt sáng — màu bề mặt tối của hệ thống, được dùng như một dải có chủ đích thay vì rải rác | | Cobalt Radial | `radial-gradient(78.13% 78.13% at 79.97% 80.72%, rgb(9, 159, 240) 0%, rgb(9, 121, 240) 100%)` | `--color-cobalt-radial` | Radial gradient highlight accent — dùng có chừng mực như một điểm sáng phát quang bên trong blue panels để tạo chiều sâu | ## Tokens — Typography ### KHTeka — Primary interface and headline typeface — một geometric humanist sans với tỷ lệ hơi nén và tính trung lập thân thiện với công nghệ. Được dùng trong mọi ngữ cảnh (heading, body, button, nav, card, badge, icon, input) ở mọi kích thước đo lường. Display weight 700 ở 36px là giọng headline đặc trưng; 16px weight 400 là body text thoải mái để đọc. · `--font-khteka` - **Thay thế:** Inter hoặc DM Sans - **Weights:** 400, 500, 700 - **Kích thước:** 13, 14, 16, 18, 20, 24, 30, 36 - **Line height:** 1.00–1.71 (responsive theo kích thước: tight 1.00 ở display, generous 1.71 ở body) - **Letter spacing:** normal ở mọi kích thước — không phát hiện tracking adjustment - **Vai trò:** Primary interface and headline typeface — một geometric humanist sans với tỷ lệ hơi nén và tính trung lập thân thiện với công nghệ. Được dùng trong mọi ngữ cảnh (heading, body, button, nav, card, badge, icon, input) ở mọi kích thước đo lường. Display weight 700 ở 36px là giọng headline đặc trưng; 16px weight 400 là body text thoải mái để đọc. ### Roboto — Secondary system font — xuất hiện trong modals, cookie banners, và bất kỳ overlay/dialog content nào. Sự hiện diện của nó gợi ý system-stack fallbacks cho third-party injected UI thay vì một lựa chọn thương hiệu phụ có chủ đích. · `--font-roboto` - **Thay thế:** System UI sans-serif - **Weights:** 400, 500, 700 - **Kích thước:** 12, 16, 17 - **Line height:** 1.41–2.00 - **Vai trò:** Secondary system font — xuất hiện trong modals, cookie banners, và bất kỳ overlay/dialog content nào. Sự hiện diện của nó gợi ý system-stack fallbacks cho third-party injected UI thay vì một lựa chọn thương hiệu phụ có chủ đích. ### KHTeka Mono — Monospaced companion cho code snippets, wallet addresses, transaction hashes, và bất kỳ chuỗi chữ-số nào cần căn chỉnh từng ký tự trong ngữ cảnh card · `--font-khteka-mono` - **Thay thế:** JetBrains Mono hoặc IBM Plex Mono - **Weights:** 400 - **Kích thước:** 12, 14 - **Line height:** 1.33–1.43 - **Vai trò:** Monospaced companion cho code snippets, wallet addresses, transaction hashes, và bất kỳ chuỗi chữ-số nào cần căn chỉnh từng ký tự trong ngữ cảnh card ### Type Scale | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |---------|------------|-------------|----------------|-------| | caption | 12px | 1.43 | — | `--text-caption` | | subheading | 18px | 1.4 | — | `--text-subheading` | | heading-sm | 20px | 1.33 | — | `--text-heading-sm` | | heading | 24px | 1.2 | — | `--text-heading` | | heading-lg | 30px | 1.11 | — | `--text-heading-lg` | | display | 36px | 1 | — | `--text-display` | ## Tokens — Spacing & Shapes **Base unit:** 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` | | 24 | 24px | `--spacing-24` | | 32 | 32px | `--spacing-32` | | 40 | 40px | `--spacing-40` | | 48 | 48px | `--spacing-48` | | 64 | 64px | `--spacing-64` | | 72 | 72px | `--spacing-72` | ### Border Radius | Element | Giá trị | |---------|---------| | nav | 16px | | tags | 3px | | cards | 40px | | images | 40px | | inputs | 16px | | buttons | 16px | | heroPanels | 40px | ### Shadows | Tên | Giá trị | Token | |-----|---------|-------| | sm | `rgba(0, 0, 0, 0.3) 0px 0px 8px 0px` | `--shadow-sm` | ### Layout - **Page max-width:** 1200px - **Section gap:** 64px - **Card padding:** 24px - **Element gap:** 8px ## Components ### Filled Primary Button **Vai trò:** Main call-to-action Background #006cff, text #ffffff ở KHTeka 16px weight 500, border-radius 16px, padding dọc 11px với padding ngang 16-20px. Không border hoặc border trùng với background. Hover chuyển sang cobalt hơi sáng hơn. ### Ghost Text Button **Vai trò:** Secondary action lùi lại Transparent background, không border, text màu Deep Indigo #1b2045 ở KHTeka 16px weight 500. Dùng cho 'Docs' và các link ưu tiên thấp nằm cạnh một filled CTA. Underline xuất hiện khi hover. ### Outlined Dark Button **Vai trò:** Secondary action trên nền sáng Transparent background, border 1px màu #202020 hoặc Deep Indigo #1b2045, text trùng màu border, radius 16px, padding dọc 11px. Dùng cho CTA 'Contact Sales' — outline truyền tải trọng số phụ mà không biến mất. ### Pill Navigation Button **Vai trò:** Top nav action items (Request Demo, Docs) Filled blue (#006cff) cho primary nav actions, white background với dark text cho secondary. Radius 16px, padding dọc 8-12px, padding ngang 16-20px. Nhỏ gọn, bo tròn, nằm inline trong top bar. ### Hero Brand Panel **Vai trò:** Large section background mang màu thương hiệu Full Electric Cobalt #006cff background, border-radius 40px ở mọi góc, internal padding rộng 48-64px. Chứa white KHTeka display headline (30-36px weight 700), white body subtext, và một product mockup chồm ra mép phải. Đây là đơn vị hình ảnh đặc trưng của site. ### Product Showcase Card **Vai trò:** Large rounded container cho phone/app mockups Border-radius 40px, white hoặc light background, internal padding 16-24px, thường không có border nhìn thấy — chỉ riêng radius đã định nghĩa cạnh card. Có thể chứa ảnh chụp màn hình sản phẩm full-bleed theo cùng radius 40px. ### Content Card **Vai trò:** Standard card cho feature blocks, text groupings Border-radius 16-40px (40px cho large feature cards, 16px cho tighter info cards), background #ffffff, border 1px Mist #e9e9e9, padding 24px. Border 1px được ưu tiên hơn shadow để định nghĩa. ### Top Banner Bar **Vai trò:** Slim promotional strip phía trên nav Electric Cobalt #006cff full-width band, white text ở 14-16px KHTeka, có thể có close button bên phải. Chiều cao ~40-48px. Sticky hoặc static tùy trang. ### Dark Footer **Vai trò:** Dark band kết thúc trang với newsletter và social links Background Obsidian #202020, text màu trắng và xám nhạt (#bbbbbb, #787878), newsletter input với radius 16px, social link list căn phải. Top padding 40-48px, bottom padding 64px. ### Newsletter Input + Subscribe **Vai trò:** Email capture trong dark footer Dark input field với radius 16px, white text trên nền transparent hoặc gần đen, nút 'Subscribe' màu trắng bên cạnh (filled white trên nền tối). Padding dọc 12px, border 1px Charcoal #303030. ### Cookie Preference Modal **Vai trò:** GDPR consent dialog overlay Bề mặt #ffffff, radius 16-20px, internal padding rộng (24-32px), checkbox rows với Deep Indigo labels, Indigo Action #4672ff filled buttons ('Decline All' outlined, 'Allow All' filled) ở góc dưới bên phải. ### Navigation Header **Vai trò:** Top-level site navigation Transparent hoặc white background, logo WalletConnect Pay căn trái (blue wordmark với wave icon), nav links ở giữa hoặc phải (Solutions, About, Blog) ở KHTeka 16px weight 400, action buttons (Request Demo filled, Docs ghost) ở xa nhất bên phải. Chiều cao 64-80px. ### Icon Set **Vai trò:** Inline và standalone icons Outlined hoặc thin-stroke style icons trong KHTeka hoặc bộ geometric phù hợp, stroke weight 1.5-2px, kích thước 16-24px. Màu mặc định Deep Indigo hoặc white trên blue panels. Dấu wave/connection trong logo là glyph riêng của thương hiệu. ### Tag/Badge **Vai trò:** Small inline labels cho categories, status, hoặc metadata Border-radius 3px, padding dọc 8-12px, padding ngang 12-16px, background Glacial Wash #cce2ff hoặc Mist #e9e9e9, text Deep Indigo #1b2045 ở KHTeka 12-13px weight 500. ## Do's and Don'ts ### Nên - Dùng border-radius 40px cho tất cả large cards, hero panels, và image containers — đây là độ mềm đặc trưng của hệ thống - Dùng border-radius 16px cho buttons, inputs, và nav elements để tạo hệ thống phân cấp rõ ràng: bo tròn nhỏ cho interactive, bo tròn lớn cho content - Đặt primary text bằng Deep Indigo #1b2045, không phải đen thuần — navy ấm giữ cho thiết kế không bị gay gắt - Dành Electric Cobalt #006cff cho các bề mặt lớn (hero panels, banner bars) và filled primary buttons — để nó chiếm ưu thế trên một dải thay vì rải rác như các điểm nhấn nhỏ - Dùng KHTeka ở weight 400 cho body, 500 cho UI controls và links, 700 cho display headlines — hệ thống phân cấp ba weight là đủ - Ưu tiên border 1px Mist #e9e9e9 hơn shadow để định nghĩa card; hệ thống được điều khiển bởi border, không phải shadow - Căn giữa các trang ở max-width 1200px và dùng section gap 64px để duy trì nhịp điệu thoải mái, rộng rãi ### Không nên - Không dùng đen thuần #000000 cho text — Deep Indigo #1b2045 là màu tối của hệ thống, và pha trộn đen thật phá vỡ bảng màu ấm - Không dùng border-radius 8px hoặc 12px cho large cards — hệ thống nhảy từ 16px (controls) lên 40px (content), không có giá trị nào ở giữa - Không áp dụng shadow stacks cho elevation — thiết kế dùng surface color và borders thay thế; một soft 8px blur ở 30% black là mức tối đa - Không dùng Electric Cobalt #006cff trên small text, icons, hoặc link underlines — brand color cần diện tích bề mặt để mang ý nghĩa, không phải sự hiện diện ở cấp pixel - Không trộn Roboto vào primary UI — dành nó cho injected overlay content (modals, cookie banners, third-party widgets) nơi nó xuất hiện như một system fallback - Không dùng Cobalt Radial gradient trên flat UI elements — nó là một điểm nhấn phát quang chỉ dành cho blue panels, không phải fill cho buttons hoặc cards - Không để thiết kế cảm giác dày đặc — comfortable density có nghĩa là vertical rhythm rộng rãi (section gap 64px) và khoảng trắng xung quanh mọi content block ## Surfaces | Level | Tên | Giá trị | Mục đích | |-------|-----|---------|----------| | 0 | Canvas | `#f9f9f9` | Page background, màu off-white ấm định nghĩa độ sáng tổng thể | | 1 | Card | `#ffffff` | Product cards, input fields, elevated content blocks nằm trên canvas | | 2 | Recessed | `#e9e9e9` | Inset surfaces, subtle grouping backgrounds, disabled state fills | | 3 | Brand Panel | `#006cff` | Full-bleed hero bands, feature panels, và bất kỳ bề mặt nào nơi brand color trở thành background | | 4 | Dark Band | `#202020` | Footer và inverted dark sections, được dùng như một dải kết thúc ở cuối trang | ## Elevation - **Card:** `rgba(0, 0, 0, 0.3) 0px 0px 8px 0px` ## Imagery Photography được dẫn dắt bởi sản phẩm và cắt sát: tay cầm điện thoại hiển thị ứng dụng WalletConnect Pay, màn hình QR code, và các khoảnh khắc thanh toán di động trong ngữ cảnh. Ảnh được xử lý với border-radius 40px trùng với card containers, tạo cách trình bày mềm mại, thân thiện với người dùng. Giao diện app màu xanh là hero trong photography — màn hình hiển thị số tiền thanh toán màu trắng trên cobalt củng cố brand color bên ngoài các panel được thiết kế. Không có lifestyle backgrounds, không có decorative gradients phía sau ảnh, và không có stock photography; mọi ảnh đều cho thấy sản phẩm đang được sử dụng. Icons là thin-stroke, geometric, và monochromatic, thường là white trên blue hoặc Deep Indigo trên nền sáng. ## Layout Max-width 1200px căn giữa trên canvas Parchment #f9f9f9, với các section xanh và tối full-bleed phá vỡ container ở ranh giới section. Hero pattern là một asymmetric 2-column split: oversized blue rounded panel (radius 40px) bên trái chứa headline, với phone mockup chồm ra mép phải — ảnh sản phẩm tràn ra ngoài ranh giới panel. Nhịp điệu section xen kẽ giữa blue hero panels, white product showcase bands với ảnh điện thoại side-by-side, và dark footer kết thúc. Content arrangement dùng 2-column text+image splits đổi hướng (text-left/image-right, sau đó image-left/text-right). Grids xuất hiện dưới dạng 3-column feature cards. Navigation là một top bar sạch với logo trái, links trung tâm-phải, và action buttons ở xa nhất bên phải, với một optional blue banner strip phía trên. Density là comfortable và spacious — 64px giữa các section, padding rộng rãi bên trong mọi card. ## Agent Prompt Guide **Quick Color Reference** - text: #1b2045 (Deep Indigo cho headings, #202020 Obsidian cho body, #787878 Steel cho muted) - background: #f9f9f9 (canvas), #ffffff (cards) - border: #e9e9e9 (Mist, hairlines), #202020 (dark borders) - accent: #006cff (Electric Cobalt, brand surface) - primary action: #4672ff (filled action) **Example Component Prompts** 1. Xây dựng một hero section: Background Electric Cobalt #006cff, border-radius 40px, internal padding 48px. Headline 'Scaling crypto payments' ở KHTeka 36px weight 700 màu trắng. Subtext ở KHTeka 18px weight 400 ở 60% trắng. Filled CTA button background #4672ff, text trắng, radius 16px, padding 12px 20px. Phone mockup chồm ra mép phải với border-radius 40px. 2. Xây dựng một content card: background #ffffff, border 1px #e9e9e9, border-radius 40px, padding 24px. Heading ở KHTeka 24px weight 700 màu Deep Indigo #1b2045. Body text ở KHTeka 16px weight 400 màu Obsidian #202020 với gap 8px giữa các dòng. 3. Xây dựng một tag badge: Background Glacial Wash #cce2ff, text Deep Indigo #1b2045 ở KHTeka 12px weight 500, border-radius 3px, padding 8px 12px. 4. Xây dựng top navigation: background trắng, logo blue wordmark WalletConnect Pay trái, nav links ở KHTeka 16px weight 400 màu Deep Indigo trung tâm-phải, nút 'Request Demo' filled #006cff với text trắng và radius 16px ở xa nhất bên phải. 5. Xây dựng dark footer: Background Obsidian #202020, top padding 48px, heading 'Stay updated' ở KHTeka 24px weight 700 trắng, email input với border 1px #303030 và radius 16px, nút 'Subscribe' trắng, social link list màu Steel #787878 căn phải. ## Radius System Philosophy Thang radius có chính xác ba giá trị: 3px cho small tags và tight UI chips, 16px cho interactive controls (buttons, inputs, nav items, links-as-buttons), và 40px cho content surfaces (cards, images, hero panels, large containers). Bước nhảy ba bậc này — không phải gradient mượt — là có chủ đích: radius 40px trên content tạo độ mềm 'consumer fintech' tương phản với radius 16px sắc hơn trên controls, báo hiệu rằng buttons là công cụ chính xác trong khi content thì dễ tiếp cận. Không bao giờ nội suy giữa các giá trị này; khoảng cách giữa 16 và 40 chính là thiết kế. ## Similar Brands - **Stripe** — Cùng warm off-white canvas, hero panels bo tròn 40px, và brand color bão hòa được triển khai như một bề mặt đầy đủ thay vì điểm nhấn nhỏ - **Coinbase** — Chung ngôn ngữ hình ảnh crypto-payments với cobalt blue hero sections, product photography bo tròn, và nền sáng chiếm ưu thế hơn nền tối - **MoonPay** — Thẩm mỹ fintech-crypto crossover tương tự: large rounded blue panels, product-led phone mockups, minimal shadows, và một brand color duy nhất chiếm ưu thế - **Rainbow Wallet** — Cách trình bày sản phẩm crypto mobile-first tương đương với oversized card radii và xử lý bề mặt sáng sạch - **Phantom** — Cùng cách tiếp cận brand-confidence — một màu sống động chiếm toàn bộ trang, mọi thứ khác là trắng yên tĩnh và xám ấm ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-electric-cobalt: #006cff; --color-indigo-action: #4672ff; --color-deep-indigo: #1b2045; --color-sky-tint: #66a7ff; --color-glacial-wash: #cce2ff; --color-parchment: #f9f9f9; --color-pure-white: #ffffff; --color-mist: #e9e9e9; --color-silver: #bbbbbb; --color-pewter: #b3b3b3; --color-fog: #9a9a9a; --color-steel: #787878; --color-slate: #6c6c6c; --color-graphite: #4f4f4f; --color-charcoal: #303030; --color-obsidian: #202020; --color-cobalt-radial: #099ff0; --gradient-cobalt-radial: radial-gradient(78.13% 78.13% at 79.97% 80.72%, rgb(9, 159, 240) 0%, rgb(9, 121, 240) 100%); /* Typography — Font Families */ --font-khteka: 'KHTeka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-khteka-mono: 'KHTeka Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.43; --text-subheading: 18px; --leading-subheading: 1.4; --text-heading-sm: 20px; --leading-heading-sm: 1.33; --text-heading: 24px; --leading-heading: 1.2; --text-heading-lg: 30px; --leading-heading-lg: 1.11; --text-display: 36px; --leading-display: 1; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 4px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-72: 72px; /* Layout */ --page-max-width: 1200px; --section-gap: 64px; --card-padding: 24px; --element-gap: 8px; /* Border Radius */ --radius-sm: 3px; --radius-2xl: 16px; --radius-3xl: 40px; /* Named Radii */ --radius-nav: 16px; --radius-tags: 3px; --radius-cards: 40px; --radius-images: 40px; --radius-inputs: 16px; --radius-buttons: 16px; --radius-heropanels: 40px; /* Shadows */ --shadow-sm: rgba(0, 0, 0, 0.3) 0px 0px 8px 0px; /* Surfaces */ --surface-canvas: #f9f9f9; --surface-card: #ffffff; --surface-recessed: #e9e9e9; --surface-brand-panel: #006cff; --surface-dark-band: #202020; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-electric-cobalt: #006cff; --color-indigo-action: #4672ff; --color-deep-indigo: #1b2045; --color-sky-tint: #66a7ff; --color-glacial-wash: #cce2ff; --color-parchment: #f9f9f9; --color-pure-white: #ffffff; --color-mist: #e9e9e9; --color-silver: #bbbbbb; --color-pewter: #b3b3b3; --color-fog: #9a9a9a; --color-steel: #787878; --color-slate: #6c6c6c; --color-graphite: #4f4f4f; --color-charcoal: #303030; --color-obsidian: #202020; --color-cobalt-radial: #099ff0; /* Typography */ --font-khteka: 'KHTeka', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-khteka-mono: 'KHTeka Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.43; --text-subheading: 18px; --leading-subheading: 1.4; --text-heading-sm: 20px; --leading-heading-sm: 1.33; --text-heading: 24px; --leading-heading: 1.2; --text-heading-lg: 30px; --leading-heading-lg: 1.11; --text-display: 36px; --leading-display: 1; /* Spacing */ --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-72: 72px; /* Border Radius */ --radius-sm: 3px; --radius-2xl: 16px; --radius-3xl: 40px; /* Shadows */ --shadow-sm: rgba(0, 0, 0, 0.3) 0px 0px 8px 0px; } ```