Style guide / Code /

Utilities

Utility classes are small, composable helpers that apply one specific behaviour. In this project they mostly live in /src/styles/global.css.

This page covers implementation details. For typography guidance, see Typography. For the underlying token system and where the base rules live, see Tokens and CSS.

Typography scale

These classes adjust the local type scale by setting --type-scale. They work anywhere the base styles use var(--type-scale, 1) (for example headings and paragraphs).

.large

<h2 class="large">Bigger heading</h2>
<p class="large">Bigger body copy</p>

.larger

<h2 class="larger">Even bigger heading</h2>
<p class="larger">Even bigger body copy</p>

Image and media helpers

.breakout

Makes an element extend beyond the content column on desktop, while reverting to normal width on smaller screens. This is commonly used for larger images and device screenshots.

<img class="breakout" src="/images/example.jpg" alt="Example" />

img.float-left and img.float-right

Float an image and let text wrap around it on larger screens. Intended for editorial-style content.

<img class="float-left" src="/images/example.jpg" alt="Example" />

<p>Text will wrap around the floated image on desktop.</p>

Accessibility

.sr-only

Visually hides content while keeping it available to screen readers.

<span class="sr-only">Descriptive label for screen readers</span>

Demo helpers

.demo-area

Used by documentation pages to show live examples with a subtle background and padding.

<div class="demo-area">
  <p>Example content...</p>
</div>

.demo-area.dark

<div class="demo-area dark">
  <p>Example content on a dark background...</p>
</div>

When to add a utility

  • Use a utility when a style is truly generic and appears across multiple pages/components.
  • Avoid utilities for one-off component styling (prefer component-scoped styles).
  • Name utilities for behaviour (.sr-only, .breakout) rather than specific values.