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:
