Skip to content

Update design guidelines and make them more easily accessible for devs #14660

@jancborchardt

Description

@jancborchardt

Before You Submit

  • I have checked for existing issues and pull requests related to my suggestion.
  • I have posted on the Nextcloud Community Help Forum if my suggestion is a troubleshooting scenario or I'm unsure about the solution.

Type of Suggestion

Suggesting an improvement

Relevant Documentation Links

https://docs.nextcloud.com/server/latest/developer_manual/design/index.html

Summary

Update design guidelines and make them more easily accessible for devs

Details

Steps to update design guidelines (discussed with @nimishavijay & @kra-mo at design team call 2026-04-28, FYI @marcoambrosini):

1. Update the design guidelines @nimishavijay

  • Review & update text, update screenshots, add missing components (e.g. the settings dialogs) → for upcoming release
  • Add basic design guidelines to DESIGN.md in main Hub app repositories → for upcoming release
  • Update Penpot design kit → nice to have

2. Improve the developer experience of the Vue components @kra-mo

  • Go over examples and make them all make sense, e.g. menus we actually use in apps.
  • Have the examples adhere to the design docs
  • Make it not feel so overwhelming, possibly adjust structure and style

Future steps:

3. Consider combining the design and dev guidelines to keep it simple

  • Inquire with frontenders if Styleguidist is what they will stick with for the foreseeable future.
  • Check how we can best include the design guidelines, e.g. at the top of the relevant component page.

4. Discuss further steps on design system

  • Usage of design tokens
  • Explore possibilities of having design kit in Figma and Sketch as well. Importers/Exporters don’t work well with the different layouting systems
  • What do do with the HTML/CSS guidelines – they are quite old, but possibly still useful for apps which do not use Vue.js

Additional Notes

No response

Metadata

Metadata

No fields configured for Enhancement.

Projects

Status

📐 At design

Relationships

None yet

Development

No branches or pull requests

Issue actions