[UI/UX support for attestations] Style Guide Development

[kborchers]

• Develop a reusable style guide that includes UI patterns, example components, user flows, and accessibility considerations for attestation display.
• Review and incorporate feedback from the OpenSSF team.

[lea100x]

Gathering and organizing links:

• https://docs.google.com/document/d/1s-5CWykVjRZynvoqmir2_xjF3OKpH8yPCwq3_gsfTk8/edit?tab=t.0#heading=h.yjklnglriicr
• TBA

[Erioldoesdesign]

Adding some progress docs and links here~

Design files

Penpot file with UI development and synthesis: https://design.penpot.app/#/workspace?team-id=4e78c421-e227-81f3-8006-8041c1482b38&file-id=89fad332-cf98-81af-8006-804204d39b98&page-id=89fad332-cf98-81af-8006-804204d39b99

Prototype linkfor synthesis: https://design.penpot.app/#/view?file-id=89fad332-cf98-81af-8006-804204d39b98&page-id=89fad332-cf98-81af-8006-804204d39b99&section=interactions&index=0&share-id=e21d721b-b52f-80fd-8006-a2e007397d2c

Prototype link for sketches/ideas: https://design.penpot.app/#/view?file-id=89fad332-cf98-81af-8006-804204d39b98&page-id=2b3698f0-677d-8042-8006-8042181af05e&section=interactions&index=0&zoom=fit&share-id=bbaed550-e65f-8192-8006-a2dfe9381ce9

Penpot file with UI ready for Usertesting: https://design.penpot.app/#/workspace?team-id=4e78c421-e227-81f3-8006-8041c1482b38&file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=b499b529-03f3-80dd-8006-9474c9845c84

Prototype link for sketches: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=b499b529-03f3-80dd-8006-9474c9845c84&section=interactions&index=0&zoom=fit&share-id=bbaed550-e65f-8192-8006-a2e08c11ea9f

Light UI

Prototype link for light UI - RubyGems version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=3caea71c-ff55-8052-8006-93b07359b5d0&section=interactions&index=0&share-id=bbaed550-e65f-8192-8006-a2e1a1a0d8dd

Prototype link for light UI - pypi version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=13c39313-5ca6-805a-8006-9dde16b0c883&section=interactions&index=0&share-id=e21d721b-b52f-80fd-8006-a1b13740646c

Prototype link for light UI - npm version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=13c39313-5ca6-805a-8006-9dde17893960&section=interactions&index=0&share-id=e21d721b-b52f-80fd-8006-a1a3667f6c11

Medium UI

Prototype link for medium UI - RubyGems version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=13c39313-5ca6-805a-8006-9dde17e0a776&section=interactions&index=0&share-id=bbaed550-e65f-8192-8006-a2e4133b088b

Prototype link for medium UI - pypi version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=13c39313-5ca6-805a-8006-9df7db714e80&section=interactions&index=0&share-id=bbaed550-e65f-8192-8006-a1b3cebc04be

Prototype link for medium UI - npm version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=13c39313-5ca6-805a-8006-9df7ede5ebc3&section=interactions&index=0&share-id=e21d721b-b52f-80fd-8006-a1a8f4b42432

Heavy UI

Prototype link for heavy UI - RubyGems version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=13c39313-5ca6-805a-8006-9d8cb6b59af7&section=interactions&index=0&share-id=e21d721b-b52f-80fd-8006-a1a769eb1158

Prototype link for heavy UI - pypi version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=11fdd9b4-7e92-8040-8006-a1aeaebf9f0a&section=interactions&index=0&share-id=e21d721b-b52f-80fd-8006-a1b49cd395a9

Prototype link for heavy UI - npm version: https://design.penpot.app/#/view?file-id=3caea71c-ff55-8052-8006-93b07359b5cf&page-id=11fdd9b4-7e92-8040-8006-a1aeaf8dae5f&section=interactions&index=0&share-id=bbaed550-e65f-8192-8006-a2e4b0dab67c

---

Videos going through the penpot files

Each are 5 mins long!

https://www.loom.com/share/9ae751a38ee54705b2e0823916173e2d?sid=b98cff44-405f-4b31-b7d1-967731622ad9
https://www.loom.com/share/0140ccc85d10455b9a1c88e3237058d3?sid=83429b25-ef43-4dc2-ba22-5643dbf2c304
https://www.loom.com/share/afd7c6acaff140bea2be97a8c86e2343?sid=f2303ae7-c9c8-4023-9779-db3d56af6ba2

[Erioldoesdesign]

Hi folks, update on style guide as of end of August 2025.

We have a viewable penpot file here that we'll continue to host a read-only version of until the request to take it down is made by the project owners. The viewable penpot means that you can view the pages like an online .pdf.

Here are some screenshots of how to navigate between pages. Pages should be able to be zoomed in and out of either using the copntrols provided or pinch zoom etc. controls.

Penpot's page navigation is in the top left:

You can click on sections to navigation between sections of pages:

or the pages in a section:

We did a few proof reading/typo checking rounds but penpot doesn't have spellcheck so apols if you find any spelling errors. This also may be present in some mock ups if you find an anomalous UI element that hasn't matched previous cases.

Eriol has also been backing up penpot version files and will add the last penpot version file that matche sthis online viewable format into the repo https://repos.openssf.org/.

pdf files of each pages section will also be uploaded and/or linked to a google folder (managed by Superbloom.design) if the file size is too large for the repo.

Icons will be uploaded in SVG format in a folder labelled icons.