Files
citypulse/assets/tokens/design-tokens.json
Zahar 7085a54290 feat(ui): revamp onboarding, map, capture/review, and theme
- Redesign WelcomeScreen and OnboardingFlow with gradients, branding,
  and updated messaging; refresh bottom navigation styling and
  animations
- Enhance MapScreen with severity-based marker styling, category
  icons, improved cluster bubbles, legend overlay, and polished
  filter modal; refine camera fit and device centering logic
- Revamp CaptureScreen and ReviewScreen UX with modern cards,
  AI analysis section, improved selection controls, and clearer
  notes/location presentation
- Update theme to civic palette with expanded neutrals, surface
  containers, and refined button styles
- Expand design tokens: add civic colors, light variants, and
  gradient definitions; align semantic mappings
- Refresh English copy in en.json for welcome and onboarding
- Redesign ReportCard with icons, severity/status chips, improved
  layout, and action menus

Note: some new UI strings are temporarily hardcoded (English) and
will be moved to i18n assets in a follow-up.
2025-09-26 14:38:27 +08:00

229 lines
6.5 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{
"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}
]
}
}