Design System

Note: The initial version of the OpenProject design system is designed, developed and documented in Figma. We will move this documentation to the docs in a later stage.

Foundation library

Style definition (Figma) Status
Colours Working draft, designed, docs in progress
Shadows Working draft, designed, docs in progress
Typography Working draft, designed, docs in progress
Spacings Working draft, designed
Iconography Working draft, designed
Illustrations Working draft, designed

Components

Style definitions (Figma) Status Implementation examples
Action bar Working draft, designed, documented Include projects multi-select modal
Badges Working draft, designed, no documentation yet
Buttons and Toggles Working draft, designed, partial documentation Include projects multi-select modal
Calendar Working draft, designed, no documentation yet Calendar module and Team Planner
Chips Working draft, designed, documented
Dividers Working draft, designed, no documentation yet
Dropdowns Working draft, designed, no documentation yet
Drop modal Working draft, designed, documented Include projects multi-select modal
Search field Working draft, designed, documented Include projects multi-select modal
Selection controls Working draft, designed, partial documentation
Tab bar Working draft, designed, no documentation yet
Tables Working draft, designed, no documentation yet
Text fields Working draft, designed, documented Include projects multi-select modal
Toast Working draft, designed, no documentation yet
Tooltip Working draft, designed, no documentation yet

Search field

Places where we use this style Current implementation Migration to design system
Work packages -> Include projects Angular 12.1
Sidebar Angular 12.2
Header main navigation Angular 12.2
Single select project Angular
Team planner -> Add existing Angular
Team planner -> Add assignee Angular
Work packages -> Create relation Angular
Work packages -> Set parent Angular
Work packages -> Add child Angular
Work packages -> Add watcher Angular
Work packages -> All details
Work package list -> Columns Angular
Work package list -> Highlighting Angular
Boards -> Add existing card Angular
Time and costs -> Report project
Members -> Add new member Rails
Work package filters -> All searchable Angular
Work package filters -> Filter by text Angular
Project settings -> Information Angular
My profile -> Notification settings Angular
Administration -> User Rails
Administration -> Placeholder user Rails
Administration -> Groups Rails
Administration -> Custom actions Rails

Patterns

Style definitions (Figma) Status Implementation examples
Action modal Working draft, designed, documented
Dialogues Working draft, designed, no documentation yet
Headers Working draft, designed, no documentation yet In all pages
List and List Primitives Working draft, designed, documented
Main sidebar Working draft, designed, no documentation yet In almost all pages
Notifications Working draft, designed, no documentation yet Notification Center

Functions

Project selector list

Places where we use this style Current implementation Migration to design system
Select parent project on create new project Angular 12.2
Select parent project on copying a project Angular 12.2
Change the parent project information on the project settings Angular 12.2
Change project of a work package on split screen Angular 12.2
Change project of a work package on full view Angular 12.2
Change project of a work package on work package list column Angular 12.2
Project filter on the boards (as include project is not implemented yet) Angular 12.2
Create a new work package from outside of any project Angular 12.2
Notification settings Angular 12.2
Invite user modal Angular 12.2
Administration > Users > Specific User > Projects: New project selection Angular 12.2
Administration > Placeholder users > Specific placeholder users > Projects: New project selection Angular 12.2
Administration > Groups > Specific groups > Projects: New project selection Angular 12.2
Administration > Custom actions > New custom action Angular 12.2
Add a project filter into a new cost report Angular 12.2
Edit the project filters from the work package table configuration Angular 12.2
Navigation bar project selector Angular 12.2

Contribute

The OpenProject product team is very interested in your feedback. So if you want to contribute or comment on the style definitions, components or documentation currently created in Figma please contact us by email to info@openproject.com. Alternatively you can create a work package in the OpenProject community plattform.