| Token / File | Type | Was | Now | Reason |
|---|---|---|---|---|
| AppRadius.rXS / rS / rM | Fix | 6 / 10 / 14 | 4 / 8 / 12 | Sync with tokens-v3.css source of truth |
| AppColors.electricBlue | Fix | #2563EB | #4A9FFF | Matches CSS --electricBlue; #2563EB kept as electricBlueText for readable text |
| AppColors.txMid | Fix | Color(0xFF4A566E) | Color(0x8C0C1220) | Opacity-based (55% midnight) renders correctly on cream bgBase |
| AppColors.txLight | Fix | Color(0xFF8695B0) | Color(0x590C1220) | Opacity-based (35% midnight), same reason |
| AppColors.btnPrimaryText | Add | — | #1A1200 (near-black) | Text on gold buttons; 18.3:1 contrast. Not midnight #0C1220. |
| DM Mono typeface | Add | Courier New (vouchers only) | DM Mono — counters, scores, vouchers | Heartbeat, Total Return, Lifetime Score all use DM Mono |
| AppRadius.rSheet | Add | — | 28pt — bottom sheet top corners | Bottom sheets use 28pt not rXL (24pt) |
| AppShadows.focusRingGold | Add | — | 0 0 0 3px rgba(245,200,66,0.12) | All focused inputs, PIN boxes, dropdowns |
| app_motion.dart | New | — | Durations, curves, stagger, press scale | Delight components require specific spring curve + 60ms stagger |
| Form state tokens | Add | — | formBorder*, formFocusRing, formBg | ds-forms.html component library |
| Neutral tokens | Add | — | neutralTrack #F0F0F0, neutralBorder #E0E0E0 | Progress bars, skeleton loaders, voucher dashed border |
| New gradients | Add | — | progressTeal, progressScore, chartBarActive, carouselSlide, scoreHeader | Delight + financial components |
| Token | Value | Use case |
|---|---|---|
| micro | 150ms |
Press, toggle, icon swap
|
| standard | 300ms |
Chip select, nav transition
|
| entrance | 500ms |
Card entrances, staggered lists
|
| spring | 600ms |
Bottom sheet open (spring curve)
|
| celebration | 800ms |
Celebration card reveal + confetti
|
| counter | 1500ms |
Earnings count-up, score rollup
|
| pulseLoop | 1500ms |
Teal heartbeat ring, infinite
|
formBorderFocus border color.
| Component | Key tokens |
|---|---|
| Core Atoms | |
| Gold CTA Button | gold · goldGradStart/End · glowGold · btnPrimaryText (#1A1200) |
| Secondary Button (glass) | bgGlass · borderDk · txWhite |
| Ghost Button | transparent · txMid · btnSmHeight |
| Growth chip (dark) | tealChipBg · tealChipBdr · teal · glowTealChip |
| Cashback chip (light) | tealBgLt · tealBdrLt · tealText |
| Badge (Most Opted) | gold gradient · btnPrimaryText · rXS |
| Badges (status) | tealBgLt · coralBg · warningBg · blueBgLt |
| Category tags — light | tagFoodBg/Text · tagApparelBg/Text · tagShopBg/Text · tagCabsBg/Text |
| Category tags — dark | tagDkFoodBg/Text · tagDkApparelBg/Text · tagDkShopBg/Text · tagDkCabsBg/Text |
| Forms | |
| Text input (normal / focus / error) | formBorderNormal · formBorderFocus · formBorderError · formFocusRing · focusRingGold shadow |
| Amount input | formBorderFocus · rM · txDark · tabularFigures |
| Search field | formBorderNormal → gold on focus · txLight placeholder |
| Dropdown (closed / open / focused) | formBorderNormal/Focus · formFocusRing · txDark / txLight |
| Checkbox · Radio | teal fill checked · formBorderNormal unchecked · coral error |
| Toggle switch | teal active · formBorderNormal inactive track |
| Slider | teal track · teal thumb · neutralTrack |
| PIN box (active / filled / error) | formBorderFocus + gold cursor · txDark dot · formBorderError + coral dot |
| OTP box | same as PIN |
| Verified label | tealText · checkmark icon |
| Navigation | |
| Top app bar | bgBase · txDark · rS back button |
| Bottom nav (frosted dark) | navBg (96% midnight) · navActiveIconBg · navActiveLabel (gold) · navInactiveLabel |
| Tab bar | txDark active · txLight inactive · gold underline indicator |
| Step progress | tealText completed · bgDark + gold text active · txLight pending |
| Cards & Lists | |
| Hero dark card | bgDark · 3 glows (gold/blue/teal) · amountHero · growth chip · sparkline |
| White card | bgCard · shadowCard · rL |
| Brand tile card | brandFood/Shop/Apparel/Cabs gradient header · category tag · cashback chip |
| Transaction row (credit) | tealText amount · txDark label |
| Transaction row (debit) | coral amount · txDark label |
| Feedback | |
| Success toast | tealBgLt · tealBdrLt · tealText · teal icon |
| Error toast / alert | coralBg · coral border · coral · coral icon |
| Info toast | blueBgLt · blueBdrLt · electricBlueText · electricBlue icon |
| Warning toast | warningBg · warning border · warning · warning icon |
| Progress bar (goal) | progressTeal gradient · neutralTrack · rFull |
| Skeleton loader | neutralTrack shimmer → shimmer duration (1200ms) |
| Overlays | |
| Bottom sheet | bgBase · rSheet (28pt) · shadowModal · handle: txLight |
| Modal dialog | bgCard · rXL · shadowCardHigh · bgDark 50% backdrop |
| Tooltip | bgDark · txWhiteMd · rM |
| Financial | |
| Voucher card | bgDark · 3 glows · voucherCode (DM Mono) · gold code · coral expiry · neutralBorder dashed |
| Goal progress widget | progressTeal · neutralTrack · tealText value · txMid label |
| Interest / earnings card | bgDark · teal on dark · tealText on light rows |
| Delight Components | |
| Earnings Toast | tealBgLt icon bg · teal icon · tealText value · gold sparkle |
| Earnings Heartbeat | bgDark header · 3 glows · counterLarge (DM Mono teal) · teal pulseLoop ring |
| Milestone Ticker | bgDark · teal separator dots · teal values |
| Relatable Carousel | carouselSlide gradient · gold active dot (rFull 18pt) · tealText inline stat |
| Double Dip Calculator | gold border/bg selected tile · tealText result values |
| Post-Deposit Celebration | bgBase sheet · rSheet · wealthHeadingSm (Playfair 22pt) · gold CTA · tealText stats |
| Post-Redemption Celebration | gold chip selected · gold CTA · tealText progress |
| Total Return Card | counterDisplay (DM Mono tealText) · progressTeal · gold brand dot |
| Spending Routine Map | chartBarActive gradient bars · tealText value + day labels |
| Lifetime Savings Score | scoreHeader gradient · scoreDisplay (DM Mono) · progressScore (gold→teal) |
| Weekly Scorecard | scorecardMultipl gradient · teal legend dot · neutralTrack bank bars |
| % | Hex | Visual |
|---|---|---|
| 4% | 0x0A | |
| 6% | 0x0F | |
| 8% | 0x14 | |
| 9% | 0x17 | |
| 10% | 0x1A | |
| 12% | 0x1F |
| % | Hex | Visual |
|---|---|---|
| 14% | 0x24 | |
| 15% | 0x26 | |
| 18% | 0x2E | |
| 22% | 0x38 | |
| 25% | 0x40 | |
| 30% | 0x4D |
| % | Hex | Visual |
|---|---|---|
| 35% | 0x59 | |
| 38% | 0x61 | |
| 55% | 0x8C | |
| 65% | 0xA6 | |
| 96% | 0xF5 |
Color(0x2400D4AA)
// Barrel export — single import for all widgets export 'app_colors.dart'; // Color tokens export 'app_gradients.dart'; // Gradients + BrandCategory export 'app_spacing.dart'; // Spacing + safe areas export 'app_radius.dart'; // Border radius objects export 'app_shadows.dart'; // Box shadows + glows export 'app_text_styles.dart';// Typography scale export 'app_motion.dart'; // ★ NEW — durations + curves export 'app_theme.dart'; // Flutter ThemeData // In any widget file: import 'package:multipl/design/design.dart';