---
name: Mapbox
description: "Mapbox provides a definitive example of a high-end developer tool aesthetic, balancing technical power with visual restraint."
version: alpha

colors:
  background: "#0E1012"
  primary: "#FFFFFF"
  secondary: "#A0AABA"
  tertiary: "#007AFC"
  neutral: "#333943"
  bg-soft: "#15171B"
  muted-soft: "#566171"
  line: "rgba(51, 57, 67, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

The location platform of choice for developers, automakers, and innovators.

*A powerful toolkit for builders who want to overlay intelligence on the physical world.*

## Colors

High-contrast dark mode designed to make colorful map data and blue accents stand out.

- **Background (`#0E1012`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#A0AABA`)** — uses `ink-soft` token
- **Accent (`#007AFC`)** — uses `accent` token
- **Muted (`#333943`)** — uses `muted` token
- **Borders (`rgba(51, 57, 67, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Primary headlines use a geometric sans-serif.
- Body text relies on a legible humanist sans-serif.
- UI elements use standard sans-serif fallbacks.

## Layout

Centered, content-heavy layout typical of a SaaS platform.

*Rhythm:* Standard 4px grid base.

## Elevation & Depth

- 0px 0px 100px 50px rgb(14, 16, 18)
- Borders: Subtle 1px borders using muted dark gray (#333943) to define elements without harshness.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 100px

## Components

- **button:** Pill-shaped (border-radius: 100px) with solid accent fills or subtle outlines.
- **card:** Dark panels (bg: #15171B) with soft shadows and generous rounded corners.
- **chip:** Small, outlined text elements with high border-radius.
- **input:** Subtle dark inputs with clear contrast text.
- **hero:** Centered massive typography with dual-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use light backgrounds — screenshot shows a dark-themed interface.
- Don't use decorative serif fonts — screenshot shows clean sans-serif typography.
- Don't use sharp, square corners on buttons — screenshot shows pill-shaped buttons.
- Don't use neon or overly saturated colors — screenshot shows a focused blue accent.
- Don't use thin, delicate lines for borders — screenshot shows clear 1px borders.
- Don't overcrowd the hero section — screenshot shows generous whitespace and large type.

---

## System Prompt (paste into AI agent)

```
Mapbox is a premium SaaS developer platform for mapping and location intelligence. It uses a deep dark background (#0E1012) with crisp white text and a vibrant blue accent (#007AFC). Typography is primarily geometric and humanist sans-serif, with large, bold headlines and clear body text. The layout is spacious and centered. Critical don'ts: avoid light themes, serif fonts, square buttons, neon colors, thin borders, and cluttered hero sections.
```