mifos-mobile/claude-product-cycle/design-spec-layer/features/dashboard/mockups/design-tokens.json

{
  "feature": "Dashboard",
  "generated": "2025-12-28",
  "source": "features/dashboard/SPEC.md",
  "tokens": {
    "colors": {
      "primary": "#6750A4",
      "onPrimary": "#FFFFFF",
      "primaryContainer": "#EADDFF",
      "onPrimaryContainer": "#21005D",
      "secondary": "#625B71",
      "onSecondary": "#FFFFFF",
      "secondaryContainer": "#E8DEF8",
      "surface": "#FFFBFE",
      "surfaceContainer": "#F3EDF7",
      "surfaceContainerHigh": "#ECE6F0",
      "onSurface": "#1C1B1F",
      "onSurfaceVariant": "#49454F",
      "outline": "#79747E",
      "outlineVariant": "#CAC4D0",
      "error": "#B3261E",
      "onError": "#FFFFFF",
      "errorContainer": "#F9DEDC",
      "success": "#2E7D32",
      "onSuccess": "#FFFFFF",
      "successContainer": "#C8E6C9"
    },
    "typography": {
      "displayLarge": {
        "size": 57,
        "weight": 400,
        "lineHeight": 64,
        "letterSpacing": -0.25
      },
      "displayMedium": {
        "size": 45,
        "weight": 400,
        "lineHeight": 52,
        "letterSpacing": 0
      },
      "displaySmall": {
        "size": 36,
        "weight": 400,
        "lineHeight": 44,
        "letterSpacing": 0
      },
      "headlineMedium": {
        "size": 28,
        "weight": 400,
        "lineHeight": 36,
        "letterSpacing": 0
      },
      "headlineSmall": {
        "size": 24,
        "weight": 400,
        "lineHeight": 32,
        "letterSpacing": 0
      },
      "titleLarge": {
        "size": 22,
        "weight": 400,
        "lineHeight": 28,
        "letterSpacing": 0
      },
      "titleMedium": {
        "size": 16,
        "weight": 500,
        "lineHeight": 24,
        "letterSpacing": 0.15
      },
      "bodyLarge": {
        "size": 16,
        "weight": 400,
        "lineHeight": 24,
        "letterSpacing": 0.5
      },
      "bodyMedium": {
        "size": 14,
        "weight": 400,
        "lineHeight": 20,
        "letterSpacing": 0.25
      },
      "bodySmall": {
        "size": 12,
        "weight": 400,
        "lineHeight": 16,
        "letterSpacing": 0.4
      },
      "labelLarge": {
        "size": 14,
        "weight": 500,
        "lineHeight": 20,
        "letterSpacing": 0.1
      },
      "labelMedium": {
        "size": 12,
        "weight": 500,
        "lineHeight": 16,
        "letterSpacing": 0.5
      }
    },
    "spacing": {
      "none": 0,
      "xs": 4,
      "sm": 8,
      "md": 16,
      "lg": 24,
      "xl": 32,
      "xxl": 48
    },
    "radius": {
      "none": 0,
      "xs": 4,
      "sm": 8,
      "md": 12,
      "lg": 16,
      "xl": 28,
      "full": 9999
    },
    "elevation": {
      "level0": "none",
      "level1": "0 1px 3px 1px rgba(0,0,0,0.15)",
      "level2": "0 2px 6px 2px rgba(0,0,0,0.15)",
      "level3": "0 4px 8px 3px rgba(0,0,0,0.15)"
    },
    "screen": {
      "width": 393,
      "height": 852
    }
  },
  "components": [
    {
      "name": "NetWorthCard",
      "type": "card",
      "properties": {
        "background": "primary",
        "radius": "xl",
        "padding": {
          "horizontal": 24,
          "vertical": 20
        },
        "elements": [
          {"type": "label", "text": "TOTAL NET WORTH", "style": "labelMedium", "color": "onPrimary"},
          {"type": "icon", "name": "visibility", "size": 24, "color": "onPrimary"},
          {"type": "text", "style": "displayMedium", "color": "onPrimary"},
          {"type": "text", "style": "bodyMedium", "color": "onPrimary", "opacity": 0.8},
          {"type": "row", "columns": ["Savings", "Loans", "Shares"]}
        ]
      }
    },
    {
      "name": "QuickActions",
      "type": "row",
      "properties": {
        "itemCount": 4,
        "gap": "sm",
        "items": [
          {"icon": "send", "label": "Transfer"},
          {"icon": "download", "label": "Deposit"},
          {"icon": "trending_up", "label": "Invest"},
          {"icon": "people", "label": "Beneficiary"}
        ]
      }
    },
    {
      "name": "AccountCard",
      "type": "card",
      "properties": {
        "background": "surface",
        "radius": "md",
        "elevation": "level1",
        "padding": "md",
        "elements": [
          {"type": "avatar", "size": 40, "background": "primaryContainer"},
          {"type": "column", "flex": 1, "children": [
            {"type": "text", "style": "titleMedium", "color": "onSurface"},
            {"type": "text", "style": "bodySmall", "color": "onSurfaceVariant"}
          ]},
          {"type": "text", "style": "titleMedium", "color": "onSurface"}
        ]
      }
    },
    {
      "name": "TransactionItem",
      "type": "listItem",
      "properties": {
        "height": 72,
        "padding": {"vertical": 8, "horizontal": 0},
        "elements": [
          {"type": "indicator", "size": 40, "variants": {
            "credit": {"background": "successContainer", "icon": "arrow_downward", "iconColor": "success"},
            "debit": {"background": "errorContainer", "icon": "arrow_upward", "iconColor": "error"}
          }},
          {"type": "column", "flex": 1, "children": [
            {"type": "text", "style": "bodyLarge", "color": "onSurface"},
            {"type": "text", "style": "bodySmall", "color": "onSurfaceVariant"}
          ]},
          {"type": "amount", "style": "titleMedium", "colorByType": true}
        ]
      }
    },
    {
      "name": "BottomNavigation",
      "type": "navigation",
      "properties": {
        "height": 80,
        "background": "surfaceContainer",
        "items": [
          {"icon": "home", "label": "Home"},
          {"icon": "credit_card", "label": "Accounts"},
          {"icon": "send", "label": "Transfer"},
          {"icon": "bar_chart", "label": "Activity"},
          {"icon": "person", "label": "Profile"}
        ],
        "selectedIndicator": {
          "background": "secondaryContainer",
          "radius": "lg",
          "width": 64,
          "height": 32
        }
      }
    },
    {
      "name": "TopBar",
      "type": "appBar",
      "properties": {
        "height": 64,
        "background": "surface",
        "elements": [
          {"type": "navigation", "icon": "arrow_back", "optional": true},
          {"type": "title", "style": "titleLarge", "color": "onSurface"},
          {"type": "actions", "icons": ["notifications", "settings"]}
        ]
      }
    },
    {
      "name": "SectionHeader",
      "type": "header",
      "properties": {
        "padding": {"top": "md", "bottom": "sm"},
        "elements": [
          {"type": "text", "style": "titleMedium", "color": "onSurface"},
          {"type": "link", "text": "View All →", "style": "labelMedium", "color": "primary"}
        ]
      }
    }
  ],
  "screens": [
    {
      "name": "DashboardScreen",
      "route": "/dashboard",
      "layout": "vertical",
      "components": [
        "TopBar",
        "Greeting",
        "NetWorthCard",
        "QuickActions",
        "SectionHeader:MY ACCOUNTS",
        "AccountCard:savings",
        "AccountCard:loan",
        "SectionHeader:RECENT ACTIVITY",
        "TransactionItem:list",
        "BottomNavigation"
      ]
    },
    {
      "name": "AccountDetailScreen",
      "route": "/account/:id",
      "layout": "vertical",
      "components": [
        "TopBar:back",
        "BalanceHero",
        "ActionButtons",
        "AccountDetailsCard",
        "TransactionsList",
        "ChargesSection"
      ]
    },
    {
      "name": "TransferScreen",
      "route": "/transfer",
      "layout": "vertical",
      "components": [
        "TopBar:back",
        "AccountSelector:from",
        "TransferTypeToggle",
        "BeneficiaryList",
        "AmountInput",
        "RemarksInput",
        "ContinueButton"
      ]
    }
  ]
}