Utilities / iOS / Android / Web

Organic Maps

Organic Maps keeps the map in front: one accent blue, hierarchy built from translucent black and white steps, and bottom sheets instead of heavy panels.

Download
  • #249CF2
  • #1C85D6
  • #006C35
  • #4CAF50
  • #F5F5F5
  • #25282B

Color

Every color token in the file, grouped by role.

Brand

  • primary#249CF2
  • primary pressed#1C85D6
  • primary soft#1E249CF2 (95%)
  • brand green web#006C35
  • brand green bright#4CAF50
  • ink secondary#0000008A (54%)
  • text light secondary#FFFFFFB3 (70%)
  • on primary#FFFFFF

Surfaces

  • canvas#F5F5F5
  • paper#FFFFFF
  • web dark bg#121212

Text

  • ink#000000DE (87%)
  • ink hint#00000061 (38%)
  • text light#FFFFFF
  • text light hint#FFFFFF4C (30%)
  • web ink#333333
  • web muted#666666
  • web dark text#DDDDDD

Lines

  • divider#0000001E (12%)
  • web border#EAECEF

More

  • green extended#3C8C3C
  • green light#2D8953
  • green base#558B2F
  • red#F54137
  • red dark#F51E30
  • yellow#FFC30A
  • icon tint#757575
  • icon tint light#BDBDBD
  • dark panel#25282B

Typography

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

  • system-uiSystem font, drawn with the default on your device.
  • -apple-systemNot served by an open font library, so it falls back through the file's own stack.
  • body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • body small14px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • caption12px / 400 / 1.3

    Continue to checkout

  • label medium14px / 500 / 1.3

    Continue to checkout

  • title20px / 400 / 1.3

    Pack my box with five dozen liquor jugs

  • web body16px / 400 / 1.6

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • tiny4px
  • small6px
  • default8px
  • big12px
  • sheet38px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • eighth2px
  • quarter4px
  • half8px
  • half plus12px
  • base16px
  • plus24px
  • double32px
  • double plus48px
  • quadruple64px

Components

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

  • button primary
    button-primary
  • button primary pressed
    button-primary-pressed
  • list item
    list-item
  • green badge
    green-badge
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 113 lines
version: alpha
name: Organic-Maps-design-analysis
description: "An offline, privacy-friendly map app whose chrome stays out of the way of the map. The UI is a bright accent blue (#249cf2) over translucent black and white layers (a ladder of 4 to 60 percent opacities), with the brand green (#006c35 and #4caf50) kept for the website. Controls are dense, spacing runs on a half-grid of 2, 4, 6, 8, 12 and 16dp, and the iOS app grades corner radii from 4 to 12."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#249cf2"
  primary-pressed: "#1c85d6"
  primary-soft: "#1e249cf2"
  brand-green-web: "#006c35"
  brand-green-bright: "#4caf50"
  green-extended: "#3c8c3c"
  green-light: "#2d8953"
  green-base: "#558b2f"
  red: "#f54137"
  red-dark: "#f51e30"
  yellow: "#ffc30a"
  ink: "#000000de"
  ink-secondary: "#0000008a"
  ink-hint: "#00000061"
  divider: "#0000001e"
  canvas: "#f5f5f5"
  paper: "#ffffff"
  icon-tint: "#757575"
  icon-tint-light: "#bdbdbd"
  dark-panel: "#25282b"
  text-light: "#ffffff"
  text-light-secondary: "#ffffffb3"
  text-light-hint: "#ffffff4c"
  web-ink: "#333333"
  web-muted: "#666666"
  web-border: "#eaecef"
  web-dark-bg: "#121212"
  web-dark-text: "#dddddd"
  on-primary: "#ffffff"

typography:
  body:
    fontFamily: "system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-small:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  caption:
    fontFamily: "system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
  label-medium:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
  title:
    fontFamily: "system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
  web-body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6

rounded:
  tiny: 4px
  small: 6px
  default: 8px
  big: 12px
  sheet: 38px
  pill: 999px

spacing:
  eighth: 2px
  quarter: 4px
  half: 8px
  half-plus: 12px
  base: 16px
  plus: 24px
  double: 32px
  double-plus: 48px
  quadruple: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-medium}"
    rounded: "{rounded.default}"
    height: 48px
  button-primary-pressed:
    backgroundColor: "{colors.primary-pressed}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.default}"
  list-item:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.web-ink}"
    typography: "{typography.body}"
    height: 56px
    padding: 16px
  green-badge:
    backgroundColor: "{colors.green-light}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.small}"

Overview

Organic Maps is a map first and an app second. The interface is a thin layer of controls over the map, so almost everything uses translucent black or white instead of solid colors, and one bright blue marks what you can press. Hierarchy comes from a transparency ladder, not from a set of named grays. [Measured]

Three decisions define the look:

  1. A transparency ladder. Text, dividers and fills are black or white at fixed percentages (4, 8, 11, 12, 16, 20, 24, 38, 40, 50, 54 and 60). Primary text is 87 percent black, secondary 54 percent and hints 38 percent. On dark panels the same steps use white. [Measured]
  2. One accent blue, with a green brand elsewhere. The app's actions use #249cf2 (pressed #1c85d6), while the website's brand is a deep green #006c35 with a bright #4caf50. [Measured]
  3. A fine spacing grid. Android defines spacing in eighths and quarters (2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64 and 72dp), reflecting a dense map UI. [Measured]

Source for this file: the public repository (Android resources and iOS theme code) and organicmaps.app, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleValueWhere
Accent#249cf2 (pressed #1c85d6, soft #1e249cf2)Android
Primary text87 percent black (#de000000)Android
Secondary text54 percent blackAndroid
Hint text38 percent blackAndroid
Text on darkwhite, 70 percent white, 50 percent whiteAndroid
Divider12 percent blackAndroid
Icon tint#757575, light #bdbdbdAndroid
Gray canvas#f5f5f5Android
Dark panel#25282bAndroid
Red#f54137, dark #f51e30Android
Yellow#ffc30aAndroid
Greens#558b2f, #2d8953, #3c8c3cAndroid
Website green#006c35, #4caf50organicmaps.app
Website text#333333, #666666, border #eaeceforganicmaps.app
Website dark mode#121212 with #dddddd textorganicmaps.app

All [Measured].

Typography

System fonts. The iOS theme defines a font set from 9 to 52 in regular and medium weights, each declared either as fixed or as dynamic with an optional maximum size, so some text scales with the system setting and some does not. [Measured] Android styles use platform sans. [Inferred] The website uses the system stack -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, with weight 600 for emphasis. [Measured]

Shape and spacing

  • iOS radii: 4 (small button), 6 (default small), 8 (default button), 12 (big button), 2.5 (sheet grabber) and 38 for the modal sheet on the newest iOS. [Measured]
  • Android spacing: 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 64 and 72dp. Row heights are 48dp (block) and 56dp (one-line item). Icons are 24dp. [Measured]
  • Website radii: 8px, 10px and pill. [Measured]

Iconography and motion

Icons are tinted #757575 on light and #bdbdbd on dark, at 24dp on Android. Track and color-selection circles are 40dp and 24dp. [Measured] Motion was not extracted. [Inferred]

Themes

Light and dark on both apps, and a night mode for the map and navigation. A dark panel color #25282b is used for driving options. [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

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

Standard navigation for lists and settings. The map screen itself has no back concept. [Inferred]

Primary navigation

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

A map-first layout with a bottom toolbar and bottom sheets rather than a tab bar. A tab view renderer exists in the theme code. [Measured for the renderer, Inferred for the layout]

Main action

Expected on iOS: nav bar or bottom bar button.

Search and the location button over the map. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Heavy use of bottom sheets for the place page and menus, with a grabber of 2.5 radius and a 38 radius modal sheet on the newest iOS. [Measured]

Controls

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

Renderers exist for buttons, checkmarks, table view cells, charts and difficulty indicators, so controls are custom-drawn from the theme. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

Supported selectively. Each font style is marked fixed or dynamic, with an optional maximum size. [Measured]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom icon set. [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.

No account is required. Organic Maps has no sign-in. [Inferred] Checked: 2026-10-06 against source and general knowledge only.

Platform conformance

Expected on iOS: system components and Dynamic Type.

Custom, map-centered UI with its own renderers and radii, but standard iOS sheet behavior. [Inferred]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

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

System back closes sheets and screens. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

Map-first, with a bottom control strip and sheets rather than a navigation bar. [Inferred]

Main action

Expected on Android: floating action button.

Floating circular map buttons for location and layers. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Bottom sheets for place details and menus, standard dialogs and toasts. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Custom styled controls on top of platform widgets. [Inferred]

Text sizing

Expected on Android: font scale.

Sizes in sp. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Blocks are 48dp high and one-line items 56dp. [Measured]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom icon set at 24dp. [Measured]

Account and sign-in rules

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

No account. The data safety form was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Does not use Material 3 color roles. It defines its own opacity ladder and accent. [Measured]

Platform: Web

The organicmaps.app marketing site.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

Simple top navigation. [Inferred]

Main action

Expected on Web: page-level button.

Download buttons. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not a feature of the site. [Inferred]

Controls

Expected on Web: native or custom.

Standard links and buttons. [Inferred]

Text sizing

Expected on Web: browser zoom.

Sizes in rem. [Measured]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive. [Inferred]

Icons

Expected on Web: any.

SVG. [Inferred]

Account and sign-in rules

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

Informational site. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms. Has a light and a dark mode through CSS. [Measured]

Cross-platform consistency

The two apps share the accent blue idea and the translucent-layer approach. The website uses a different brand color (deep green) from the apps (blue), which is a notable mismatch. [Measured]

Do's and Don'ts

Do

  • Use black or white at fixed opacity steps for text, dividers and fills.
  • Reserve #249cf2 for actions and use #1c85d6 when pressed.
  • Keep row heights at 48 and 56dp.
  • Use bottom sheets for details and keep chrome light over the map.
  • Mark text as fixed or dynamic and cap dynamic growth.

Don't

  • Don't use solid mid-grays where an opacity step will do.
  • Don't use the website's green for app actions.
  • Don't add heavy panels that hide the map.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The iOS color values were not located. Only radii, font names and renderer names were read.
  • The Android type scale and corner radii were not extracted.
  • The map style (road and terrain colors) is a separate system that was not analyzed.
  • Navigation structure is inferred from product knowledge.
  • Account deletion and store policy rules were not verified.
  • Contrast: white text on the accent #249cf2 measures about 3.0 to 1 (pressed #1c85d6 about 3.9 to 1), and white text on #2d8953 about 4.4 to 1. All are below the 4.5 to 1 target for normal text.