There are several design elements that are common to all Nextcloud apps. If you are developing for a platform that has its own design specifications, for example Android, it would be a good idea to keep those in mind while designing your app.

For web apps, there is the Vue library and the Penpot design kit.


Penpot colors

Primary color



While this is the primary color associated with Nextcloud and can be used to draw attention to an element, it is best to limit the usage of this to primary actions and other important elements.


The primary color can be customized by admins through theming, but the default experience will be Nextcloud blue. If the primary color is themed to something very light like a shade of yellow, the text or header icons will be inverted to dark automatically.

Background color


Background for light theme: #FFFFFF


Background for dark theme: #181818

Nextcloud apps have a light and a dark theme, with appropriately chosen colors for all elements.

Text color


Text in light theme: #222222


Text in dark theme: #D8D8D8

This is the main color for the text in light theme, and in dark theme.

  • On web: var(--color-main-text)

  • Android: uses default Material Design color “high emphasis”

  • iOS: label (in UITextView, leave the default textColor)

  • Desktop: default Qt guidelines


Secondary text in light theme: #767676


Secondary text in dark theme: #8C8C8C

In addition, a softer color is used for secondary text like sublines, timestamps, and similar.

Status and indicators


Info: #006AA3


Success: #46BA61


Error: #E9322D


Warning: #ECA700

Interface elements associated with a status like info, success, error, or warning may also be colored to communicate the action better.

While interface elements like buttons are colored differently depending on their action, the color of the text in that element is almost always either of the main text colors, that is light or dark.

  • On web:

    • Info color: var(--color-info)

    • Success color: var(--color-success)

    • Warning color: var(--color-warning)

    • Error color: var(--color-error)

  • Android: Material Design guidelines

  • iOS: Apple HIG colors

    • success: systemGreen

    • error: systemRed

  • Desktop: default Qt guidelines


Penpot typography

To ensure compatibility with different platforms, Nextcloud apps always use the native system font.

For legibility, make sure that the text in your content uses:

  • Bold for emphasis

  • A line height between 130% and 150%

  • The default tracking of the font

  • No italics or UPPER CASE as these text styles are less legible

The text sizes for the different platforms are:


Penpot icons

Material icons

Icons can be used to communicate the intent of an action, or to provide visual interest to the screen. We use monochrome icons on all platforms: Material Symbols (not Material Icons, and 20 px default filled) for web, Android, Windows and Linux, and SF Symbols (default weight, scale and variant) for iOS and macOS.

This is except for the icon of the app itself, which can be a custom icon. Most use an app icon from Material Symbols as well though to keep consistency.

Make sure to:

  • Not overuse icons

  • When possible, use text together with icons so it’s clear what they refer to

  • For special cases like warnings, combine the icon with color to enhance its visibility


To be immediately understandable, we choose app names which are generic and easily translatable. Additionally, they are short and easily fit in the top navigation without being cut off.

Files, Contacts, Calendar, and Mail do not need further explanation, which is why we recommend to choose a self-explanatory app name.

Further good examples of this: Notes, Bookmarks, Maps, Forms, Tasks, Music.


The wording and language in your app sets the tone and approachability of your app.

  • Nextcloud should always be written out, and only with a capital N. Not “NextCloud” or “Nc”.

  • Be friendly and approachable, not condescending.

  • Use understandable language, not technical jargon. For example, “link” is much better than “URL”, and explaining errors is better than showing error codes.

  • Don’t write in ALL CAPS, as it is not as readable and comes off as shouting and aggressive. Also use Sentence case and not Capital Case, with the exception of product names like Nextcloud Talk, Nextcloud Hub, etc.

  • We are a community, so better write “We are happy to announce” instead of “I am happy to announce”.

  • If your app content is empty, it can be helpful to add an engaging message. “Add or import your first bookmark!” is much nicer than “No bookmarks yet”.

  • Try to avoid using “my” or “your” like in “My files” or “Your files”, instead using “All files”. For longer sentences where it cannot be avoided, use “your”, never “my”.

  • Use gender neutral language. This international guide to gender-inclusive writing contains info and examples on gender neutral wording for different languages.

  • Use full names instead of only first names while addressing the person using your app.

  • For any “Delete” action, give context to what it will delete, like “Delete conversation” or “Delete user” so that it is clear specifically for this destructive action.

  • Keep language short and concise, and keep in mind that it should be easily translatable.

  • Make sure to spellcheck anything you write.