Loop - Design Language System Guidelines

Writing for the web

Scannable content

Page hierarchy

A good hierarchy helps to scan quickly and understand the structure of the page.

Use titles to give a clear summary of the page.

Use the inverted pyramid scheme to design your content structure where bigger titles enclose smaller blocks. And the more the user scrolls through the page, the more into details they get. [3]

When appropriate:

Have a unique title of the page
Have main sections/blocks (every 300 to 500 words)
Have subsections if necessary
CTA’s level should match block level (Primary Secondary, link)

Block titles

Titles need to be to the point and short. They introduce what is detailed in the text below. If more context is needed, use subtitles.

Head titles (displayed over block titles) are to be used sparingly.

Use head titles only when it helps the user scan the page. Keep it short, like a content tag.

Subtitles (displayed below block titles) can be used when more context is necessary

Try this

Keep things short

Avoid this

Too many levels of titles decrease scannability

Short content

Write short and punchy titles

Keep the content short (in some cases, halving the word count improved readability by about 58% [2])
Cut overly detailed information

Try this

Keep things short and interesting

Avoid this

A centered, long title is hard to read and breaks the hierarchy

Easy to read paragraphs

Avoid blocks of text that are too dense, as they discourage rapid reading when scrolling
2 to 4 lines per paragraph maximum
Or 3 to 6 visual lines per block (e.g. in bulleted list)

Avoid this

Paragraphs that are too long are difficult to scan

Avoid this

Too much text overwhelms the reader

Left-aligned text

Don’t mix “Left-aligned” and “center-aligned” blocks
Avoid centered or justified text since it is harder to read
Use left-aligned text. A consistent left margin makes reading easier [1]

Try this

Left-centered content is easier to read

Avoid this

Avoid mixing different text positionning

Sources and why’s

[1] : Design for readability : Use left-aligned text, Harvard University, Digital Acessibility (En)

[2] : How Users Read on the Web, NNGroup (En)

[3] : What is readability in UX Design, Interaction Design Foundation (En)

Writing for the web

Scannable content

Page hierarchy

A good hierarchy helps to scan quickly and understand the structure of the page.

Use titles to give a clear summary of the page.

Use the inverted pyramid scheme to design your content structure where bigger titles enclose smaller blocks. And the more the user scrolls through the page, the more into details they get. [3]

When appropriate:

Have a unique title of the page
Have main sections/blocks (every 300 to 500 words)
Have subsections if necessary
CTA’s level should match block level (Primary Secondary, link)

Block titles

Titles need to be to the point and short. They introduce what is detailed in the text below. If more context is needed, use subtitles.

Head titles (displayed over block titles) are to be used sparingly.

Use head titles only when it helps the user scan the page. Keep it short, like a content tag.

Subtitles (displayed below block titles) can be used when more context is necessary

Try this

Keep things short

Avoid this

Too many levels of titles decrease scannability

Short content

Write short and punchy titles

Keep the content short (in some cases, halving the word count improved readability by about 58% [2])
Cut overly detailed information

Try this

Keep things short and interesting

Avoid this

A centered, long title is hard to read and breaks the hierarchy

Easy to read paragraphs

Avoid blocks of text that are too dense, as they discourage rapid reading when scrolling
2 to 4 lines per paragraph maximum
Or 3 to 6 visual lines per block (e.g. in bulleted list)

Avoid this

Paragraphs that are too long are difficult to scan

Avoid this

Too much text overwhelms the reader

Left-aligned text

Don’t mix “Left-aligned” and “center-aligned” blocks
Avoid centered or justified text since it is harder to read
Use left-aligned text. A consistent left margin makes reading easier [1]

Try this

Left-centered content is easier to read

Avoid this

Avoid mixing different text positionning

Sources and why’s

[1] : Design for readability : Use left-aligned text, Harvard University, Digital Acessibility (En)

[2] : How Users Read on the Web, NNGroup (En)

[3] : What is readability in UX Design, Interaction Design Foundation (En)