--- 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 | Role | Value | Where | |------|-------|-------| | Bolt green | `#2b8659` | Main buttons [Measured] | | Band green | `#207e52` | Feature bands [Measured] | | Neon mint | `#5cffa4` at 96 percent | Headlines on dark [Measured] | | Mint | `#ddffe9` with `#0e1010` text | Learn more buttons and text on dark [Measured] | | Ink | `#191f1c` | Headlines and text [Measured] | | Muted text | green-black `#000a07` at 63 percent (about `#5e6461` on white) | Body copy [Measured] | | Tonal fill | green-black at 7 percent (about `#eef0ef`) | Second buttons, the country code field [Measured] | | Page | `#f7f9f8`, white `#fbfdfc` | Light sections [Measured] | | Night | `#0e1010`, `#06160e` | Dark sections [Measured] | | Slate | `#2f313f` | The 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] | Role | Desktop | Mobile | Weight and tracking | |------|---------|--------|---------------------| | Display | 72 on 80, -2.52px | 48 on 54, -1.44px | 750 [Measured] | | Headline | 48 on 56, -1.44px | 36 on 42, -0.9px | 750 [Measured] | | Title | 24 on 32, -0.36px | 20 on 28 | 650 [Measured] | | Lead | 18 on 28, -0.2px | 16 on 24 | 550 [Measured] | | Button | 18 on 28 | 16 on 24 | 650 [Measured] | | Navigation | 14 on 20 | same | 600 [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.