Travel / iOS / Android / Web

Bolt

Bolt tints everything green: green-gray pages, green-black text, green buttons, and neon mint headlines when the page goes dark.

Download
  • #2B8659
  • #207E52
  • #5CFFA4
  • #191F1C
  • #0E1010
  • #F7F9F8

Color

Every color token in the file, grouped by role.

Brand

  • primary#2B8659
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • on mint#0E1010
  • ink#191F1C
  • ink muted#5E6461
  • on night#ECEEED
  • on slate#FFFFFF

More

  • green band#207E52
  • neon#5CFFA4
  • mint#DDFFE9
  • tonal#EEF0EF
  • page#F7F9F8
  • night#0E1010
  • night green#06160E
  • slate#2F313F

Typography

Each style is set with the file's own family, size, weight and spacing.

  • InterOpen font, shown as published.
  • display72px / 750 / 80px

    Bolt

  • headline48px / 750 / 56px

    Bolt

  • title24px / 650 / 32px

    Pack my box with five dozen liquor jugs

  • lead18px / 550 / 28px

    The quick brown fox jumps over the lazy dog

  • button18px / 650 / 28px

    Continue to checkout

  • body16px / 550 / 24px

    The quick brown fox jumps over the lazy dog

  • nav14px / 600 / 20px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md24px
  • lg32px
  • xl40px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button tonal
    button-tonal
  • button mint
    button-mint
  • nav register
    nav-register
  • phone field
    phone-field
  • night section
    night-section
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 126 lines
version: alpha
name: Bolt-design-analysis
description: "A mobility and delivery super app in Bolt green (#2b8659) on a pale green-gray page, near-black dark sections lit by neon mint text, Inter at in-between weights (550, 650, 750) with tight tracking, and 48 high fully round buttons."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#2b8659"
  on-primary: "#ffffff"
  green-band: "#207e52"
  neon: "#5cffa4"
  mint: "#ddffe9"
  on-mint: "#0e1010"
  ink: "#191f1c"
  ink-muted: "#5e6461"
  tonal: "#eef0ef"
  page: "#f7f9f8"
  canvas: "#ffffff"
  night: "#0e1010"
  night-green: "#06160e"
  on-night: "#eceeed"
  slate: "#2f313f"
  on-slate: "#ffffff"

typography:
  display:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 750
    lineHeight: 80px
    letterSpacing: -2.52px
  headline:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 750
    lineHeight: 56px
    letterSpacing: -1.44px
  title:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 650
    lineHeight: 32px
    letterSpacing: -0.36px
  lead:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 550
    lineHeight: 28px
    letterSpacing: -0.2px
  button:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 650
    lineHeight: 28px
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 550
    lineHeight: 24px
    letterSpacing: -0.1px
  nav:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px

rounded:
  xs: 4px
  sm: 8px
  md: 24px
  lg: 32px
  xl: 40px
  pill: 9999px

spacing:
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 48px
    padding: 0 24px
  button-tonal:
    backgroundColor: "{colors.tonal}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 48px
    padding: 0 24px
  button-mint:
    backgroundColor: "{colors.mint}"
    textColor: "{colors.on-mint}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    height: 48px
    padding: 0 24px
  nav-register:
    backgroundColor: "{colors.slate}"
    textColor: "{colors.on-slate}"
    typography: "{typography.nav}"
    rounded: "{rounded.pill}"
    height: 32px
    padding: 0 16px
  phone-field:
    backgroundColor: "{colors.tonal}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    height: 40px
    padding: 16px
  night-section:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-night}"
    typography: "{typography.display}"
    rounded: "{rounded.lg}"
    padding: 32px

Overview

Bolt is an app for rides, scooters, car rental and food and grocery delivery across Europe and Africa. Its site sets Bolt green buttons on a pale green-gray page and switches to near-black sections with neon mint text for the big moments. Everything is set in Inter at in-between weights, with tight tracking on headlines and fully round buttons. [Observed]

What defines the look:

  1. Bolt green actions. #2b8659 fills Get Bolt, Get started and Register as a driver, 48 high with a 40px radius. [Measured]
  2. Green-tinted neutrals. The page is #f7f9f8, text is #191f1c, and secondary text is a green-black at 63 percent. Even the tonal button fill is green-black at 7 percent. [Measured]
  3. Neon on night. Dark sections are #0e1010 and #06160e, with headlines in near-white #eceeed or neon mint #5cffa4. [Measured]
  4. In-between weights. Inter at 750 for headlines, 650 for titles and buttons and 550 for text, with tracking of -3.5 percent at 72px and -3 percent at 48. [Measured]
  5. Round everything. Buttons use 40, cards 32 and 24, smaller tiles 8, chips full pills. [Measured]

Source for this file: the home page, the rides page and the driver sign-up page (with its phone number form), measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Bolt does not publish a design system. The ride and delivery flows sit in the app. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Bolt green#2b8659Main buttons [Measured]
Band green#207e52Feature bands [Measured]
Neon mint#5cffa4 at 96 percentHeadlines on dark [Measured]
Mint#ddffe9 with #0e1010 textLearn more buttons and text on dark [Measured]
Ink#191f1cHeadlines and text [Measured]
Muted textgreen-black #000a07 at 63 percent (about #5e6461 on white)Body copy [Measured]
Tonal fillgreen-black at 7 percent (about #eef0ef)Second buttons, the country code field [Measured]
Page#f7f9f8, white #fbfdfcLight sections [Measured]
Night#0e1010, #06160eDark sections [Measured]
Slate#2f313fThe Register pill in the header [Measured]

Typography

Inter as a variable font from 100 to 900, used at 400, 550, 600, 650 and 750. [Measured]

RoleDesktopMobileWeight and tracking
Display72 on 80, -2.52px48 on 54, -1.44px750 [Measured]
Headline48 on 56, -1.44px36 on 42, -0.9px750 [Measured]
Title24 on 32, -0.36px20 on 28650 [Measured]
Lead18 on 28, -0.2px16 on 24550 [Measured]
Button18 on 2816 on 24650 [Measured]
Navigation14 on 20same600 [Measured]

Shape and spacing

Buttons use 40 at 48 high (full pills), cards 32 and 24, tiles 8, small parts 3 and 4, and header chips 9999. [Measured] Buttons carry 24px side padding (16 on the driver page). [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

Light and dark sections are fixed by the page. The dark color scheme pass changed only translucent fills slightly. [Measured]

Platform: iOS

How the Bolt iOS app looks and behaves was not captured. Bolt does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A map-first home with service shortcuts (rides, scooters, food) rather than many tabs is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A green button to request a ride or check out. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the Bolt green, the green-tinted neutrals and the round buttons with the web. [Inferred]

Platform: Android

How the Bolt Android app looks and behaves was not captured. Bolt does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A map-first home with service shortcuts (rides, scooters, food) rather than many tabs is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A green button to request a ride or check out. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the Bolt green, the green-tinted neutrals and the round buttons with the web. [Inferred]

Platform: Web

The home page, the rides page and the driver sign-up page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A light header with a language switch, a Support link as a 32 high pill and a slate #2f313f Register pill, 32 high (36 white over the dark driver hero). [Measured]

Main action

Expected on Web: Page-level button.

A Bolt green pill with white 18px text at 650, 48 high with 24 side padding. The second choice is a tonal pill of green-black at 7 percent. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

The driver form uses a 40 high round phone field with a tonal country code button ("+91") beside it, and a 48 high green "Register as a driver" button. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 48 high, fields 40 and header pills 32 to 36. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Driver sign-up starts with a phone number. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive marketing site that keeps its round buttons and tight headlines at both widths. [Measured]

Cross-platform consistency

Consistent across platforms: Bolt green, green-tinted neutrals and round buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use Bolt green for the main action and tonal green-black fills for the second.
  • Tint every neutral slightly green.
  • Use neon mint only on near-black sections.
  • Set headlines heavy (750) and tight.

Don't

  • Don't use neon mint on light backgrounds.
  • Don't use pure gray neutrals.
  • Don't square off buttons.

Known Gaps

  • Ride requests, scooters and food ordering live in the app and were not measured.
  • The iOS and Android apps were not captured, and Bolt publishes no design system, so every mobile topic is inferred.
  • Icons, motion and modals were not measured.
  • Muted text and tonal fills are translucent. The hex values here are those tints flattened on white.
  • Account deletion and store policy rules were not verified.