Styles

Every style, set in its real size, line height and letter spacing. Use the toggle to see the mobile or desktop base styling; Window follows your browser width.

Typesetting

How styles combine on a page: which style an HTML element gets, how long a line of text should be and how much space follows a paragraph.

Hierarchy

The default style for each element, from the ECO Figma file (Editor Default Styles). Choose the element for the document outline, then take the style from this table. On My Pages the page title is an H1 even though the table lists it as H2.

Display Large and Headline XLarge are both H1 styles. Use one of them on a page, never both. For a paragraph, body-lg or body-md depends on the context.

Line length

Count characters per line, spaces included. Under 40 is too narrow: the eye jumps too often. 40–60 is a good length and 60–90 is ideal. Around 100 is the margin, and past it the text is too wide. Never go beyond 130. The ruler below is set in body-sm; the same limits hold for the other body styles.

On small screens the limits are met by the layout itself: at 375px a body line holds about 40–65 characters. On desktop, cap the width of the text container instead of letting it fill the columns.

Paragraph spacing

Add the gap after a paragraph with one spacing token, never by stacking two. Use body-lg or body-md throughout an article, not both: body-lg for dedicated articles, body-md when space is tight.

Spacing after a style

The space that follows a text style, from the ECO Figma file (Style spacing). The values listed for a style are the options a designer or developer can pick from; choose one spacing token and never combine several. The blue bar shows the largest option under the sample. For body styles the value is the space before the next block, for example a heading.

Spacing after body-xl--preamble is 16px at every width. The Figma frame also has one unlabeled 12px example for the preamble, marked with a red frame; it is not used here.

Examples

Styles in context. Each example uses only the styles named in its caption; resize the window to watch mobile and desktop base styling switch at 769px.

Article

A full article from the ECO Figma file (Article Anatomy): kicker alt-label-lg, H1 display-lg, preamble body-xl (medium weight), headings headline-lg to title-md, lists, a blockquote and paragraphs. Use Body size to switch the running text between body-lg and body-md; use one of them throughout an article.

Spacing follows the four ECO Figma frames (desktop and mobile, Body Large and Medium). Above a heading: 32px (Large) or 24px (Medium) on desktop, 24px on mobile. Heading to text: 12px on desktop, 8px on mobile. Paragraph gap: 20px (Large) or 16px (Medium) on desktop, 16px on mobile. Bullets are 8px (Large) or 6px (Medium). Under the kicker and H1 it is 12px and 16px at every width.

Product card

From the ECO Figma file (Product Card): label-sm in the discount badges, alt-label-sm for the brand, title-md for the name and the price, body-sm for article number, rating count, old price and stock status, and label-md for the button text. The image area is a placeholder.

Form field

alt-label-sm for the label, body-md for the entered value, body-sm for the hint.

Campaign banner

From the ECO Figma file (Hero Banner): kicker as label-lg, headline as display-lg, intro as body-xl (medium weight) and the button text as label-lg, all in white over a dark gradient on the image. Spacing is taken from the Figma banner: 12px under the kicker, 4px under the headline and 24px under the intro (this differs from the Spacing after a style table, which gives 8px and 32px). Display is for short, loud text; keep it to a few words. The image is a placeholder.

Code

Generated from tokens.json with the same function that styles the examples above, so it cannot drift.

<h1 class="t-display-lg">Dressed for the job</h1>
<p class="t-body-xl">What to look for in work wear.</p>
<p class="t-body-lg">A heavier weave resists wear.</p>
<span class="t-alt-label-sm">Company name</span>