Foundations

Colors

Primary colors

--color-primary-element: Primary colors are to be used for positive action buttons and active states. Otherwise use the primary color sparingly in the UI. Do not use the primary color for body text.
--color-primary-element-light: Use the secondary color for less important buttons and highlighting elements in the UI. Do not use the secondary color for body text.

Light theme	Dark theme

Text colors

--color-main-text: Most text that is not inside a component is the main text color.
--color-text-maxcontrast: Use this color for sublines, captions and any other kind of supporting text.

Light theme	Dark theme

Background colors

--color-main-background: The background of the main content should be this color.
--color-background-darker: This can be used as a background color for containers inside the main content when visual contrast would be useful. Use sparingly to not overwhelm the UI.

Light theme	Dark theme

Border colors

--color-border: Use this color for borders of elements like cards, and for separator lines.
--color-border-maxcontrast: Use this color when there is a stronger contrast needed.

Light theme	Dark theme

Status colors

--color-info: This color is used for denoting informational elements like info cards.
--color-success: Used for positive actions like a “Join call” button, and for indicating an action is successful.
--color-error: This color is used to indicate a destructive action like “Delete conversation” and when an action has failed.
--color-warning: This is used to warn the user about an action that may be dangerous.

Light theme	Dark theme

Assistant colors

--color-element-assistant: A special color used for elements using AI. Using this color informs the user that the info they are seeing may be AI-generated or that they are interacting with an AI.

Light theme	Dark theme

Typography and wording

Fonts

To ensure compatibility with different platforms, Nextcloud apps always use the native system font.
Use bold font weight for emphasis and unread items
Do not use italics or upper case as they are less legible.

Font sizes

--defalut-font-size(15px): For body text
--font-size-small (13px): For nonessential information
Other than those 2 font sizes, 20px is also often used for headings, and 24px for titles.

Wording

Wording guidelines have been moved to the writing section.

Borders

Border radii

--border-radius-small (4px): Used for small elements like tags and cards.
--border-radius-element (8px): Standard border radius used for buttons. navigation items and more.
--border-radius-container (12px): Used for larger elements such as dialogs.
--border-radius-pill (100px): Used to convert any small element into a pill-shape.

Element sizes and spacing

--default-grid-baseline(4px): This is the base multiplier for all spacing. Use whole number multiples of this variable for all spacing, never raw numbers.
--default-clickable-area(34px): This should be the minimum width and height of most clickable elements like buttons, inputs, cards, etc.
--clickable-area-small(24px): This can be used for smaller elements like chips, or when there is limited space.

Icons

Icons can be used to communicate the intent of an action, or to provide visual interest to an element. On the browser always use Material Symbols (outlined, 20px).

Never use a custom icon except for the icon of the app itself. Still, most apps use an app icon from Material Symbols to keep consistency.
When possible, use text together with icons so it’s clear what they refer to.
Elements that contain AI-generated content should have a clear indication that they are AI-generated in the form of a written disclaimer or by the use of the Assistant icon (‘creation’ in Material Symbols) in the Assistant color.