Review

Typography & line spacing

Every heading and paragraph with its size and line-height (leading). The faint horizontal guides show the leading. Tell me which ones to tighten or loosen.

Leading tokens

--tea-leading-tight

1.12

Headings (H1–H5).

--tea-leading-snug

1.35

H6, tighter UI text, quotes.

--tea-leading-base

1.5

Body copy, leads, FAQ answers.

Headings

.tea-h1
48px / 3rem
line-height 1.12
tight

Building an ethical brand that lasts the distance

.tea-h2
36px / 2.25rem
line-height 1.12
tight

Strategy and design, made to do good and perform well

.tea-h3
28px / 1.75rem
line-height 1.12
tight

A section heading that runs onto two lines for review

.tea-h4
22px / 1.375rem
line-height 1.12
tight

A smaller sub-heading wrapping across two lines of text

.tea-h5
18px / 1.125rem
line-height 1.12
tight

A minor heading used above groups of content and lists here

.tea-h6
16px / 1rem · uppercase
line-height 1.35
snug

An eyebrow label that may wrap to a second line

Body & paragraphs

.tea-lead
18px / 1.125rem
line-height 1.5
base

An intro or lead paragraph. It sits a little larger than body copy and is used at the top of pages and sections to set the scene before the main text begins.

.tea-body / p
16px / 1rem
line-height 1.5
base

Standard body copy used across the site for readability. This is the workhorse paragraph style — long enough here to wrap across several lines so the leading between each line is easy to judge and comment on.

.tea-small
14px / 0.875rem
line-height 1.5
base (inherited)

Smaller supporting text for captions, meta and secondary information. Shown here across two lines so the line spacing is visible for review.

.tea-caption
12px · uppercase
line-height 1.5
base (inherited)

Caption label across two lines for spacing review

Guides are 1em apart (one line-height unit) and are a visual aid only — they are not part of the components.