Design with us

Following the design system keeps new features and contributions feeling at home next to the rest of Collabora Online.

Open the design system Components on Figma

What it covers

  • Foundations — colour, typography, spacing, iconography
  • Components — buttons, menus, dialogs, sidebars, the Notebookbar
  • Patterns — common flows like sharing, commenting, and document settings
  • Voice & tone — wording in UI strings and error messages
  • Accessibility — keyboard, focus, contrast and screen-reader expectations

How to use it

  • Check whether an existing component or pattern already covers the need before designing new UI
  • When a new pattern is genuinely needed, propose it through the design system rather than as a one-off in the feature PR
  • Reference the relevant component or token in the PR description so reviewers can check the fit quickly
  • If something in the system feels wrong for your case, raise it on GitHub issues rather than diverging silently

For broader discussion, join the COOL UI/UX Design meeting.

Edit page

contribute design
Translate?

Translate?

A great way to get involved. You can perfect CODE and Collabora Office apps for your language, while learning about the feature set, and how things work.
IDEs & Text Editors

IDEs & Text Editors

Tips on how to set your IDE ready for Collabora Online development.
Easy Hacks

Easy Hacks

Check out the starting points for new developers on the project — usually with code pointers helping you to locate the area to hack on easily.