Menu
Visual assets

Maps

Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat.

Mapbox Streets

The chosen styling and palette for all AnyVan maps, comes from Mapbox. Mapbox Streets, the chosen style, is a comprehensive, general-purpose map kit that emphasizes accurate, legible styling of road and transit networks.

Figma plug-ins

Mapsicle

Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world. Once you've placed a map in your designs, head back into Mapsicle to adjust the location, style, zoom level and more. Mapsicle uses Mapbox maps to give you a variety of customization options.

Learn more

Map Maker

Map Maker allows you to make a customized map blazing fast. It currently supports Google Maps and Mapbox.

Learn more

Palette

Taking the Mapbox Streets' palette as the foundation we can create and develop manually drawn maps that can still feel cohesive and consistent with the maps seen in the interfaces. These colours are only to be used within this context

  • Sienna

    • HEX#e59558
    • RGB236, 250, 0
    • CMYK6, 0, 100, 2
  • Pineapple

    • HEX#e5c45d
    • RGB236, 250, 0
    • CMYK6, 0, 100, 2
  • Quill

    • HEX#e6e3df
    • RGB236, 250, 0
    • CMYK6, 0, 100, 2
  • Apple

    • HEX#bbe39d
    • RGB236, 250, 0
    • CMYK6, 0, 100, 2
  • Seagull

    • HEX#8aceec
    • RGB236, 250, 0
    • CMYK6, 0, 100, 2
  • Indigo

    • HEX#4960c5
    • RGB236, 250, 0
    • CMYK6, 0, 100, 2

This applies to static maps as well, following the same style and colour guides provided - and used digitally - by MapBox

Markers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat

Predefined palette

Picton Blue#41A5DDBlue Zodiac#102542Blue East#149ABFBlue Matisse#1B5299Blue Elephant#187795Blue Dodger#2191FBBlue Tropical#F74F64Red Vermillion#DB3A34Red Lilac#EC9DEDPink Cherry#FF1053Pink Flush#E5417CPink Cerise#D741A7Pink Lipstick#9b0077Purple Rum#846B8APurple Eggplant#4B244APurple Cannon#9B5094Purple Victoria#564787Purple Lavender#E6E6FAPurple Wine#792359Purple Casablanca#fcac1bYellow Gold#db9711Yellow Corn#FFE814Yellow Conifer#92f04cGreen Turmeric#B6C649Green Haze#00a77bGreen Goblin#488B49Green Atlantis#85CB33Green Feijoa#8CD790Green Turquoise#4ECDC4Teal Java#30f7ddTeal Neon#FC9937Orange Sienna#F26430Orange Sunset#FF6F59Orange

Pairings

The idea when building routes is to maximum the visual difference between the two points; in order to achieve this, never pick a starting and delivery colour from the same family

Vans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac finibus risus. Aliquam erat volutpat. Donec mollis est urna, at pulvinar odio aliquet eget. Donec tellus felis, pulvinar eu neque nec, iaculis dictum erat

Routing

When drawing routes manually, or specifying them digitally, ensure consistency with the following guidelines - always use rounded joins and caps, the stroke weight / thickness should be 5px.

Completed portions of routes should be shown at 30% opacity