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

(Sign up for the beta)

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
Day
#484444
Night
#979190
Info

Public Gothic

Font range (px):
  • Large: 10 - 34
  • Medium: 10 - 24
  • Small: 10 - 22

States
Day
#242424
Night
#979190
Info

Public Gothic

Letter spacing: 0.5 em
Font range (px):
  • Large: 10 - 18
  • Medium: 10 - 16
  • Small: 10 - 14

Cities - Large
Day
#484444
Night
#BBB8B7
Info

Public Gothic

Font range (px):
  • Large: 12 - 22

Cities - Small
Day
#484444
Night
#BBB8B7
Info

Public Gothic

Font range (px):
  • Medium: 12 - 22
  • Small: 12 - 22
(Each has a different min zoom)

Towns
Day
#646160
Night
#C9BAB5
Info

Roemisch
Stehend Regular
Font range (px):
  • 11 - 20

Villages
Day
#484444
Night
#BBB8B7
Info

Roemisch
Stehend Light
Font range (px):
  • 11 - 18

Hamlets
Day
#484444
Night
#BBB8B7
Info

Roemisch
Stehend Regular
Font range (px):
  • 11 - 16

Suburbs
Day
#323030
Night
#F1EDEB
Info

Roemisch
Liegend Har (Light)
Font range (px):
  • 11 - 18

Neighborhoods
Day
#323030
Night
#F1EDEB
Info

Roemisch
Stehend Regular
Font range (px):
  • 11 - 16

Roads
Day
#484444
Night
#BBB8B7
Info

Roemisch
Stehend Regular
Font range (px):
  • Large: 10 - 16
  • Medium: 10 - 14
  • Small: 10 - 13

Highway Shields
Day
#484444
Night
#F1EDEB
Info

Replica Bold
Font size (px):
  • 9

Water and Waterways
Day
#70CDD8
Night
#4FB2C4
Info

Roemisch
Reverse Oblique
Font size (px):
  • Large: 13 - 18
  • Small: 13 - 16

Airports
Day
#484444
Night
#BBB8B7
Info

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

Day
#F1EDEB
Night
#323030
Info

A lightly debossed hatch texture overlaid on a solid backdrop.

Water
Day
#4FB2C4
Night
#103C49
Info

A light "X" texture resembling folded paper.
Detail:

Landcover: Greens

Forest, scrub, grass, crop

Day
#899A70 #B6BEA6 #DBDBD1 #EBE8E4
Night
#52732E #576E3B #5B6A47 #5F6554
Info

A custom gradient across the four landcover classes:

Landcover: Snow

Snow

Day
#F3F0EF
Night
#595959
Info

A light gray color to indicate areas mainly covered in snow.

Land Use: Green spaces

Parks, cemeteries, grass, trees

Day
#899A70
Night
#2B391A
Info

Same color as landcover: grass Includes a double-carat texture.
Detail:

Land Use: Institutions

Hospitals and schools

Day
#F7E6BA
Night
#957D4A
Info

A light yellow with a crosshatch brings a splash of color to the map.
Detail:

Roads

Motorways, primary, secondary, tertiary, and streets.

Day
#979190 #BBB8B7 #FDFDFD
Night
#979190 #908B8A #646160
Info

Shades of grey and line width delineate the various classes of roads.

Buildings
Day
#E1DDDB
Night
#555251
Info

A simple grey polygon with subtle outline and grid pattern.
Detail: