--- 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 | Role | Value | Where | |------|-------|-------| | Accent | `#249cf2` (pressed `#1c85d6`, soft `#1e249cf2`) | Android | | Primary text | 87 percent black (`#de000000`) | Android | | Secondary text | 54 percent black | Android | | Hint text | 38 percent black | Android | | Text on dark | white, 70 percent white, 50 percent white | Android | | Divider | 12 percent black | Android | | Icon tint | `#757575`, light `#bdbdbd` | Android | | Gray canvas | `#f5f5f5` | Android | | Dark panel | `#25282b` | Android | | Red | `#f54137`, dark `#f51e30` | Android | | Yellow | `#ffc30a` | Android | | Greens | `#558b2f`, `#2d8953`, `#3c8c3c` | Android | | Website green | `#006c35`, `#4caf50` | organicmaps.app | | Website text | `#333333`, `#666666`, border `#eaecef` | organicmaps.app | | Website dark mode | `#121212` with `#dddddd` text | organicmaps.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.