| color |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| border_radius |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| shadow |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| elevation |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| motion |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| opacity |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| blur |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| backdrop |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| z_index |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| component |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| layout |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| scrollbar |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| gradient |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| grid |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| breakpoint |
|
CityResolve embodies a modern, approachable civic technology aesthetic that balances professionalism with community warmth. The design system prioritizes clarity, trust, and engagement while maintaining a clean, contemporary visual language that feels both governmental and citizen-friendly.
The design language centers on a fresh, optimistic green palette that symbolizes growth, community, and environmental stewardship. The aesthetic is deliberately clean and modern, avoiding bureaucratic heaviness while maintaining the credibility expected of civic platforms. Soft pastel accents and generous whitespace create an approachable, user-friendly experience that encourages participation.
The primary green (#10B981) serves as the brand's heartbeat—representing progress, resolution, and positive civic action. This is complemented by a sophisticated neutral palette that provides visual breathing room and ensures content remains the focus. Status colors use intuitive associations (amber for pending, blue for in-progress, emerald for resolved) to create immediate visual understanding without requiring cognitive processing.
Typography prioritizes readability and hierarchy through the Plus Jakarta Sans font family—a modern, geometric sans-serif that conveys trustworthiness and clarity. The type scale is generous, with large, bold headlines that create impact and smaller, refined body text that ensures comfortable reading. Monospace fonts are reserved for data displays and technical elements, creating clear semantic distinction.
Cards form the foundation of the UI, featuring generous border-radius (up to 24px) that creates a soft, approachable feel. The glass-card pattern uses subtle borders and delicate shadows to create depth without heaviness. Cards employ a consistent internal padding hierarchy and maintain visual coherence through shared border treatments and shadow behaviors.
Buttons and interactive elements use the primary green as their anchor, with hover states that introduce subtle elevation changes and shadow intensification. The interaction model favors direct manipulation—buttons scale slightly on hover, cards lift gently, and transitions use smooth 300ms easings that feel responsive but not hurried.
Status badges and indicators use color-coded systems that are both accessible and intuitive. The four-state status system (pending, in-progress, resolved, rejected) maps to warm-to-cool color progression that creates visual narrative flow. Status indicators often incorporate subtle animations (pulsing dots, floating elements) to draw attention without being distracting.
The layout system uses a mobile-first approach with generous container padding that creates breathing room. The sidebar navigation (260px) provides persistent access to core functionality while the main content area maximizes available space. Grid systems employ consistent gutters and maintain alignment across breakpoints.
Whitespace is used deliberately as a design element, not just as empty space. Generous vertical spacing between sections creates visual rhythm and prevents cognitive overload. Horizontal spacing within components follows a consistent scale that creates harmony across the interface. The background color (#F4F7F6) provides subtle warmth that reduces eye strain compared to pure white.
The elevation system uses subtle shadows and backdrop blur to create hierarchy without visual clutter. Glass morphism effects (backdrop-blur with semi-transparent backgrounds) create modern depth while maintaining content legibility. Shadow values are carefully tuned to provide clear elevation signals without appearing heavy or dated.
Motion serves functional purposes—guiding attention, communicating state changes, and providing feedback. Animations use smooth easings and moderate durations (300-500ms) that feel natural rather than jarring. The system avoids gratuitous motion; every animation has a clear purpose.
- Float animation: Gentle vertical movement (10-12s duration) for decorative elements
- Shimmer effect: Subtle light movement across progress bars and loading states
- Pulse: Soft attention-grabbing for live indicators and notifications
- Hover states: 300ms transitions with subtle elevation and scale changes
- Page transitions: Fade-in with slight upward slide for smooth content loading
Animations use CSS transforms and opacity changes to maintain 60fps performance. Complex animations are hardware-accelerated where possible. The system provides reduced-motion preferences for accessibility.
All text and interactive elements meet WCAG AA contrast requirements. The primary green provides sufficient contrast against both light and dark backgrounds. Status colors are paired with text labels to ensure colorblind users can understand state information.
Interactive elements maintain minimum 44px touch targets for mobile usability. Buttons and cards have generous padding that accommodates various finger sizes and input methods.
The design system supports semantic HTML structure with clear visual hierarchy. Typography scales create logical heading relationships, and component patterns reinforce content relationships through consistent visual treatment.
The logo uses a leaf icon combined with the CityResolve wordmark, emphasizing the civic-environmental connection. The leaf icon appears in navigation and branding elements, creating consistent brand recognition. The wordmark uses bold typography with the "Resolve" portion highlighted in the primary green.
The visual design supports a brand voice that is empowering, transparent, and community-focused. The clean, modern aesthetic conveys efficiency and trustworthiness, while the warm color palette and soft shapes approachability and civic pride.
When imagery is used, it follows the brand's optimistic, community-focused aesthetic. User avatars use circular containers with subtle borders that maintain visual consistency. Category icons use the Lucide icon set with consistent sizing and color treatment.
The design gracefully adapts to mobile contexts through collapsible navigation, stacked layouts, and touch-optimized interactions. The sidebar transforms into a drawer on mobile, and grid layouts collapse to single columns while maintaining content hierarchy.
Tablet layouts introduce two-column grids and expanded navigation options while maintaining the mobile-first content hierarchy. Touch targets remain generous, and spacing scales appropriately for the larger screen.
Desktop layouts maximize horizontal space with multi-column grids, persistent navigation, and expanded content areas. The design maintains visual coherence through consistent spacing and component treatment across all breakpoints.
All components share common design tokens for spacing, typography, color, and border-radius. This creates visual harmony and makes the system maintainable. Components are designed to be composable, with clear patterns for nesting and combination.
Components have clear visual states for default, hover, active, focus, and disabled conditions. Focus states use the primary green with subtle rings to maintain accessibility while providing clear feedback. Loading states use skeleton patterns and subtle animations to communicate progress.
Error states use the functional red color (#EF4444) with clear messaging and actionable next steps. Success states use the primary green with celebratory micro-interactions. Warning states use amber with clear guidance for resolution.
The design system is built to evolve while maintaining consistency. New components should reference existing patterns and tokens before introducing novel approaches. The color palette, typography scale, and spacing system provide foundations that support future growth while maintaining brand coherence.
This design system serves as both a reference and a guide—ensuring that CityResolve continues to deliver a cohesive, accessible, and delightful experience as it grows and evolves.