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)

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