How Long Arc looks, sounds and behaves.
For anyone making something for Long Arc: a page, a deck, an email, a signature. Everything here is taken from the live site and its tokens. If the site and this manual disagree, the site wins and this page gets fixed.
01 · Who it is
One person’s practice.
Long Arc is Tom Webster’s advisory practice for founders, leadership teams and investors in values-led food, agriculture and climate businesses. Tom co-founded GrowUp Farms in 2013 and spent the next twelve years on its board and leadership team.
What Long Arc does
- 01
- Board roles. NED and board observer seats for early and growth-stage companies, including observer roles for investors.
- 02
- Fractional leadership. Part-time, embedded leadership for pre-seed to Series A teams, as fractional CTO or Head of R&D.
- 03
- Founder and leadership team advisory. Regular sessions on priorities, team, fundraising and the hard calls, including for university spin-outs.
- 04
- Due diligence for investors. Technical and operational diligence on food, ag and climate ventures: R&D roadmaps, capex and energy assumptions, scale-up plans, and the team that has to deliver them.
Who it’s for
- 01
- Founders and leadership teams need personal growth and trusted advisory as they move from a working prototype to a business that has to run every day, or moving from one phase of growth to the next.
- 02
- Investors and lenders who want someone who has been through it to read the plan before money goes in.
- 03
- Boards, funds and search firms looking for a NED, board observer or fractional leader with operating experience in food, ag and climate.
02 · The idea
Hard-won experience, carried forward.
Innovative technology doesn't like to move in a straight line. It arrives early, peaks before the world is ready for it, falls back, and returns when the costs, the markets and the need catch up. That's the long arc.
At the end of the long arc, it's no longer too early.
Every part of the brand comes back to this idea. The arc in the logo, the arc above this quote and the career timeline on the home page are the same device.
03 · Voice
Plain, specific, in the first person.
Long Arc sounds like an experienced operator talking across a table: direct, numerate and honest about what went wrong. The examples below are from the live site.
| Attribute | What it means | Do | Don’t |
|---|---|---|---|
| First person, always | Long Arc is one person. Headings, buttons and form labels all speak as Tom. | “If I’m not the right person, I’ll say so, and I’ll usually know who is.” | “We”, “our team”, “Long Arc’s experts”. |
| Specific, with numbers | A claim carries a figure, a name or a date. | “£140m+ raised across grants, equity and debt.” | “Extensive experience”, “a proven track record”. |
| Honest about the hard parts | The restructuring is part of the story and is told plainly. | “GrowUp outgrew its capital structure, and in 2025 the group went through a restructuring.” | Spin, euphemism, or leaving it out. |
| Plain words, no hype | Say what happens. Let the experience carry the weight. | “The questions that matter rarely appear in the deck.” | “Disruptive”, “game-changing”, “unlock”, exclamation marks. |
| Short and measured | One idea per sentence. A longer sentence, then a short one that lands it. | “That’s the long arc.” | Stacked clauses and qualifiers that trail off. |
| British English | The audience is in the UK and Europe. | organisation, programme, £ | organization, program, $ |
04 · The logo
One wordmark, one arc. Never re-typeset.
The logo is drawn lettering, not a font, followed by an arc built on the lettering’s own grid. Always use the supplied files. For square spaces, use the mark: the arc on its own.
Download the logo pack ZIP · SVG and PNG · 0.3 MB
How it’s built
- Letters
- One baseline, one x-height, stems 31 units wide, even spacing. Drawn, so never set in a typeface.
- Arc
- 144° of a circle, stroke equal to the stems, feet on the x-height line.
- Height
- The arc’s top, the top of the l and the x-height line are evenly spaced.
- Width
- The arc is as wide as the word “arc” and sits one word space after it.
- Mark
- The same arc with its stroke doubled to two stems, so it holds at 16px.
Size and spacing
Clear space is one x-height on every side, about a tenth of the logo’s width. In the site header that is 15px. Keep text, rules and edges out of it.
Minimum size is 96px wide on screen and 25mm in print, where the arc stroke stays about 2px. Below that, use the mark, which works down to 16px.
Don’t
05 · Colour
Loam ground, deep-water ink, one blue signal.
Colour is chosen by role. Arc blue is the only accent; it marks what matters and is never used for text on the light ground. The site’s older canopy, umber and wheat tokens are not used.
Loam light #F7F3E9
--loam-light
The page. Every section sits on it; there are no alternate bands.
Ground for all text below
Deep water #16242F
--deep-water
Headings, 1px frames, button hover, the dark ground.
14.3:1 on loam light
Soil #4E4A3F
--soil
Body text.
8.0:1 on loam light
Arc blue #7895A4
--arc-blue
The signal colour: the arc, button fills, selected states, rules, underlines. Never text on loam.
2.9:1 on loam light; deep water on it 5.0:1
Logo ink #0A3542
--logo-ink
The logo’s letters and link text.
11.8:1 on loam light
Loam #F2EDE3
--loam
Quiet fills: free calendar days, the boxed email on mobile.
Deep water on it 13.6:1
Loam deep #DED5C2
--loam-deep
Hairlines between sections and inside tables. Never text.
1.3:1, decorative only
Mist #A9BCC4
--mist
Secondary text on deep water only.
8.0:1 on deep water
06 · Typography
Three families, each with one job.
Display · Instrument Sans 400–600
Big problems, run on long horizons.
Headings, buttons, navigation, card titles. Tracking −0.02 to −0.03em.
Reading · Space Grotesk 300 and 400
I work with founders, leadership teams and investors in values-led food, agriculture and climate businesses.
Body text in 300; values, form text and radio labels in 400.
Labels · JetBrains Mono 400 and 500
£140m+ · 2 → 120 · Oct 2026
Keys, labels, years, stats, the calendar and the footer.
All three are open-source (SIL Open Font License) and self-hosted through Fontsource.
The scale
| Style | Face | Desktop (px / leading) | Mobile (px) |
|---|---|---|---|
| H1 | Instrument Sans 600 | 80 / 1.0 | 46 |
| Section heading | Instrument Sans 600 | 44 / 1.05 | 32 |
| Hero subhead | Instrument Sans 400 | 34 / 1.2 | 24 |
| Pull quote | Instrument Sans 500 | 60 / 1.1 | 32 |
| Card title | Instrument Sans 600 | 28–30 / 1.05–1.1 | 23–24 |
| Hero intro | Space Grotesk 300 | 20 / 1.6 | 16 |
| Body | Space Grotesk 300 | 18–20 / 1.65 | 16–17 |
| Card text | Space Grotesk 300 | 17 / 1.6 | 15 |
| Stats | JetBrains Mono 400 | 40 / 1.0 | 26 |
| Labels and keys | JetBrains Mono 400–500 | 11–13 | 11–12 |
07 · Structure
Square corners, hairlines, no shadows.
- Corners
- Square everywhere, including buttons and inputs. Nothing is rounded.
- Lines
- 1px loam deep between sections. 1px deep water around cards, tables and forms. A 4px arc-blue top marks the “Who I work with” tiles.
- Depth
- No shadows, gradients or blur.
- Grid
- 4px base unit. Two-column sections use a 4/8 split with a 96px gap.
- Space
- Gutters 96px at 1440px wide, easing to 24px on phones. Sections are padded 100–110px, or 56–64px on phones.
- Breakpoint
- One, at 768px. Below it, everything stacks.
08 · Motion
Quiet, and only on the way in.
- Reveal
- Sections fade in and rise 30px as they enter the screen: 0.6s, cubic-bezier(0.215, 0.61, 0.355, 1).
- Timeline
- The arc’s dots grow from half size, one after another, 80ms apart.
- Hover
- Buttons turn deep water with loam text; links darken and their underline turns deep water. 150ms.
- Reduced motion
- With reduced motion on, nothing moves and everything is visible from the start.
09 · Imagery
The arc, and one real portrait.
The arc as a graphic. A long, shallow arc in arc blue, 2.5px with square ends, stands above the pull quote. The career timeline is the same arc: solid for the past, dotted for what comes next.
Portrait. One photograph of Tom, cropped square, in its natural colour. No stock photography.
10 · In practice
The parts, live.
On deep water the letters turn loam; the arc stays blue.
11 · Assets
One source for everything.
Master files live in the site’s repository. Change the source, then run python3 scripts/brand.py to rebuild the icons, colourways and pack.
| Asset | Where | Notes |
|---|---|---|
| Colour and type tokens | src/styles/global.css | Custom properties on :root. If this manual disagrees with them, the tokens win. |
| Logo master | public/logo.svg | Letters as drawn, arc constructed on their grid. Every colourway is generated from it. |
| Colourways and mark | public/brand/*.svg | Full colour, reversed, ink, loam, the mark on its tile and the arc alone. |
| Logo pack | public/brand/long-arc-logo-pack.zip | Every file above as SVG and PNG, with a README of the rules. |
| Site icons | public/favicon.svg, favicon.ico, apple-touch-icon.png | The mark at 16, 32 and 180px. |
| Asset generator | scripts/brand.py | Rebuilds the icons, colourways and pack from logo.svg. Run it after any logo change. |
| Portrait | docs/tom-webster-portrait.jpg | The original photograph. scripts/brand.py crops it square into src/assets/tom-webster.jpg. |
| Website copy | src/data/content.ts | All page text, verbatim from docs/Long Arc Website Copy V3.md. |
| Design handoff | docs/design_handoff_long_arc_v2/ | The design spec: type scale, spacing, states, the timeline arc. |
| This manual | src/pages/brand-manual.astro | Linked from the site footer. |
When the rules run out
A new kind of use that this manual doesn’t cover is a question for Tom, not a judgement call. Ask before improvising, then add the answer here.