Style guide
Every colour, size and component on one page. Switch the style variation or the light/dark toggle and watch all of it change together — nothing here is drawn by hand.
Foundations
Colour
Primary
primary
Secondary
secondary
Accent
accent
Background
background
Surface
surface
Surface alt
surface-alt
Text
text
Text muted
text-muted
Heading
heading
Border
border
Light
light
Dark
dark
Success
success
Warning
warning
Error
error
Foundations
Type scale
Sailing by the shape of the water
Display
Sailing by the shape of the water
Huge
Sailing by the shape of the water
2X-Large
Sailing by the shape of the water
X-Large
Sailing by the shape of the water
Large
Sailing by the shape of the water
Medium
Sailing by the shape of the water
Small
Sailing by the shape of the water
X-Small
Foundations
Headings and body text
Heading level one
Heading level two
Heading level three
Heading level four
Heading level five
Heading level six
A lead paragraph carries the opening idea. It is set larger than body text and kept to a comfortable measure, so the reader is drawn in rather than confronted with a wall.
Body text is set in Google Sans at a size that stays readable on a phone and does not sprawl on a wide monitor. Inline elements behave as expected: this sentence contains a link, bold text, italics, inline code and a highlight.
Mono label — used for eyebrows, meta and captions
Small print is set in Roboto rather than the body face. At thirteen pixels it holds its shape better, and the change of voice marks it as a separate layer instead of shrunken body copy.
Foundations
Spacing, radii and shadows
Spacing scale
10
20
30
40
50
60
70
80
Corner radii
Shadows
Components
Buttons
Hover, focus and active states are defined once in theme.json and apply to every button on the site. Tab to a button to see the focus ring.
Components
Lists and quotes
- Check mark list, for benefits
- Second item, a little longer to show wrapping behaviour
- Third item
- Plain rows, separated by hairlines
- Good for specifications and indexes
- An ordinary ordered list
- Second step
A quote sits against a rule in the accent colour and is set slightly larger than body text.
Attribution
A pullquote is louder: display face, rules above and below.
Attribution
.selector {
color: var(--wp--preset--color--primary);
}Components
Tables
Hover a row: it flashes to a stronger tint and settles back. Tables scroll inside their own box on narrow screens rather than widening the page.
| Format | Dimensions | Weight limit | Delivery |
|---|---|---|---|
| Leaderboard | 728 × 90 | 150 KB | HTML5 |
| Medium rectangle | 300 × 250 | 150 KB | HTML5 |
| Half page | 300 × 600 | 200 KB | HTML5 |
| Billboard | 970 × 250 | 200 KB | HTML5 |
| Specification style | Label left, value right |
| Borders | Hairline between rows only |
| Use for | Technical detail, pricing terms |
Components
Cards and panels
Card
Surface colour, card radius, small shadow.
Card — outline
Transparent, hairline border, no shadow.
Panel
Tinted ground for grouping content.
Components
Media
The same source image in three aspect ratios. Swapping any image for a different shape leaves the layout intact.
Components
Form fields
Field styling also applies to comment forms and to any block-based form plugin you install.
Components
Disclosure rows
A disclosure row opens smoothly
Built on the Details block, so it works without JavaScript, is operable from the keyboard and prints expanded.
Second row, closed by default
The plus mark rotates into a minus as the row opens.
End of style guide