Style Guide

Colour

Raw tokens define the palette. Components never use them directly: they read semantic tokens, which each surface remaps. Contrast is measured against each token's usual background.

Surfaces

Put data-surface on any section or element. Descendants inherit background, text, muted text, borders, actions and focus. The markup in each panel below is identical.

Typography

Eight visual roles, two weights, two families. Classes are text-{role}, tokens are --text-{role}. Sizes are fluid between the mobile and desktop values with clamp().

Spacing

A 4px base scale for elements and components, plus three fluid roles for sections, headings and panels.

Grid and breakpoints

Section labels hang in columns 1 to 3; headings and copy start at column 4. On mobile, labels stack above content. The live grid below uses the current viewport's column count.

Shape, line and ratio

Motion, focus and layers

Icons

Inline SVG, 1.5px stroke in currentColor, on a 16px grid. Decorative icons carry aria-hidden="true"; an icon-only control needs an aria-label. Sizes: data-size 12, 14, 16, 20, 24.

Layout: container, grid, stack, cluster

container

Centres content and applies gutters. data-width: narrow, standard, wide, full.

grid

The 4 / 8 / 12 page grid. data-columns 2, 3, 4, 6 for equal columns; data-span and data-start on children for asymmetric layouts; data-divided for hairline cells.

stack

Vertical rhythm. data-gap 1 to 8 on the space scale.

cluster

Wrapping horizontal group. data-gap, data-justify.

Button and button group

Variants

data-variant: primary (default), secondary, text. data-size: default (48), small (44). data-width="full". data-icon-only.

Content

Label, optional trailing icon. Use <a> to navigate, <button> to act.

Accessibility

Never below 44px. Icon-only buttons need aria-label. Disabled links use aria-disabled="true".

Links

Inline

Any <a> in text. Always underlined: 1px at rest, 2px on hover.

.link

A standalone action. data-variant: default, arrow (arrow nudges 4px), external.

Tags, badges, avatars and dividers

tag

Content labels and filters. <span>, <a> or <button>. Selected via data-selected, aria-pressed or aria-current.

badge

Status: data-status stable, review, error, planned, neutral. Text always accompanies the dot. data-variant="pill" for versions and counts.

avatar

Image or initials. data-size: small, medium, large. Group with avatar-group.

• Static
• Linked tag
• Filter
• Selected

StableIn reviewDeprecatedPlannedv1.0

RH+4

• Static
• Linked tag
• Filter
• Selected

StableIn reviewDeprecatedPlannedv1.0

RH

Breadcrumb and pagination

Accessibility

Both are <nav> landmarks with an aria-label. The current item carries aria-current="page". On mobile, pagination shows only the current page between previous and next.

Form controls

field

Label above, control, help below, error below help. field__optional marks optional fields.

Controls

input (text, email, tel, number, url, search, password, date, textarea), select, check (checkbox, radio), switch, file, input-group (input + button).

Validation

form[data-validate]: samla.js shows inline errors with an icon, sets aria-invalid and aria-describedby, and adds a focusable error summary when there is more than one problem.

Accessibility

Every control has a visible <label>. Groups use <fieldset> and <legend>. 16px text prevents zoom on iOS. Errors never rely on colour alone.

Accordion and disclosure

Built on

Native <details> and <summary>. Works without JavaScript; a shared name makes the group exclusive.

Variants

data-size: default, small.

Tabs

Behaviour

Without JavaScript every panel shows with its own heading. samla.js adds the tablist, roving tabindex, arrow keys, Home and End.

Variants

data-orientation: horizontal, vertical. data-variant: line, contained.

Image and video

Variants

data-ratio: square, portrait, standard, photo, video, cinema. data-fit: cover, contain.

Content

Image with width, height and alt; optional caption. Video: a poster image and .media__play[data-src], which loads the player only on request.

Performance

Always set width and height. loading="lazy" below the fold, fetchpriority="high" on the largest image above it.

Placeholder 16:9

Rich text and tables

prose

Wrap CMS rich text in .prose. It styles bare elements, so editors need no classes. Measure is capped at 68ch.

table

.table inside .table-scroll. Use <caption>, scope on headers and data-align="end" for numbers.

Landscapes can store carbon, cool cities and support wildlife, but only if they are designed with care.

Heading level two

Running text with an inline link, strong emphasis, emphasis, inline code and Ctrl + P.

Heading level three

• An unordered list item
• A second item, long enough to wrap onto another line at narrow widths so the hanging indent is visible

1. An ordered step
2. Another step

A tree planted in the right soil will outlive every other decision on the drawing.

<div class="prose">…</div>

Embodied carbon, kgCO₂e per m²

Surface	2020	2025
Concrete paving	82	61
Natural stone	64	48

---

Small print after a rule.

Section header

Content

label, title, intro?, action?

Variants

data-align: hang (default, Swiss hanging label), stack, center. data-rule: strong (default), none.

Guidance

Opens almost every section. The heading level follows the outline; the size is a text class.

Card

Replaces

Media card, article card, case study card, profile card, service card, location card. One component, different content.

Content

media?, meta?, title, summary?, tags?, person?, action?, url?

Variants

data-layout: stacked, horizontal, overlay. data-variant: plain, panel, bordered. data-size: default, large.

Accessibility

.card__link on the title stretches over the card: one link, one accessible name. Keep other links out of linked cards; the action text is aria-hidden.

• 

  Case studyHalden, 2025

  Millbrook Riverside Park

  Eleven hectares of railway sidings returned to the river.

  • Parks
  • Ecology

  plain, with tags

• Article / 6 min read

  Designing parks for hotter summers

  Shade, water and soil: what a decade of heatwaves has taught us.

  Ruth Hallam

  Read article

  panel, no media, with person and action

• 

  02

  Streets and public realm

  Street redesigns that make walking the obvious choice.

  Explore

  bordered, service

• 

  Mairi Campbell

  Partner, Glasgow

  profile: portrait media, meta after title

• 

  Featured

  Kelvin Meadows

  A community meadow made permanent.

  overlay: text over media on a scrim

• 

  On dark

  Oakmere Fields

  Cards inherit the surface.

Essay12 June 2026

Designing parks for hotter summers

Shade, water and soil: what a decade of heatwaves has taught us about the parks we design.

data-layout="horizontal" data-size="large": featured items

Feature

Replaces

Feature item, feature card, step, value, principle, service summary.

Content

index? or icon?, title, text, link?

Variants

data-variant: rule, plain, panel. data-size: default, large, xlarge. data-layout: stacked, row. data-accent.

1. 01

   Rule (default)

   An ink hairline above, mono index, small text.

2. Large, with icon

   Card Title and body text.

3. 03

   Panel

   Filled with the surface's subtle colour.

4. 04

   Accent

   A brand rule marks the current item.

Quote

Replaces

Blockquote, pull quote, testimonial.

Content

text, name?, role?, avatar?

Variants

data-size: default, large, display. data-variant: plain, rule, panel.

Stat

Content

value, label, text?. Wrap in <dl class="stat-list">: the label is the <dt>, the value its <dd>, shown first visually.

Variants

data-size: default, small. stat-list data-columns: 2, 3, 4.

Hectares of public space

146

Designed since 2009.

Trees planted

18,400

94% five-year survival.

Residents engaged

32k

Awards

11

Logo item and logo list

Variants

data-layout: rail (one row, scrolls on small screens), grid (divided).

Accessibility

Alt text is the organisation's name. Logos are muted until hover.

Meta list, link list, social links

meta-list

Key and value pairs: facts, contact details, job details. data-layout: inline, stacked, columns.

link-list

Rows of links with an arrow: documentation, jobs, events. Optional meta column. data-size: default, small.

social-links

44px icon links with visually hidden names.

Notice

Variants

data-status: info, positive, warning, error. Always an icon plus text.

Accessibility

role="status" for polite updates, role="alert" for errors after an action.

Site header and navigation

Variants

data-logo: left, center. data-behaviour: static, sticky, overlay. data-mobile: dropdown, drawer, fullscreen. Menus: data-variant dropdown or mega.

Behaviour

Without JavaScript the navigation is a wrapped list and menus open on hover or focus. samla.js adds the mobile toggle, click-to-open menus, Escape, outside click and a focus trap for drawer and full-screen panels.

Accessibility

<nav aria-label="Primary">; toggles use aria-expanded and aria-controls; the current page has aria-current="page".

Mobile variants are live in the responsive previews: the Samla site uses dropdown, Fieldwork templates use drawer, the landing page uses fullscreen. The sticky variant is the header at the top of this page.

Site footer

Variants

data-layout: simple (one row), columns (intro, link groups, newsletter, bottom bar). Any surface.

Dropdown, dialog, drawer and tooltip

dropdown

Button plus a menu of links or actions. Without JavaScript the options render inline. Escape and outside click close it.

dialog

Native <dialog>: focus is trapped and restored by the browser. Open with data-dialog-open="id"; close with data-dialog-close, Escape or a backdrop click. data-variant: modal, drawer. data-size: default, large.

tooltip

Supplementary text on hover and focus, dismissed with Escape. Never the only place information lives.

Cookie banner

Behaviour

Non-modal, fixed to the bottom. Reject is as prominent as accept. The choice is stored and dispatched as a samla:consent event. Shown here in flow with data-static.

Carousel

Behaviour

A scroll-snap track that works with touch, trackpad and keyboard without JavaScript. samla.js adds previous and next buttons and a live position label. No autoplay.

Variants

data-per-view: 1, 2, 3 (default), auto.

Code block

Content

file name?, code, line numbers (optional, data-line-numbers with one .line per line). Syntax colours: tok-keyword, tok-property, tok-string, tok-comment.

Behaviour

A copy button with data-copy copies the block's text.

/* Rebrand a project: override raw tokens only */
@layer project {
  :root {
    --color-brand: #2B45C9;
    --font-sans: 'Inter', system-ui, sans-serif;
  }
}

Hero

Content

eyebrow?, title, lead?, actions?, aside facts?, media?

Variants

data-layout: text, split, media, centered. data-align: left, center. data-width: narrow, standard, wide. data-surface: default, alternate, brand, dark, image.

Media + content

Variants

data-media: start, end. data-align: center, start.

The studio

Designers, ecologists and engineers at one table.

Media in columns 1 to 6, content from column 8.

How we work

data-media="end"

Chartership, paid for and planned in.

• LI fees paid
• 10 study days

Split and FAQ

Variants

data-ratio: 4-8 (default), 3-9, 5-7, 6-6. data-sticky keeps the aside in view.

CTA and newsletter

Variants

data-layout: stacked (default), inline, centered. Actions are a button group or a subscribe form. Place inside any surface.

Logo rail

Gallery

Variants

data-layout: grid (default), mosaic (first item large).

Page header

Replaces

Article header, case study header, service header, job and event header, index page header.

Content

breadcrumb?, label?, title, lead?, meta facts?, actions?, media?

Variants

data-layout: stacked (default), split, centered. Any surface.

Listing

Used for

Case studies, articles, services, team, events and careers indexes.

Parts

toolbar (filters, count, sort), results (card grid or link-list rows), pagination.

Filtering

Link filters (server-rendered, shareable) by default. For client-side filtering use buttons with data-filter inside [data-filter-root] and data-tags on results.

Article layout

Used for

Articles, case study narratives, job descriptions, legal pages. Sticky aside for author, contents and sharing; prose body from column 4.

Careers, events, locations and results

Compositions of existing parts. No new CSS.

Careers index: link-list with meta

• Senior Landscape ArchitectGlasgow, full time
• EcologistGlasgow, four days

Events index: link-list with dates

• Millbrook one year on4 October, Halden
• Open studio: Glasgow12 November

Location: bordered card + meta-list

Bristol

Address

22 Feeder Road, Bristol BS2 0SB

Telephone

0117 946 0000

Case study results: stat-list + quote

Visits in year one

410k

Net gain

38%

The park works because the people who use it helped design it.

• HomepageHero, logo rail, card grid, feature rows, stats, quote, CTA
• Standard content pagePage header, article layout, prose, table
• Landing pageOverlay header, media hero, carousel, FAQ, newsletter
• AboutSplit, values, stats, team, gallery
• Services indexBordered cards, process, logo grid
• Service detailSplit page header, sticky split, carousel, FAQ
• Case studies indexListing with client-side filter, pagination
• Case study detailFacts, narrative, video, gallery, results
• Articles indexFeatured card, link filters, sort dropdown, events
• Article detailAuthor, contents, prose, related
• ContactValidated form, details, locations
• TeamTabs by studio, careers, dialog
• PersonProfile, projects, writing
• 404Narrow hero, search, popular links