Productivity / iOS / Android

AppFlowy

AppFlowy treats color as a role, not a hue: a cool gray ramp does the layout, one bright blue marks what you can act on, and a single 4 to 20 scale sets both spacing and corner radius.

Download
  • #00B5FF
  • #0092D6
  • #21232A
  • #6F748C
  • #F8FAFF
  • #E4E8F5

Color

Every color token in the file, grouped by role.

Brand

  • primary#00B5FF
  • primary hover#0092D6
  • on primary#FFFFFF
  • ink secondary#6F748C
  • ink tertiary#989EB7
  • dark ink secondary#989EB7
  • dark ink tertiary#6F748C

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F8FAFF
  • dark canvas#21232A
  • dark surface#272930
  • dark surface raised#32343F
  • dark surface top#363845

Text

  • ink#21232A
  • dark ink#E4E8F5

Lines

  • border#E4E8F5
  • border hover#CED3E6
  • border strong#3D404F
  • dark border#3D404F

Status

  • info light#E3F6FF
  • success#248569
  • success light#ECF9F5
  • warning#DB7E21
  • warning light#FFF3D5
  • error#E71D32
  • error light#FFD2DD

More

  • action#0092D6
  • action hover#0078C0
  • hover#E4E8F5
  • featured#9327FF
  • featured light#F1E0FF
  • dark hover#3D404F
  • dark action#00B5FF

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.
  • heading 136px / 600 / 40px

    AppFlowy

  • heading 224px / 600 / 32px

    Pack my box with five dozen liquor jugs

  • heading 320px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • heading 416px / 600 / 22px

    The quick brown fox jumps over the lazy dog

  • title20px / 500 / 28px

    Pack my box with five dozen liquor jugs

  • body14px / 400 / 20px

    The quick brown fox jumps over the lazy dog

  • body enhanced14px / 500 / 20px

    The quick brown fox jumps over the lazy dog

  • caption12px / 400 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl20px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl20px

Components

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

  • button filled
    button-filled
  • button filled large
    button-filled-large
  • button filled danger
    button-filled-danger
  • button outlined
    button-outlined
  • button ghost
    button-ghost
  • chip info
    chip-info
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 139 lines
version: alpha
name: AppFlowy-design-analysis
description: "A workspace for notes, databases and AI chat that keeps its chrome cool and quiet: a blue-tinted neutral ramp, one bright cyan-blue (#00b5ff) for action and selection, small 4 to 20 corner and spacing steps, and a published token set with light and dark themes built from the same primitives."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00b5ff"
  primary-hover: "#0092d6"
  on-primary: "#ffffff"
  action: "#0092d6"
  action-hover: "#0078c0"
  ink: "#21232a"
  ink-secondary: "#6f748c"
  ink-tertiary: "#989eb7"
  canvas: "#ffffff"
  canvas-subtle: "#f8faff"
  hover: "#e4e8f5"
  border: "#e4e8f5"
  border-hover: "#ced3e6"
  border-strong: "#3d404f"
  info-light: "#e3f6ff"
  success: "#248569"
  success-light: "#ecf9f5"
  warning: "#db7e21"
  warning-light: "#fff3d5"
  error: "#e71d32"
  error-light: "#ffd2dd"
  featured: "#9327ff"
  featured-light: "#f1e0ff"
  dark-canvas: "#21232a"
  dark-surface: "#272930"
  dark-surface-raised: "#32343f"
  dark-surface-top: "#363845"
  dark-hover: "#3d404f"
  dark-border: "#3d404f"
  dark-ink: "#e4e8f5"
  dark-ink-secondary: "#989eb7"
  dark-ink-tertiary: "#6f748c"
  dark-action: "#00b5ff"

typography:
  heading-1:
    fontFamily: "system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
  heading-2:
    fontFamily: "system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
  heading-3:
    fontFamily: "system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  heading-4:
    fontFamily: "system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22px
  title:
    fontFamily: "system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
  body:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  body-enhanced:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
  caption:
    fontFamily: "system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 20px

spacing:
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  xxl: 20px

components:
  button-filled:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-enhanced}"
    rounded: "{rounded.md}"
    padding: 6px 16px
  button-filled-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title}"
    rounded: "{rounded.xl}"
    padding: 14px 16px
  button-filled-danger:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-enhanced}"
    rounded: "{rounded.md}"
    padding: 6px 16px
  button-outlined:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-enhanced}"
    rounded: "{rounded.md}"
    padding: 6px 16px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-enhanced}"
    rounded: "{rounded.md}"
    padding: 6px 16px
  chip-info:
    backgroundColor: "{colors.info-light}"
    textColor: "{colors.action}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

Overview

AppFlowy is an open workspace for documents, databases and AI chat that you can host yourself. Its look is a calm tool surface: a cool blue-tinted gray ramp, white or deep slate canvases and a single bright blue for the things you can act on. [Observed]

What defines the look:

  1. A blue-tinted neutral ramp. Grays run from #f8faff to #21232a with a slight blue cast, so borders, hovers and dark surfaces all feel related. [Measured]
  2. One accent. Bright blue #00b5ff is the fill for primary buttons, selection and the theme border. Text links and actions use the darker #0092d6 in light mode so they read on white. [Measured]
  3. Role-named tokens. Colors are grouped by what they do (text, icon, border, fill, surface, background, badge) and each has a hover state, instead of by hue. [Measured]
  4. Small, even steps. Spacing and corner radius share one scale: 4, 6, 8, 12, 16 and 20. [Measured]
  5. Soft, wide shadows. Small and medium shadows blur 16 and 32 with 12 percent black in light mode. [Measured]
  6. Eight text roles in four weights. Heading 1 to 4, headline, title, body and caption, each with standard, enhanced, prominent and underlined variants. [Measured]

Source for this file: the public repository's theme package and its mobile screens, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Brand fill and theme border#00b5ff#00b5ffFill and border tokens
Brand hover#0092d6#0092d6Fill hover token
Action text#0092d6#00b5ffText tokens
Primary text#21232a#e4e8f5Text tokens
Secondary text#6f748c#989eb7Text tokens
Tertiary text#989eb7#6f748cText tokens
Canvas#ffffff#21232aBackground token
Subtle fill#f8faff#272930Fill and surface tokens
Raised surfaces#ffffff#32343f, #363845Surface layers
Hover fill#e4e8f5#3d404fFill hover tokens
Border#e4e8f5, hover #ced3e6#3d404fBorder tokens
Selection#00b5ff at 15 percent, text selection at 20 percentnot readFill tokens
Success#248569 on #ecf9f5not readText, fill tokens
Warning#db7e21 on #fff3d5not readText, fill tokens
Error#e71d32 on #ffd2ddnot readText, fill tokens
Featured#9327ff on #f1e0ffnot readText, fill tokens
Overlay#00000099#00000099Surface token

Each hue (blue, green, purple, magenta, red, orange, yellow) has a ten-step ramp from 100 to 1000, and a separate set of badge colors named rose, papaya, tangerine, mango, lemon, olive, lime, grass, forest, jade and aqua with light and thick versions, used to color tags and select options. [Measured]

Brand blue #00b5ff against white measures about 2.4 to 1, which is why filled buttons are the only place white text sits on it and why plain action text uses the darker blue. [Measured by calculation]

Typography

Text roles and sizes: heading 1 is 36 on 40, heading 2 is 24 on 32, heading 3 is 20 on 28, heading 4 is 16 on 22, headline is 24 on 36, title is 20 on 28, body is 14 on 20 and caption is 12 on 18. Each role comes in standard (regular), enhanced (medium or semibold), prominent (bold) and underline variants. [Measured]

The theme leaves the family empty, so text uses the platform's default family unless the user picks another font. The app also bundles Poppins and a monospace family, but where they are applied was not confirmed. [Measured for the empty default, Inferred for use]

Shape and spacing

Spacing steps are 4, 6, 8, 12, 16 and 20. Corner radii use the same six numbers. Buttons use radius 8 for small, medium and large sizes and 16 for the extra-large one, with padding of 12 by 4, 16 by 6, 16 by 10 and 16 by 14 from small to extra-large. Modal widths are 400, 560 and 720. [Measured]

Iconography and motion

Custom line icons from the app's own set, with separate active icons for navigation. Motion values were not measured. [Observed]

Themes

Light and dark ship with the same structure. The app also supports named color schemes (for example lavender, lemonade and dandelion) and uploaded custom themes. [Measured]

Platform: iOS

How the iOS build 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 back with the platform swipe gesture. [Inferred]

Primary navigation

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

A bottom bar with three entries: home, search and notifications, each with its own active icon. A multi-select mode swaps the bar for an action bar. [Measured]

Main action

Expected on iOS: Nav bar or bottom bar button.

Creating a page happens from the home header and a floating button on database screens. An AI chat bubble button sits on the home tabs. [Measured]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Bottom sheets for menus, space settings and permissions. [Measured from the bottom sheet folder]

Controls

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

Custom switches and pickers drawn in the app's own style. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Text follows the system size setting. [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.

The app's own line icons, not SF Symbols. [Observed]

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.

The app supports third-party sign-in and cloud accounts. If third-party sign-in is offered, Guideline 4.8 and in-app account deletion apply. This 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.

Uses its own look on both mobile systems. The bottom bar, bottom sheets and swipe back follow the platform, while buttons, icons and tabs follow the app's tokens. [Observed]

Platform: Android

How the Android build 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 gesture. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The same bottom bar as iOS: home, search and notifications. [Measured]

Main action

Expected on Android: Floating action button.

A floating button on database and calendar screens, and a header action for new pages. [Measured]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Bottom sheets and dialogs. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Custom controls, not Material ones. [Inferred]

Text sizing

Expected on Android: Font scale.

Text follows the 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.

The app's own line icons. [Observed]

Account and sign-in rules

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

Account deletion and data safety entries 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.

The same visual system as iOS, with platform back behavior. [Observed]

Platform: Web

The web app was not measured. This file covers the token set and the mobile screens only.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Not measured. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

Not measured. [Inferred]

Main action

Expected on Web: Page-level button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Modal widths of 400, 560 and 720 are defined in the shared component set. [Measured]

Controls

Expected on Web: Native or custom.

Buttons in four sizes with filled, outlined and ghost styles are defined in the shared component set. [Measured]

Text sizing

Expected on Web: Browser zoom.

Not measured. [Inferred]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not measured. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

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

Not measured. [Inferred]

Platform conformance

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

Not measured. [Inferred]

Cross-platform consistency

Consistent across platforms: the token set, the blue accent, the neutral ramp, the 4 to 20 scale and the text roles. [Measured]

Intentionally different: mobile uses a bottom bar and bottom sheets where larger screens use sidebars and popovers. [Inferred]

Do's and Don'ts

Do

  • Name colors by role and give each a hover state.
  • Use the darker blue for action text on white and keep the bright blue for fills.
  • Draw shadows wide and soft, never hard.
  • Keep spacing and radius on the 4, 6, 8, 12, 16, 20 scale.

Don't

  • Don't set white text on the bright blue at small sizes without a larger weight.
  • Don't mix hues for chrome. Use the badge colors only for tags and options.
  • Don't use pure gray. The ramp carries a blue tint.

Known Gaps

  • No on-device capture was done. All statements come from reading source.
  • Dark values for success, warning, error and featured text were not read in full.
  • The badge color values were not listed.
  • Mobile touch target sizes, safe-area behavior and the editor toolbar were not measured.
  • The info chip pair (#0092d6 on #e3f6ff) measures about 3.1 to 1 and the bright blue with white text about 2.4 to 1, both below 4.5 to 1.
  • The family used by the app's text was not confirmed, because the theme leaves it to the platform.
  • Account deletion and store policy rules were not verified.
  • The web app and the desktop builds were not examined.