---
title: "Mapbox design system"
variant: extended
source: https://www.mapbox.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/mapbox-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mapbox · Design System

> A bright canvas for location technology

**Theme:** light · **Industry:** devtools · **Source:** https://www.mapbox.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mapbox’s homepage pairs a restrained white interface with confident black typography and vivid blue calls to action. Developer-oriented product demos, customer marks, and editorial content make the platform tangible without crowding the page.

## North star

Keep the interface bright and spacious, using bold dark type, restrained blue actions, and product imagery to make complex location technology feel approachable.

## Overview

The page uses white as a continuous canvas, letting large, near-black headlines and the saturated blue sign-up action carry the strongest interface contrast. Muted charcoal supports navigation and body copy; pale cool-gray surfaces and hairline borders separate cards and code-related details without making the page feel boxed in. Cera Pro gives headlines a broad, rounded confidence, while compact uppercase eyebrow labels add a technical editorial cue. The hero balances a left-aligned message and actions against a dark product demo showing code alongside a navigation app, then gives the interface room to breathe. Customer logos and content cards form orderly horizontal and modular groupings. Across the longer page, generous blank intervals distinguish major content bands; map imagery, video, and dark product mockups provide visual depth. Blue is reserved for action and emphasis, while green and pale blue appear as smaller technical accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, broad content backgrounds, and light text on dark surfaces. |
| Carbon Ink | `#0e1012` | `--color-carbon-ink` | brand | Primary headings, navigation text, and dark inverse surfaces. |
| Slate Copy | `#333943` | `--color-slate-copy` | neutral | Muted body copy, secondary links, and text on pale controls. |
| Mapbox Blue | `#007afc` | `--color-mapbox-blue` | brand | Primary sign-up action and selective link or interface emphasis. |
| Cloud Panel | `#f7f9fc` | `--color-cloud-panel` | surface | Pale card and section surfaces, including subtle gradient transitions. |
| Silver Rule | `#e0e4ec` | `--color-silver-rule` | neutral | Fine dividers and card borders that separate content on white. |
| Harbor Haze | `#8b96aa` | `--color-harbor-haze` | semantic | Soft radial glow and footer-related gradient detail, not a dominant interface color. |
| Frosted Gray | `#eceff5` | `--color-frosted-gray` | surface | Code-command control and subtle pale gradient or card transitions. |
| Night Interface | `#0a0c10` | `--color-night-interface` | surface | Dark product-demo and mock terminal surfaces within showcased interface imagery. |
| Terminal Green | `#7ee787` | `--color-terminal-green` | accent | Small code and terminal-status accents, chiefly inside product demonstrations. |
| Code Gray | `#8b949e` | `--color-code-gray` | neutral | Subdued monospace badge or code text on dark demonstration surfaces. |
| Glacier Blue | `#a5d6ff` | `--color-glacier-blue` | accent | Occasional pale-blue technical text accent, not a main page surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0e1012` (Carbon Ink) · `--color-surface-2` → `#f7f9fc` (Cloud Panel) · `--color-surface-3` → `#0a0c10` (Night Interface) · `--color-text` → `#0e1012` (Carbon Ink) · `--color-text-muted` → `#333943` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e0e4ec` (Silver Rule) · `--color-accent` → `#007afc` (Mapbox Blue) · `--color-accent-2` → `#7ee787` (Terminal Green) · `--color-accent-3` → `#a5d6ff` (Glacier Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e1012` | `#ffffff` | 19.06:1 | AAA |
| `#0e1012` | `#f7f9fc` | 18.08:1 | AAA |
| `#0e1012` | `#0a0c10` | 1.03:1 | fail |
| `#333943` | `#ffffff` | 11.62:1 | AAA |
| `#333943` | `#0e1012` | 1.64:1 | fail |
| `#333943` | `#f7f9fc` | 11.02:1 | AAA |
| `#333943` | `#0a0c10` | 1.68:1 | fail |
| `#ffffff` | `#0e1012` | 19.06:1 | AAA |
| `#ffffff` | `#f7f9fc` | 1.05:1 | fail |
| `#ffffff` | `#0a0c10` | 19.57:1 | AAA |

### Gradients

- `radial-gradient(circle closest-side, rgb(139, 150, 170) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(236, 239, 245), rgb(247, 249, 252))`
- `linear-gradient(rgb(247, 249, 252), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cera pro | `--font-body` | webfont | 400, 700, 500, 600 | Headlines, navigation, body copy, labels, buttons, and links | DM Sans |
| ui-monospace | `--font-mono` | system | 400, 500 | Code snippets and compact technical labels | Roboto Mono |

- **Cera pro:** Use bold, slightly tight-tracked display and heading styles; keep body and controls clean, with uppercase, tracked eyebrow labels.
- **ui-monospace:** Reserve for terminal-like content and badges; use a regular monospace voice rather than headline typography.

### Type scale — Augmented Fourth (ratio ≈ 1.409, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.25 | -0.01em | — | Cera pro | Large display headline treatment for prominent page messaging. |
| h1 | 46px | 700 | 1.25 | -0.01em | — | Cera pro | Primary hero headline and major page-level statements. |
| h2 | 36px | 700 | 1.3 | -0.01em | — | Cera pro | Section headings such as news and platform capabilities. |
| body | 20px | 400 | 1.65 | 0 | — | Cera pro | Supporting descriptions and explanatory platform copy. |
| caption | 18px | 400 | 1.65 | 0 | — | Cera pro | Secondary content descriptions and compact supporting text. |
| button | 15px | 500 | 1.33 | 0 | — | Cera pro | Calls to action and button labels. |
| nav | 15px | 500 | 1.25 | 0 | — | Cera pro | Primary navigation and account actions. |
| eyebrow | 14px | 500 | 1 | 0.1em | uppercase | Cera pro | Uppercase section kicker above the hero headline. |
| code | 13.5px | 400 | 1.6 | 0 | — | ui-monospace | Monospace command snippets and technical interface text. |

OpenType features in use: `"lnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 7, 8, 9, 10, 12, 16, 18, 20, 23, 24, 43, 45, 48 px.
- Section rhythm 67px · element gap 6px · card padding 51px · max content width 1344px.

Use a wide centered content area within the measured 1344px page maximum, with comfortable spacing and clear horizontal alignment. The first viewport pairs a left-aligned hero copy column with a right-side product demo; navigation and announcement sit above it. Lower sections alternate centered introductions, modular card groups, and split or multi-column showcases. Preserve generous section intervals, a 67px section-gap measure, and comfortable density; avoid compressing the long page into a tight feed.

## Shape & elevation

- Radius: button `2px` · card `16px` · badge `9999px` · xs `2px` · sm `3px` · md `4px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.7) -28px 0px 60px -14px`
- Shadow `lg` (card): `rgba(255, 255, 255, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 18px 44px -14px`
- Motion: standard transition `0.5s ease` on interactive elements.

The page is mostly flat: whitespace, pale fills, and thin gray borders define structure instead of heavy shadows. Dark product mockups provide their own visual depth, while card and showcase groupings remain crisp and restrained. Use the measured 16px card radius where rounded cards appear, and keep CTA geometry compact and clear.

## Imagery

Lead with a dark, framed product demo that juxtaposes a developer terminal and mobile navigation screen. Use map and location product visuals, customer marks, and editorial showcase imagery as evidence of real use cases. Video and image panels sit within otherwise bright, uncluttered space; technical green and blue accents belong mainly to the interface shown inside those demos.

## Components

### Announcement strip

A narrow dark-blue top banner with centered informational link and a close control.

### Primary navigation

White horizontal header with Mapbox identity, product links, language control, login, and a blue sign-up action.

### Hero message and actions

Left-aligned uppercase eyebrow, bold multi-line headline, blue primary action, and outlined secondary contact action.

### Product demo

Dark rounded showcase panel pairing code and a mobile navigation view, with a command-install control below.

### Customer logo rail

Horizontal customer marks separated into evenly arranged cells by subtle vertical hairlines.

### Showcase card

Editorial feature card with image or demo media, compact category label, supporting title, and a muted read link.

### Code command control

Pale gray rounded command field with monospace-like command content and a small copy affordance.

### Measured component styles

- **Primary button** (“Sign up”): background #007afc · text #ffffff · border 1px solid #007afc · radius 100px · padding 8px 16px · 500 15px Cera pro
- **Secondary button** (“$ npx skills add mapbox/mapbox-agent-ski”): background #eceff5 · text #333943 · border 1px solid #d5dae2 · radius 10px · padding 11px 12px · 400 16px Cera pro
- **Link** (“Read showcase→”): transparent background · text #333943 · radius 0px · padding 0px · 400 16px Cera pro
- **Card** (“Read showcase→”): transparent background · text #333943 · border 1px solid #e0e4ec · radius 0px · padding 45px 57.6px · 400 16px Cera pro
- **Badge** (“gpt-6-astra · streaming”): transparent background · text #8b949e · border 1px solid #1e2024 · radius 999px · padding 3px 10px · 400 11px ui-monospace
- **Navigation item** (“EN Log in Sign up Products Solutions Dev”): transparent background · text #0e1012 · radius 0px · padding 0px · 400 16px Cera pro

## Do

- Keep white as the dominant page canvas.
- Use Carbon Ink for strong headlines and primary navigation.
- Reserve Mapbox Blue for high-priority actions and selective emphasis.
- Pair text with concrete map, navigation, or developer-product demos.
- Separate long-page content with generous whitespace and subtle rules.
- Use monospace styling only for code and technical snippets.

## Don't

- Do not introduce unmeasured colors into the interface palette.
- Do not turn the page into a dark overall theme.
- Do not use blue as a large decorative background wash.
- Do not crowd the hero, logo rail, and content sections together.
- Do not treat illustration-only terminal colors as core brand colors.
- Do not add heavy shadows to otherwise flat cards and sections.

## Agent prompt

Build a new Mapbox-style developer platform page on a Gallery White (#ffffff) canvas. Use Carbon Ink (#0e1012) for bold, slightly tight-tracked Cera Pro-style headings and navigation, with Slate Copy (#333943) for secondary text. Keep Mapbox Blue (#007afc) for the primary CTA and restrained emphasis; use Cloud Panel (#f7f9fc), Frosted Gray (#eceff5), and Silver Rule (#e0e4ec) for quiet surfaces and dividers. Compose a clear header, a spacious split hero, and modular product or customer showcases inside a wide centered layout. Make the hero’s media a believable map, navigation, or developer demo; keep Terminal Green (#7ee787) and Glacier Blue (#a5d6ff) inside technical media rather than broad page decoration. Favor flat surfaces, hairlines, generous whitespace, and concise developer-focused copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split two-column hero with left copy and actions, right product demo. | Primary and secondary CTA, Install command affordance | Uppercase eyebrow, Bold multi-line headline, Dark demo panel |
| 2 | logo-cloud | Wide horizontal rail of customer logos in separate cells. | Customer credibility, Horizontal logo scan | Logo marks, Fine vertical separators |
| 3 | content-feed | Centered single-column section introduction. | Orient to recent updates | Centered heading, Short muted introduction |
| 4 | content-feed | Multi-column editorial card grid. | Browse recent stories, Open featured items | Category labels, Image-led cards, Read links |
| 5 | gallery | Centered gallery introduction above an interactive showcase area. | Explore live examples, Open gallery | Centered heading, Single supporting link |
| 6 | product-showcase | Two-column media showcase with wide visual panels. | Interact with map content | Large map media, Carousel controls |
| 7 | feature-grid | Centered section introduction above platform capabilities. | Understand service breadth | Centered section title, Short explanatory copy |
| 8 | feature-grid | Centered heading followed by a six-column industry-oriented showcase. | Scan use cases, Select industry | Industry labels, Visual feature cards |
| 9 | testimonials | Two-column section introduction with title and supporting copy. | Discover customer examples, Explore stories | Left-aligned heading, Supporting text, Text link |
| 10 | gallery | Multi-column showcase grid with image-led examples. | Browse use cases, Open showcase | Industry labels, Media cards, Read links |
| 11 | feature-split | Centered single-column introduction. | Reinforce developer audience | Centered heading, Brief supporting line |

## Source CSS custom properties (selected)

```css
--_color-mode---background--cm_bg-neutral-01: white;
--_color-mode---text--cm_text-neutral-02: #333943;
--_text-styles---font-size: 1rem;
--_text-styles---line-height: 1.65;
--_color-mode---text--cm_text-neutral-01: #0e1012;
--_heading-styles---font-weight: 700;
--_heading-styles---letter-spacing: -.01em;
--_text-styles---text-style-link--small--font-size<deleted|variable-24e30037-f615-f661-c7ad-61be6bfd2494>: 1rem;
--_text-styles---text-sizes--text-size-xsmall: .875rem;
--_colors--background---base--gray--bg-color-gray80<deleted|variable-f7a68d78-a613-6c88-06be-202479b38ff2>: #1c1f24;
--_text-styles---text-sizes--text-size-xlarge: 1.5rem;
--_colors---graydark-0e1012<deleted|variable-5ab8a0f7>: #0e1012;
--_colors---white-ffffff<deleted|variable-7657d7bf>: white;
--_colors---gray80-23262d<deleted|variable-344587a9>: #23262d;
--_colors--text---utility--neutral--text-color-neutral-02<deleted|variable-c92124f8-02cb-0801-dd7d-e067397cd9c0>: #566171;
--_colors---gray--gray90: #15171b;
--_colors---gray--gray85: #1c1f24;
--_colors---gray--gray70: #333943;
--_colors---gray--gray60: #566171;
--_colors---gray--gray50: #8b96aa;
--_colors---gray--gray40: #a0aaba;
--_colors---gray--gray30: #bbc2ce;
--_colors---gray--gray20: #d5dae2;
--_colors---gray--gray10: #eceff5;
--_colors---gray--gray5: #f7f9fc;
--_colors---blue--blue90: #001832;
--_colors---blue--blue80: #013165;
--_colors---blue--blue70: #004997;
--_colors---blue--blue60: #0062ca;
--_colors---blue--blue50: #007afc;
--_colors---blue--blue40: #3195ff;
--_colors---blue--blue30: #64afff;
--_colors---blue--blue20: #98caff;
--_colors---blue--blue10: #cbe4ff;
--_colors---blue--blue5: #eff7ff;
--_colors---orange--orange50: #fc8200;
--_colors---orange--orange40: #ff9b31;
--_colors---orange--orange60: #ca6800;
--_colors---red--red60: #c9220c;
--_colors---red--red50: #f13219;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mapbox-com