Velar Design System | 200+ token-bound components · 8 candy color families

✨ What’s Included 🎨 Foundations — 6 Pages 🌈 Colors 88 primitive tokens across Strawberry, Bubblegum, Peach, Lemon, Mint, Sky, Lavender, and Cotton. Each family includes 11 steps from /50 to /950, with WCAG-tested contrast pairings and AAA/AA badges. 🔤 Typography Fraunces + Inter, configured as a complete type scale with 11 named text styles and 3 control styles. 📐 Spacing & Layout Base-4 spacing scale, from space/2xs — 4px to space/5xl — 96px. ◽ Radius, Borders & Shadows 6 named radius tokens, border tokens, and 6 elevation shadow styles. 🧩 Iconography 80+ stroke-only icons at 24px with 1.5px weight, built on Hugeicons. Every icon is recolorable via stroke override. 🖼️ Illustrations Soft gradient placeholders sized for easy custom illustration swap-in. 🧱 Components — 22 Pages, 200+ Variants 🔘 Buttons Primary, Secondary, Tertiary, Ghost, and Destructive. Includes 3 sizes, full state coverage — Default, Hover, Pressed, Focused, Disabled, and Loading — with leading and trailing icon support. ⌨️ Input 3 sizes with Default, Focus, Filled, Disabled, and Error states. Includes label, hint, required asterisk, leading icon, and trailing action. 📝 Textarea Multi-line input with a full state system. ▾ Select Closed trigger plus Select/Option sub-component for open menus. 📤 File Upload 5-state lifecycle: Empty, Hover, Uploading, Uploaded, and Error. Supports drag-and-drop and click-to-browse patterns. ☑️ Checkbox Default, Hover, Checked, Indeterminate, and Disabled states. 🔘 Radio Default, Hover, Selected, and Disabled states. 🔁 Switch On, Off, and Disabled states. 📂 Accordion Default, Hover, Expanded, and Disabled states. 📋 Lists Composable rows with leading and trailing slots. Includes one-line, two-line, and three-line variants. 📱 Tab Bar Mobile bottom navigation for 4–5 tabs. 🎛️ Segmented Control Inline tab control for 2–4 options. 🪟 Modals & Sheets 3 modal sizes: Sm, Md, and Lg. Includes bottom sheet with handle bar, plus left and right side sheets with asymmetric radius. 🔔 Toast 20 variants across 5 semantic colors, with show/hide action and dismiss options. 📢 Banner 20 variants for persistent page-level messages, with action and dismiss controls. ⚠️ Alerts 36 variants. Includes Inline and Stacked types, Subtle, Solid, and Stroke styles, across 5 semantic colors. 🏷️ Tag 63 variants. Includes 4 styles: Subtle, Solid, Stroke, and Ghost, with optional leading icon and trailing dismiss. 🔖 Badge 18 variants. Includes Dot, Count, and Label types. 👤 Avatar 24 variants with status indicator as a component property. 🫙 Empty & Error States No Items, No Results, No Permission, and Network Error. 🛠️ Misc & Utility Slider, Stepper, OTP, Divider, Skeleton, and Spinner. 📸 Examples 30+ real-world product screens built from Velar components. ⚙️ Token System Velar uses a scalable token structure designed for real product work: 🧬 3-layer architecture: Primitives → Semantic → Component 🌗 Semantic/Theme collection with Light, Dark, and High Contrast modes 🎨 Semantic/Brand collection for full rebrand control ⚡ Rebrand the entire kit by editing only 5 accent/* tokens 🔄 Buttons, inputs, checkboxes, switches, badges, and accent surfaces update instantly 🌓 Frame-level mode override lets you show a dark card inside a light page without duplicating anything 👥 Who It’s For Velar is built for intermediate to advanced Figma designers who want a kit that is architecturally sound, not just visually pretty. If you care about token systems, scalable component structures, clean component logic, and a design system that actually holds up in production handoff, Velar is for you.