OpenStreetMap Design System Deep Dive

1. Brand Overview

OpenStreetMap is the open-data map project that’s been quietly powering a huge swath of the web. Its design language matches its ethos: utilitarian, no-frills, community-first. You’re not here for branding fireworks—you’re here to get from point A to B, edit a feature, or query map data. The UI reflects that.

The vibe is functional transparency. Colors are chosen for clarity, not marketing bravado. Typography sticks to system fonts—this keeps loading times low, ensures consistency across devices, and avoids licensing headaches. It also communicates an open-source culture: no proprietary typefaces, no locked-in aesthetics.

They lean on Bootstrap-style variables and some Vuetify components, but the overall feel is custom. Buttons are rectangular with modest rounding (mostly 6px), shadows are rare, borders do the heavy lifting for separation. The layout follows a strict 8px grid, with some 4px steps for finer control.

Odd detail: interactive states sometimes jump to unexpected color changes, like hover states going “forest green” on a blue button. It’s not super consistent, but it’s functional. This kind of mismatch is typical in community-driven projects where UI evolves incrementally.

The audience? Mappers, GIS pros, and casual users checking a location. Developers embedding OSM tiles. Contributors editing roads. The system has to support high-density controls without clutter. They nailed that balance—everything is clearly clickable, but nothing screams for attention unless it’s a primary action.

I like how they use subdued grays (#888888, #545454) to let the map itself be the star. The map is the brand’s hero image; the UI is scaffolding. They don’t over-polish it, which makes sense. This isn’t a marketing site—it’s a tool. The design serves the map and the data.

2. Color System

2.1 Primary Colors

Primary is #7092ff (rgb(112, 146, 255)). It’s a calm, mid-saturation blue—more approachable than corporate navy, less aggressive than electric blue. Blue in mapping UI is safe: it’s associated with water, navigation, trust. Compared to Google Maps’ sharper blues, OSM’s primary feels softer, less “productized.”

Secondary is #e9ecef (rgb(233, 236, 239)), a light gray. It’s used for backgrounds and subtle surfaces. This keeps contrast high against black text and works well in light mode.

The palette is functional: whites (#ffffff), grays (#888888, #545454), true blacks (#000000), and functional colors for states (green #7ebc6f, red #dc3545, etc.).

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally solid: primary blue against white passes WCAG AA for large text and UI elements. Gray #888888 on white is borderline for small text—acceptable for secondary labels, but not for body copy.

Dark mode isn’t explicit here; colors are tuned for light backgrounds. The “BG subtle” variants (#e2e9ff, #cff4fc) are light tints that would vanish in dark mode unless swapped.

2.4 Usage Guide

• Primary Blue (#7092ff) — only for primary actions. Avoid using it for borders or passive elements.
• Gray tones (#888888, #545454) — for secondary text, icons, disabled states.
• Success (#7ebc6f) and Danger (#dc3545) — reserve for validation and status, not decoration.
• Avoid mixing deep blue (#2244dd) with primary blue in the same component; it looks inconsistent.
• White + black for maximum contrast; use subtle grays in large areas to reduce eye strain.

3. Typography

3.1 Font Families

Everything is system-ui with a full stack:
system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

Some buttons/links use Helvetica Neue with fallbacks to Arial, Helvetica—likely legacy styles.

No Google Fonts, no Adobe Fonts, no variable fonts. Pure system defaults.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle. The jump from 32px to 20px for headings is steep—no H2/H3 gradations in between from the data we pulled. Smaller headings rely on weight changes (300–700) to stand out. Links often match heading weights, which makes them feel prominent.

Readability is fine; system fonts render crisply at these sizes. Captions at 12–14px are legible, but anything smaller (10px on some buttons) is cramped—functional for icon labels but risky for accessibility.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid. Common values:

4.2 Layout

Breakpoints: 98px (weird micro), 576px, 768px, 992px, 1200px, 1400px. Standard Bootstrap breakpoints plus a tiny one for very narrow controls.

Responsive handling is classic: stack controls under 768px, shrink padding, maintain map viewport priority.

5. Visual Elements

Border Radius

Values range from square (0px) to fully circular (50%). Common:

• 6px — default for buttons, inputs, select
• 4px — small corners on zoom controls
• 8px — modals, some buttons
• 32px — large pill-like shapes
• 50% — circular avatars or status indicators

Corners are consistent within control groups; zoom controls have asymmetric radii to attach to each other.

Shadows

Minimal:

• rgba(0,0,0,0.075) 0px 2px 4px — light lift for small elements
• rgba(112,146,255,0.25) 0px 0px 0px 4px — focus ring effect
• rgba(0,0,0,0.15) 0px 8px 16px — rare, for overlays

Mostly flat—borders define separation.

Borders and Dividers

1px solid is common, in grays (#dee2e6, #888888) or primary blue (#7092ff). Borders are functional, not decorative.

6. Components

6.1 Buttons

Outline Primary (btn-outline-primary)

• Default: transparent, text #cccccc, border 1px solid #7ebc6f, radius 6px 0px 0px 6px, padding 6px 12px, opacity 0.65
• Hover: text #263f1c, opacity 0.9, box-shadow rgba(136,136,136,0.267) 0 0 0 1px, transform scale(1.5)
• Active: bg #7ebc6f, text white
• Focus: box-shadow rgba(126,188,111,0.5) 0 0 0 0.2rem, bg #f4f4f4, text #585858

Primary (btn-primary)

• Default: bg #7092ff, text white, border 1px solid #7092ff, radius 0px 6px 6px 0px, padding 4px
• Hover: bg initial, text #263f1c
• Active: bg var(--bs-btn-active-bg)
• Focus: bg black, text #585858, box-shadow rgba(126,188,111,0.5) 0 0 0 0.2rem

Zoom Control (zoomin)

• Default: bg rgba(0,0,0,0.6), text white, radius 4px 0px 0px, padding 10px
• Hover: text #263f1c, transform scale(1.5)

Other Control

Similar to zoom but with 4px 0px 0px 4px radius.

6.2 Links

Variants:

• Black (#000000) — headings, hover underline + #263f1c
• Gray (#cccccc) — disabled states
• Gray (#888888) — secondary nav
• White (#ffffff) — on dark backgrounds
• Blue (#2244dd) — accent links
• Teal (#0078a8) — special links
• Green (#60a94f) — success links

Hover consistently underlines and shifts to #263f1c.

6.3 Forms

Text inputs:

• Default: bg white, text #212529, border 1px solid #b8c9ff, radius 6px 0px 0px 6px, padding 4px 8px, box-shadow rgba(112,146,255,0.25) 0 0 0 4px
• Focus: border-color var(--bs-form-invalid-border-color) (red #dc3545), box-shadow 0 0 0 .25rem rgba(var(--bs-danger-rgb),0.25)

Validation colors: green #7ebc6f for valid, red #dc3545 for invalid.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-500: #888888;
  --color-black: #000000;
  --color-primary-blue: #7092ff;
  --color-gray-200: #dee2e6;
  --color-deep-blue: #2244dd;
  --color-gray-600: #545454;
  --color-gray-100: #e9ecef;
  --color-pale-green: #dcedd7;
  --color-warning-bg-subtle: #fff3cd;
  --color-danger-text-emphasis: #58151c;
  --color-info-text-emphasis: #055160;
  --color-code-pink: #d63384;
  --color-primary-text-emphasis: #2d3a66;
  --color-primary-bg-subtle: #e2e9ff;
  --color-success-text-emphasis: #324b2c;
  --color-secondary-text-emphasis: #363636;
  --color-carousel-caption: #ffffff;
  --color-info-bg-subtle: #cff4fc;
  --color-emphasis-black: #000000;
  --color-form-invalid: #dc3545;
  --color-highlight: #212529;
  --color-dark-bg-subtle: #ced4da;
  --color-danger-bg-subtle: #f8d7da;
  --color-form-valid: #7ebc6f;
  --color-border-blue: #b8c9ff;
  --color-link-teal: #0078a8;
  --color-success-green: #60a94f;

  /* Typography */
  --font-system: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-helvetica: "Helvetica Neue", Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3-5: 3.5px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-28: 28px;

  /* Radius */
  --radius-0: 0px;
  --radius-3-5: 3.5px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-32: 32px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-light: rgba(0,0,0,0.075) 0px 2px 4px;
  --shadow-focus-blue: rgba(112,146,255,0.25) 0px 0px 0px 4px;
  --shadow-overlay: rgba(0,0,0,0.15) 0px 8px 16px;
}

8. AI Coding Assistant Prompt

# OpenStreetMap Design System Specification

You are an OpenStreetMap design expert. Build UIs matching their visual language exactly.

## Brand Context
OpenStreetMap’s design is utilitarian and map-first. Controls are functional, colors are chosen for clarity, typography is system-default, and the layout follows an 8px grid. Borders separate elements; shadows are rare.

## Color Palette
- Primary Blue: #7092ff — Primary buttons, CTAs
- Secondary Gray: #e9ecef — Background panels
- White: #ffffff — Base background
- Gray-500: #888888 — Secondary text
- Black: #000000 — Primary text
- Gray-200: #dee2e6 — Borders, modal headers
- Deep Blue: #2244dd — Links
- Gray-600: #545454 — Secondary UI text
- Pale Green: #dcedd7 — Hover/focus accent
- Warning BG Subtle: #fff3cd — Warning backgrounds
- Danger Text Emphasis: #58151c — Error text
- Info Text Emphasis: #055160 — Info text
- Code Pink: #d63384 — Inline code
- Primary Text Emphasis: #2d3a66 — Headings
- Primary BG Subtle: #e2e9ff — Selected items
- Success Text Emphasis: #324b2c — Success text
- Secondary Text Emphasis: #363636 — Labels
- Info BG Subtle: #cff4fc — Info panels
- Form Invalid: #dc3545 — Error borders
- Dark BG Subtle: #ced4da — Dark panels
- Danger BG Subtle: #f8d7da — Error background
- Form Valid: #7ebc6f — Success borders
- Border Blue: #b8c9ff — Input borders
- Link Teal: #0078a8 — Hyperlinks
- Success Green: #60a94f — Positive links

## Typography
Font Families:
- UI: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
- Legacy: Helvetica Neue, Arial, Helvetica

Type Sizes:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | system-ui | 32px | 500 | 1.20 | Page titles |
| H1-sm | system-ui | 20px | 500 | 1.50 | Section titles |
| H1-alt | system-ui | 18px | 600 | 1.20 | Subheadings |
| Link-lg | system-ui | 18px | 600 | 1.20 | Prominent links |
| Body | system-ui | 16px | 400 | 1.50 | Body text |
| Link | system-ui | 16px | 400 | 1.50 | Standard links |
| Button | system-ui | 16px | 400 | 1.50 | Button labels |
| Caption | system-ui | 14px | 400 | 1.50 | Small text |
| Caption-sm | system-ui | 12.25px | 400 | 1.50 | Footnotes |
| Button-xs | system-ui | 10px | 400 | 1.50 | Icon buttons |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 3.5px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 24px, 28px  
Use multiples of base for all padding/margins.

## Border Radius
- none: 0px — tables
- sm: 4px — small controls
- md: 6px — buttons, inputs
- lg: 8px — modals
- pill: 32px — large pills
- full: 50% — avatars

## Shadows & Depth
- Light: rgba(0,0,0,0.075) 0px 2px 4px
- Focus ring: rgba(112,146,255,0.25) 0px 0px 0px 4px
- Overlay: rgba(0,0,0,0.15) 0px 8px 16px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #7092ff;
  color: #ffffff;
  padding: 4px;
  border-radius: 0px 6px 6px 0px;
  border: 1px solid #7092ff;
  font-weight: 400;
  font-size: 16px;
}
.btn-primary:hover { background: initial; color: #263f1c; }
.btn-primary:focus { background: #000000; color: #585858; box-shadow: rgba(126,188,111,0.5) 0 0 0 0.2rem; }
```

### Outline Primary Button
```css
.btn-outline-primary {
  background: transparent;
  color: #cccccc;
  padding: 6px 12px;
  border-radius: 6px 0px 0px 6px;
  border: 1px solid #7ebc6f;
  font-size: 14px;
}
.btn-outline-primary:hover { color: #263f1c; box-shadow: rgba(136,136,136,0.267) 0 0 0 1px; transform: scale(1.5); }
.btn-outline-primary:active { background: #7ebc6f; color: #ffffff; }
```

### Input Field
```css
.input {
  background: #ffffff;
  color: #212529;
  border: 1px solid #b8c9ff;
  border-radius: 6px 0px 0px 6px;
  padding: 4px 8px;
  box-shadow: rgba(112,146,255,0.25) 0px 0px 0px 4px;
}
.input:focus { border-color: #dc3545; box-shadow: 0 0 0 .25rem rgba(220,53,69,0.25); }
```

## Layout & Responsive Rules
Max content width: none (map viewport fills)  
Page padding: multiples of 8px  
Breakpoints: 98px, 576px, 768px, 992px, 1200px, 1400px

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus rings: use brand focus shadow
- Hover: underline links, color shift to #263f1c

## DO List
- Use only palette colors
- Keep 8px grid
- Match border radius to component type
- Use system fonts
- Maintain consistent hover underline for links

## DON'T List
- Invent new colors
- Mix sharp and rounded corners in same group
- Use heavy shadows
- Shrink text below 12px except icon labels

## Code Examples

Primary Button:
```css
.btn-primary { background: #7092ff; color: #fff; border-radius: 0 6px 6px 0; }
```

Card:
```css
.card { background: #fff; border-radius: 8px; padding: 16px; border: 1px solid #dee2e6; }
```

Form Input:
```css
.input { border: 1px solid #b8c9ff; border-radius: 6px; padding: 4px 8px; }
```

9. Summary

TL;DR — OpenStreetMap’s design is utilitarian, grid-based, and map-first. Colors are functional, typography is system-default, and components are consistent but minimal. Borders define structure; shadows are rare.

Brand Keywords

• utilitarian-minimalist
• map-centric
• open-source-functional
• clarity-first