openproject/docs/development/design-system

sidebar_navigation	description	robots	keywords
[{title Design system} {priority 998}]	OpenProject Design System	index, follow	Design system, styles, design, components

Design System

Note: The initial version of the OpenProject design system is developed 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

Contribute

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