01 ◆
Development
Hairline border, 0.375rem radius, border goes gold on hover. Nothing moves.
See what we can buildBranding
Colour
The palette, the logo and the typefaces live in the brand guidelines. What follows is how they are applied in the interface.
Ink scale, on paper
- ink
- Headings, card titles, strong text.
- ink/65
- Body copy.
- ink/55
- Card and supporting text.
- ink/45
- Metadata, dates, counts.
- ink/12
- Chip borders.
- ink/10
- Hairlines. The main structural device.
- ink/[0.02]
- Tinted section, quiet surface.
White scale, on forest
- white
- Headings on forest.
- white/60
- Body copy on forest.
- white/45
- Metadata on forest.
- white/15
- Hairlines on forest.
How gold is used
On paper it marks small things: index numerals, the rule beside a label, an icon on hover, a card border on hover. On forest it becomes the primary button and the label colour. Why it stays that scarce is covered in the guidelines.
Gold on forest
The one place gold fills a shape.
Surfaces
Four surfaces, in order of how often they appear. Both inverted surfaces carry the same wash: low-alpha radials, off-centre, sized 100% 60rem so a short header shows the top slice of the gradient its hero uses.
bg-white
Paper
The default. Most sections. Separated by hairlines.
bg-ink/[0.02]
Tint
Breaks up consecutive paper sections without introducing colour.
.brand-surface
Forest
Forest plus a gold and green glow. The default inverted surface: header, hero, footer.
.ink-surface
Ink
Ink plus a gold-only wash, no green. Reserved for pages that have to stand apart from the rest of the site. See below.
Ink and gold
Forest is the brand. Ink is the occasion. Use it when a page, a card or a post has to read as more considered than the rest, and never as a general-purpose dark mode. The three devices below belong together, and the wave is what stops ink from reading as a plain black box.
Manifesto
The one surface that gets a pattern.
Ink surface, wave pattern anchored to the bottom edge, gilt seam closing it against whatever comes next.
- Surface
- .ink-surface
- Ink #101010 with two gold radials, top-right at 13% and bottom-left at 6%. No green, which is what separates it from forest.
- Wave
- WavePattern
- Seven hairlines 14px apart, gold, 24% fading to 7%, masked out toward the top. Anchored to the bottom edge, full bleed, h-40 to h-44.
- Gilt seam
- .gilt-seam
- 1px gold, transparent at both ends and 45% at the centre. Closes an ink block against the surface below it.
- Kicker
- rule + label
- A 3rem gold hairline, then the label at 0.24em. Wider than the 0.2em used on paper, since letterspacing needs more room on dark.
How gold behaves on ink
Gold on ink clears 8:1, so it is readable here in a way it never is on paper. It still stays linear: rules, the kicker, index numerals, arrows, the seam. It fills a shape only as the button, exactly as on forest. The wave is the one place gold is allowed to cover area, and only because it is hairlines at under 25% opacity.
Off the website
This is the pairing to reach for on a business card back, a letterhead footer or a social post base: ink stock, gold foil or gold ink for the wave and the rules, nothing else on the surface. Keep the wave anchored to an edge and let it run off the trim rather than floating it in the middle.
Hairline grid, on ink
The same grid as on paper, at white/12 instead of ink/10, with the index numeral in gold and the supporting line pinned to the bottom of the cell so every row aligns however long the titles run.
- 01
You own everything we build.
Cells in a hairline grid, two across. No fills, no shadows, no cards.
- 02
The people who build it are the people who answer.
Titles run to whatever length they need. The body copy stays aligned.
Typography
The two typefaces and what each carries are in the guidelines. This is the scale they are set at.
Page H1
font-serif · clamp(2.4rem,5vw,3.9rem) · 400 · -0.02em · 1.04
Work we built and still look after.
Section H2
font-serif · clamp(2rem,3.6vw,2.75rem) · 400 · -0.015em · 1.1
Businesses we work with.
Card H3
font-serif · 1.35–1.5rem · 400 · 1.15
Maintenance and hosting
Label
font-sans · 0.7rem · 600 · 0.2em · uppercase · brand-deep
CASE STUDIES
Lead
font-sans · 1.125rem · 400 · 1.6 · ink/60
We create your website, keep it running, and connect it to the tools you already use.
Body
font-sans · 1rem–1.05rem · 400 · 1.7 · ink/65
Body copy runs in Inter. Article prose sits at 1.0625rem with 1.75 leading, capped at a 50rem column.
Small
font-sans · 0.85–0.95rem · 400 · 1.6 · ink/55
Hosting, updates, reporting
Index numeral
font-sans · 0.7rem · 600 · 0.22em · tabular · gold
01
Icons
One glyph per service, drawn on a 40 unit grid at 2px stroke, geometric, no fills except
where a dot reads better than an outline. They take currentColor, so they sit in ink/25 at rest, brand on paper hover, and gold on any inverted surface.
Each one lives in its own component; ServiceIcon maps
a name to it.
-
creation
-
redesign
-
app
-
community
-
consulting
-
support
-
tools
-
design
-
concepts
-
blog
-
categories
-
exchange
-
secure
-
domain
Layout
- Container
- max-width 1280px · 2rem gutter
- The .container utility. Everything sits inside it.
- Section rhythm
- py-24
- py-20 for page heroes. Sections are separated by a hairline, not by colour.
- Reading measure
- 50rem
- Article body column. Never let prose run the full container.
- Radius
- 0.375rem
- Cards, images, inputs, panels. Buttons and chips are pills. Nothing else.
- Hairline
- 1px ink/10
- Section edges and grids: border-l + border-t on the grid, border-b + border-r on each cell.
- Transitions
- 150–200ms
- Colour and border only. Transform is reserved for a nudge (0.5–1px) on arrows.
Components
Four ways to send someone somewhere, and they do not overlap. Pick by what the click means, never by how much emphasis the spot seems to want.
- Pill
- CallToActionButton
- Something we ask for: book a call, send the form, subscribe, visit the client site.
- Section link
- ArrowLink →
- Leaves a section for the full list of what it was showing.
- Card arrow
- CardArrow ↗
- Foot of a card that is itself a link. Not clickable on its own.
- Prose link
- underline
- Inside a sentence, in the footer, and anything leaving the site.
- Highlight
- Highlight <mark>
- The one phrase on a page worth stopping on. Not a link, and never more than one.
Section link
ArrowLink · Inter 600 · 0.875rem · → · no underline
Leaves a section for more of the same thing: all case studies, all services, all articles, meet the team. A real link, so it is the only one of the three you can click on its own. Brand green on paper, gold on forest and ink.
Card arrow
CardArrow · Inter 600 · 0.875rem · ↗ · no underline
Sits at the foot of a card whose whole surface is already the link. It renders a span, never an anchor, so it repeats the click target instead of competing with it. Ink on paper, white on an image or a dark tile.
Buttons
Inter 600 · 0.875rem · pill · md 1.5rem/0.875rem · sm 1rem/0.5rem
Pills are for the things we ask someone to commit to: book a call, send the form, subscribe. Going to another page is a section link, not a button.
primary
secondary
gold, on forest only
Prose link and chips
Underline, brand green, no arrow. For links inside a sentence, in the footer, and for anything leaving the site. Off-site links get this treatment rather than a glyph of their own, since ↗ already means enter this card.
Highlight
Highlight · mark · gold 58% · ink · 500 · 0.2rem · clone
One phrase per page, never more. Marks the sentence a reader should leave with, so it goes on the promise rather than the problem. Gold only fills a shape here because the text on it is ink, which clears contrast. Styled on the mark element itself, so it also covers highlights coming out of article markdown.
We meet them halfway, and we stay: from campaigns that bring in clients to processes that cut the work down, we aim to become long-term partners of their success.
Pair it with strong, which is deep green at 500 and carries the quieter emphasis in the same paragraph.
Navigation
Active is a gold dot under the label, never an underline.
Hairline grid
The default way to group anything countable: services, commitments, steps, values.
01
Website creation
Cells in a grid. No shadows, no fills, no floating cards.
02
Maintenance and hosting
Cells in a grid. No shadows, no fills, no floating cards.
03
Automation
Cells in a grid. No shadows, no fills, no floating cards.
Card
Page patterns
Two ways an ordinary page opens. Pick one. The ink hero above is a third, reserved for special pages rather than picked from.
Paper hero
Green header, then a white hero: label, H1, lead, bottom hairline. Used by about, services, work, blog listing, consulting.
PageLayout → PageHero
Bleeding hero
The page draws its own header inside the coloured block, so the nav sits on the hero with no seam. Text left, image right. Used by project and article pages.
PageLayout header={false} → Header inside the hero