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.

Header Text (--header-font-size: 1rem / 16px)

font-family: --cool-font · 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif

Medium Text (--medium-font-size: 0.875rem / 14px)

Used in context menus, tooltips

Default Body Text (--default-font-size: 0.75rem / 12px)

Labels, buttons, form controls, toolbar items

Dialog & Form Text (--jquery-ui-font)

font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif

Notebookbar Tab Text (fluid: clamp 11px–16px)

Scales between 640px and 1000px viewport width via clamp(0.6875rem, 1vw, 1rem)

Token	Value	Usage
`--default-font-size`	0.75rem (12px)	Body, labels, controls
`--medium-font-size`	0.875rem (14px)	Context menus, tooltips
`--header-font-size`	1rem (16px)	Section headers, doc title
`--tooltip-font-size`	0.875rem (14px)	Tooltip text
`--overflow-group-font-size`	8.5pt	Notebookbar group labels

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

Primary

#0b87e7

Primary Dark

#0063b1

Primary Darker

#004b86

Primary Lighter

#83beec

Text

Main Text

#333333

Text Darker (hover)

#000000

Text Lighter (disabled)

#696969

Primary Text (on blue)

#ffffff

Backgrounds

Main Background

#F8F9FA

Background Dark

#e8e8e8

Background Darker

#c0bfbc

Background Lighter

#ffffff

Tabs Group

#f1f1f1

Hover

#F5F5F5

Borders

Border

#b6b6b6

Border Dark

#cecece

Border Darker

#c0bfbc

Border Lighter

#f1f1f1

Toolbar Border

#e1dfdd

Semantic

Error

#e9322d

Warning

#eca700

Success

#46ba61

Document Type Accents

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

Writer

Calc

Impress

Draw

Components

Primary Button

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

Interactive Demo

Default

Hover

Active

Focus

Disabled

Property	Value
Height	`32px`
Min Width	`62px`
Padding	`0 16px`
Border Radius	`var(--border-radius)` = `4px`
Border	`1px solid #0063b1`
Background	`#0b87e7` (--color-primary)
Text Color	`#fff`
Font Size	`0.75rem` (12px)
Margin	`5px`

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

Interactive Demo

Default

Hover

Active

Focus

Disabled

Property	Value
Height	`32px`
Min Width	`62px`
Padding	`0 16px`
Border Radius	`4px`
Border	`1px solid #cecece` (--color-border-dark)
Background	`#e8e8e8` (--color-background-dark)
Text Color	`#333333`
Margin	`5px`

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

Interactive Demo

Default

Hover

Selected

Disabled

Property	Value
Size (button)	`28px × 28px` (--btn-size)
Icon Size	`24px × 24px` (--btn-img-size)
Padding	`2px` (--btn-padding)
Border Radius	`4px`
Border (default)	`1px solid transparent`
Border (hover)	`1px solid #b6b6b6` (--color-btn-border)
Background (hover)	`#f1f1f1` (--color-background-tabs-group)
Selected Background	`rgba(var(--doc-type), 0.1)`
Selected Border	`1px solid rgb(var(--doc-type))`
Disabled Opacity	`0.65`
Margin (in toolbar)	`auto 2px`

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

Interactive Demo

Property	Value
Padding	`8px 10px`
Border Radius	`4px`
Border	`1px solid #cecece` (--color-border-dark)
Background	`#e8e8e8` (--color-background-dark)
Font Size	`calc(0.75rem * 1.2)` (~14.4px)
Font Family	`--jquery-ui-font`
Arrow	CSS triangle: `4px border, 5px top`

Text Input

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

Interactive Demo

Property	Value
Height	`32px`
Line Height	`28px`
Border Radius	`4px`
Border	`1px solid #cecece` (--color-border-dark)
Background	`#e8e8e8` (--color-background-dark)
Padding Inline	`4px`
Focus border	`#0b87e7` (--color-primary)

Spinfield

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

Interactive Demo

Property	Value
Height	`28px`
Min Width	`70px`
Border Radius	`4px`
Border	`1px solid #cecece`
Background	`#e8e8e8`
Padding	`4px 0 4px 4px`
Container margin-end	`5px`

Checkbox

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

Interactive Demo

Checked option

Unchecked option

Disabled option

Property	Value
Checkbox Size	`20px × 20px`
Checkbox Margin	`1px 8px`
Border Radius	`3px`
Label Font Size	`0.75rem` (12px)
Label Line Height	`28px`

Radio Button

Mutually exclusive option selector. Class: .radiobutton.jsdialog

Interactive Demo

Option A

Option B

Option C

Property	Value
Radio Size	`18px × 18px`
Radio Margin	`1px 8px`
Dot Size (checked)	`8px`
Border Radius	`50%`

Select / Listbox

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

Interactive Demo

Property	Value
Height (dialog)	`32px`
Height (toolbar)	`24px` (1.5rem)
Min Width	`70px` (toolbar) / `100px` (dialog)
Border Radius	`4px`
Border	`1px solid #cecece`
Background	`#e8e8e8`
Padding	`0 14px 0 4px`

Combobox

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

Interactive Demo

Property	Value
Height (dialog)	`32px`
Border Radius	`4px`
Border	`1px solid #b6b6b6` (--color-border)
Input Background	`#fff` (--color-background-lighter)
Button width	`28px`

Tabs

Two tab variants exist: Dialog tabs (pill-style) and Notebookbar tabs (underline-style with doc-type accent).

Interactive Demo — Dialog Tabs

Interactive Demo — Notebookbar Tabs

Property	Dialog Tab	Notebookbar Tab
Height	`24px`	`34px` (full nav height)
Border Radius	`4px`	`0` (none)
Padding	`0 1em`	`0 clamp(4px, 1vw, 1em)`
Selected indicator	box-shadow pill	`inset 0 -2px rgb(var(--doc-type))`
Margin	`0 12px 0 0`	`0`

TreeView

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

Interactive Demo

Default Paragraph Style

Heading 1

Heading 2

Text Body

List Bullet

List Number

Property	Value
Border	`1px solid #b6b6b6`
Border Radius	`4px`
Min Size	`150px × 100px`
Max Height (dialog)	`150px`
Line Height	`24px`
Icon Size	`16px` (--btn-img-size-s)
Selected Background	`#0b87e7` (--color-primary)
Hover Background	`#c0bfbc` (--color-background-darker)

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

Interactive Demo

Property	Value
Border	`1px solid #cecece`
Border Radius	`4px`
Box Shadow	`0 0 3px rgba(77,77,77,0.5)`
Item Font Size	`0.875rem` (14px)
Item Padding	`5px 22px`
Separator	`1px solid #f1f1f1`

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

Interactive Demo — hover the button

Bold (Ctrl+B)

Property	Value
Padding	`7px 9px`
Border Radius	`6px`
Box Shadow	`0 0 4px rgba(77,77,77,0.5)`
Font Size	`0.875rem` (14px)
Background	`#fff`
Z-index	`2147483647` (max)

Progress Bar

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

Interactive Demo — click to animate

Writer (blue) — 65%

Calc (green) — 40%

Impress (orange) — 80%

Property	Value
Height	`5px`
Track Color	`rgba(var(--doc-type), 0.2)`
Bar Color	`rgb(var(--doc-type))`
Border Radius	`3px`

Color Picker

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

Interactive Demo

Property	Value
Swatch Size	`16px × 16px`
Grid Gap	`4px`
Padding	`4px`
Hover Outline	`2px solid #0b87e7`, offset `1px`

Badge

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

Interactive Demo

English (USA) 100% Words: 1,234

Property	Value
Padding	`5px`
Border Radius	`4px`
Background	`#c0bfbc` (--color-background-darker)
Font Size	`0.75rem` (12px)

Separator

Visual dividers for toolbars and dialogs.

Interactive Demo

Bold Italic Underline

Horizontal separator:

Property	Vertical	Horizontal
Size	`1px × 14px`	`100% × 1px`
Color	`#c0bfbc`	`#f1f1f1`
Margin	`0 3px`	`0`

Snackbar

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

Interactive Demo

Document has been saved.

Property	Value
Background	`#323232`
Text Color	`#fff`
Padding	`12px 16px`
Border Radius	`4px`
Action Color	`#83beec` (--color-primary-lighter)

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.

Tip: hover the preview box to see the actual cursor as your browser renders it. Source links are pinned to cogerrit/main at SHA 2b71cd2 so line numbers stay accurate; re-run the generator after upstream changes to refresh.

Standard CSS cursors

Cursor	Preview	Description	Uses	Source
`auto`	hover	Browser chooses cursor automatically	3	cool.css:233
`cell`	hover	Cell selection in spreadsheets	1	spreadsheet.css:2
`col-resize`	hover	Column width resize	2	cool.css:266
`context-menu`	hover	Context menu trigger	1	jsdialogs.css:747
`crosshair`	hover	Crosshair selector (auto-fill in spreadsheets)	4	leaflet.css:169
`default`	hover	Standard arrow (buttons, toolbar, panels)	20	jquery-ui-lightness.css:61
`e-resize`	hover	Resize from the east (right) edge	5	jquery-ui-lightness.css:613
`ew-resize`	hover	Horizontal resize (east/west)	1	leaflet.css:187
`grab`	hover	Hand ready to grab/drag. Used only as SVG fallback in this codebase — see `grab.svg` below.	2	ShapeHandleAnchorSubSection.ts:30
`grabbing`	hover	Hand actively dragging	1	leaflet.css:220
`help`	hover	Help/explainer cursor (info tooltips, AI chat sidebar)	1	aichat-sidebar.css:212
`inherit`	hover	Inherit cursor from parent element	1	cool.css:946
`move`	hover	Move/drag element (four-arrow)	7	leaflet.css:165
`n-resize`	hover	Resize from north (top) edge	1	jquery-ui-lightness.css:599
`ne-resize`	hover	Resize from north-east corner	1	jquery-ui-lightness.css:648
`nesw-resize`	hover	Diagonal resize (NE / SW)	1	leaflet.css:183
`not-allowed`	hover	Action not permitted (disabled buttons)	5	backstage.css:166
`ns-resize`	hover	Vertical resize (north/south)	1	leaflet.css:195
`nw-resize`	hover	Resize from north-west corner	1	jquery-ui-lightness.css:641
`nwse-resize`	hover	Diagonal resize (NW / SE)	1	leaflet.css:191
`pointer`	hover	Interactive element (buttons, links)	78	selectionMarkers.css:29
`row-resize`	hover	Row height resize	1	spreadsheet.css:228
`s-resize`	hover	Resize from south (bottom) edge	2	jquery-ui-lightness.css:606
`se-resize`	hover	Resize from south-east corner (table fill)	2	jquery-ui-lightness.css:627
`sw-resize`	hover	Resize from south-west corner	1	jquery-ui-lightness.css:634
`text`	hover	Text input / text selection (I-beam)	4	jquery-ui-lightness.css:862
`w-resize`	hover	Resize from west (left) edge	4	jquery-ui-lightness.css:620

Custom SVG cursors

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

Cursor	Preview	Description	Uses	Source
`crop.svg`	hover	Image cropping tool — shown when dragging a shape's scaling handle in crop mode	1	crop.svg ShapeHandleScalingSubSection.ts:36
`fill.svg`	hover	Auto-fill brush — paint formatting / spreadsheet fill handle	2	fill.svg spreadsheet.css:6 cool.css:250
`grab.svg`	hover	Custom grab hand — shape anchor and custom shape handles	2	grab.svg ShapeHandleAnchorSubSection.ts:30 ShapeHandleCustomSubSection.ts:31

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).

Collabora Online Design System

Typography

Color Palette

Primary / Brand

Text

Backgrounds

Borders

Semantic

Document Type Accents

Components

Primary Button

Secondary Button

Icon Toolbar Button

Menu Button

Text Input

Spinfield

Checkbox

Radio Button

Select / Listbox

Combobox

Tabs

TreeView

Context Menu

Tooltip

Progress Bar

Color Picker

Badge

Separator

Snackbar

Cursors

Standard CSS cursors

Custom SVG cursors