UrbanEcho

Building a scalable design system for urban intelligence.

Building a scalable design system for urban intelligence.

Building a scalable design system for urban intelligence.

UrbanEcho’s AI could simulate cities, but its interface couldn’t explain them

So first, I established primitive colour variables to build all semantic tokens upon.

So first, I established primitive colour variables to build all semantic tokens upon.

So first, I established primitive colour variables to build all semantic tokens upon.

Setting a responsive typographic foundation for the platform

This created a versatile, accessible system that adapts to user preferences.

This created a versatile, accessible system that adapts to user preferences.

This created a versatile, accessible system that adapts to user preferences.

Designing the foundational inputs and a cohesive icon set

Multiple visual styles were defined for icons and all interactive states for selectors.

Multiple visual styles were defined for icons and all interactive states for selectors.

Multiple visual styles were defined for icons and all interactive states for selectors.

Engineering a versatile and accessible button component system

Buttons were built with icons, spinners, and multiple states for flexibility.

Buttons were built with icons, spinners, and multiple states for flexibility.

Buttons were built with icons, spinners, and multiple states for flexibility.

Assembling the final suite of complex data components

This included data tables, status tags, navigation, and interactive dialog modals.

This included data tables, status tags, navigation, and interactive dialog modals.

This included data tables, status tags, navigation, and interactive dialog modals.

Demonstrating the system's versatility through key interfaces

The real demo booking site and a sample UI display practical application.

The real demo booking site and a sample UI display practical application.

The real demo booking site and a sample UI display practical application.

See it for yourself

See it for yourself

Visit UrbanEcho

Visit UrbanEcho

Previous project

EarnFreeWater

Previous project

EarnFreeWater

Next project

PayWater

Next project

PayWater

Create a free website with Framer, the website builder loved by startups, designers and agencies.