Reef Notes
What we learn building sites, written down as we go. The notebook, not the portfolio.
Pick of the month
FeaturedTypography
Ratios are easy to pick and mostly wrong. A scale earns its place when every step has a job on a real page: five sizes, a measure that holds at 320 and at 1440 pixels, and clamp() written so a designer can read it out loud.
About
One builds, one designs, both write. Three or four projects a year, and everything we learn on them ends up here.
The most recent entries, newest first. Everything older waits in the archive.
Lab tools measure a robot on fibre. Field data measures your readers on a bus. Here is the smallest honest setup we could build: three metrics, one endpoint, no third party script, and the week our two sets of numbers disagreed by two and a half seconds.
Most projects that went wrong were already wrong on page one. This is the brief we now refuse to start without: who decides, what already exists, what counts as done, and the three questions that reveal a budget before anyone has to say a number.
Inverting a palette is an afternoon of work. The hard part is everything the palette does not control: photographs, screenshots, charts, embedded video, and the one brand colour that stops meaning anything once the background goes dark.
A schema that fails the build is worth more than a CMS that lets anyone publish a broken page. What we validate in Astro, what we deliberately leave alone, and the three rules that keep a Zod schema from slowly turning into a second CMS.
A variable font is not automatically cheaper than two static weights, subsetting saves less than people think, and the expensive part is usually the fallback nobody designed. What a typeface actually costs, measured in bytes, requests and reflow.
A budget is not a Lighthouse score and it is not a Slack message. Here is the one we now write into the contract: four numbers, the device they are measured on, and the sentence that decides what happens when someone asks for a video header in week nine.
Every post belongs to exactly one topic, so a thread can be read end to end without wading through the rest.
The slow half of the job: naming things well, writing markup that survives the next redesign, choosing the boring solution on purpose. Notes on how a page is actually built, not on how it gets demoed.
2 posts
Numbers we can defend: budgets agreed before the first commit, what the field data says once real phones show up, and the gap between a good lab score and a page that feels quick. Mostly it is about shipping less.
2 posts
Type is most of a website, and most of the work is invisible: measure, rhythm, loading strategy, the fallback nobody bothered to design. What we ship, and what it costs in kilobytes.
2 posts
Interface decisions taken in the open: states before screens, contrast that survives dark mode, motion that carries meaning instead of attention. Design here is a set of constraints, not a mood board.
1 post
The business behind the code: writing a brief a client can actually sign, pricing work instead of hours, staying alive between two projects. The part of independent practice nobody puts in a portfolio.
1 post
Everyone here still ships client work. Each byline leads to everything that person has published, oldest note included.
Founder and web developer
Mara opened the studio in 2016 after eight years in agencies, and still writes most of the HTML that ships. She is happiest on the boring parts of a project: naming, data modelling, and the contract clause nobody wants to read.
3 posts
Performance engineer
Noor joined from a retail platform where a hundred milliseconds had a price tag attached, and brought the habit of measuring before arguing. She owns the studio's field data pipeline and the uncomfortable meeting where we show clients what their site does on a five year old phone.
2 posts
Interface designer
Tomas designs in the browser, which is a polite way of saying he redraws his own comps three times before anyone sees them. He runs the studio's type and colour decisions, and keeps a spreadsheet of every contrast ratio we have ever argued about.
3 posts
A short digest of what we published and what we got wrong. No tracking pixel, no drip sequence, one click to leave for good.
