Samla v1.0
Get started

Samla / Frontend framework and design system

A considered frontend foundation for building better websites, faster.

Release
1.0
Built with
HTML, CSS, a little JavaScript
Output
Static HTML, any stack
Written for
Developers, designers and coding agents

Samla provides reusable foundations, components, sections and patterns for high-quality marketing websites. Every new site starts from a system that has already been thought through.

Get started Explore components

Specimen

This page is built from the components it describes.

Open the Style Guide
TypeInstrument Sans / IBM Plex Mono
Regular 400 Medium 500 Mono 400
Page Title64/64Proportion
Section Heading40/44Hierarchy
Card Title24/30Alignment to the grid
Lead20/30Comfortable reading at every size.
Body16/26Body copy sits at a measure of 60 to 72 characters.
Small14/21Help text, metadata and supporting detail.
Caption12/17Figure captions, labels and tokens
Colour5 core tokens
Ink#121212
Muted#5C5B57
Line#D8D6CF
Stone#ECEAE4
Brand#C4331A
Ink on Paper 17.3:1Muted on Paper 6.3:1

Actions

Text link
hoverPrimary
focusPrimary
disabledPrimary

Form controls

We only use this to send release notes.

Enter a full address, including https://

Tags and status

  • Static
  • Stack-agnostic
  • Accessible
  • Selected
Stable In review Planned

Card

Image 4:3

Pattern

Pricing with three tiers

A comparison section built from the Plan card, Table and Button components.

Space4px base
space-14
space-28
space-312
space-416
space-524
space-632
space-748
space-864
space-996
space-10128

Sections use space-10 on desktop and space-9 on mobile.

Grid12 / 24 / 64
12 columns, 24px gutter, 64px margin at 1440. Labels hang in columns 1 to 3. Content starts at column 4.

Principles

Four ideas the whole system is built on.

  1. Designed, not decorated.

    Typography, spacing, grids and hierarchy carry the design. Visual quality comes from precise decisions, with nothing added to compensate for weak structure.

  2. Fast by default.

    Predominantly static HTML with minimal JavaScript. Every page is set up for strong Core Web Vitals and technically sound SEO from the first commit.

    • Static HTML
    • Minimal JS
    • Core Web Vitals
    • Structured SEO

  3. Composable.

    A coherent architecture in which each layer is assembled from the one beneath it, so a change to a token travels all the way to a template.

    Foundations → Primitives → Components → Sections → Patterns → Templates

  4. Built for humans and AI.

    Predictable conventions make Samla straightforward for developers and coding agents to understand, use and extend.

    <section class="section" data-surface="brand">
  <a class="button" data-variant="primary">
/* classes say what it is, attributes say how it varies */

Components

A small selection, shown in context.

All components
Fieldwork
  • Projects
  • Practice
  • Journal
Contact

Landscape architecture

Public spaces designed to be used, and to last.

A small studio working with councils and developers on parks, streets and squares.

View projectsAbout the studio

Trusted by

Navigation / Hero / Logo rail
Can I use Samla with my own brand?

Yes. Samla ships with a neutral palette. Replace the brand and surface tokens and every component follows, from buttons to full templates.

Does it need a JavaScript framework?

No. Pages render as static HTML. Interactive components add small, isolated scripts only where they are needed.

How does Samla work with coding agents?

Consistent naming, documented contracts and a strict layer hierarchy give agents a clear set of rules to follow, so generated pages stay on-system.

Which platforms are supported?

Any. The reference implementation is plain HTML, CSS and vanilla JavaScript. Astro, Statamic, WordPress or React implementations keep the same class names, variants and contracts.

Accordion / interactive
Card / article

How it works

Three steps from brief to a live site.

  1. 01Set your tokensBrand colour, type and surfaces in one file.
  2. 02Compose sectionsAssemble pages from documented patterns.
  3. 03Ship staticBuild to fast, accessible HTML.
Content section / steps, alternate surface

Code

Readable by people. Predictable for agents.

Read the conventions

Excerpts from this repository

Page

templates/home.html
<section class="hero" data-layout="text">
  <div class="hero__inner container">
    <p class="hero__eyebrow">Landscape architecture</p>
    <h1 class="hero__title text-display">Public spaces…</h1>
    <div class="hero__actions button-group">
      <a class="button" href="/projects">View projects</a>
      <a class="button" data-variant="secondary" href="/about">About</a>
    </div>
  </div>
</section>

<section class="section" data-surface="alternate">
  <!-- section-header, then a grid of features -->
</section>

<section class="section" data-surface="brand">
  <!-- cta: "Start a project" -->
</section>

Component

assets/css/primitives/button.css
/* data-variant: primary | secondary | text */
/* data-size:    default (48) | small (44)   */

.button {
  min-height: var(--control-height);
  padding: 0 1.375rem;
  border-radius: var(--radius-1);
  background-color: var(--action-bg);
  color: var(--action-text);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.button[data-variant="secondary"] {
  background-color: transparent;
  border-color: var(--action-border);
}

Tokens

assets/css/foundations/tokens.css
:root {
  /* Colour */
  --color-paper: #F7F6F2;
  --color-ink: #121212;
  --color-muted: #5C5B57;
  --color-brand: #C4331A;

  /* Type */
  --font-sans: 'Instrument Sans', sans-serif;
  --text-display: clamp(2.75rem, 1.2rem + 5vw, 5.75rem);

  /* Space */
  --space-5: 1.5rem;
  --space-10: 8rem;
}

[data-surface="dark"] {
  --surface-bg: var(--color-ink);
  --surface-text: var(--color-on-dark);
  --action-bg: var(--color-paper);
}

Agent rules

AGENTS.md
# Building with Samla

## Before anything else
- Check whether a primitive, component, section, pattern
  or variant already solves the requirement.

## Composition
- Build pages from sections. Avoid one-off layout CSS.
- Use tokens for every colour, size and font.
- Every section accepts `data-surface`.

## Structure
- Choose heading levels from the outline. One `h1`.
- Choose size from the type scale: `text-section-heading`.
- Interactive components work without JavaScript first.

Documented contracts. Every component lists its content, variants and defaults.

Tokens only. Components never reference raw colours, sizes or fonts.

Plain-language rules. AGENTS.md explains how the system fits together.

Surfaces

One set of components. Four surfaces.

Each surface is a small set of tokens. The markup inside all four panels below is identical.

data-surface="default" New

Plan your next launch with confidence.

Sections, patterns and templates ready to compose.

Get startedLearn more
data-surface="alternate" New

Plan your next launch with confidence.

Sections, patterns and templates ready to compose.

Get startedLearn more
data-surface="brand" New

Plan your next launch with confidence.

Sections, patterns and templates ready to compose.

Get startedLearn more
data-surface="dark" New

Plan your next launch with confidence.

Sections, patterns and templates ready to compose.

Get startedLearn more
bg paper / text ink / muted 6.3:1 bg stone / text ink / muted 5.7:1 bg brand / text white / 5.5:1 bg ink / text on-dark / muted 6.7:1

Architecture

Six layers, each composed from the one below.

  1. Foundations

    Tokens for colour, type, space, radius and motion.

  2. Primitives

    Layout, buttons, links, forms, media, tags.

  3. Components

    Cards, quotes, navigation, dialogs, carousels.

  4. Sections

    Complete page bands: heroes, splits, CTAs, logo rails.

  5. Patterns

    Domain arrangements: listings, profiles, articles.

  6. Templates

    Full-page reference compositions.

Documentation

From reading about Samla to building with it.

The documentation covers every layer, from tokens to templates, with guidance on accessibility, SEO and performance throughout.

Get started View on GitHub