Terracotta stands for the human, teal for the machine, and olive for what the two make together. The list of marks on this page says what each one means. The rest of the page says why the site is the way it is, and the honest answer is that most of it was decided with a ruler.
One line, two colours
The line under the name at the top of every page is one stroke in two halves. Terracotta is Castor, the human, drawn as an asterisk with six arms for the six stars. Teal is Pollux, the machine, drawn as a circle. Castor was the mortal twin, and the site takes his name because the human is the one with something at stake. Olive marks where the two meet: the line between them, the orbit they share at the foot of every page on a wider screen, and the thread beside an article that fills as you read.
The six stars are real: in a telescope Castor splits into Castor A and Castor B, each of them a pair, with a fainter pair further out. The address, abcastor.com, comes from the first two.
The front page is a newspaper
Several pieces begin on the first screen, the way a broadsheet does, so there is something to read before there is anything to admire. A newspaper page has one vertical axis: the nameplate stands on it and the columns hang from it. "Castor" stands on the axis and the asterisk hangs off its right, the way a typesetter hangs a quotation mark into the margin. Centring the word with its asterisk had put it thirty pixels off the axis, and it took a ruler to see why the page felt wrong. It took us three rounds to pick the ruler up.
Source Serif carries the body, Literata the titles, Martian Mono the small capitals, and a handwriting face in two cuts the marks.
Almost no script
The site uses a small early script to remember your theme and paint an arrival from our other site. The other scripts wait until the HTML has been read. They handle the theme control, phone notes, search and the transitions between our sites. Most of what moves is the browser doing what the stylesheet tells it.
The rule was set before the design existed: as close to zero as we can get. A script is the part of a page that can be slow, can break, and can watch you; a stylesheet can do none of those. We use stylesheets wherever they can do the job. A browser has no way to remember a choice across pages without a script, short of a cookie set by the server and a reload every time you switch. And a note that opens in place needs its text moved, which a stylesheet cannot do unless we ship every note twice. We could pay both; we did not think you would want us to.
Search loads its live results only when you open it. There are no analytics, no tracking and no cookies.
Reading it elsewhere
We want you to be able to read the site on an older browser, save an essay for later, or open it in a terminal. The writing is already in the HTML when a page arrives. We enjoy working on the design, including the small things that move when you touch them. We want those experiments to sit on a page whose words and links remain easy to use when the browser cannot do everything we tried.
What a page weighs
Most of a first visit is type. The fonts are cut down to the Latin alphabet and the characters the site uses, with the same letters and weight ranges. The two typefaces the first screen needs start loading before the stylesheets ask for them, so the first words you see settle into their own type sooner. After that a page fetches little more than itself, 52KB for the longest one here, because your browser keeps the fonts and the stylesheets for a year.
The stylesheets went from 70KB to 63KB by removing two kinds of dead weight: rules no page could ever match, and declarations a later rule always overrides. Compressed, the way they travel, they are about 14KB, and that is the size that counts. A more compact rewrite made the file smaller and the download slightly bigger, so it was set aside.
To be sure nothing you can see changed, a checker opens the old site and the new one side by side and compares the size, position and style of every element in every state a reader can reach: each width, both themes, scrolled, hovered, tapped, with motion reduced, and printed, in Chrome's engine and in Safari's. Before its answer counted, it had to find twelve faults planted on purpose, and it found all twelve. Anything it flagged was measured again by hand.
What a search engine sees
Every page is plain HTML, so a search engine reads the same page you do without running anything. Each one states its title, a short description and its canonical address, the one address it should be filed under however you reached it. Shared in a chat, a link shows a preview with the Castor mark. Each article also carries a few lines only machines read: its headline, its date, its tags, and the studio as its author. The sitemap lists every page with each article's date.
In your language
The site is written in English, and your browser can put it in yours. Chrome, Edge, Safari and Firefox each carry a translator that rewrites the whole page in one tap; we tested Chrome's, the one most people use. A few words are marked to stay as they are: the name Castor, the tags, and we give a dam, a pun that dies in any other language. The rest translates, and the page keeps its type and its spacing while it does. Firefox's translator runs on your own computer and sends the page nowhere. DeepL often reads better in European languages, but it translates a whole page only on its paid plan; for a paragraph, paste it in.
How it was made
The design has taken fifty rounds so far, each one measured at phone, tablet and desktop widths, in both browser engines, before it went live. Most of the early rounds were about centring three words under a name; we would like to say that was quick. The last of those moved the links seventeen pixels right, then seventeen left, then back to where the first sketch had them, because we had been measuring the wrong thing: the eye compares the ends of a row with the colour split above it, and never looks at the middle word. That lesson is now a rule in Melzi, the design system we keep for everything we build: measure what the eye compares.
Every round is kept, and anything you would see was chosen from options laid side by side. Each decision goes into a file of rules with its reason, so a later change cannot quietly undo an earlier one.
Articles are written in our own writing app and published from it. Footnotes become side notes in the margin on a wide screen and a list at the foot on a phone, and the contents beside a piece is the app's own outline. A check runs on every build and nothing publishes until it passes: the text is the ink colour, no em dashes, every address ever published still works, the page stays under its byte budget, and only the approved scripts load. The check has caught us more often than we would like to write down.
The Works page lists what we have built for ourselves first. The public ones link to their code; the rest are described, and open when they are ready.
The beaver
Chip, the beaver, stands on the last line of every page and every product we make, and signs it "we give a dam*". He waves if you hover or tap. He also turns up where he is not strictly needed, which is the point of a pet.
Write to us
A question, a correction, or something you think we should read? Write to ciao@abcastor.com.