Multipl — Flutter Token Setup Guide

Step 1

1Add Fonts to pubspec.yaml

The design system uses three typefaces. Add DM Mono — you likely already have DM Sans and Playfair Display via Google Fonts.

DM Sans

Spend smarter.

Body copy and labels

ALL UI text. Default everywhere — headings, body, labels, buttons.

Playfair Display

Build wealth faster.

Wealth context headings

Wealth headings ONLY. Celebration screens, goal titles, onboarding nudge headings.

DM Mono NEW

₹1,240.00

Live counters & voucher codes

Counters, tickers, voucher codes. Earnings heartbeat, milestone displays, DM Mono code cells.

pubspec.yaml — add DM Mono Add this

# Option A — Google Fonts package (recommended)
dependencies:
  google_fonts: ^6.2.1

# In code: GoogleFonts.dmMono(fontSize: 34, fontWeight: FontWeight.w500)


# Option B — Bundle locally
flutter:
  fonts:
    - family: DM Mono
      fonts:
        - asset: assets/fonts/DMMono-Regular.ttf
        - asset: assets/fonts/DMMono-Medium.ttf
          weight: 500

Step 2

2Create lib/design/ Token Files

Create a lib/design/ directory. Add all 7 files. Copy-paste the code from the full guide — the key rules for each file are shown below.

app_colors.dart — 60+ color tokens lib/design/

Teal Surface Rule

AppColors.teal

Dark surfaces only — counters, chips, icons

AppColors.tealText

Light surfaces — financial values, labels (5.2:1 ✅)

Gold CTA Rule

AppColors.btnPrimaryText

Text ON gold buttons = #1A1200 (NOT midnight) — 18.3:1 ✅

One gold CTA per screen max

Never use gold as text on light backgrounds (1.6:1 fails)

// Key tokens — see full file for all 60+
static const Color bgBase          = Color(0xFFFDFAF0); // warm cream — all screens
static const Color bgDark          = Color(0xFF0C1220); // midnight — hero cards
static const Color gold            = Color(0xFFF5C842); // CTA only
static const Color btnPrimaryText  = Color(0xFF1A1200); // text ON gold buttons ⚠️
static const Color teal            = Color(0xFF00D4AA); // dark surfaces only
static const Color tealText        = Color(0xFF006B55); // light surfaces 5.2:1 ✅
static const Color txMid           = Color(0x8C0C1220); // 55% midnight — opacity-based
static const Color txLight         = Color(0x590C1220); // 35% midnight — opacity-based
static const Color formBorderFocus = Color(0xFFF5C842); // gold focus border
static const Color formFocusRing   = Color(0x1FF5C842); // 12% gold — focus box shadow

app_radius.dart lib/design/

static const double rXS    =  4;  // badges
static const double rS     =  8;  // icon wrappers
static const double rM     = 12;  // inputs, dropdowns
static const double rL     = 20;  // default cards
static const double rXL    = 24;  // hero dark cards
static const double rSheet = 28;  // bottom sheets
static const double rFull  = 999; // pills, CTAs

// Pre-built BorderRadius objects
static const BorderRadius card     = // rL (20)
static const BorderRadius hero     = // rXL (24)
static const BorderRadius sheetTop = // top: rSheet (28)
static const BorderRadius input    = // rM (12)
static const BorderRadius chip     = // rFull (999)

app_motion.dart NEW FILE

// Durations
static const Duration micro       = 150ms;  // press/toggle
static const Duration standard    = 300ms;  // transitions
static const Duration entrance    = 500ms;  // card entrance
static const Duration spring      = 600ms;  // bottom sheet
static const Duration celebration = 800ms;  // delight screens
static const Duration counter     = 1500ms; // live counter roll

// Curves
static const Curve springCurve =
  Cubic(0.34, 1.56, 0.64, 1.0); // bottom sheets

// Stagger
static const Duration staggerItem = 60ms; // per list row
static const double   pressScale  = 0.95; // tap-down scale

app_spacing.dart — 8px grid lib/design/

// Semantic aliases (use these, not raw numbers)
static const double pagePadding = 20; // screen edges
static const double cardPadding = 20; // inside cards
static const double sectionGap  = 32; // between sections
static const double itemGap     = 12; // list items
static const double rowGap      =  8; // within rows
static const double inlineGap   =  4; // icon + label

// Component heights
static const double btnHeight   = 56; // primary CTA
static const double inputHeight = 56; // text inputs
static const double navHeight   = 72; // bottom nav
static const double touchMin    = 44; // Apple HIG min

app_shadows.dart — shadows & glows lib/design/

// Card shadows (light surfaces)
card     // default white card on cream
cardMd   // modals, dropdowns
cardHigh // celebration card, overlays

// CTA and growth glows
glowGold     // gold CTA button outer glow
glowTealChip // growth chip (dark card only)

// Focus ring for all form elements
focusRingGold = [
  BoxShadow(
    color: Color(0x1FF5C842), // 12% gold
    blurRadius: 0,
    spreadRadius: 3,        // 3px ring
  ),
]

Step 3

3Wire Into ThemeData

Create lib/design/app_theme.dart and wire it into MaterialApp. This makes the tokens the system-wide defaults.

app_theme.dart

class AppTheme {
  static ThemeData get light => ThemeData(
    useMaterial3: true,
    scaffoldBackgroundColor: AppColors.bgBase,

    colorScheme: const ColorScheme.light(
      primary:   AppColors.gold,
      onPrimary: AppColors.btnPrimaryText,  // #1A1200 ← not midnight
      secondary: AppColors.teal,
      surface:   AppColors.bgCard,
      onSurface: AppColors.txDark,
      error:     AppColors.error,
    ),

    cardTheme: const CardTheme(
      color:  AppColors.bgCard,
      shape:  RoundedRectangleBorder(borderRadius: AppRadius.card),
      elevation: 0,
    ),

    inputDecorationTheme: InputDecorationTheme(
      filled:    true,
      fillColor: AppColors.formBg,
      border: OutlineInputBorder(
        borderRadius: AppRadius.input,
        borderSide: const BorderSide(color: AppColors.formBorderNormal),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: AppRadius.input,
        borderSide: const BorderSide(color: AppColors.formBorderFocus, width: 1.5),
      ),
    ),

    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: AppColors.gold,
        foregroundColor: AppColors.btnPrimaryText,
        minimumSize:     const Size(double.infinity, 56),
        shape:           const StadiumBorder(),
        elevation:       0,
      ),
    ),
  );
}

// main.dart
MaterialApp(
  theme: AppTheme.light,
)

Step 4

4The Golden Rule

Tokens only work if values are never hardcoded. If a code review shows raw hex, inline pixel numbers, or bare TextStyles — flag it.

❌ Never hardcode	✅ Always use the token
`Color(0xFF00D4AA)`	`AppColors.teal`
`Color(0xFF006B55)`	`AppColors.tealText` — on light surfaces
`Color(0xFFF5C842)`	`AppColors.gold`
`Color(0xFF0C1220)` on gold button text	`AppColors.btnPrimaryText` uses #1A1200, not midnight
`BorderRadius.circular(12)`	`AppRadius.input`
`EdgeInsets.all(20)`	`EdgeInsets.all(AppSpacing.pagePadding)`
`TextStyle(fontSize: 16, fontWeight: FontWeight.w700)`	`AppTextStyles.labelL`
`Duration(milliseconds: 300)`	`AppMotion.standard`
`Curves.easeOut` inline	`AppMotion.easeOut`

⚠️ btnPrimaryText trap: Text on gold buttons must be AppColors.btnPrimaryText (#1A1200), not AppColors.txDark or midnight. This gives 18.3:1 contrast on gold. Using midnight #0C1220 is visually similar but semantically wrong and will fail if gold lightens in future.

Step 5

5Using With Your Figma MCP

Since you already have the Flutter MCP wired to Figma, tokens close the loop. Both sides now speak the same language.

When a screen is finalised in Figma

1

Open the Figma screen in Flutter MCP / Dev Mode

2

Every color, radius, and type spec maps to a token name — your MCP references them directly

3

If generated code has raw hex → swap to the token name (one lookup in app_colors.dart)

When a designer updates a token

1

Designer updates Figma Variables → exports JSON via Tokens Studio

2

Run Style Dictionary transform → Dart token files regenerate

3

All widgets using that token update automatically on next build — zero hunting

Quick Reference

Token Cheatsheet

Which teal?

Dark card / midnight bg?

AppColors.teal

Light card / cream bg?

AppColors.tealText

Growth chip background (dark)?

AppColors.tealChipBg

Financial value on white card?

AppColors.tealText

Which radius?

Default white card?

AppRadius.card

Hero dark card?

AppRadius.hero

Bottom sheet?

AppRadius.sheetTop

Text input / dropdown?

AppRadius.input

CTA button / chip / tag?

AppRadius.chip

Which text style?

Main balance (hero card)?

amountHero

Live counter (heartbeat)?

counterLarge (DM Mono)

Celebration heading?

wealthHeading (Playfair)

Voucher code?

voucherCode (DM Mono)

Lifetime score big number?

scoreDisplay (DM Mono)

Which duration?

Button press / toggle?

AppMotion.micro

Tab switch / toast?

AppMotion.standard

Bottom sheet slide-up?

AppMotion.spring

Live counter roll?

AppMotion.counter

Stagger per list item?

AppMotion.staggerItem

Shadows & glows

Default white card?

AppShadows.card

Modal / bottom sheet?

AppShadows.cardMd

Gold CTA button?

AppShadows.glowGold

Focused input / PIN?

AppShadows.focusRingGold

Growth chip (dark card)?

AppShadows.glowTealChip

Gradients

Hero dark card?

AppGradients.heroCard

Gold CTA background?

AppGradients.goldCta

KYC / progress bars?

AppGradients.progressTeal

Savings score bar?

AppGradients.progressScore

Brand tile header?

AppGradients.brandFood / Shop…

Summary

File Structure

lib/
└── design/
    ├── app_colors.dart      ← 60+ color tokens
    ├── app_radius.dart      ← radius values + presets
    ├── app_spacing.dart     ← 8px grid + heights
    ├── app_text_styles.dart ← DM Sans / Playfair / DM Mono
    ├── app_shadows.dart     ← BoxShadow lists
    ├── app_gradients.dart   ← LinearGradient defs
    ├── app_motion.dart      ← Duration + Curve constants
    └── app_theme.dart       ← ThemeData for MaterialApp

Setup checklist

Add DM Mono to pubspec.yaml

Create lib/design/ with all 7 files

Wire AppTheme.light into MaterialApp

Replace hardcoded values in existing screens

Add token lint rule to code review checklist

~2 hours total setup time