Brand Guidelines v1.0

Mapy

Your saved places, finally organized.

mapy.basem.ai — April 2026

Colors of the terrain

Drawn from satellite imagery, topographic maps, and golden-hour light. Ocean blues ground the interface, terrain greens signal success, and sunset amber marks the places that matter most.

Ocean — Primary

The foundation. Used for interactive elements, navigation, and primary actions.

900#0c2d48
800#103b5c
700#145074
600#1a6896
500#2185b8
400#3a9fd4
300#62b8e6
200#98d3f2
100#cce9f9
50#e8f5fc

Terrain — Secondary

Growth, success, and nature. Used for confirmation states, labels, and organic accents.

900#0d3b2a
800#145a3f
700#1a7a55
600#239b6c
500#2ebd84
400#52d09d
300#7ee0b8
200#b0edd4
100#d8f7ea
50#edfcf4

Sunset — Accent

Warmth and attention. Used for starred places, important markers, and calls to action.

900#6b3200
800#8a4100
700#a85200
600#c76500
500#e57a0a
400#f59636
300#f8b068
200#fbd0a0
100#fde8cf
50#fef6ec

Stone — Neutral

Warm neutrals tinted toward the earth. Text, borders, backgrounds, and structural elements.

950#1a1814
900#2d2a24
800#44403a
700#5c5850
600#78726a
500#948d84
400#b0a99f
300#ccc7bf
200#e5e1da
100#f2f0ec

Key Brand Colors

Two voices, one identity

Bricolage Grotesque brings character and warmth to headings. DM Sans provides clarity and comfort for body text. JetBrains Mono handles data, coordinates, and code.

Display Bricolage Grotesque · Variable 200–800

Every place
tells a story

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 · !@#$%&*()

Body DM Sans · Variable 100–1000

Mapy helps you take control of the hundreds of places you've saved across Google Maps. Browse your entire collection, add labels, organize by category, fix names and notes, and export clean lists for sharing or backup. No more scrolling endlessly through a flat, unsearchable list.

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789

Mono JetBrains Mono · 400, 500

24.7136° N, 46.6753° E — Riyadh
export-2026-04-09.json · 847 places · 12 lists
GET /api/v1/places?label=restaurant&starred=true

Type Scale

Display / 48px Saved places
H1 / 36px Saved places
H2 / 28px Saved places
H3 / 22px Saved places
H4 / 18px Saved places
Body / 16px Saved places
Small / 14px Saved places
Caption / 12px SAVED PLACES

The logotype

The Mapy logotype is set in Bricolage Grotesque Extra Bold. The amber dot inside the "a" represents a map pin — the core metaphor of placing yourself on the map. It is the only embellishment; the rest is restraint.

Light background Mapy
Dark background Mapy
Brand background Mapy
Warm gradient Mapy

Clear Space

Maintain a minimum clear space equal to the height of the letter "M" on all sides.

1x "M" 1x "M" Mapy

Minimum Sizes

Never render the logotype smaller than 18px for digital or 12pt for print. The pin dot must remain visible.

Mapy

48px — Hero

Mapy

32px — Navigation

Mapy

22px — Compact

Mapy

18px — Minimum

Building blocks

A preview of the interactive elements that form the Mapy interface. Each component uses the brand tokens for consistent look and feel.

Buttons
Inputs
Tags & Badges
Restaurant Coffee Shop Starred Want to Visit Travel
24 7 142 Restaurants 24 Starred 7
Place Cards
Blue Bottle Coffee

1 Ferry Building, San Francisco, CA

Coffee Favorites
Tartine Bakery

600 Guerrero St, San Francisco, CA

Bakery
Golden Gate Viewpoint

Fort Point, San Francisco, CA

Landmark Photo Spot

Clear, friendly, consistent

Icons use a 24px grid with 1.5px or 2px rounded strokes. They're outlined by default, filled when active. Corners are rounded to match the friendly tone of the product.

Pin
Star
Heart
Label
Search
Edit
Export
List
Map
Filter
Globe
Compass
1.75px stroke weight
Round caps and joins
24px grid, 2px padding
Outlined default, filled on active
Lucide icon family compatible

How Mapy speaks

Mapy is a helpful companion, not a corporate product. It speaks like a smart friend who genuinely wants to help you organize your places.

01

Clear over clever

Users come to get things done. Every label, button, and message should communicate instantly without requiring interpretation.

Example

"Your geospatial assets await curation"

"You have 847 saved places. Let's organize them."

02

Encouraging, not pushy

Celebrate progress without guilt-tripping inaction. Suggest improvements without making current state feel broken.

Example

"Warning: 312 places have no labels!"

"312 places could use a label. Start with your starred ones?"

03

Grounded, not generic

Use concrete language tied to maps and places. Reference the real world. Avoid abstract tech jargon or empty marketing speak.

Example

"Data successfully synchronized to cloud"

"All caught up. Your places are backed up and safe."

04

Compact and respectful

Keep messages short. Respect the user's time and screen space. Every word must earn its place, just like every pin on a map.

Example

"The export of your selected places has been completed successfully and the file is ready for download"

"Exported 42 places. Download ready."

What Mapy looks like

A sidebar-and-map layout that puts your places front and center. Browse on the left, explore on the right.

mapy.basem.ai
All Starred Restaurants Coffee Hotels
Blue Bottle Coffee
1 Ferry Building, San Francisco
Coffee Starred
🍽
Tartine Bakery
600 Guerrero St, San Francisco
Bakery
🏠
Hotel Kabuki
1625 Post St, San Francisco
Hotel
📍
Golden Gate Viewpoint
Fort Point, San Francisco
Landmark
🛒
Heath Ceramics
2900 18th St, San Francisco
Shopping
🍜
Mensho Tokyo
672 Geary St, San Francisco
Ramen
Blue Bottle Coffee
1 Ferry Building
+

Dashboard layout — sidebar for browsing, map for context. Responsive on all screen sizes.