deisgn asset handover

[aaaaargZombies]

Here's some useful info about what exists already structurally and what's useful for integrating new designs. Accessibility is a high priority!

All our "design tokens" live in a vars file but I'll try and link out to the important ones with a visualization below. The main thing to watch out for is the fluid font/spacing units that adapt to screen sizes, you should be able to plumb in the screen size you are interested in and get a preview of where the values land. I'm very happy to have any of these scales adjusted as long as the end result conforms to WCAG AA or higher.

It's helpful if the spacing and font's are labeled, something like this.

If they aren't labeled but all the values are within the design tokens set I can probably eyeball it. Anything that's impossible to attribute to a value, you can always label like "fill availabe space" or "max-width n" if it's critical to the design or I'll do my best to infer what should happen at different browser sizes.

Fonts

• Currently uses System UI as a safe legible choice guaranteed to load across devices.
• You're welcome to pick any alternative that is permissively licensed and can be downloaded and served from our host so we don't add GDPR concerns.
• scale visualized https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
• current line heights which are paired up the font steps https://github.com/breathe-easy-events/breathe-easy.uk/blob/8a73e323fcb01ebe7ccfbd86739158358b5e54d5/src/css/_vars.scss#L39-L46

Spacing

• https://utopia.fyi/space/calculator/?c=320,18,1.2,1240,20,1.25,6,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-3xl%7Cm-xl&g=s,l,xl,12
• again you're welcome to adjust this, just provide the modified set and any custom ranges needed to make the design

colors

• https://abc.useallfive.com/?colors[]=000000,FFFFFF,044156,4F81BD,65B891,F6F183,B48C87
• For reference large text in the context of this site is >20% of what ever body font you choose.
• No strong restrictions from my end other than the accessibility needs.

Anything missing / questions feel free to @ me on here or ask Chloe to pass on my contact details.

[Kimlee-wilson-miller]

Thanks Alf, for this! This seems very comprehensive, and I think I understand how you would like me to present the graphics. Please bear with me, I'm not familiar with scss. In the past when working with developers, it's usually been a case of them asking me to 'supply this png/jpg at X size' or I hand over an interface/screen design, and then they tell me if anything is wrong with it. Many thanks again :)