Default Heading Styles:
H1 : Lorem ipsum 2.875/3.5
Visual eq: 46/56.
H2 : Lorem ipsum 2.375/2.75
Visual eq 38/44.
H3 : Lorem ipsum 1.75/2.25
Visual eq: 28/36
h4 : Lorem ipsum 1.375/1.75
Visual eq: 22/28
h5 : Lorem ipsum
Body Styles
.body-small: 1/1.5rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque mollis ex id posuere egestas. Fusce efficitur tortor vel ullamcorper tempor. Vestibulum porta purus ac vestibulum sollicitudin.
Nullam sagittis ex in luctus ultricies. Donec lacinia dolor ut nulla vestibulum mattis. Praesent dapibus quam id sapien cursus, id lobortis ligula cursus. Aliquam luctus nisi eget ex malesuada, nec lacinia ligula tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Default: 1.1875/1.75rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque mollis ex id posuere egestas. Fusce efficitur tortor vel ullamcorper tempor. Vestibulum porta purus ac vestibulum sollicitudin.
Nullam sagittis ex in luctus ultricies. Donec lacinia dolor ut nulla vestibulum mattis. Praesent dapibus quam id sapien cursus, id lobortis ligula cursus. Aliquam luctus nisi eget ex malesuada, nec lacinia ligula tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
.body-large : 1.375/2rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque mollis ex id posuere egestas. Fusce efficitur tortor vel ullamcorper tempor. Vestibulum porta purus ac vestibulum sollicitudin.
Nullam sagittis ex in luctus ultricies. Donec lacinia dolor ut nulla vestibulum mattis. Praesent dapibus quam id sapien cursus, id lobortis ligula cursus. Aliquam luctus nisi eget ex malesuada, nec lacinia ligula tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Fixed values converted to REM units with a 16px base:
Fixed | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96 | 104 | 112 | 120 | 128 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Relative | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 5.5 | 6 | 6.5 | 7 | 7.5 | 8 |
For more info, see gov.uk spacing and type scale
link – blue
1E6BE6
button hover – sky blue
99D6FF
light blue
CCEBFF
extra light blue
E2EFF8
link hover – dark blue
003078
UI focus color, active info
9BD3F8
brand secondary
0072BC
Grid:
44rem wide, 8rem min height
1 rem gap, row and column
Grid 12×3: 36rem, 1rem gap, 1rem padding
H1: Page Title - 46px
H1: Page Title - default
H2: Section Heading - 38px bold
H2: Heading - default
New text editor element. Default-styled text. Pretty standard text right here, if you ask me. Here’s an inline link.
A Bolded Link
Description text beneath.
H2: Default Style Examples
Paragraph content.
H3 Heading
Paragraph content.
H4 Heading
Paragraph content.
Bolded Fake Heading
Paragraph content.
H5 Heading
Paragraph content.
H6 Heading
Paragraph content.
- Bullet List – Item 1
- Bullet List – Item 2
- Bullet List – Item 3
Paragraph content.
Section Heading (h2)
Metro content is simple and direct.
Bolded In-line Pseudo-Heading
- Bulleted Highlight
Super great helpful details
- Bulleted Highlight
You have to shif-return for un-bulleted lines
- Bulleted Highlight
The details just keep coming.
Regular Bulleted List
- This
- That
- The Other
- Cash (Bus Only)
The current default paragraph format.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H2 : Section Heading
Metro Call-out Section
Information about Metro? Here’s what to expect.
Bolded Fake Heading
With some content underneath it.
Bolded Fake Heading
Yet more content. Be mindful of noise.
Section Heading (h2)
Watch out—we have another section here.
Heading (h3)
Paragraph content.
Sub-Head (h4)
Paragraph content.
Bolded Fake Heading
Paragraph content.
Heading (h5)
Paragraph content.
Heading (H6)
Paragraph content.
The current default paragraph formatting. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
