# About the site

Source: https://abcastor.com/about/
Updated: 2026-10-17

How this site is made, what each choice cost, and what we would still change.

## What the marks mean

- **Castor is the asterisk.** The human half, in terracotta. Castor was the
  mortal twin, and the site takes his name because the human is the one with
  something at stake. Six arms for the six stars; and an asterisk is a reference
  mark, it says there is more to say here.

- *Pollux is the circle.* The machine half, in teal. Pollux was immortal, and
  gave half of it away rather than live apart from his brother.

- Olive is what the two make together: the line between them, the orbit they
  share in the footer on a wider screen, and the thread beside an article that
  fills as you read.

- The line under the name is one line in two colours, terracotta and then teal.
  It is the whole site in a stroke.

- A # after a heading is that heading's own address. Click or tap it and the
  address bar carries it; a long press copies it.

- Chip, the beaver on the last line, comes up when you hover or tap, and on
  every page he does something different.

**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][L1].

[L1]: mailto:ciao@abcastor.com