Style Guide Basics

Basics

Breakpoints

Our responsive breakpoints help you target mobile, tablet, and desktop layouts.

Device	Variable	Value	Example Use
📱 Mobile	`--bp-sm`	480px	`@media (min-width: var(--bp-sm))`
📱 Tablet	`--bp-md`	768px	`@media (min-width: var(--bp-md))`
🖥️ Desktop	`--bp-lg`	1024px	`@media (min-width: var(--bp-lg))`
📋 Nav	`--bp-nav`	700px	`@media (max-width: var(--bp-nav))`
📊 Table	`--bp-table`	600px	`@media (max-width: var(--bp-table))`

Usage Example:

@media (min-width: var(--bp-md)) {
  .card {
    display: flex;
    gap: 1.5rem;
  }
}

Colour palette

Our brand palette with CSS variables, usage notes, and minimum contrast ratios.

Primary Brand

These colours are central to our brand identity.

Usage	CSS Variable	Hex
Primary colour, used for text and main elements of diagrams requiring colour	`var(--color-primary)`	`#204312`
Secondary colour, for accents and links	`var(--color-secondary)`	`#BDC7B9`
Tertiary colour, for supporting accents and diagrams	`var(--color-tertiary)`	`#607956`
Accent colour, used for highlights	`var(--color-accent)`	`#F4A261`
Background colour, used for page backgrounds	`var(--color-background)`	`#FBFBFB`

Link colours

Usage	CSS Variable	Hex
Link colour (default, unvisited)	`var(--color-link)`	`#175076`
Link hover colour	`var(--color-link-hover)`	`#1565a5`
Link clicked/active colour	`var(--color-link-clicked)`	`#4b3b6b`

Neutral Greys (for tables, nav etc)

Usage	CSS Variable	Hex
Grey 100	`var(--color-grey-100)`	`#f9f9f9`
Grey 500	`var(--color-grey-500)`	`#666666`
Grey 900	`var(--color-grey-900)`	`#222222`
Border colour for tables and other UI elements	`var(--color-grey-border)`	`#ddd`
Light grey for subtle dividers and backgrounds	`var(--color-grey-light)`	`#eee`
Colour for separators, like in breadcrumbs	`var(--color-grey-separator)`	`#aaa`

Accessibility Notes

Primary on Background (#204312 on #FBFBFB): Contrast ratio of 12.4:1 — exceeds both WCAG AA and AAA for all text sizes.
Secondary on Background (#BDC7B9 on #FBFBFB): Contrast ratio of 4.54:1 — meets WCAG AA for normal text but not AAA. Suitable for most UI text and accents.
Tertiary on Background (#607956 on #FBFBFB): Contrast ratio of 5.26:1 — meets WCAG AA for normal text and AAA for large text. Good for headings or secondary elements.
Accent on Background (#F4A261 on #FBFBFB): Contrast ratio of 2.61:1 — fails WCAG AA. Only use for visual accents or large display text.
Grey 900 on Grey 100 (#222222 on #f9f9f9): Contrast ratio of 17.4:1 — excellent. Exceeds AAA for all text.
Grey 500 on Grey 100 (#666666 on #f9f9f9): Contrast ratio of 7.5:1 — exceeds AA and AAA. Suitable for body text and icons.
Grey 100 on Grey 900 (#f9f9f9 on #222222): Contrast ratio of 17.4:1 — excellent. Use freely on dark backgrounds.
Grey 100 on Grey 500 (#f9f9f9 on #666666): Contrast ratio of 2.7:1 — fails AA for body text. Avoid for long passages or critical information.

Images & Video

This section covers best practices and utility classes for handling images and embedding responsive videos.

Responsive Images

Use the .responsive-img class to ensure images scale to fit their container and remain sharp on all devices.

Example

Descriptive alt text

Usage

<img src="/assets/images/example.jpg" alt="Descriptive alt text" class="responsive-img">

Always provide descriptive alt text for accessibility.
.responsive-img sets max-width: 100%; height: auto; for flexible sizing.

Image Grid

Use the .image-grid class to display multiple images in a responsive grid layout.

Example

Usage

<div class="image-grid">
  <img src="/assets/images/example1.jpg" alt="Alt 1">
  <img src="/assets/images/example2.jpg" alt="Alt 2">
  <img src="/assets/images/example3.jpg" alt="Alt 3">
</div>

Images will wrap and resize automatically.
Use for galleries or sets of related images.
Individual images inside .image-grid are capped at max-width: 200px to maintain layout consistency.

Responsive Video Embeds

Wrap embedded videos (e.g., YouTube, Vimeo) in a .video-wrapper to maintain aspect ratio and responsiveness.

Example

Usage

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Example video" allowfullscreen></iframe>
</div>

.video-wrapper keeps the video at a 16:9 aspect ratio and scales to fit the container.
Always set a descriptive title on the <iframe> for accessibility.

Accessibility Notes

Use meaningful alt text for all images.
Use descriptive title attributes for embedded videos.
Ensure images and videos have sufficient contrast and are not essential for understanding content unless described elsewhere.

Media Card Aspect Ratio

The .media-card class maintains a consistent aspect ratio for image blocks (typically 3:2). Useful for grid-aligned image previews or media components.

Example

<figure class="media-card">
  <img src="/assets/images/example.jpg" alt="Alt text">
</figure>

CSS

.media-card {
  aspect-ratio: 3 / 2;
}

Helps align content in photo grids or cards visually.

This section covers two key navigation patterns: breadcrumbs (for showing page hierarchy) and content navigation (for previous/next links within a section).

Breadcrumbs

Breadcrumbs help users understand their location within the site structure and provide quick navigation to parent pages.

Example

Usage

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <a href="/">Home</a>
  <span class="breadcrumb-separator">/</span>
  <a href="/style-guide/">Style Guide</a>
  <span class="breadcrumb-separator">/</span>
  <span aria-current="page">Navigation</span>
</nav>

Use <span aria-current="page"> for the current page.
Use .breadcrumb-separator for visual separators (e.g., / or >).

Content navigation helps users move between related pages, such as sections of a guide.

Example

Usage

<nav class="content_navi">
  <a class="content_navi-item nav_prev" href="/style-guide/basics/wrappers/">
    <span class="content_navi-arrow" aria-hidden="true">←</span>
    <span class="content_navi-label">Previous: Wrappers</span>
  </a>
  <a class="content_navi-item nav_next" href="/style-guide/basics/typography/">
    <span class="content_navi-label">Next: Typography</span>
    <span class="content_navi-arrow" aria-hidden="true">→</span>
  </a>
</nav>

Use .nav_prev and .nav_next for previous/next links.
Use .content_navi-label for the link text.
Use .content_navi-arrow for directional arrows.

–

This optional collapsible nav floats on scroll and can be reused on any content page.

Example

```html

In this section

Section 1
Section 2

Accessibility Notes

Use aria-label="Breadcrumb" for breadcrumbs navigation.
Use clear, descriptive link text for previous/next navigation.
Ensure keyboard and screen reader users can easily navigate.

Customisation

Change separator character in .breadcrumb-separator as needed.
Style .content_navi for horizontal or vertical layouts.

Typography

A guide to Sustainamo’s core type styles, font stacks, and usage.

Font Families

Label	Sample	Class/Selector	Font Stack	Usage
Body Font	The quick brown fox	`body, p, ul, ol`	`'Poppins', 'Segoe UI', Roboto, sans-serif`	Primary text for content and lists
Headline Font	The quick brown fox	`h1, h2, h3, h4`	`'Montserrat', 'Segoe UI', Roboto, sans-serif`	Used for section headings and emphasis
Brand Font	Sustainamo	`.sustainamo-script`	`'alkaline', cursive`	Logo, brand accent, or decorative emphasis

Heading Styles

Sample	Selector	Font Size	Weight	Color
Heading 1	`h1`	2rem	600	#204312
Heading 2	`h2`	1.5rem	600	#204312
Heading 3	`h3`	1.2rem	600	#204312
Heading 4	`h4`	1rem	600	#204312

Body Text & Lists

Sample	Selector	Line Height	Color
The quick brown fox jumps over the lazy dog.	`p, ul, ol`	1.6	#222

Links

Links use the brand blue for clarity and accessibility. Visited links use a slightly different shade for distinction.

This is a link | This is a visited link

a {
  color: var(--color-link); /* #175076 */
  text-decoration: underline;
}
a:visited {
  color: var(--color-link-visited); /* #1565a5 */
}
a:hover,
a:focus {
  text-decoration: underline;
  opacity: 0.85;
}

Core Wrappers & Content Width

The .wrapper class defines the main content container. It keeps content centered and prevents it from becoming too wide on large screens, while adding horizontal padding on smaller devices.

Example

This is a .wrapper container. Content stays centered and never exceeds the max width.

Usage

<div class="wrapper">
  <!-- page content here -->
</div>

CSS

.wrapper {
  max-width: 1000px;
  margin: 0 auto;       /* center horizontally */
  padding: 0 1.5rem;    /* gutter space on mobile */
}

Key Points

Max width (1000px): Prevents content from stretching too wide for readability.
Centered: Uses margin: 0 auto to center on the page.
Responsive padding: Adds horizontal space on small screens.
Reusable: Use .wrapper on any block that should be centered and constrained.

Accessibility

Ensures content is not too wide, improving readability for all users.

Style Guide Basics

Basics

Breakpoints

Colour palette

Primary Brand

Link colours

Neutral Greys (for tables, nav etc)

Accessibility Notes

Images & Video

Responsive Images

Example

Usage

Image Grid

Example

Usage

Responsive Video Embeds

Example

Usage

Accessibility Notes

Media Card Aspect Ratio

Example

CSS

Navigation

Breadcrumbs

Example

Usage

Content Navigation (Prev/Next)

Example

Usage

Section Navigation (Sticky Summary Nav)

Example

Accessibility Notes

Customisation

Typography

Font Families

Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Body Text & Lists

Links

Core Wrappers & Content Width

Example

Usage

CSS

Key Points

Accessibility