How we build
Nothing here is a guess.
Every colour, font, button and component our own site runs on, pulled straight from the live CSS. If it's shown here, it's genuinely what we use, not a mood board someone forgot to build from. The same care goes into every site we build for a client.
01
Colour palette
Four brand colours, used everywhere. Red is a stamp of emphasis, not a fill colour, it works best in small doses: buttons, dots, highlighted words.
Plain Swift Red fails contrast rules at body-text size, so we don't set copy in it directly. Two text-safe variants exist instead: #B93216 on light backgrounds and #E86A45 on onyx or charcoal. The site switches between them automatically depending on which surface the text sits on.
Page background · light vs dark
The four brand colours above are fixed and never invert. But the actual page background, card surface and body text are separate tokens that swap when you flip the theme toggle, and none of them are literally paper or onyx. Dark mode's background in particular is a step lighter than Swift Onyx on purpose, so it doesn't read as pure black.
Body text is Swift Onyx on light mode and Swift Paper on dark mode, so the two brand neutrals still do the heavy lifting for text, just with the page background and card surfaces as their own separate tokens underneath. Try the toggle further down this page to see all four swap live.
Neutrals & hairlines
Everything that isn't a headline or a brand accent runs through these three. Body copy that needs to sit quieter than full black uses one of the two ink levels below rather than a flat grey, and every hairline border on the site is the same translucent line.
Surfaces & elevation
Paper isn't one flat colour underneath. Cards, dropdown menus and hover states sit on one of three raised or recessed paper tones instead of a plain box shadow, and every one of the site's few genuine drop shadows is drawn from four fixed presets so nothing looks randomly floaty.
e1 to e3 step up in size and softness for popovers, dropdown menus and modals. e-red is the one exception, a tight colour-matched shadow used only under the primary button, a lit edge rather than a glow. Dark theme swaps every surface and shadow value for a darker set rather than reusing the light-mode ones at lower opacity.
The whole site also has a light and dark theme, switchable from the toggle in the nav. Paper and onyx swap roles between the two, everything else adjusts to stay readable. This page follows whatever theme you're already on, but you can flip it right here:
02
Typography
Be Vietnam Pro carries every heading, Inter Tight carries every word of running text. A third face, DM Serif Display, only ever shows up italic, for one highlighted word inside a headline or a small editorial label like the "How we build" eyebrow above, never for a full sentence.
Websites that work.
From first call to live website.
What makes us different.
Everything you need online.
Used for intro paragraphs under a heading, like this one.
Regular running text, 19px, 1.65 line height. Every paragraph on the site is set in this.
Reserved for one highlighted word per headline, plus small editorial labels like the eyebrow above. Never a whole sentence.
Section label
03
Buttons
Three button styles, no more. No ghost button and no icon-only button; the header’s Contact pill is the one outlined exception.
Primary is solid red with white text: one per section, for the action that matters most. Secondary is always a dark pill with paper text: onyx on light backgrounds, a lifted charcoal with a hairline edge on dark ones. Never an outline, and never a second colour, for whatever sits next to primary. Sweep is different on purpose, an outlined pill with a diagonal colour wipe on hover, reserved for the nav bar and footer Contact Us link so those two spots read as chrome rather than in-page content. All three are fully rounded pills and scale down slightly on click.
04
Cards
Cards on this site are quiet: a flat surface and a hairline border that turns red on hover, with no drop shadow.
No lock-in
Once it’s paid in full and live, the site, the code and the content are yours.
Fast turnaround
Most sites go live in two to eight weeks from the first call.
05
Tags
A single small red label, used inline next to a price or plan name to flag the recommended option. Never a standalone badge shape elsewhere.
06
Form fields
Every input, textarea and select on the site shares this look: a flat bordered field that turns red on focus. Dropdowns are enhanced into a branded listbox (below) so the option menu matches the site in both light and dark, instead of the browser default. Used as-is on the contact form.
07
Checkboxes, radios & selections
Native inputs, restyled: no icon font, no image sprites. Hovering turns the border red, clicking squashes the control to 85% of its size, and checking it fills solid red with the tick or dot scaling in, both on the same springy easing curve as the buttons above. These are live, not screenshots, try them.
Every dropdown on the site, including the Service field in Form fields above, is a native <select> progressively enhanced into this branded listbox: the trigger's border turns red and the chevron rotates 180° while it's open, and the option list fades in with a slight upward slide rather than snapping open. It's still a real <select> under the hood, so keyboard and screen-reader behaviour is unchanged.
08
FAQ accordion
Used on the FAQ and pricing pages. One item open at a time, a rotating plus-to-cross icon marks the open state.
.open class so you can see the expanded state without needing to click anything.09
Price tables
The editorial rate-card used throughout the pricing page: a red double-rule header, hairline-divided rows, serif italic prices. Wrap in a scrolling container on mobile.
| Service | Price | Billing | Description |
|---|---|---|---|
| Example Service | £100 | One-off | A short description of what's included. |
| Example Bundle Best Value | £180 (saving £20) | One-off | Two services combined at a discount. |
10
Logo
Two versions of the mark exist: charcoal for light backgrounds, paper for dark ones. The red dot never changes colour or gets removed.
Give it space. Don't stretch it, recolour it, or drop it onto a busy photo without a solid panel behind it.
11
Spacing & radius
Content sits inside a 1240px column with 32px of side padding (20px on mobile). Sections get 96px of breathing room above and below by default.
12
Elements
One-off interactive pieces that don't fit a bigger system yet. New ones land here as they're built.
It's a real checkbox underneath (.swd-toggle-input plus the .swd-toggle label), no JavaScript. Click it and the glyph's outline redraws itself while it flips instantly, and the fill goes from grey to green.
A quick include/exclude/n-a marker for comparison tables and lists, three colours over one badge shape: .is-good, .is-bad, .is-missing.
13
Editorial marks
Built for the About page, since it's the one page with no photography to lean on. Documented here so it doesn't quietly drift from what's actually live.
One bespoke artifact, not a stock icon: an audio waveform (a nod to the co-founder who ran a record label and works in game audio) resolving into a wireframe grid with ruler lines and a frame corner (a nod to the other co-founder, who builds the sites). Used once, in the About hero. It doesn't get reused as generic decoration elsewhere, that would defeat the point.
A shrunk echo of the hero mark, standing in for a plain hairline under a chapter heading. Same shape at a smaller scale, so a long page reads as one designed thing instead of five unrelated section openers.
It's a real drop cap on the first letter of a chapter's opening line, an old print convention rather than a photo grid. It only ever lands on a plain pronoun or article, "I", "My", "That's", "Our", never a name, so it can't accidentally identify anyone.
The dark sections on the About page also carry a very fine grain texture over the flat colour, so they read as a lit surface rather than a solid CSS fill. Subtle enough that you're meant to feel it, not see it, so it isn't demoed as a swatch here.
14
Motion
Two curves, used for almost everything that moves. A springy one for anything you press, a smooth one for anything that just arrives on its own.
cubic-bezier(0.34, 1.56, 0.64, 1)
Press and hold one. It shrinks the instant you touch it, before anything else happens, then overshoots slightly on release. Every button, calendar day and time slot on the site uses this same feedback, so a press never feels like it's waiting on you.
cubic-bezier(0.22, 1, 0.36, 1)
A fast start that settles gently, never a bounce. Used for anything that fades or slides in on scroll, a panel opening, or a colour changing on toggle, where an overshoot would look like a mistake rather than a response.
The rule underneath both curves: feedback starts on the press, not the release. A button, a calendar day, a time slot, all of them change the moment a finger or cursor lands on them, not after. Anyone with reduced motion switched on gets the same colour and state changes without the scale or overshoot, nothing here relies on motion to be understood.