--- version: alpha name: Joplin-design-analysis description: "A utilitarian note-taking app with a theme system at its core: eight bundled themes (light, dark, OLED dark, Solarized light and dark, Dracula, Nord, Aritim dark), a plain cool-gray default (#32373f on white, links #155bda), a dark header bar, and the same UI on iOS and Android." status: Draft appVersion: "source snapshot of the public repository, 2026-10-06" platformsCovered: [iOS, Android, Web] reviewer: "" verifiedAt: "" colors: primary: "#155bda" accent: "#2d5be5" accent-dimmed: "#e3eaff" accent-hover: "#cbdaf1" ink: "#32373f" ink-faded: "#627184" ink-3: "#627284" paper: "#ffffff" canvas: "#f4f5f6" header-bg: "#313640" header-bg-selected: "#131313" on-header: "#ffffff" divider: "#dddddd" selected: "#e5e5e5" raised: "#e5e5e5" search-marker: "#f7d26e" warning-bg: "#ffd08d" warning-text: "#e45600" error: "#d00000" error-on-header: "#ff7070" published-on-header: "#789fe9" dark-paper: "#1d2024" dark-header-bg: "#181a1d" dark-ink: "#dddddd" dark-ink-faded: "#999999" dark-divider: "#555555" dark-selected: "#616161" dark-link: "#a6a6ff" dark-accent: "#789fe9" dark-canvas: "#2e3138" dark-accent-dimmed: "#303543" dark-warning-bg: "#013f74" web-blue: "#0d6efd" web-ink: "#212529" web-muted: "#6c757d" web-danger: "#dc3545" web-success: "#198754" typography: body: fontFamily: "Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-large: fontFamily: "Roboto, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.6 body-xlarge: fontFamily: "Roboto, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.6 body-small: fontFamily: "Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.6 caption: fontFamily: "Roboto, sans-serif" fontSize: 12.8px fontWeight: 400 lineHeight: 1.6 web-body: fontFamily: "Montserrat, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px pill: 100px spacing: xs: 6px sm: 8px md: 12px base: 16px components: header: backgroundColor: "{colors.header-bg}" textColor: "{colors.on-header}" typography: "{typography.body-large}" height: 56px list-item: backgroundColor: "{colors.paper}" textColor: "{colors.ink}" typography: "{typography.body}" padding: 16px link-text: backgroundColor: "{colors.paper}" textColor: "{colors.primary}" typography: "{typography.body}" dark-list-item: backgroundColor: "{colors.dark-paper}" textColor: "{colors.dark-ink}" typography: "{typography.body}" padding: 16px --- ## Overview Joplin is a no-frills notes app where the theme is the design. Its interface is deliberately plain: white paper, charcoal text, one link blue and a dark header, with the personality supplied by whichever of eight bundled themes the user picks. The iOS and Android apps look nearly identical, with a few small platform adjustments. [Measured] Three decisions define the look: 1. **Colors are numbered by layer, not by meaning.** Each theme defines `color` and `backgroundColor` for the main surface, then `color2` and `backgroundColor2` for the dark header and side areas, `color3` for faded panels and `color4` for accents. A theme is a short list of these values, which is why it is easy to add new themes. [Measured] 2. **A dark header over a light body.** In the default light theme the app bar and side menu use `#313640` with white text while note content stays white. [Measured] 3. **Eight themes, one structure.** Light, Dark, OLED Dark, Solarized Light, Solarized Dark, Dracula, Nord and Aritim Dark. [Measured] Source for this file: the public repository (mobile app and shared theme files) and joplinapp.org, read on 2026-10-06. No on-device capture was done. See Known Gaps. ## Core ### Colors | Role | Light theme | Dark theme | |------|-------------|------------| | Background | `#ffffff` | `#1d2024` | | Text | `#32373f` | `#dddddd` | | Faded text | `#627184` | `#999999` | | Divider | `#dddddd` | `#555555` | | Selected row | `#e5e5e5` | `#616161` | | Link | `#155bda` | `#a6a6ff` | | Header background | `#313640` | `#181a1d` | | Header text | `#ffffff` | `#ffffff` | | Panel background (layer 3) | `#f4f5f6` | `#2e3138` | | Accent text (layer 4) | `#2d5be5` | `#789fe9` | | Accent dimmed fill | `#e3eaff` | `#303543` | | Raised background | `#e5e5e5` | `#474747` | | Warning background | `#ffd08d` | `#013f74` | | Warning text | `#e45600` | `#9a5b00` | | Error | `#d00000` | `#ff4444` | | Search marker | `#f7d26e` | `#f7d26e` | All [Measured] from the theme files. The website uses a standard web palette: `#0d6efd`, `#212529`, `#6c757d`, `#dc3545`, `#198754`. [Measured] ### Typography Roboto throughout the app. Base size is 16, with 14 for small, 18 for larger and 20 for large text. Body line height is `1.6em`. Faded caption text is 80 percent of the base size (about 12.8). Headings in notes scale by multiples of the base size, for example 1.5 times and 1.3 times. [Measured] The website uses Montserrat. [Measured] ### Shape and spacing - Margins: `16` default, `12` medium, `8` small and `6` extra small. The theme file states that no text or interactive component should sit inside the 16 margin. [Measured] - Corner radius is `4` for most surfaces and `100` for pill chips. [Measured] - A disabled opacity of `0.2` is used. [Measured] - Icons are 30 in size. [Measured] ### Iconography and motion Icons use the text color at size 30, with a lighter icon color on the dark header. No motion tokens were found. [Measured] ### Themes Eight bundled themes, each a small color table: light, dark, OLED dark, Solarized light, Solarized dark, Dracula, Nord and Aritim dark. Each also picks a code highlighting theme (for example `atom-one-light` and `atom-one-dark-reasonable`). [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. Navigation is a custom header with a back button rather than the native navigation bar, so the previous-title chevron pattern is not followed. [Inferred] ### Primary navigation Expected on iOS: bottom tab bar, about five items. No bottom tab bar. Navigation is a side menu (notebooks, tags) plus the header. [Inferred] ### Main action Expected on iOS: nav bar or bottom bar button. A floating new-note style button is used on both platforms. [Inferred] ### Sheets, dialogs and messages Expected on iOS: action sheets, alerts, modals. A custom modal dialog component and header menus. [Measured] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Controls styled from the theme. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. A fixed base size of 16 with an app setting for text size. System Dynamic Type was not verified. [Inferred] ### 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. An icon font at size 30. [Measured] ### 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. Sync uses the user's chosen service or Joplin Cloud. [Inferred] Checked: 2026-10-06 against source and general knowledge only. ### Platform conformance Expected on iOS: system components. Low fidelity to iOS conventions. One look on both platforms, with small adjustments, for example removing the bottom border on text inputs on iOS. [Measured] ## 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 is supported. A custom header with a back arrow. [Inferred] ### Primary navigation Expected on Android: navigation bar, rail on tablets. A side menu opened from the header, not a bottom navigation bar. [Inferred] ### Main action Expected on Android: floating action button. A floating button for new notes, which fits Android. [Inferred] ### Sheets, dialogs and messages Expected on Android: bottom sheets, dialogs, snackbars. Custom modal dialog and header menu. [Measured] ### Controls Expected on Android: Material switches, pickers, chips. Text inputs keep a bottom border on Android. Other controls are themed. [Measured] ### Text sizing Expected on Android: font scale. Not verified. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not verified. [Inferred] ### Insets and system bars Expected on Android: edge to edge, system bars. Not verified. [Inferred] ### Icons Expected on Android: Material Symbols or custom. An icon font. [Measured] ### Account and sign-in rules Expected on Android: account deletion and data safety requirements. Note the date checked. No account is required. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on Android: Material 3 components and roles. Does not follow Material 3. The look is Joplin's own. [Inferred] ## Platform: Web The joplinapp.org marketing site. ### Back and up navigation Expected on Web: browser back, breadcrumbs. Browser back and a persistent navbar. [Inferred] ### Primary navigation Expected on Web: top nav or sidebar. Top navbar. [Inferred] ### Main action Expected on Web: page-level button. Download buttons in a standard web blue. [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 web form controls. [Inferred] ### Text sizing Expected on Web: browser zoom. Sizes in `rem`, `em` and `px`. [Measured] ### Touch and pointer targets Expected on Web: pointer and keyboard. Not verified. [Inferred] ### Insets and system bars Expected on Web: viewport, scrollbars. A responsive grid layout. [Inferred] ### Icons Expected on Web: any. Font Awesome. [Measured] ### 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. A standard web blue palette that does not share the app's. [Measured] ## Cross-platform consistency The two apps are the same UI. The website does not share the app's color scheme: it uses web blue `#0d6efd` while the app link color is `#155bda`. [Measured] ## Do's and Don'ts ### Do - Define every theme as a short list of layered colors (surface, header, panel, accent). - Keep the header dark even in the light theme. - Keep margins at 16 and never place content inside that margin. - Offer many themes, including an OLED black. - Use faded text for secondary information and an accent for links. ### Don't - Don't hard-code colors in components. Read them from the theme. - Don't add a second link color per screen. - Don't use decorative shadows. The look is flat. ## Known Gaps - No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed. - Only the light and dark themes were read in detail. The other six were not. - Per-screen layout, the exact navigation structure and the floating button were inferred from product knowledge. - Corner radius and spacing were read from the shared theme file and may differ on individual screens. - Account deletion and store policy rules were not verified.