Design and build notes

Birdham Carpentry & Building

A name, a mark drawn from the founder's own sketch, a website, and the quoting, invoicing and payments system that runs the firm behind it.

Client
Birdham Carpentry & Building
Sector
Building and joinery
Year
2026
Scope
Naming, Brand identity, Website design, Development, Estimating engine, Operations backend
01

The commission

Birdham Carpentry & Building is a new firm working across Chichester and the South Downs on listed and period building restoration, fine joinery, bespoke kitchens and sympathetic building work. The commission covered everything a trade business needs on the day it opens: a name, a mark, a website, and the system behind the website that runs quotes, jobs and invoices.

Trade websites divide into two kinds. There is the phone number on a template, and there is the lead portal that sells the same enquiry to three other builders. In a catchment full of listed and period property, nobody was presenting craft properly and nobody was quoting online. The brief was to look like the most careful firm in the county from the first day of trading, and to have the operational machinery to back that up.

The whole thing was built in a single day. The commit history runs from 11:25 to 22:53 on 22 July 2026, fifty-seven commits, and it covers the naming, the mark, the website, the estimating engine, the quote and invoice PDFs, the payments and the operations backend. That is not a claim about heroics. It is a claim about what a small studio can do when the decisions are made in the right order and there is nobody to hand work between.

  1. 11:25Initial build, as Halnaker ConstructionBrand, site and quote system, under the first name
  2. 11:43The Mill Mark refinedSails-forward windmill, plus a seal variant and favicon
  3. 12:11Operations connected to SupabaseThe same commit moved the reading face from Libre Caslon Text to Spectral
  4. 13:04Repositioned to lead with restorationOak receded from the front of the offer, which is what made the name a problem
  5. 13:16Renamed to Birdham Carpentry & BuildingThe windmill went with the name. The seabird replaced it
  6. 14:17Quote and invoice PDFs brandedThe new mark carried into the documents
  7. 17:11The gull identity wired throughSite and PDF generators on one mark
  8. 17:52Lockup balancedThe mark sized against the nav and the wordmark lines aligned on both edges
  9. 22:53Invoices rendered from the real pageThe last commit of the day, matching the quote pipeline
Commits
57
Elapsed
11h 28m
Names
2
Marks
2

Taken from the project's commit history, which is why the times are to the minute. Only the commits that changed a decision are listed.

02

The name

The firm was not called Birdham first. It opened as Halnaker Construction, named after the village and its windmill on the Downs north of Chichester, and it traded under a complete identity: a latticed windmill mark, a Spectral wordmark, and the sub-line Oak Carpentry & Building. The site, the quote flow and the operations backend were all built under that name.

Two things were wrong with it, and they were connected. The sub-line led with oak, which narrowed the firm to one material at exactly the moment the offer was being widened to restoration and general building. And Halnaker sits inland, on the wrong side of the catchment from the harbour villages where much of the work is.

The rename fixed both. Birdham is a village on Chichester Harbour whose name derives from the Old English for settlement of the birds, so it gave the firm a name rooted in the right part of the catchment and, directly, its mark. A name that produces its own symbol without a second creative step is worth more than a cleverer one that does not.

Halnaker Construction, the replaced lockup
Halnaker Construction, the replaced lockupThe windmill mark with the wordmark in Spectral and Oak Carpentry & Building beneathSuperseded nameOak-ledWindmill mark
The Mill Mark
The Mill MarkHalnaker Windmill with latticed common sails, drawn as a single-colour silhouetteSuperseded

The windmill was a good mark and it went anyway. It is worth being clear why, because it is the kind of decision that gets described as taste and is usually not. The gull that replaced it holds the same qualities, a single flat silhouette that embroiders and reduces cleanly, while belonging to the harbour rather than to a hill eight miles inland. When the name stopped being defensible the mark went with it, because a mark that illustrates the wrong name is a mark with a job it cannot do.

03

The mark

The mark is a gull in flight, vectorised from the founder's own drawing and then refined until the wings balanced, the larger wing carried a proper curve, the body was slimmed and the beak came to a point.

One constraint shaped everything about how it was drawn. A trade mark spends most of its working life on jackets, polo shirts and van doors, and embroidery is unforgiving: a shape with an internal stroke, a counter or a second colour becomes a thread change, a registration problem and a cost. So the gull is one solid filled path with no stroke at all. Measured from the file, it is a single subpath. It takes one fill, reverses on ink or on Bancha without redrawing, and stitches as a single thread.

Birdham Carpentry & Building The mark
The markInk on paper, the default
Birdham Carpentry & Building Reversed
ReversedPaper on ink, for dark grounds
Birdham Carpentry & Building On Bancha
On BanchaWorkwear, site boards and van livery
Birdham Carpentry & Building Horizontal lockup

BIRDHAM

CARPENTRY & BUILDING

Horizontal lockupThe gull with BIRDHAM in letter-spaced Spectral and the sub-line beneath
376.3 units170.51 units

The gull on its 376.9 by 172.3 unit artboard. The drawn ink measures 376.30 by 170.51 units, a ratio of 2.207 to 1, against an artboard ratio of 2.187 to 1. The difference matters in practice: the artwork very nearly fills its box, so there is no built-in clear space and the mark must be given room by whatever places it. Because it is wide and shallow, it is always sized by height and never by width.

Aspect ratio
2.21 : 1
Measured from the drawn path
Construction module
42.63 units
A quarter of the drawn height
Artboard
376.9 × 172.3
viewBox units
Drawn ink
376.30 × 170.51
Ink ratio
2.207 : 1
Artboard ratio
2.187 : 1
Subpaths
1
One closed shape, single fill
Stroke
None
An embroidery constraint
123

The same path is placed at three sizes across the identity, always scaled by a single factor so the drawing is never redrawn for a context.

  1. 1Web header. Rendered at a 24 pixel height, rising to 28 at desktop. The mark is the only element in the header that is not type.
  2. 2Horizontal lockup. Placed at 0.255 scale on a 520 by 140 artboard, which puts the gull at 96.1 by 43.9 units with 18 units of margin to the left edge.
  3. 3The seal. Placed at 0.207 scale inside a double roundel of 60 and 53 unit radii on a 140 unit square, with BIRDHAM arced beneath on a 36 unit radius at 4.5 units of tracking.
18px
24px
32px
48px
96px
200px

The mark tested at working sizes. Because it is a filled silhouette with no internal detail, it survives to the favicon without a simplified cut, which is the practical payoff of the single-path constraint. The website header uses the 24 pixel height, so the second tile is what most visitors actually see.

The lockup sets BIRDHAM in Spectral capitals at a 0.2em letter-space, with Carpentry & building beneath it in Hanken Grotesk at 0.33em. The sub-line's tracking is not a stylistic pick: it is set so that the second line spans exactly the width of the first, which aligns both lines on each edge and gives the lockup a flush left and right margin. Change the words in the sub-line and the tracking has to be reset.

Lockup

Mark height
24px, 28px at desktop
Wordmark
Spectral 500, uppercase
Wordmark size
1.35rem, 1.5rem at desktop
Wordmark tracking
0.2em
Mark to wordmark gap
14px
Wordmark to sub-line
8px

Sub-line and seal

Sub-line
Hanken Grotesk 500, uppercase
Sub-line size
0.5rem, 0.55rem at desktop
Sub-line tracking
0.33em
Seal roundels
r60 at 2, r53 at 1
Seal arc
r36, text 9pt
Seal arc tracking
4.5
Never scaled on one axis. The mark is sized by height
The 2.207 to 1 ratio is fixed
One flat fill. No shadows, gradients or outlines
Ink, paper or Bancha only
The Birdham Carpentry homepage, with the gull lockup in the header
The lockup in service. The sub-line is tracked so that Carpentry & building spans exactly the width of BIRDHAM, which is why both lines align on each edge

Birdham has no written brand manual. These constraints are the ones recorded in the source of the mark itself and enforced by the components that place it, which is why they are stated here as they are implemented rather than dressed up as a rules page that does not exist.

04

Colour

The palette is drawn from heritage paint colours rather than the bright green and gold that trade businesses tend to reach for. The three greens are real Farrow & Ball references, locked on 22 July 2026: Studio Green as the ink, Bancha as the working accent and Card Room Green as the softer secondary. The ground is a warm paper white and never pure white.

The reason is contextual rather than decorative. Most of the firm's work happens against lime render, old brick and weathered oak, and a palette taken from the paints those buildings are actually finished in sits comfortably in a photograph of the finished job.

Ink

#363C3C

54, 60, 60

Type, headers and the mark

Studio Green No.93

Bancha

#676A49

103, 106, 73

The primary brand green

Bancha No.298

Card Room

#73806E

115, 128, 110

Softer secondary green

Card Room Green No.79

Paper

#F3EDDF

243, 237, 223

Warm ground, never pure white

Surface

#FAF7EF

250, 247, 239

Slightly brighter warm surface

Stone

#726A5A

114, 106, 90

Captions and labels

Darkened to meet WCAG AA on paper

Oak

#B98A50

185, 138, 80

Decoration only. Never body text

Measured contrast

Measured contrast ratios for each text and surface pair in the palette, with the WCAG 2.1 grade each one earns.
PairSampleRatioWCAG 2.1
Ink on paperSample text9.6:1AAA
Stone on paperSample text4.6:1AA
Bancha on paperSample text4.8:1AA
Card Room on paperSample text3.6:1AA large
Oak on paperSample text2.6:1Fails
Paper on inkSample text9.6:1AAA
Paper on BanchaSample text4.8:1AA

Ratios are computed from the hex values on this page under WCAG 2.1, not quoted from the brand document.

The contrast table above is the reason two of these colours carry usage restrictions rather than preferences. Stone was darkened during the build until it cleared the AA threshold on paper, because it sets captions and labels. Oak was left where it is and confined to rules, borders and ornament, because at its measured ratio it cannot carry text at any size. Card Room clears the large-text threshold only, so it is used for headings and panels rather than paragraphs.

05

Typography

The reading face changed during the build. The site opened on Libre Caslon Text and moved to Spectral, and the project README still records the older choice in one line while naming Spectral in another. Spectral sets the wordmark, the headings and the body, which is unusual for a trade site, where the convention is a workhorse sans throughout. A serif reads as considered and slightly old, which is the correct register for a firm whose lead service is listed and period restoration.

Hanken Grotesk handles the working parts: navigation, tracked-caps eyebrows, form labels and the quote flow. The division is functional. If a visitor is reading, it is Spectral. If a visitor is operating something, it is Hanken.

Spectral

Wordmark, headings and body

400, 500, 600

Letter-spaced capitals at 0.2em in the lockup, roman for headings and copy. It replaced Libre Caslon Text partway through the build.

Hanken Grotesk

Interface and labels

400, 500, 600

Navigation, tracked-caps eyebrows, the sub-line of the lockup and every working part of the quote flow.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 & £ € , . ; : ( ) “ ”

Old buildings ask to be repaired the way they were built.

Spectral, the reading face

Typographic tokens

Wordmark tracking
0.28em
Eyebrow tracking
0.18em
Lockup tracking
0.2em
Sub-line tracking
0.33em
Prose measure
68ch
Soft shadow
0 10px 34px −18px, ink at 35%
06

The site

Four services lead the offer with listed and period restoration in front, and eight area pages cover the catchment from the harbour villages up to the Downs. Each area page is written individually rather than generated from a template with the place name substituted, because thin duplicate location pages are penalised and, more to the point, read as thin.

The centrepiece is the quote flow. A visitor sizes the job, chooses a standard, premium or heritage specification, and receives an indicative range on the spot, in under a minute, without speaking to anyone.

Page inventory

  • Four service pagesRestoration, carpentry and joinery, kitchens, extensions and building
  • Eight area pagesChichester, Goodwood, Midhurst, Petworth, Arundel, Bosham, West Wittering, Emsworth
  • Quote flowSized, specified and priced to an indicative range
  • Shareable quotesA tokenised link, no login, PDF download and card deposit
  • Work, about, reviewsThe public pages, written in the firm's own voice
  • Operations adminEnquiries, clients, quotes, jobs, calendar, invoices, payments
The first step of the Birdham quote flow, choosing a job type
Step one of three. The flow states plainly that the figure is a guide worked out from current material prices, with a firm quote to follow a site visit
The listed and period building restoration service page
The lead service page. Spectral for reading, Hanken for the working parts, and a palette that sits against lime render and old brick
The Chichester area page
One of eight area pages, each written individually rather than generated from a template with the place name swapped
Birdham Carpentry on a phone
The same site at 390 pixels
07

The estimating engine

The quote figure is computed rather than guessed. Each service carries a bill of materials expressed as a quantity per unit of size, priced against a maintained supplier list. Labour is added at a rate per unit. A specification multiplier is applied, then a margin, and the result is presented as a band rather than a single number.

The engine always returns a range and never a fixed price, and the interface says so plainly, with a firm quote to follow a site visit. That is a commercial decision as much as a technical one. An online figure presented as final is a figure the firm has to honour or retract, and retracting it is worse than never having given it.

The calculation

Materials
Bill of materials per unit of size
Material prices
Maintained supplier list
Labour
Rate per unit of size
Margin
18%
Indicative band
±15%

Specification multiplier

Standard
1.00
Premium
1.25
Heritage
1.45
Units
m² or linear metres
Output
A range, never a fixed price
08

Operations

The public site is the smaller half of the build. Behind the same domain sits a role-gated admin where enquiries convert to clients, quotes convert to jobs, jobs carry stages and calendar bookings, and invoices track payments as they land. The firm runs from it rather than from a spreadsheet and a shoebox.

Quote and invoice PDFs are rendered server-side from the same React components as the on-screen versions. That is the detail that keeps the documents honest: there is no separate PDF template to fall out of step with the site, because there is only one description of what a quote looks like.

The Birdham Operations admin showing an invoice with client link and card payment
Birdham Operations: an invoice with its client link, PDF and payment options

Public

Marketing site

Static. Never reads from the database

Quote flow

Sizes, specifies and prices the job

Tokenised quote link

Opened without a login, served through a security-definer function

Operations

Admin

Enquiries, clients, quotes, jobs, calendar, invoices

Row-level security

Owner, staff and bookkeeper roles separated

PDF renderer

Quotes and invoices from the same components as the screen

Money

Stripe

Deposits and payments

Idempotent webhook

Status accurate through payment, expiry and refund

Deposit

Published as 10 to 15%, defaulting to 12.5%

The public pages never touch the operational database. Everything that reads or writes goes through a server action or a security-definer function.
  • Quote links are minted as unguessable tokens, so a client opens a quote without an account and cannot reach anyone else's.
  • Deposits are published to clients as 10 to 15 percent of the job. The admin defaults to 12.5, the middle of that band, and it is adjustable on each quote rather than fixed in code, so the firm can hold to what the site promises without a developer.
  • The webhook is idempotent, so a Stripe retry cannot double-count a payment or overwrite a refund.
  • LocalBusiness, Service, FAQ and breadcrumb structured data are built from confirmed details only, with nothing invented to fill a required field.

What the homepage weighs

Transferred
1.2MB
Requests
33
DOM nodes
306

When it paints

First contentful paint
156ms
Largest contentful paint
508ms
Load complete
472ms

Measured on 25 August 2026 by loading birdhamcarpentry.co.uk/ twice in headless Chrome at 1440 pixels with the cache disabled, and keeping the better run. This is a desktop connection on a fast line, so the paint figures are a floor rather than a field measurement. The transfer weight and request count are the numbers worth comparing, because they do not change with the connection.

One inconsistency is worth recording. The stone tone appears at two values in the source: the darkened, accessible value used by the site, and an older, lighter value still sitting in the mark's own file. The site ships the darkened one. Anyone picking up the older file for print work should take the value from the site tokens instead.