Typography

Heading and body text styles, including semantic helpers (e.g. .h2) used to keep layouts flexible while staying consistent.

Typography values are documented using rem units, relative to the project’s root font size. The samples below describe the intended type scale and hierarchy. Responsive adjustments may apply where required, but proportions remain consistent.

Headings

h0 — Oversized title

hero or campaign headlines and high-impact moments. Used sparingly.

  • Font family: EB Garamond
  • Font size: 9rem
  • Font weight: 400
  • Line height: 1.1
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="h0">…</p>
  • <h1 class="h0">…</h1>
  • <h2 class="h0">…</h2>

h1 — Page title

The primary title of a page or major content section

  • Font family: EB Garamond
  • Font size: 4.2rem
  • Font weight: 400
  • Line height: 1.15
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="h1">…</p>
  • <h1 class="h1">…</h1>
  • <h2 class="h1">…</h2>

h2 — Section title

Section headings that group related content within a page.

  • Font family: EB Garamond
  • Font size: 3.6rem
  • Font weight: 400
  • Line height: 1.25
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="h2">…</p>
  • <h2 class="h2">…</h2>
  • <h3 class="h2">…</h3>

h3 — Object title

Card titles, component headings, and sub-sections within a larger section.

  • Font family: Source Sans 3
  • Font size: 2.4rem
  • Font weight: 400
  • Line height: 1.3
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="h3">…</p>
  • <h3 class="h3">…</h3>
  • <h4 class="h3">…</h4>

h4 — Micro title

Labels, small headings, metadata blocks, and UI-level titles where emphasis is needed without visual dominance.

  • Font family: Source Sans 3
  • Font size: 1.6rem
  • Font weight: 500
  • Line height: 1.1
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="h4">…</p>
  • <h4 class="h4">…</h4>
  • <span class="h4">…</span>

Paragraphs and lists

Large paragraph text with bold, italic and links

Introductory paragraphs, lead text, and short highlight statements.

  • Font family: Source Sans 3
  • Font size: 2.1rem
  • Font weight: 300
  • Line height: 1.3
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="large">…</p>
  • <div class="p large">…</div>
  • <span class="large">…</span>

Standard paragraph with bold, italic and links.

Default body copy across editorial content and UI components.

  • Font family: Source Sans 3
  • Font size: 1.8rem
  • Font weight: 300
  • Line height: 1.3
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p>…</p>
  • <div class="p">…</div>
  • <p class="p">…</p>

Small paragraph text with bold, italic and links

secondary notes, captions, helper text, and fine print.

  • Font family: Source Sans 3
  • Font size: 1.4rem
  • Font weight: 300
  • Line height: 1.5
  • Letter spacing: 0

To maintain semantic markup, visual sizing is applied via classes rather than relying on heading level alone.

  • <p class="small">…</p>
  • <span class="small">…</span>
  • <div class="small">…</div>

Colour

Brand palette, secondary tones and functional UI colours. Includes SCSS variable references and examples for text, backgrounds and borders.

Primary Brand Colours

The core brand palette — used most prominently across identity, layout and key brand moments.

Secondary Brand Colours

Supporting tones used for contrast, depth and subtle backgrounds without overpowering the primary palette.

Functional colours

These colours provide consistent visual feedback across the interface for success, errors, warnings, and informational messages. They follow Bootstrap’s standard colour system and are also used for WooCommerce notices.

Context states

Buttons

Button variants, sizing helpers and icon buttons. These examples reflect the project’s custom button system layered on top of Bootstrap.

Primary Button





Forms

Standard form controls, validation patterns and inverted form styling. Includes examples aligned to Bootstrap + WooCommerce conventions.

Example patterns showing standard, validated and inverted form designs.

Standard Form

Form with Input Validation


Inverted

Inverted (Validated)


Alerts & Notifications

Functional messaging (success/info/warning/error) using Bootstrap alert markup and WooCommerce notice patterns, styled to match the theme.

These alerts demonstrate how WooCommerce notices appear when styled through our Bootstrap-aligned system. Each example includes a plain text “semantic colour” line plus a real .alert block using the same markup WooCommerce outputs.

Success

This is plain success text.

Info

This is plain info text.

Warning

This is plain warning text.

Error

This is plain error text.

Icons

Bootstrap Icons reference used across the theme. Useful for checking sizing, alignment and icon pairing with buttons and links.

Full icon reference: https://icons.getbootstrap.com/

Cards

Core card patterns and layout modules (e.g. content tiles, previews, listings). Use this section to validate spacing, hover states and imagery.

(Cards section currently disabled while component system is being updated.)