Productivity / iOS / Android / Web

Joplin

Joplin stays plain so the theme can do the work: layered color roles, a dark header over a light body, and eight themes sharing one structure.

Download
  • #155BDA
  • #313640
  • #32373F
  • #F4F5F6
  • #2D5BE5
  • #F7D26E

Color

Every color token in the file, grouped by role.

Brand

  • primary#155BDA
  • accent#2D5BE5
  • accent dimmed#E3EAFF
  • accent hover#CBDAF1
  • dark accent#789FE9
  • dark accent dimmed#303543

Surfaces

  • paper#FFFFFF
  • canvas#F4F5F6
  • header bg#313640
  • header bg selected#131313
  • dark paper#1D2024
  • dark header bg#181A1D
  • dark canvas#2E3138

Text

  • ink#32373F
  • ink faded#627184
  • ink 3#627284
  • on header#FFFFFF
  • dark ink#DDDDDD
  • dark ink faded#999999
  • dark link#A6A6FF
  • web ink#212529
  • web muted#6C757D

Lines

  • divider#DDDDDD
  • dark divider#555555

Status

  • warning bg#FFD08D
  • warning text#E45600
  • error#D00000
  • error on header#FF7070
  • dark warning bg#013F74
  • web danger#DC3545
  • web success#198754

More

  • selected#E5E5E5
  • raised#E5E5E5
  • search marker#F7D26E
  • published on header#789FE9
  • dark selected#616161
  • web blue#0D6EFD

Typography

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

  • RobotoOpen font, shown as published.
  • MontserratOpen font, shown as published.
  • body16px / 400 / 1.6

    The quick brown fox jumps over the lazy dog

  • body large18px / 400 / 1.6

    The quick brown fox jumps over the lazy dog

  • body xlarge20px / 400 / 1.6

    Pack my box with five dozen liquor jugs

  • body small14px / 400 / 1.6

    The quick brown fox jumps over the lazy dog

  • caption12.8px / 400 / 1.6

    Continue to checkout

  • web body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm4px
  • pill100px

Spacing

The spacing scale, drawn to size.

  • xs6px
  • sm8px
  • md12px
  • base16px

Components

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

  • header
    header
  • list item
    list-item
  • link text
    link-text
  • dark list item
    dark-list-item
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 110 lines
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

RoleLight themeDark 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.