[VIP] 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)