Update design guidelines and make them more easily accessible for devs

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