Typography

Typefaces

Two open-source families, both self-hosted so the build never depends on an external font service. Tailwind’s default fonts are switched off, so these two are the only ones the product can use.

Heading scale

Six levels with fixed line heights in pixels; the large ones are tightened with negative letter spacing. Size, line height and tracking in px.

1. heading-1Sora 600 · 60 / 69 · −1.5

   Activities your child will love

2. heading-2Sora 600 · 48 / 56 · −1

   Activities your child will love

3. heading-3Sora 600 · 40 / 46 · −1

   Activities your child will love

4. heading-4Sora 600 · 32 / 37

   Activities your child will love

5. heading-5Sora 600 · 24 / 28

   Activities your child will love

6. heading-6Sora 600 · 20 / 24

   Activities your child will love

Text scale

Paragraph styles default to the secondary text colour (slate-700, 9.4:1 on the page); each size also exists in medium and semibold.

1. captionSora 500 · 14 / 21 · +1.5 · uppercase

   New this week

2. paragraph-xlInter 400 · 20 / 28

   Robotics, swimming and art classes near you, with free spots this week.

3. paragraph-lgInter 400 · 18 / 22

   Robotics, swimming and art classes near you, with free spots this week.

4. paragraphInter 400 · 16 / 20

   Robotics, swimming and art classes near you, with free spots this week.

5. paragraph-smInter 400 · 14 / 20

   Robotics, swimming and art classes near you, with free spots this week.

Rules

• One h1 per page. Examples in the catalogue use the scale classes on a paragraph, never a second h1.
• Border weight follows the text it frames: 2 px for text of 16 px and more, 1.5 px for 12–14 px semibold, 1 px for small regular text and dividers.
• Links are recognised by weight and colour; on hover only the colour changes.