MapTrack Design System

MapTrack Design System mockup preview
Click to expand

MapTrack is a location-aware, overlay-centric design system built for map-based and location tracking mobile apps. It layers informational panels, route cards, and point-of-interest markers above a persistent map canvas without obstructing the spatial context. The teal-orange-navy palette provides strong contrast against varied map tiles. Every component is designed for wayfinding clarity, supporting both driving and walking navigation patterns with thumb-friendly controls.

Primary#0D9488
Secondary#F97316
Tertiary#1E3A5F
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayUrbanist · 34px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineUrbanist · 26px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadUrbanist · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeOpen Sans · 17px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyOpen Sans · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallOpen Sans · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionOpen Sans · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineOpen Sans · 11px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 6px

MapTrack is a location-aware, overlay-centric design system built for map-based and location tracking mobile apps. It layers informational panels, route cards, and point-of-interest markers above a persistent map canvas without obstructing the spatial context. The teal-orange-navy palette provides strong contrast against varied map tiles. Every component is designed for wayfinding clarity, supporting both driving and walking navigation patterns with thumb-friendly controls.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

keep the map visible behind overlay elements -- use translucent or partial-height sheets.
use the teal primary color for route lines and navigation actions for instant recognition.
provide a 'recenter' FAB that returns the map to the user's current location.
animate route lines drawing on the map using a teal stroke with a directional gradient.
use orange for time-sensitive information (ETA, delays) to create urgency contrast.
support both light and dark map tile modes and adjust overlay contrast accordingly.

Don't

cover more than 40% of the map viewport with bottom sheets at their resting position.
place interactive elements within 12px of screen edges -- respect thumb ergonomics.
auto-zoom the map without user consent -- sudden viewport changes are disorienting.
display dense text on map markers -- use icons and reveal details on tap.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.3 KB
Downloads 0
clean light mobile-app modern travel

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/maptrack and implement it in my code

Don't have the MCP? Install it here