Velar Design System

Velar is a complete Figma design system built around a pastel-candy aesthetic — warm, soft, and distinctively modern. Every component is fully token-bound, meaning one variable change rebrands the entire kit instantly. Three themes (Light, Dark, High Contrast) are built in and work at the frame level — no duplication required.

This isn't a component dump. Velar is a system: a three-layer token architecture (Primitives → Semantic → Component), 88 colors across 8 candy families, 13 text styles, 6 elevation shadows, and 200+ components that all speak the same visual language.

──────────────────────────────────── WHAT'S INCLUDED ────────────────────────────────────

FOUNDATIONS (6 pages) · Colors — 88 primitive tokens across Strawberry, Bubblegum, Peach, Lemon, Mint, Sky, Lavender, and Cotton. Each family has 11 steps from /50 to /950. WCAG-tested contrast pairings with 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, 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, 1.5px weight, built on Hugeicons. Every icon 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, Destructive. 3 sizes, full state coverage (Default, Hover, Pressed, Focused, Disabled, Loading). Leading and trailing icon support. · Input — 3 sizes. Default, Focus, Filled, Disabled, Error states. Label, hint, required asterisk, leading icon, trailing action. · Textarea — Multi-line input with full state system. · Select — Closed trigger + Select/Option sub-component for open menu. · File upload — 5-state lifecycle: Empty, Hover, Uploading, Uploaded, Error. Drag-and-drop and click-to-browse. · Checkbox — Default, Hover, Checked, Indeterminate, Disabled. · Radio — Default, Hover, Selected, Disabled. · Switch — On, Off, Disabled. · Accordion — Default, Hover, Expanded, Disabled. · Lists — Composable rows with leading/trailing slots. One-line, two-line, three-line variants. · Tab bar — Mobile bottom navigation, 4-5 tabs. · Segmented control — Inline tab control for 2-4 options. · Modals & Sheets — 3 modal sizes (Sm/Md/Lg), Bottom sheet with handle bar, Left/Right side sheets with asymmetric radius. · Toast — 20 variants. 5 semantic colors × show/hide action × dismiss. · Banner — 20 variants. Persistent page-level messages with action and dismiss controls. · Alerts — 36 variants. Inline and Stacked types, Subtle/Solid/Stroke styles, 5 semantic colors. · Tag — 63 variants. 4 styles (Subtle, Solid, Stroke, Ghost) with optional leading icon and trailing dismiss. · Badge — 18 variants. Dot, Count, and Label types. · Avatar — 24 variants with status indicator as component property. · Empty & Error States — No Items, No Results, No Permission, Network Error. · Misc & Utility — Slider, Stepper, OTP, Divider, Skeleton, Spinner. · Examples — 30+ real-world product screens built from Velar components.

TOKEN SYSTEM · 3-layer architecture: Primitives → Semantic → Component · Semantic/Theme collection with Light, Dark, and High Contrast modes · Semantic/Brand collection for full rebrand in one variable swap · Rebrand the entire kit by editing 5 accent/* tokens — every button, input, checkbox, switch, badge, and accent surface updates instantly · Frame-level mode override — 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's architecturally sound, not just visually pretty. If you care about token systems, scalable component structures, and a kit that actually holds up in production handoff — this is for you.

──────────────────────────────────── WHAT'S NOT INCLUDED ────────────────────────────────────

· Mobile device frames (iOS/Android) — Velar is component-focused, not template-focused · Animated prototypes · Code export or developer tokens file (components are Figma assets)

──────────────────────────────────── FONTS REQUIRED ────────────────────────────────────

· Fraunces — free on Google Fonts fonts.google.com/specimen/Fraunces · Inter — free on Google Fonts fonts.google.com/specimen/Inter

──────────────────────────────────── FILE DETAILS ────────────────────────────────────

· Format: Figma file (.fig) · Requires: Figma Professional or above (for variable support)

Highlights

• design system

• figma ui kit

• mobile & Web

• components

• tokens & variables

• pastel, candy, dark mode

Format

• Figma