# Mapstr Design System

> High-contrast utility meets sunny cartographic optimism, anchored by deep obsidian type on a warm yellow and soft-grey canvas.

**Source:** https://mapstr.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Mapstr utilizes a high-contrast "monochrome-plus-one" system where a dominant achromatic foundation of Obsidian (#202020) and White Smoke (#efeff1) is punctuated by a single high-energy primary accent: Sun Yellow (#ffc222). Typography is exclusively **DM Sans**, leveraging heavy weights (700) for massive display headers and medium weights (500) for interactive elements. The interface relies on generous spacing (base unit 4px, scaling to 120px) and extreme pill-shaped geometry (100px radius) for primary actions and container groups. Surfaces alternate between pure white and a very light grey (#f9f9f9) to create a rhythmic, structured scrolling experience.

## Signature DNA
1. **The Obsidian Pill** (Primary action containers and buttons use a 100px radius with #202020 backgrounds, creating a distinct "stamp" look against light backgrounds. Observed on all analyzed pages.)
2. **Sun-Drenched Heroes** (Full-bleed sections using #ffc222 as a background color to signal community and exploration, paired with white or black text. Observed on https://mapstr.com.)
3. **DM Sans Hierarchy** (A strict reliance on DM Sans with a clear jump from 16px body text to 70px display headers, often using weight 700 to anchor the page. Observed on https://mapstr.com and https://mapstr.com/about.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.black}` | `#202020` | Primary text, button backgrounds, dark section surfaces | 126 | 1 | `css_variable:--black` |
| `{colors.white}` | `#ffffff` | Page canvas, text on dark backgrounds, card surfaces | 39 | 0.8 | `computed_style` |
| `{colors.grey-dark}` | `#56565a` | Secondary body text, descriptive labels | 22 | 1 | `css_variable:--grey-dark` |
| `{colors.little-grey}` | `#f9f9f9` | Subtle section backgrounds, borders | 9 | 1 | `css_variable:--little-grey` |
| `{colors.white-smoke}` | `#efeff1` | Tertiary surfaces, secondary button backgrounds | 3 | 1 | `css_variable:--white-smoke` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.yellow}` | `#ffc222` | Primary brand accent, hero backgrounds, primary CTAs | 2 | 1 | `css_variable:--yellow` |
| `{colors.dark-yellow}` | `#edac00` | Accent text, hover states for yellow elements | 16 | 1 | `css_variable:--dark-yellow` |
| `{colors.extra-light-yellow}` | `#fffcf3` | Decorative surface tints, soft emphasis | 4 | 1 | `css_variable:--extra-light-yellow` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| DM Sans | 400, 500, 700 | All roles (Display, Heading, Body, UI) | DM Sans (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-mega}` | 70px | 72px | normal | 700 | Hero H1 | `h1.white.bold` |
| `{type.display-lg}` | 40px | 52px | normal | 500 | Section headers | `h2.center.mb70` |
| `{type.heading-md}` | 32px | 42px | normal | 700 | Sub-section headers | `h3.bold` |
| `{type.heading-sm}` | 20px | 26px | normal | 700 | Card titles | `div._20px.bold` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Intro paragraphs | `p.mb40` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body text | `div.navbar.white` |
| `{type.body-sm}` | 14px | 18px | normal | 700 | Small labels/UI | `div._14px.bold` |
| `{type.caption}` | 12px | 16px | normal | 400 | Footer links | `a.footer_12px` |

### Principles
1. **Bold Anchors**: All major sections must be introduced by a weight 700 heading to maintain the "utility" feel.
2. **Tight Display**: Display sizes (40px+) use line-heights close to 1.2-1.3x to keep large text blocks cohesive.
3. **Medium UI**: Interactive elements (dropdowns, nav links) default to weight 500 for better legibility against varied backgrounds.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 12px | 3 |
| `{space.sm}` | 16px | 19 |
| `{space.md}` | 32px | 45 |
| `{space.lg}` | 60px | 3 |
| `{space.xl}` | 100px | 4 |
| `{space.section}` | 120px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default sections | 220 occurrences |
| `{radius.md}` | 12px | Standard cards, input fields | 23 occurrences |
| `{radius.lg}` | 20px | Large feature cards | 3 occurrences |
| `{radius.pill}` | 100px | Buttons, primary action groups | 42 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | 0px | All components (Mapstr is a flat system) | No shadows captured in source |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get Started", "Download")
**Pages observed:** https://mapstr.com
**Spec:** Background `{colors.yellow}` (#ffc222) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (100px) / Padding 14px 28px / Typography `{type.body-md}` (16px, 700)
**States observed:** Default | Hover: Not captured | Focus: Not captured | Active: Not captured | Disabled: Not captured

#### Secondary Button (Dark)
**Role:** Alternative primary action or high-contrast toggle
**Pages observed:** https://mapstr.com, https://mapstr.com/pricing
**Spec:** Background `{colors.black}` (#202020) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (100px) / Padding 14px 28px / Typography `{type.body-md}` (16px, 500)
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card (White)
**Role:** Standard content container for benefits or features
**Pages observed:** https://mapstr.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.black}` (#202020) / Radius `{radius.md}` (12px) / Padding 32px / Border 0px
**States observed:** Default

#### Testimonial Card
**Role:** User feedback display
**Pages observed:** https://mapstr.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.black}` (#202020) / Radius `{radius.md}` (12px) / Padding 32px / Typography `{type.body-md}` (16px, 400)
**States observed:** Default

### Tier 3: Surface-specific

#### Light Grey Section
**Role:** Alternating background to break up long pages
**Pages observed:** https://mapstr.com
**Spec:** Background `{colors.little-grey}` (#f9f9f9) / Border-top 1px `{colors.little-grey}` / Padding-top 120px
**States observed:** Default

#### Yellow Hero Band
**Role:** High-impact community or feature announcement
**Pages observed:** https://mapstr.com
**Spec:** Background `{colors.yellow}` (#ffc222) / Text `{colors.white}` (#ffffff) / Padding 100px 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Vertical Gap | 120px |
| Grid Gutter | 32px |
| Container Padding | 16px (mobile) / 32px (desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, H1 reduces from 70px to ~40px, padding reduces to 16px |
| Desktop | 1440px | Multi-column grids (3-up for testimonials), 120px section spacing |

## Imagery & decoration
Mapstr uses high-quality device mockups (iPhone frames) to showcase the app interface. Decorative elements include small circular "map pins" and icons with soft drop shadows (rendered in assets, not CSS). The brand avoids complex gradients, preferring solid blocks of #ffc222 or #202020.

## Do's
- Use `#ffc222` for the most important action on the page.
- Use `DM Sans` for all text, ensuring a weight of 700 for headers.
- Apply a `100px` border radius to all primary buttons.
- Alternate between `#ffffff` and `#f9f9f9` for page sections to maintain rhythm.
- Maintain a `120px` vertical gap between major content sections.

## Don'ts
- **Wrong:** Using a sub-brand purple (#5b5ce4) as a primary button background. **Right:** Use Sun Yellow (#ffc222). **Reason:** Purple is a decorative token, not the parent primary.
- Do not use shadows on UI cards; the system is strictly flat.
- Do not use serif fonts; Mapstr is exclusively a DM Sans brand.
- Do not use sharp corners (0px) for interactive elements; use at least 12px or 100px.
- Do not use pure black (#000000) for text; use Obsidian (#202020).

## Similar brands
- **Citymapper** (Utility-first, vibrant accent colors, heavy sans-serif headers)
- **Foursquare** (Map-centric, clean card-based UI, bold primary actions)
- **Airbnb** (Generous whitespace, specific geometric radii, typography-led hierarchy)

## Quick start

### CSS Custom Properties
```css
:root {
  --mapstr-black: #202020;
  --mapstr-yellow: #ffc222;
  --mapstr-grey-dark: #56565a;
  --mapstr-white-smoke: #efeff1;
  --mapstr-little-grey: #f9f9f9;
  --mapstr-radius-pill: 100px;
  --mapstr-radius-card: 12px;
  --mapstr-font-main: 'DM Sans', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ffc222;
  --color-neutral-900: #202020;
  --color-neutral-100: #f9f9f9;
  --font-sans: 'DM Sans';
  --radius-pill: 100px;
  --spacing-section: 120px;
}
```

## Agent prompt examples
- "Create a Mapstr-style primary CTA button using #ffc222 background, white DM Sans text at weight 700, and a 100px border radius."
- "Design a feature section with a #f9f9f9 background, a 32px DM Sans bold header in #202020, and a 3-column grid of white cards with 12px radius."
- "Generate a hero section for Mapstr using a full-width #ffc222 background and a 70px DM Sans bold H1 in white."

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Specific mobile-only typography tokens (e.g., exact H1 size on 390px) were inferred from visual scaling.
- Form input validation states (Success/Error) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://mapstr.com | 1440x900 | 2026-06-06 05:12 |
| Pricing | https://mapstr.com/pricing | 1440x900 | 2026-06-06 05:12 |
| About | https://mapstr.com/about | 1440x900 | 2026-06-06 05:12 |