Switch with one setting

Five styles

Each style sets fonts, shapes, colours and component details. A client's brand colours sit on top.

page-header — copy these settings
- background_image: images/demo/lion.jpg
  divider_bottom: curve
  eyebrow: Switch with one setting
  heading: Five styles
  overlay: primary
  subheading: Each style sets fonts, shapes, colours and component details. A client's brand colours sit on top.
  type: page-header

How to switch

In a site’s data/brand.yaml, set style: to summit, coastal, heritage, studio or hearth. Add colors: and fonts: only if the client needs their own brand colours or fonts. Everything else comes from the style.

On this showcase, use the Style switcher at the bottom left to see every page in every style.

text — copy these settings
- body: |-
    In a site's `data/brand.yaml`, set `style:` to `summit`, `coastal`, `heritage`, `studio` or `hearth`. Add `colors:` and `fonts:` only if the client needs their own brand colours or fonts. Everything else comes from the style.
    
    On this showcase, use the **Style** switcher at the bottom left to see every page in every style.
  heading: How to switch
  type: text

Summit

Bold condensed caps, navy and gold, angled edges. Causes, books, trades, sports.

Coastal

Airy and rounded, pill buttons, teal and sand. Health, wellness, services, real estate.

Heritage

Serif and editorial, parchment, burgundy and gold. Law, churches, hospitality, finance.

Studio

Oversized grotesk, near-black and lime, outlines and grid lines. Agencies, tech, events.

Hearth

Warm and friendly, rounded, orange and teal, chunky buttons. Restaurants, family business, community.
cards — copy these settings
- background: muted
  columns: 5
  items:
  - icon: bolt
    text: Bold condensed caps, navy and gold, angled edges. Causes, books, trades, sports.
    title: Summit
  - icon: world
    text: Airy and rounded, pill buttons, teal and sand. Health, wellness, services, real estate.
    title: Coastal
  - icon: bookmark
    text: Serif and editorial, parchment, burgundy and gold. Law, churches, hospitality, finance.
    title: Heritage
  - icon: paint-bucket
    text: Oversized grotesk, near-black and lime, outlines and grid lines. Agencies, tech, events.
    title: Studio
  - icon: happy
    text: Warm and friendly, rounded, orange and teal, chunky buttons. Restaurants, family business, community.
    title: Hearth
  type: cards