Design System

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.