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.
