A dark-mode agency system

Your work is better than your website.

Nine pages, one system and zero cleanup, in a single file you edit rather than rebuild.

Buy Umbra for $79 See the pages

One-time payment, no subscription. Figma file included. $189 covers every site you will ever build with it.

From one book to nine pages.

One volume

Everything a studio site needs, bound in one book: a grid, a type scale, a palette and one easing curve.

Opened

Open it and the system lifts off the page. Buttons, fields, navigation and pricing, every state already drawn.

Assembled

Each part flies to the page it belongs on, so nothing on the site is designed twice.

Nine finished pages

Not one page duplicated nine times. Nine layouts, each drawn for the job it actually has to do.

An argument

Everyone bought the same taste.

Open forty independent agency sites in a row and you start to see one site.

The centred hero

One sentence, two buttons, dead centre. Forty times out of forty.

Three feature cards

Thin outlined icons, equal widths, and not one decision about hierarchy.

The colour wash

A violet haze near the top, doing no work at all.

Forty sites, one layout

Ten studios, ten price points, and a client who cannot tell them apart until the invoice arrives.

Nine pages

What is in the file.

Nine pages, drawn as one system. Five of them run live below, each a finished layout with real copy in it, so the first thing you do after buying is edit, not build.

Halden RowWorkServicesAboutContact
Four people,
one room.
Founded 2019Glasgow

About

Team, method, and the two paragraphs clients actually read.

Unlimited licenceOn

Pricing

Two tiers and a plain switch between them, for studios that publish their numbers.

Halden RowWorkServicesAboutContact
Journal
March 2025What we learned charging for discovery
January 2025A design system is a maintenance contract
November 2024Against the redesign
September 2024Estimating work you have never done

Journal

An article layout with a real reading measure and pull quotes.

Contact

A short form that ends on the one button on the site worth pressing.

One bearing

Nine pages, one grid, one type scale, one easing curve. Everything points the same way.

404

The page most templates forget, drawn as a dropped link quietly coming back.

What it ships as

One file, four ways out.

The download is plain HTML with custom properties, the Figma file it was drawn in, and working Astro and Next ports. Nothing here is generated, and nothing needs a build step to open.

  • Figma
  • HTML
  • CSS
  • Next.js
  • React
  • Astro
  • Light mode
  • No build step

Point at a tile to nudge it, or pick one up and drag it out of the comb.Tap a tile to nudge it.

Every one of them is the same nine pages, drawn once.

Where it goes

It fits the stack you already have.

It opens in a browser, edits in whatever you write code in, versions in Git as plain text, and deploys anywhere that serves static files.

One system.
Everywhere you work.

Project
  • assets
  • people
index.html
<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Halden Row</title>  <link rel="stylesheet" href="assets/umbra-site.css"></head><body>  <h1 class="hero">We build the thing, not the deck.</h1></body></html>
Halden RowWorkServicesContact

We build the thing, not the deck.

ProductionLive
  • index.html12.4 kB
  • pages.html9.8 kB
  • assets/umbra-site.css38.1 kB
  • assets/umbra-site.js11.6 kB
  • people/6 images
halden-row.examplePublished in 1.4s
Eight component families
Every part, live.
The parts the nine pages are made from, designed as one system: one set of tokens, every state drawn, and the same thing in the drawing as in the code.
Change a token and every part follows
Radius, space and surface are values at the top of one file. Move them and the parts re-form with them, with nothing to rebuild.
  
One source, every part
Every family draws on the same tokens, so a button, a field and a pricing table stay related on every page. Hover the map to look closer.
Every state, already drawn
Hover, focus, pressed, filled, error and disabled are designed rather than left to the browser, so a part behaves the same on every page.
Eight families, one system
Buttons, fields, navigation, cards, tables, accordions, marquee and pricing, all on one grid, one type scale and one set of tokens.
Six values, ten steps
The system, on the table.
Six values, one grotesque, one spacing scale, one easing curve. If you have opened a design system before, this is the part that tells you whether one was actually made.
Colour — six values, a rule for each, and strokes drawn as white at 9%
      
Ink
The page, and true black rather than a dark grey. Everything else is a surface lifted off it.
Against Ink
1.0 : 1
Against White
21.0 : 1
Type — one grotesque, six sizes, set at what you will actually ship
Display 1
120 / 0.95 / −0.042em / 600
Carved once
Display 2
64 / 1.0 / −0.042em / 600
Nine finished pages
Display 3
40 / 1.06 / −0.035em / 600
A grid and a type scale
Body large
24 / 1.5
Used once per section, at most
Body
17 / 1.6 / 68ch
The measure is capped so paragraphs stay readable at any width
Small
13 / 1.5
Captions, fine print, field labels, licence notes
Spacing — ten steps, and nothing between them
Sections are 160 on desktop and 88 on mobile. Everything else is a step on this staircase. The dashed ones are the values people reach for and this scale leaves out: there is no 30, no 45, and no 100.
Grid, motion, depth
Three systems you are not writing.
The layout, the motion and the WebGL sequence on this page are authored, not bolted on. They are the slowest parts of a build to get right, and they are the reason this is a file rather than a stack of screenshots.
Click a volume to open it and read what is inside.Tap a volume to open it and read what is inside.
Vol 01Layout
Twelve column
layout grid
Volume 1
The grid
Twelve columns, one gutter, one type scale. Every section is measured against the same lines, so a block you move still lands where the last one did.
Vol 02Motion
Cinematic GSAP
Lenis motion
Volume 2
The motion
GSAP and Lenis on one clock. One easing curve and one duration scale, with a reduced-motion path that was written first rather than patched on at the end.
Vol 03Depth
WebGL plate
sequence
Volume 3
The depth
A WebGL sequence that hands back to the DOM. A book opens under a lamp and nine pages, measured to the pixel, land on the real markup that was underneath them the whole time.
Seventy hours
The arithmetic.
Designing a nine-page system from nothing is about forty hours of design and thirty of build, and that assumes you do not restart it twice, which you will. Put your own rate in and look at the number.
$ 
$6,650
to draw and build it yourself
Seventy hours at $95. Umbra is $79, which is fifty minutes of your time.
Named, with numbers
Three studios who bought it.
Founders who put Umbra live, in their own words, and the number that moved once they had.
Callum Reid
Founder, Halden Row
Glasgow
“We shipped it over a weekend and raised our project minimum from twelve to twenty-five thousand the same month. Nobody pushed back.”
Daniel Osei
Partner, Corvid & Sons
Melbourne
“Our proposal-to-close rate went from about one in five to one in three. Same deck, same people. The only thing that changed was where the deck was linked from.”
Ilse Brandt
Founder, Northsight
Utrecht
“I had been quoted eleven thousand for a site like this. It took two evenings, and the case study template is better than the one I was quoted for.”
Our licences
Two licences.
The files are identical. The only difference is how many live sites you are allowed to put them on. Pull a tab to switch between them.
 
Single
$79 One siteOne-time
One live site. Your studio's, or one client's. Yours to keep, with updates for the life of this version.
Buy single licence
  • Nine pages, light and dark
  • Figma file with tokens as variables
  • Commercial use on one domain
  • Email support from the person who made it
 
Unlimited
$189 Every siteOne-time
Every site you build with it, for as long as you build them. Client work included. Reselling the template itself is not.
Buy unlimited licence
  • Everything in the single licence
  • Unlimited domains, yours and clients'
  • Ports for Astro and Next in the download
  • Email support from the person who made it
Both are one-time payments. There is no subscription, no seat count, and nothing that stops working if you stop paying, because there is nothing to stop paying.
Six questions
Before you buy.
The six things people ask before they buy, filed where you can reach them. Pull a tab to read one.
What exactly does the single licence let me do?
Put it on one live domain, and that domain can be a client's. Client work on the single licence is fine as long as it stays one site. If you already know you will use it twice, the unlimited licence costs less than buying twice.
Is the Figma file included?
Yes, in both licences, and it is the file the site was drawn in rather than a redraw made afterwards. Colours and type are Figma variables mapped one to one onto the CSS custom properties, and the components are components, with their states as variants.
Will it move to React, Astro or Webflow?
The markup is plain HTML with no framework assumptions and the CSS is custom properties, so porting is mechanical rather than interpretive. Working Astro and Next ports are in the download. It is not a Webflow template and it will not import into Webflow cleanly, so do not buy it for that.
What happens when you update it?
Fixes and new components for this version are free for as long as the version exists, and arrive as a download link by email. If there is ever a version two it will be a paid upgrade at half price, and it will be a genuinely different system rather than this one with the spacing changed.
Can I get a refund?
Within fourteen days, without explaining yourself, even though you have already downloaded it. The one thing to know is that if you have shipped a client site on it, take the unlimited licence rather than the refund, because a refund cancels the licence that site is running under.
What support is there?
Email, answered by the person who made it, usually inside a working day. It covers the template — the files, the ports, the Figma. It does not formally cover your build, though in practice that line has never once been the end of a conversation.
Umbra
One book, nine pages, and next week back.
Buy Umbra for $79   See the pages