--- 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 | Role | Value | Where | |------|-------|-------| | Default Nextcloud blue | `#0082c9` | Website, default app accent | | Bright and sky blues | `#1cafff`, `#30b6ff` | Website | | Hover blue and deep blue | `#0a92dc`, `#004871` | Website | | Navy bands | `#0f0833`, `#0c0726` | Website | | Text | `#333333` | Android | | Secondary text | `#666666` | Android | | Disabled text | `#888888` | Android | | Divider | `#cac4d0` | Android | | Surface | `#ffffff` | Android | | Gray canvas | `#ededed` | Android | | Container | `#f4f4f4` | Android | | Secondary button | `#d6d7d7` with black text | Android | | Warning | `#e53935`, `#e9322d` | Android | | Log levels | info `#4caf50`, warning `#ffa000`, debug `#2196f3`, error `#f44336` | Android | 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.