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.
