Productivity / iOS / Android / Web

Notesnook

Notesnook keeps notes UI small and quiet around one green accent and exposes every color role to a theme engine, so users, not the brand, decide how it looks.

Download
  • #008837
  • #1D1D1D
  • #BFBFBF
  • #2196F3
  • #F9D71C
  • #EF3131

Color

Every color token in the file, grouped by role.

Brand

  • primary#008837
  • on primary#FFFFFF
  • ink secondary#5B6577
  • dark primary#22BB33

Surfaces

  • paper#FFFFFF
  • canvas#F4F4F4
  • dark bg#1D1D1D
  • dark surface#202020
  • dark surface raised#2E2E2E

Text

  • ink#1D1D1D
  • dark ink#B4B4B4

Lines

  • divider#BFBFBF
  • divider soft#E3E3E3
  • dark divider#2E2E2E

Status

  • danger#EF3131
  • success#22BB33
  • warning#F0AD4E

More

  • note red#F44336
  • note orange#FF9800
  • note yellow#F9D71C
  • note green#4CAF50
  • note blue#2196F3
  • note purple#673AB7
  • note gray#9E9E9E

Typography

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

  • InterOpen font, shown as published.
  • HackOpen font, listed in the open library as Source Code Pro.
  • heading24px / 700 / 1.25

    Pack my box with five dozen liquor jugs

  • subheading20px / 600 / 1.3

    Pack my box with five dozen liquor jugs

  • title16px / 600 / 1.4

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • body small12px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • code14px / 400 / 1.5

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • xs2.5px
  • sm5px
  • md7px
  • lg10px

Spacing

The spacing scale, drawn to size.

  • xs6px
  • sm10px
  • base15px
  • lg20px
  • xl25px

Components

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

  • button primary
    button-primary
  • card
    card
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 99 lines
version: alpha
name: Notesnook-design-analysis
description: "A private notes app that looks like a quiet document tool: a deep green accent (#008837) on white or charcoal, near-black ink, thin borders, small 12 to 16px interface type in Inter, and small corners (5px controls, 10px dialogs). Its theme engine lets users swap every color role, and the same engine drives web and mobile."
status: Draft
appVersion: "source snapshot of the public sources and notesnook.com, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#008837"
  on-primary: "#ffffff"
  ink: "#1d1d1d"
  ink-secondary: "#5b6577"
  paper: "#ffffff"
  canvas: "#f4f4f4"
  divider: "#bfbfbf"
  divider-soft: "#e3e3e3"
  danger: "#ef3131"
  success: "#22bb33"
  warning: "#f0ad4e"
  note-red: "#f44336"
  note-orange: "#ff9800"
  note-yellow: "#f9d71c"
  note-green: "#4caf50"
  note-blue: "#2196f3"
  note-purple: "#673ab7"
  note-gray: "#9e9e9e"
  dark-bg: "#1d1d1d"
  dark-surface: "#202020"
  dark-surface-raised: "#2e2e2e"
  dark-ink: "#b4b4b4"
  dark-divider: "#2e2e2e"
  dark-primary: "#22bb33"

typography:
  heading:
    fontFamily: "Inter, 'Noto Sans', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
  subheading:
    fontFamily: "Inter, 'Noto Sans', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  title:
    fontFamily: "Inter, 'Noto Sans', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body:
    fontFamily: "Inter, 'Noto Sans', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-small:
    fontFamily: "Inter, 'Noto Sans', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  code:
    fontFamily: "Hack, Consolas, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5

rounded:
  xs: 2.5px
  sm: 5px
  md: 7px
  lg: 10px

spacing:
  xs: 6px
  sm: 10px
  base: 15px
  lg: 20px
  xl: 25px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
    height: 45px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 15px
  card-dark:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 15px

Overview

Notesnook is an end-to-end encrypted notes app with web, desktop, iOS and Android clients. [Observed]

What defines the look:

  1. A single green. #008837 is the brand color on notesnook.com, and the web app theme engine takes an accent from the theme. [Measured for the site, Inferred for the app default]
  2. A theme engine, not a theme. Every role (accent, foreground, background, paragraph, border) can be replaced, and themes can be built, published and installed. [Measured]
  3. Small and dense. Interface text is 12 to 16px, buttons are 45dp high on mobile, controls have 5px corners and dialogs 10px. [Measured]
  4. Seven note colors. Red, orange, yellow, green, blue, purple and gray identify notes and tags. [Measured]

Source for this file: the public Notesnook sources (theme, web app and mobile app) and notesnook.com, read on 2026-10-06. The default light and dark theme values live in a theme definition that was not available, so app colors below come from native resources and the website. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Brand and accent#008837#22bb33notesnook.com, site accent
Text#1d1d1d#b4b4b4Android resources
Page background#ffffff#1d1d1d (splash #1f1f1f)Android resources
Border#bfbfbf#2e2e2eAndroid resources
Website text and surfaces#000000, #202020, #1c1c1c, #16181bnotesnook.com
Soft border and grays#e3e3e3, #d3d3d3, #808080, #5b6577notesnook.com
Danger, success, warning#ef3131, #22bb33, #f0ad4enotesnook.com
Note colorsred #f44336, orange #ff9800, yellow #f9d71c, green #4caf50, blue #2196f3, purple #673ab7, gray #9e9e9emobile app

All values are [Measured]. Dark accent #22bb33 is the website success green, used here as the nearest measured dark-friendly green. The Android night resources define only background, border and text.

Typography

The theme package sets a sans stack of Inter, Noto Sans, Frutiger, Calibri, Myriad and Arial, and a monospace stack led by Hack. [Measured] Sizes: heading 24px, subheading 20px, title 16px, subtitle 14px, body and input 12px, sub-body 10px, code 14px. [Measured] The website uses Open Sans at weights 300 to 700. [Measured] The front matter above merges the app sizes into body 14 and small 12, which follows the subtitle and body steps. [Inferred]

Shape and spacing

Radii: none, 2.5 (small), 5 (default), 7 (large) and 10 (dialog). [Measured] Space steps: 6, 10, 15, 20, 25, 30 and 35px. [Measured] Menus use a soft shadow, 0 0 10px at about 13 percent black on light and 47 percent on dark. [Measured]

Iconography and motion

Outline icons in the foreground or accent color. [Inferred] Theme switching on mobile uses an animated transition between light and dark. [Measured from the library import]

Themes

Light and dark, plus user-installed themes through the theme builder and a published theme list. [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.

A stack navigation with a back control. [Inferred]

Primary navigation

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

A side drawer plus a bottom tab area for notes, notebooks and tags. The exact structure was not confirmed. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A floating add-note button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Action sheets and dialogs from a shared component set. [Inferred]

Controls

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

Custom controls: pressables, buttons 45 high, inputs and tags drawn by the app. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

An app font scale setting was not checked, and system Dynamic Type behavior was not verified. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Default button height is 45, close to but below the 44pt minimum plus margin rules. Other targets were not verified. [Measured for the default]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

A custom icon set through an AppIcon component. [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.

Email accounts with encryption keys. Guideline 4.8 is likely not triggered. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

Shared design with custom controls, so it follows its own look on iOS. [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 and an in-app back control. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The same structure as iOS. [Inferred]

Main action

Expected on Android: Floating action button.

A floating add button. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Shared sheets and dialogs. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Custom controls, not Material. [Inferred]

Text sizing

Expected on Android: Font scale.

Not checked against system font scale. [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.

Same custom icons as iOS. [Measured]

Account and sign-in rules

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

Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

Shared design, no Material components. Native resources define only splash and widget colors. [Measured]

Platform: Web

The Notesnook web app (with a desktop wrapper), plus the notesnook.com marketing site.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

In-app navigation with a side menu. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

A left side menu and a note list, in a three-pane editor layout. [Inferred]

Main action

Expected on Web: Page-level button.

A new note button in the list header. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Dialogs with a 10px corner and a menu shadow. [Measured]

Controls

Expected on Web: Native or custom.

Themed variants for buttons, inputs, text and flex layouts. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are in px, so they follow zoom. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Breakpoints at 480px and 1000px. [Measured]

Icons

Expected on Web: Any.

An icon set through the shared icon package. [Inferred]

Account and sign-in rules

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

Email accounts. [Inferred]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A theme engine with documented color roles replaces all component colors, and the website uses a separate Open Sans stylesheet. [Measured]

Cross-platform consistency

Consistent across platforms: the green accent idea, small interface type, small corners and the theme engine. [Measured]

Intentionally different: the website uses Open Sans and mobile uses the Inter stack, and mobile is touch-first with 45dp buttons while web is keyboard-first. [Measured]

Do's and Don'ts

Do

  • Use color roles (accent, foreground, background, paragraph, border) so themes can swap them.
  • Keep interface type small and the corners at 5px.
  • Use the seven note colors only to label notes and tags.
  • Keep dialogs at 10px and menus lightly shadowed.

Don't

  • Don't hard-code the green. Read the accent role.
  • Don't use the note colors for interface chrome.
  • Don't enlarge body text beyond 14px in dense lists.

Known Gaps

  • No on-device capture was done. All statements come from reading source and a website.
  • The built-in light and dark theme definitions were not in the repository tree, so the app's default accent, surfaces and text are taken from native resources and the website and are not confirmed as the in-app defaults.
  • The dark accent value is borrowed from the website success green.
  • Mobile navigation, spacing outside the web theme and motion were not measured.
  • Account deletion and store policy rules were not verified for either app.