Designer
Works in Figma (uopAN7oblYjEpitPMaMB0z). Uses this site to verify component rules, spacing, and states before handoff.
Developer
Claude Code reads CLAUDE.md + Figma MCP → generates .dart screens using the widget library. Never hardcodes colors or radius.
Product / QA
Uses this site as the reference doc. Reviews Figma for sign-off and checks implementation matches design system rules.
Full Design System
All 45 widgets, tokens, states, and rules in one page. Start here.
↗ V5Foundation & Atoms
Typography, color tokens, buttons, avatars, badges, chips, spinners.
↗ V5Forms & Inputs
Text inputs, amount input, search, OTP, password, phone, tag input, stepper, combobox.
↗ V5Navigation & Cards
Top app bar, bottom nav, tab bar, step progress, hero card, transaction list.
↗ V5Feedback, Overlays & Financial
Toast, alert banners, modals, bottom sheets, drawer, goal progress, KYC, cashback.
↗ V5Delight & Motion
Micro-interactions, celebration states, confetti, glow effects.
Atoms
Buttons, avatars, badges, dividers, spinners, icon grid.
↗ V4Forms
Text inputs, dropdowns, checkboxes, radio, toggle, slider, PIN/OTP, textarea.
↗ V4Navigation
Top app bar, tab bars, back button, step progress, bottom nav.
↗ V4Cards & Lists
Card variants, list items, transaction list, notification list.
↗ V4Feedback
Toast, alert banners, progress bars/rings, skeleton loaders, empty states.
↗ V4Overlays
Bottom sheets, action sheets, modals, tooltips, dropdown menus.
↗ V4Financial
Amount chips, goal progress, interest/earnings, vouchers, KYC, cashback, spending insights.
Design Principles
Core philosophy, brand values, accessibility, and design decisions that underpin the system.
↗ FlutterDart Tokens Guide
Figma Variables → JSON export → Dart tokens → Flutter ThemeData setup.
↗ FlutterFlutter Tokens Readme
Widget usage patterns, token imports, and integration guide for Flutter developers.