Spacing within rich text

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Spacing within rich text #1059

Open inesdgomes opened 3 weeks ago

inesdgomes commented 3 weeks ago

Hi @beatrizmartinmartins One of the questions I think the DS is not totally clear on yet is the spacing within rich text. For example, what should be the spacing before and after each heading level? Wouldn't it be useful to have a page on Figma showing all the spacing for the different components that can be shown inside a rich text?

beatrizmartinmartins commented 2 weeks ago

@inesdgomes Does this make sense? https://www.figma.com/design/qr8jQnxqJkRJFQnVC5PmrB/ILO-Foundations?node-id=1905-4&t=74nmw3gRWJiZHrQM-1 I made a small documentation and included all styles that we have right now inside of the Wrapper so we could see how it behaves within the container. Let me know if this is what we needed.

inesdgomes commented 2 weeks ago

Hi @beatrizmartinmartins Yes, it does, thank you. Wondering if we shouldn't be a bit more generous with spacing between texts (maybe 24px instead of 16px?), especially the text after headings. I find it odd that that spacing is smaller than the spacing between regular body paragraphs, which is 18px.

beatrizmartinmartins commented 1 week ago

Would it make sense to have 24px and 64px on desktop and 16px and 56px on Mobile? I think 24px on Mobile is too much @inesdgomes Also changed the guidelines on the Foundations file

inesdgomes commented 5 days ago

Yes, I think it works better. A few questions/comments:

Should the sentence at the top where it says that space between texts should be 16px be changed to 24px then?
If so, I think the space between paragraphs is still not entirely clear. If you look for example at the paragraph spacing of the Desktop/Body/Regular, that's set at 18px; and Desktop/Body/Small is set at 16px. That's only visible when we try to edit the style - see screenshot below. Should that setting be changed to 24px on all desktop styles and to 16px on all mobile styles?
We should show spacing for lists, even if the standard spacing applies.

beatrizmartinmartins commented 6 hours ago

You are right. Just changed everything said above and also changed the typography tokens to only reflect 16 and 24px. @inesdgomes