Productivity / iOS / Android / Web

Nextcloud

Nextcloud is white-label by design: neutral file-first surfaces with an accent that the connected server controls, plus a deeper navy and sky blue brand on the website.

Download
  • #0082C9
  • #1CAFFF
  • #0F0833
  • #333333
  • #EDEDED
  • #CAC4D0

Color

Every color token in the file, grouped by role.

Brand

  • primary#0082C9
  • primary bright#1CAFFF
  • primary sky#30B6FF
  • primary hover#0A92DC
  • primary deep#004871
  • ink secondary#666666
  • secondary button#D6D7D7
  • on primary#FFFFFF

Surfaces

  • paper#FFFFFF
  • canvas#EDEDED
  • container#F4F4F4

Text

  • ink#333333
  • ink disabled#888888
  • ink web#212529

Lines

  • divider#CAC4D0

Status

  • warning#E53935
  • warning info#E9322D
  • log info#4CAF50
  • log warning#FFA000

More

  • navy#0F0833
  • navy deep#0C0726
  • grey light#EEEEEE
  • grey mid#BDBDBD
  • grey dark#757575
  • log debug#2196F3
  • web blue#0D6EFD

Typography

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

  • InterOpen font, shown as published.
  • sans-serifSystem font, drawn with the default on your device.
  • web body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • web large18px / 600 / 1.4

    The quick brown fox jumps over the lazy dog

  • web heading24px / 700 / 1.25

    Pack my box with five dozen liquor jugs

  • web small14px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • app body16px / 400 / 24sp

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm4px
  • md8px
  • lg12px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px

Components

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

  • button primary
    button-primary
  • button secondary
    button-secondary
  • list row
    list-row
  • task container
    task-container
  • navy band
    navy-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 104 lines
version: alpha
name: Nextcloud-design-analysis
description: "A self-hosted files and collaboration product whose apps wear the server's brand. Both mobile apps read the theming color from the connected Nextcloud server and fall back to the default Nextcloud blue (#0082c9), on neutral white and gray surfaces with plain #333 text. The website adds a deep navy (#0f0833) and a lighter sky blue pair (#1cafff, #30b6ff) set in Inter."
status: Draft
appVersion: "source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0082c9"
  primary-bright: "#1cafff"
  primary-sky: "#30b6ff"
  primary-hover: "#0a92dc"
  primary-deep: "#004871"
  navy: "#0f0833"
  navy-deep: "#0c0726"
  ink: "#333333"
  ink-secondary: "#666666"
  ink-disabled: "#888888"
  ink-web: "#212529"
  paper: "#ffffff"
  canvas: "#ededed"
  container: "#f4f4f4"
  divider: "#cac4d0"
  grey-light: "#eeeeee"
  grey-mid: "#bdbdbd"
  grey-dark: "#757575"
  secondary-button: "#d6d7d7"
  warning: "#e53935"
  warning-info: "#e9322d"
  log-info: "#4caf50"
  log-warning: "#ffa000"
  log-debug: "#2196f3"
  web-blue: "#0d6efd"
  on-primary: "#ffffff"

typography:
  web-body:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  web-large:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
  web-heading:
    fontFamily: "Inter, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
  web-small:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  app-body:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 400
    lineHeight: 24sp

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.web-body}"
    rounded: "{rounded.md}"
    height: 44px
  button-secondary:
    backgroundColor: "{colors.secondary-button}"
    textColor: "{colors.ink}"
    typography: "{typography.web-body}"
    rounded: "{rounded.md}"
    height: 44px
  list-row:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.app-body}"
    padding: 16px
  task-container:
    backgroundColor: "{colors.container}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px
  navy-band:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-primary}"
    typography: "{typography.web-large}"
    padding: 24px

Overview

Nextcloud's mobile apps are white-label by design. The interface is plain and file-manager-like, and the accent color comes from the Nextcloud server the user is connected to. A company running Nextcloud with its own brand color sees that color in the app, while the default install shows Nextcloud blue #0082c9. [Measured]

Three decisions define the look:

  1. The brand is a server setting. The Android app builds a server theme from the server's capability data (primary color, element color, text color) with a fallback to its own default, and the iOS app has a flag to use the theming color from the server. [Measured]
  2. A neutral, file-first UI. Text is #333333, secondary text #666666, dividers #cac4d0, and surfaces are white, #ededed and #f4f4f4. Color is reserved for the accent and for status. [Measured]
  3. A deeper marketing brand. The website adds a deep navy #0f0833 and bright blues #1cafff and #30b6ff, set in Inter, which the apps do not use. [Measured]

Source for this file: the public Android and iOS repositories and nextcloud.com, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleValueWhere
Default Nextcloud blue#0082c9Website, default app accent
Bright and sky blues#1cafff, #30b6ffWebsite
Hover blue and deep blue#0a92dc, #004871Website
Navy bands#0f0833, #0c0726Website
Text#333333Android
Secondary text#666666Android
Disabled text#888888Android
Divider#cac4d0Android
Surface#ffffffAndroid
Gray canvas#edededAndroid
Container#f4f4f4Android
Secondary button#d6d7d7 with black textAndroid
Warning#e53935, #e9322dAndroid
Log levelsinfo #4caf50, warning #ffa000, debug #2196f3, error #f44336Android

The primary button background and its text color (#ffffff) come from the active accent. All [Measured].

Typography

  • Website: Inter, with bold used heavily (weights 600, 700 and 900). Sizes include 12, 14, 16, 18 and 24px. [Measured]
  • Apps: the system font on each platform. [Inferred]

Shape and spacing

Corner radii and spacing were not extracted from the apps. The website uses a standard 12-column grid. [Inferred]

Iconography and motion

The apps use file-type icons and simple glyphs tinted by the accent. Icon backgrounds use light grays (#dddddd, #e9e8eb). [Measured]

Themes

Light and dark on both apps. The accent follows the server theme. [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 controller behavior. [Inferred]

Primary navigation

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

A bottom tab bar for files, favorites, media, activity and more. Not verified in the files read. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

A plus action to add files. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Standard sheets and alerts. [Inferred]

Controls

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

Standard iOS controls tinted by the server accent. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

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.

A mix of custom file icons and system symbols. [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.

Sign-in is to the user's own server. The brand options include a multi-account switch and an option to disable it. Account deletion is handled on the server. [Measured for the options, Inferred for the rest] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: system components.

Follows iOS conventions with a server-driven accent. [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 up arrow in the toolbar. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

A navigation drawer and a bottom bar for the main areas. [Inferred]

Main action

Expected on Android: floating action button.

A floating action button for adding files. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Material dialogs, bottom sheets and snackbars. A theme selection dialog exists. [Measured for the dialog]

Controls

Expected on Android: Material switches, pickers, chips.

Material controls recolored by view theme utilities from the server color. [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.

Custom icons and Material icons. [Inferred]

Account and sign-in rules

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

Own-server sign-in. Account deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Uses Material components and a theming layer that applies the server color to them. [Measured]

Platform: Web

The nextcloud.com 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 navigation. [Inferred]

Main action

Expected on Web: page-level button.

Blue call-to-action buttons. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not a feature of the marketing site. [Inferred]

Controls

Expected on Web: native or custom.

Standard web form controls. [Inferred]

Text sizing

Expected on Web: browser zoom.

Mixed px, em and rem. [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 layout. [Inferred]

Icons

Expected on Web: any.

Font Awesome 5. [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.

Follows web norms. [Measured]

Cross-platform consistency

The default blue #0082c9 links all three, but in the apps it is replaceable by the server theme. The website has richer branding (navy, sky blue, Inter) that the apps do not echo. [Measured]

Do's and Don'ts

Do

  • Take the accent color from the server theme and fall back to #0082c9.
  • Keep surfaces white and gray with #333333 text and #cac4d0 dividers.
  • Reserve color for the accent and for status.
  • Keep primary button text white on the accent.

Don't

  • Don't hard-code the brand blue in app screens. Use the theme color.
  • Don't use the website's navy and bright blues in the apps.
  • Don't show server-theme colors without checking contrast on white.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • Corner radii, spacing, type sizes and navigation structure for both apps were not extracted and are inferred.
  • iOS color values were not located. Only the brand options file was read.
  • The default app accent was taken from the website and server default. The exact fallback hex in the Android resource named primary was not read.
  • Account deletion and store policy rules were not verified.
  • Contrast: white text on the primary blue (#0082c9) measures about 4.2 to 1, below the 4.5 to 1 target for normal text.