Collabora Online Design System

A living reference of the UI components, tokens, and patterns used in Collabora Online, extracted directly from the CSS source files under browser/css/.

Typography

The UI uses a multi-tier font system. The primary font for all chrome is --cool-font. Dialogs and form controls use --jquery-ui-font.

Color Palette

All colors are defined as CSS custom properties in color-palette.css (light) and color-palette-dark.css (dark). The primary brand color is a vibrant blue used for focus rings, active states, and primary actions.

Primary / Brand

Text

Backgrounds

Borders

Semantic

Document Type Accents

Each document type has an RGB triplet used for selected tab underlines, active toolbar buttons, and progress bars via --doc-type.

Cursors

All cursor types used across Collabora Online, with live previews and links to source. There is no centralised cursor map in the codebase — cursors are applied inline via style.cursor in TypeScript/JavaScript or via CSS classes. The Uses chip counts occurrences in browser/css/ + inline style.cursor assignments in browser/src/. The Source link points at one representative declaration at a pinned upstream SHA.

Standard CSS cursors

Custom SVG cursors

Three product-specific cursors shipped as SVG assets in browser/images/cursors/.

Cursor declarations live across spreadsheet.css (spreadsheet-specific), leaflet.css (map/pan resize), jquery-ui-lightness.css (UI widget resize), and inline in browser/src/canvas/sections/ (shape/canvas handles).

Anatomy

How each custom cursor is constructed: hotspot, fill, stroke, and the surrounding clear region. The three Figma frames below break down the anatomy and the production conventions used across the cursor set.

Infographics

Illustrative SVGs that visualise a choice or state for the user. Distinct from cursors (functional pointer feedback) and toolbar icons (which live in the LibreOffice icon themes). Infographics live next to the surface that uses them — e.g. browser/admin/images/ for the integrator settings panel.

UI mode selector (integrator settings)

Shown in the per-user settings dialog under Customization, where the user picks between the Notebookbar and Compact toolbar layouts. The two illustrations are paired as clickable cards; the active card gets the .selected ring (blue tint + border). Rendered at 300px wide, scaling responsively. See AdminIntegratorSettings.ts:1443 (renderCompactModeToggle) and adminIntegratorSettings.css:669 for the styling.

Conventions for new infographics: author at the rendered display size (here 900×600 viewBox, displayed at 300×200), keep the Collabora primary blue #0369a2 for emphasis strokes, use the neutral greys (#e6e6e6, #f2f2f2, #f9f9f9) for the chrome, and pair illustrations that share a footprint so they can be compared at a glance.

Icons

The Collabora Online icon theme started life as Colibre, designed by Andreas Kainz. Over the years the set has grown well past its starting point: hundreds of additions and tweaks have landed from many contributors, and the result no longer follows the original Colibre conventions in every detail. The drift is friendly, not adversarial, but it does mean the source-of-truth for "what an icon should look like today" is no longer the historical Colibre rules. But here is the current icon guidelines for Collabora Online:

Components

Primary Button

The main call-to-action button, used for the default action in dialog boxes (e.g., "OK", "Apply"). Class: .button-primary

Secondary Button

Used for cancel, close, and non-primary dialog actions. Also the default style for all generic <button> elements in dialogs. Class: .button-secondary

Icon Toolbar Button

Used in the toolbar and notebookbar for icon-only actions (Bold, Italic, Underline, etc.). The selected state is tinted with the document-type accent color. Class: .unotoolbutton

Menu Button

A button with a dropdown arrow, used for selection controls in dialogs and sidebars. Class: .jsdialog.menubutton

Text Input

Standard single-line text field used in dialogs. Class: .jsdialog.ui-edit

Spinfield

Numeric input with step controls, used for measurements and quantities. Class: .spinfieldcontainer .spinfield

Checkbox

Custom-styled checkbox with SVG icons in the actual app. Class: .jsdialog.checkbutton

Radio Button

Mutually exclusive option selector. Class: .radiobutton.jsdialog

Select / Listbox

Native select dropdown used in dialogs and sidebar. Class: .ui-listbox-container .ui-listbox

Combobox

Editable input combined with a dropdown list. Class: .ui-combobox

Tabs

Two tab variants exist, both underline-style with a doc-type accent. Dialog tabs colour the selected label in the doc-type colour and underline it. Notebookbar tabs keep the label colour and mark the selected tab with an inset bottom border in the doc-type colour.

TreeView

Scrollable list of entries with optional icons, used in dialogs for file browsers, style lists, etc. Class: .ui-treeview

Context Menu

Right-click popup menu. Class: .context-menu-list

Tooltip

Hover tooltip for toolbar buttons and controls. Class: .cooltip-text

Progress Bar

Thin progress indicator tinted with the document-type accent. Class: .ui-progressbar

Color Picker

Grid of color swatches for font/background color selection. Class: .ui-color-picker

Badge

Small status indicator used in the status bar. Class: .ui-badge

Separator

Visual dividers for toolbars and dialogs.

Snackbar

Toast-like notification bar shown at the bottom of the screen. Class: .snackbar

Status bar

The bar pinned at the bottom of the document viewport. Hosts document-wide indicators (page number, zoom, word count, language, sheet selector in Calc, slide indicator in Impress) and the user presence list for collaborative editing. See the Figma reference for the canonical layout.

Dialogs

Collabora Online uses a single dialog framework (jsdialog, see Control.JSDialog.js + jsdialogs.css) but the framework hosts three behaviourally distinct kinds of surface, classified by two dimensions — whether the backdrop is dimmed (lightbox / nonlightbox) and whether background interaction is blocked (modal / nonmodal / non-dialog). See the classification thread on the forum for the original rubric.

Anatomy

Every dialog (regardless of kind) shares the same three regions: a title bar with the title and a close affordance, a body with the content, and a button area at the foot. Popovers are the exception — they have no title bar or button area and are just a body anchored to the trigger.

• Title bar. Short noun phrase naming the dialog. On nonmodal dialogs the title bar is also the drag handle.
• Close affordance. The × on the right; Esc is the keyboard equivalent. For destructive dialogs prefer an explicit Cancel button.
• Body. A single column. Group related fields with a separator or a fieldset, not visual frames.
• Secondary actions (left). Help, Reset, advanced toggles. Never put a destructive action here.
• Primary action (right). The default action sits rightmost (Western convention; mirrored in RTL). Cancel sits just left of the primary action.

Modal (lightbox)

A dimmed backdrop blocks the document underneath. The dialog is centred and cannot be moved. Use when: the user must commit to a decision before they can keep working (settings, confirmations, blocking errors). Outside-click closes only when the dialog has the cancellable flag (typical for purely informational dialogs).

Nonmodal (draggable)

No backdrop — the document underneath stays interactive. The dialog can be dragged by its title bar and stays open until the user dismisses it. Use when: the dialog is a tool the user keeps glancing at while editing (Find & Replace, Accept/Reject Changes, Sort criteria). Outside clicks do not close it.

Note: the nonmodal surface is the rarest of the three — most older floating tool palettes (Find & Replace, advanced filters) still come from the LibreOffice native dialog path and so behave nonmodally without explicitly opting in. New work tends to land as either modal jsdialog or popover.

Popover (non-dialog)

Not really a dialog — an anchored panel for inline pickers and dropdowns. Has no title bar, no button area; just content. Opted-in via the JSDialog property popupParent: '_POPOVER_' (and clickToClose: '_POPOVER_'). Use when: the user is making a small bounded choice tied to a specific control (font color, autocomplete suggestion, autofilter values). Outside click dismisses.