Foundations
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.
Color
Primary color
#0082C9
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.
Note
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.
On web:
var(--color-primary-element)Android: uses default Material Design colors
iOS: systemFill
Desktop: default Qt guidelines
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.
On web:
var(--color-main-background)Android: uses default Material Design colors
iOS: systemBackground
Desktop: default Qt guidelines
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.
On web:
var(--color-text-maxcontrast)Android: uses default Material Design color “medium emphasis”
iOS: secondaryLabel
Desktop: default Qt guidelines
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
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:
Web: 16px for main text and sublines, 20px bold for headings
Android: 14sp for main text, 16sp for headings
iOS: values from Dynamic Type Sizes, for size Large (Default)
Desktop: default Qt guidelines
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 Design icons (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.
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
Naming
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.
Wording
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.