Toronto Guide

Design System Specification v1.0

Design Principles

1. Google Maps' Information Density
Location data is presented with surgical precision. Every card contains address, category, rating, and description without feeling cramped. Cyan accent guides focus to interactive map elements.
2. Foursquare's Category System
Visual categorization uses color-coded badges and clear typography. Users can instantly identify location types while maintaining a clean, professional appearance.

Logo

Color Palette

Deep Charcoal
#14181C
Primary background, canvas
Elevated Dark
#1F2529
Cards, location entries
Border
#343A40
Borders, dividers
Electric Cyan
#00BCD4
Primary actions, location pins
Light Text
#DEE2E6
Headings, place names
Medium Text
#868E96
Body text, addresses
Rating Gold
#FFC107
Star ratings, featured content
Open Green
#4CAF50
Open status, availability

Typography

Explore Toronto

SF Mono, 700 weight, 2.5rem

Popular Destinations

SF Mono, 600 weight, 2rem

City guides require exceptional information architecture. Typography ensures addresses, categories, and descriptions are instantly scannable for location discovery.

System UI, 400 weight, 1rem

43.6532° N, 79.3832° W

SF Mono, 400 weight, 0.95rem

UI Components

Action Buttons

CN Tower
LANDMARK
301 Front St W, Toronto, ON M5V 2T6
Iconic 553m-high concrete tower with a rotating restaurant, glass floor & panoramic city views. A must-visit Toronto landmark offering breathtaking 360° views of the city and Lake Ontario.
★★★★★ 4.7 • Open Now

Icon System

Location
Landmark
Restaurant
Building