citypulse/assets/tokens/design-tokens.json

{
  "meta": {
    "name": "FixMate Design Tokens",
    "version": "1.0.0",
    "brand": "Civic Premium – Citizen First"
  },
  "color": {
    "palette": {
      "brandPrimary": "#1E5CE0",
      "brandPrimaryDark": "#1748AC",
      "brandPrimaryLight": "#8CB0FF",
      "civicBlue": "#2563EB",
      "civicBlueDark": "#1E40AF",
      "civicBlueLight": "#3B82F6",
      "civicOrange": "#F97316",
      "civicOrangeLight": "#FB923C",
      "civicGreen": "#22C55E",
      "civicGreenLight": "#4ADE80",
      "neutral0": "#FFFFFF",
      "neutral10": "#F8FAFC",
      "neutral20": "#F1F5F9",
      "neutral30": "#E2E8F0",
      "neutral40": "#CBD5E1",
      "neutral50": "#94A3B8",
      "neutral60": "#64748B",
      "neutral70": "#475569",
      "neutral80": "#334155",
      "neutral90": "#1E293B",
      "neutral100": "#0F172A",
      "success": "#16A34A",
      "successLight": "#86EFAC",
      "warning": "#F59E0B",
      "warningLight": "#FCD34D",
      "error": "#DC2626",
      "errorLight": "#FCA5A5",
      "info": "#0EA5E9",
      "infoLight": "#7DD3FC",
      "surfaceGradient1": "#FAFAFA",
      "surfaceGradient2": "#F8FAFC"
    },
    "semantic": {
      "primary": "{color.palette.civicBlue}",
      "primaryDark": "{color.palette.civicBlueDark}",
      "primaryLight": "{color.palette.civicBlueLight}",
      "secondary": "{color.palette.civicOrange}",
      "secondaryLight": "{color.palette.civicOrangeLight}",
      "accent": "{color.palette.civicGreen}",
      "accentLight": "{color.palette.civicGreenLight}",
      "background": "{color.palette.surfaceGradient1}",
      "surface": "{color.palette.neutral0}",
      "surfaceVariant": "{color.palette.neutral20}",
      "surfaceContainer": "{color.palette.neutral10}",
      "surfaceContainerHigh": "{color.palette.neutral20}",
      "onPrimary": "#FFFFFF",
      "onSecondary": "#FFFFFF",
      "onAccent": "#FFFFFF",
      "onBackground": "{color.palette.neutral100}",
      "onSurface": "{color.palette.neutral100}",
      "onSurfaceVariant": "{color.palette.neutral80}",
      "outline": "{color.palette.neutral30}",
      "outlineVariant": "{color.palette.neutral40}",
      "success": "{color.palette.success}",
      "successLight": "{color.palette.successLight}",
      "onSuccess": "#FFFFFF",
      "warning": "{color.palette.warning}",
      "warningLight": "{color.palette.warningLight}",
      "onWarning": "#FFFFFF",
      "error": "{color.palette.error}",
      "errorLight": "{color.palette.errorLight}",
      "onError": "#FFFFFF",
      "info": "{color.palette.info}",
      "infoLight": "{color.palette.infoLight}",
      "onInfo": "#FFFFFF"
    }
  },
  "typography": {
    "families": {
      "display": "SF Pro Display, Inter, Roboto, system-ui, -apple-system",
      "body": "SF Pro Text, Inter, Roboto, system-ui, -apple-system",
      "mono": "SF Mono, Menlo, Roboto Mono, ui-monospace"
    },
    "weight": {
      "regular": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "scale": {
      "xs": 12,
      "sm": 14,
      "md": 16,
      "lg": 18,
      "xl": 20,
      "xxl": 24,
      "displaySm": 28,
      "displayMd": 32,
      "displayLg": 40
    },
    "lineHeight": {
      "tight": 1.15,
      "standard": 1.35,
      "loose": 1.5
    }
  },
  "spacing": {
    "x1": 4,
    "x2": 8,
    "x3": 12,
    "x4": 16,
    "x5": 20,
    "x6": 24,
    "x8": 32,
    "x10": 40,
    "x12": 48,
    "x16": 64
  },
  "radii": {
    "xs": 6,
    "sm": 8,
    "md": 12,
    "lg": 16,
    "xl": 24,
    "pill": 100
  },
  "shadows": {
    "sm": [
      {"x":0,"y":1,"blur":2,"spread":0,"opacity":0.10}
    ],
    "md": [
      {"x":0,"y":2,"blur":6,"spread":0,"opacity":0.12},
      {"x":0,"y":8,"blur":12,"spread":-6,"opacity":0.10}
    ],
    "lg": [
      {"x":0,"y":12,"blur":24,"spread":-6,"opacity":0.12},
      {"x":0,"y":24,"blur":36,"spread":-12,"opacity":0.10}
    ]
  },
  "motion": {
    "durations": {
      "fast": 120,
      "medium": 200,
      "slow": 300,
      "slower": 450
    },
    "easing": {
      "standard": [0.2, 0.0, 0.0, 1.0],
      "accelerate": [0.4, 0.0, 1.0, 1.0],
      "decelerate": [0.0, 0.0, 0.2, 1.0],
      "emphasize": [0.2, 0.0, 0.0, 1.0]
    },
    "recommendations": {
      "screenTransitionMs": [200, 320],
      "buttonTapMs": [80, 140],
      "listReorderMs": [120, 200]
    }
  },
  "themes": {
    "light": {
      "primary": "{color.palette.brandPrimary}",
      "onPrimary": "#FFFFFF",
      "background": "{color.palette.neutral10}",
      "onBackground": "{color.palette.neutral100}",
      "surface": "{color.palette.neutral0}",
      "onSurface": "{color.palette.neutral100}",
      "surfaceVariant": "{color.palette.neutral20}",
      "onSurfaceVariant": "{color.palette.neutral80}"
    },
    "dark": {
      "primary": "{color.palette.brandPrimaryLight}",
      "onPrimary": "{color.palette.neutral100}",
      "background": "{color.palette.neutral100}",
      "onBackground": "{color.palette.neutral10}",
      "surface": "{color.palette.neutral90}",
      "onSurface": "{color.palette.neutral10}",
      "surfaceVariant": "{color.palette.neutral80}",
      "onSurfaceVariant": "{color.palette.neutral20}"
    },
    "highContrast": {
      "primary": "{color.palette.brandPrimaryDark}",
      "onPrimary": "#FFFFFF",
      "background": "{color.palette.neutral0}",
      "onBackground": "{color.palette.neutral100}",
      "surface": "{color.palette.neutral0}",
      "onSurface": "{color.palette.neutral100}",
      "surfaceVariant": "{color.palette.neutral20}",
      "onSurfaceVariant": "{color.palette.neutral100}"
    }
  },
  "status": {
    "severity": {
      "high": "#DC2626",
      "highLight": "#FCA5A5",
      "medium": "#F59E0B",
      "mediumLight": "#FCD34D",
      "low": "#16A34A",
      "lowLight": "#86EFAC"
    },
    "report": {
      "submitted": "#2563EB",
      "submittedLight": "#3B82F6",
      "in_progress": "#64748B",
      "in_progressLight": "#94A3B8",
      "fixed": "#16A34A",
      "fixedLight": "#86EFAC"
    }
  },
  "gradients": {
    "primary": [
      {"color": "#2563EB", "position": 0.0},
      {"color": "#3B82F6", "position": 1.0}
    ],
    "secondary": [
      {"color": "#F97316", "position": 0.0},
      {"color": "#FB923C", "position": 1.0}
    ],
    "success": [
      {"color": "#16A34A", "position": 0.0},
      {"color": "#22C55E", "position": 1.0}
    ],
    "surface": [
      {"color": "#FAFAFA", "position": 0.0},
      {"color": "#F8FAFC", "position": 1.0}
    ],
    "card": [
      {"color": "#FFFFFF", "position": 0.0},
      {"color": "#F8FAFC", "position": 1.0}
    ]
  }
}