Mapbox

mapbox.com

The reference for a near-black developer platform that lets a single signal blue (#007afc) and a glowing map-tile embed do all the talking on a #0e1012 void.

Developer Tool flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Open Sans
body
Cera pro
mono

Do / Don't

Reference it for

  • Void-black canvas #0e1012 with layered near-black surfaces (#15171b, #1c1f24, #23262d) building depth through tonal steps instead of drop shadows
  • One exclusive accent: signal blue #007afc reserved for the primary CTA and active states only, never decoration
  • Paired hero CTAs: solid blue pill 'Get started for free' beside a hairline-outline ghost pill 'Contact us', both fully rounded (100px radius)
  • Geometric grotesk display (Cera Pro or similar) at ~68px weight 700 with tight -0.02em tracking for a technical, coordinate-dense headline
  • Centred hero stack: short two-word headline, one-line grey subhead (#a0aaba), CTA row, then a floating product embed below
  • Product-in-context device frame: a rounded dark card cradling a live navigation UI mock, captioned small ('Mapbox Navigation SDK')
  • Carousel of dimmed side cards flanking the centre embed, faded near to black at the edges via inset/blur overlays so focus stays central
  • Cool blue-grey neutral ramp for body and labels (#8b96aa fog through #566171 slate) instead of pure warm greys

Do not copy

  • The Mapbox circular compass-pin wordmark and logotype
  • The exact 'Maps that do more' headline and 'location platform of choice' subhead
  • The MFG EV Power navigation card UI and the specific SDK map render
  • The 'Mapbox Navigation SDK' product caption
  • Signal blue #007afc as a literal brand colour lift (borrow the single-accent discipline, not the hue)
  • The mapping/location-SDK product framing and menu taxonomy (Products/Solutions/Developers)