TrendingCities design system

Modern city intelligence, designed for fast decisions.

A live design-system package for city profiles, rankings, comparison matrices, data cards, responsive mobile layouts, and SampleShots-powered photography treatments.

Verified surfaces

4Core screens
26Specimens
390pxMobile frame
6City photo sets
Foundation

Colors & type

Warm-white surfaces, deep-navy text, civic-blue primary, positive city signals, chart palettes, and Geist typography.

Components

Cards, badges, inputs

Reusable UI parts for metrics, city cards, filters, rankings, callouts, deltas, skeletons, and tables.

Imagery

Photo treatment

SampleShots-sourced photo rules, navy scrims, credit chips, gradients, ratios, loading, and mobile behavior.

City page

City profile

Hero score, key metrics, risk callout, neighborhoods, gallery, and comparison CTA.

Rankings

Ranking table

Filterable table-to-card pattern with rank badges, sparklines, and methodology block.

Compare

City comparison

Side-by-side metrics with winner labels and simple affordability visuals.

Prototype/design-system package only. Data is illustrative; production should wire canonical data sources and final licensed/owned imagery.