Map Style Guide
A layer-by-layer review
Firef.ly is a new travel app out in beta right now.
Firef.ly is a mobile app that distills the best of trip planning, travel guides, journalling, sharing and personalised mementos, designed for today’s smartphone-enabled travel
I designed a "Day" and a "Night" style using Mapbox Studio to accompany the app. By using the latest OpenStreetMap data and layer compositing tools, the result is a stylish, accurate, performant map for use in the app.
Below are all the major design elements used in the map. You can browse a side-by-side interactive map by clicking below.
Typography
Countries
#484444
#979190
Public Gothic
Font range (px):- Large: 10 - 34
- Medium: 10 - 24
- Small: 10 - 22
States
#242424
#979190
Public Gothic
Letter spacing: 0.5 emFont range (px):
- Large: 10 - 18
- Medium: 10 - 16
- Small: 10 - 14
Cities - Large
#484444
#BBB8B7
Public Gothic
Font range (px):- Large: 12 - 22
Cities - Small
#484444
#BBB8B7
Public Gothic
Font range (px):- Medium: 12 - 22
- Small: 12 - 22
Towns
#646160
#C9BAB5
Roemisch
Stehend Regular
Font range (px):- 11 - 20
Villages
#484444
#BBB8B7
Roemisch
Stehend Light
Font range (px):- 11 - 18
Hamlets
#484444
#BBB8B7
Roemisch
Stehend Regular
Font range (px):- 11 - 16
Suburbs
#323030
#F1EDEB
Roemisch
Liegend Har (Light)
Font range (px):- 11 - 18
Neighborhoods
#323030
#F1EDEB
Roemisch
Stehend Regular
Font range (px):- 11 - 16
Roads
#484444
#BBB8B7
Roemisch
Stehend Regular
Font range (px):- Large: 10 - 16
- Medium: 10 - 14
- Small: 10 - 13
Highway Shields
#484444
#F1EDEB
Replica Bold
Font size (px):- 9
Water and Waterways
#70CDD8
#4FB2C4
Roemisch
Reverse Oblique
Font size (px):- Large: 13 - 18
- Small: 13 - 16
Airports
#484444
#BBB8B7
Roemisch
Stehend Regular
Font size (px):- 12 - 18
Typographic Relationships
Showing the size of each text element and it's relationship to other labels on at the same time.
Background
#F1EDEB
#323030
A lightly debossed hatch texture overlaid on a solid backdrop.
Water
#4FB2C4
#103C49
A light "X" texture resembling folded paper.
Detail:
Landcover: Greens
Forest, scrub, grass, crop
#899A70 #B6BEA6 #DBDBD1 #EBE8E4
#52732E #576E3B #5B6A47 #5F6554
A custom gradient across the four landcover classes:
Landcover: Snow
Snow
#F3F0EF
#595959
A light gray color to indicate areas mainly covered in snow.
Land Use: Green spaces
Parks, cemeteries, grass, trees
#899A70
#2B391A
Same color as landcover: grass Includes a double-carat texture.
Detail:
Land Use: Institutions
Hospitals and schools
#F7E6BA
#957D4A
A light yellow with a crosshatch brings a splash of color to the map.
Detail:
Roads
Motorways, primary, secondary, tertiary, and streets.
#979190 #BBB8B7 #FDFDFD
#979190 #908B8A #646160
Shades of grey and line width delineate the various classes of roads.
Buildings
#E1DDDB
#555251
A simple grey polygon with subtle outline and grid pattern.
Detail:
