Cats of Kochi · controls & furniture · 5 August 2026
Measured in a real browser on theguardian.com — the newsletter block, the buttons, the article furniture.
One decision inside, Shemeer. The Guardian is not all-square the way catsofkochi is — they use round shapes for things you press. We take exactly one of those. The shape rule →
| catsofkochi today | The Guardian | |
|---|---|---|
| Buttons | square | pill, 24px |
| Search field | — | 1000px — a full pill |
| Icon buttons | — | circles, 44×44 |
| Text inputs | — | 4px |
| Chrome, cards | square | square |
Both are right — they are different sites. The deciding argument is how many controls there are, not taste. The Guardian needs a shape system because their reader is constantly asking “can I press that?”. This site has about four controls in total.
Square is structure. Round is a person or a control.
The whole shape system
Two shapes and a circle. That replaces the earlier “square everything except portraits” — the exception is now a reason, not a list.
⭐ Their Sign-up button is an outline, not a solid block — transparent fill, a 1px ink border, 14px bold, radius 24px. Easy to miss, and it matters: on a page made of writing, a solid block shouts. An outlined pill reads as a control without raising its voice.
Ours — every variant and state
Outline is the default. The amber fill is the only solid button, and there should be about one per page.
The padding is lopsided on purpose — one extra pixel at the bottom, copied from theirs, because capital letters sit optically high inside a pill. It is the sort of detail that reads as made rather than generated.
Hover darkens the ground and never the label. Focus is a
3px ring — theirs is a blue halo at rgb(0,119,182); ours is the
blue we already verified at 5.9:1.
This is the one your 1,408 subscribers land in.
⭐ The Guardian puts how often they will email you ABOVE the newsletter's name.
Every weekday
First Edition
That is a writing decision, not a layout one. The thing a person most wants to know before giving you their email is how often you are going to use it — so it is answered before you even say what the thing is called. They also say “free” out loud instead of leaving it assumed.
Ours
Once a month
The events worth your evening, the ones that moved, and what we checked this month. Free.
We only use your address for this. Unsubscribe in one click, any time.
It is not in a box. Theirs is transparent with no border and no padding — it sits in the page. A boxed signup on a page of writing reads as an advert, and an advert is the one thing every reader has trained themselves to skip. Ours gets a hairline above and below and nothing else.
⚠️ One thing only you can decide: how often. The cadence is required — the build refuses a signup without one.
Do not promise a frequency the site cannot keep. “Every week” that becomes every six weeks is a broken promise sitting in 1,408 inboxes. If the honest answer is “when something changes”, write that — it is a better promise because it can be kept.
The label above the field is visible, not a placeholder — a placeholder disappears the moment somebody types, which is exactly when a person using a magnifier needs it. And the privacy line is a promise, so it is quiet but not set in the grey of fine print.
Standfirst — corrected against the real thing
A ninety-minute walk that most people do backwards, and the one lane that makes it worth it.
Measured: 20px, weight 500, in their headline face, black. My first version had it in the body sans in grey, which made it read as a caption under the title instead of part of it. The standfirst belongs to the headline.
Pull quote
They say ten, and they open at eleven. Everybody who lives here knows it.
A rule above and below, not a box and not a giant quotation mark. ⛔ Never a fare or a time — a fact pulled out of the body is a fact with no checked date on it. The build refuses those.
Measured in their body text: the link is coloured, has no underline, and instead carries a light grey rule underneath. A full-strength underline at body weight cuts through the descenders of every link in a 2,000-word memoir. This link uses their mechanism — the colour names it, the quiet rule confirms it, and hovering brings the rule up to full strength.
Their section colours. The
Guardian tints headlines, links and pull quotes by section — measured purple
rgb(101,0,84) on Travel, red rgb(199,0,0) on News.
It is elegant, and it is already cut by your own direction document.
They are a newspaper with sections a reader moves between. You are one place, told by one voice. Answer pages and told pages are two rhythms of one publication — colouring them apart would make them two sites. One accent, and it means “we checked this”.
Also refused: the way they switch focus rings on and off with JavaScript. That solved a problem the browser now solves by itself.
Every Guardian number on this page was read off theguardian.com in a browser on 5 August 2026, not recalled. ⚠️ Their cookie wall was up throughout — measurements come from the page underneath it, which is unaffected. It was not dismissed, because that would set a lasting preference on Shemeer's own browser.