HRA Design System website notepad

[LibbyUX]

HRA Design System website notepad

Daniel & my ongoing notepad/idea space for the HRA Design System website!

Image functionality & image workflow delivery questions:

• Can we mimic Primer's responsive image functionality on page resize? I am having trouble getting it to behave in Figma like images from Primer: UI color system - Overview. I love that the images resize easily and that people can click on the image to see a larger version. This would be nice to implement in our design system website.
• How can I support the dev team in delivering these graphic design assets? I have started a graphic design section for all images we will need to export. I would be happy to deliver these if that could help the team. Additionally, I could export them at 1.5x size, to achieve the clickable larger image functionality:

[LibbyUX]

This website could have 3 different page layouts and every breakpoint is designed with responsive components. Certain elements between 430px to 320px are on a linear scale, as noted here. These pages will behave the same and will use the same elements.

Layout question: Now that I'm getting into content design for the style guide, is it necessary to provide breakpoints for every page?

Daniel and I will catch up later on this.

[LibbyUX]

Thanks for catching up with me earlier @axdanbol!

• Can we mimic Primer's responsive image functionality on page resize? Yes.
• How can I support the dev team in delivering these graphic design assets? We will export as 1.5x png files for all images in the style guide graphic design section for now. More to follow on other libraries.
• Now that I'm getting into content design for the style guide, is it necessary to provide breakpoints for every page? Not if it behaves the same way.

We also discussed that I am specifying too much UI at the moment, as Storybook & integrations will house this documentation. I will focus on content mainly moving forward. We will catch up later this week when we can experiment more with Storybook and our content.

[LibbyUX]

Consolidating information from #524

Daniel and I met on July 3rd about the Design System Website infrastructure.

My integration list from 7.3.2024

Necessary integrations

• Designs

Integrations that may be nice to have

• Accessibility

Figma

• Design System Website
• Design System Repository

[LibbyUX]

Good morning @axdanbol,

I haven't been updating the Design System Website Figma file and I don't have much to add to this notepad. I'm ok to close this out if you don't find it necessary anymore! I hope your day is starting well!