Theme Book

A divi-divi, the tree the trade winds bend permanently southwest, and the thing on this island everyone recognises without being told. Not a palm. It carries the whole positioning by itself: shaped by where it grows, and still standing.

Vector, not raster. The mark is traced paths, so it is sharp on any screen and at any print size, and the whole file is under 2 KB. That's smaller than the 32px PNG it replaces. The PNG set stays for the places that still demand one: the .ico, the Apple touch icon, the web manifest, and the social card.

The lockup is artwork. Its wordmark is drawn in Bodoni Moda, embedded in each file, so it sets identically on a machine that has never heard of the typeface: in a client's deck, an invoice, a partner's footer. It's the one place a face other than SF Pro appears, and only because a logo is a drawing, not text. The site's own header sets the name in live SF Pro. Regenerate the files with python3 brand/build-logo.py.

Two marks, on purpose. At 32px the ring goes fragile and the canopy layers collapse into noise, so small sizes drop the ring and let the tree fill the frame. We checked that by magnifying a 16px render, not by assuming it scaled. The site's own header sets the mark at 30px and therefore uses the small one, not the full mark shrunk: a rule the studio publishes and then breaks on its own homepage is not a rule.

The small mark comes with a navy tile and without. The tile is for a favicon, which lands on browser chrome of unknown colour and has to bring its own ground. Anywhere the background is already known, like the nav or a dark deck, use the transparent one. The tile shows up as a patch of not-quite-matching navy.

• Clear space. At least the radius of the ring on every side. It's a circular mark and it suffocates faster than a square one.
• Never recolour the tree, stretch the circle to an oval, add a shadow, or place the full mark on a busy photograph. On imagery, use the navy small mark.
• Minimum size. Full mark 48px, small mark 16px.

Aruban light, technical structure. The ground is warm and sun-bleached like limestone at midday. The accent is the deep blue of the flag, not the turquoise gradient every Caribbean business defaults to. Structure is visible in the hairline rules, the grid and the monospace annotations, because the work is engineering and the design should say so before the copy does.

The tension is deliberate: an island studio that ships to app stores. Warm light says where we are; the grid says what we can do.

Ten tokens, every one taken from or derived from the mark. The neutral ramp is the logo navy mixed toward the logo cream, so every grey carries a trace of the brand and is not an imported neutral. Ratios are measured, not estimated, and verified in CI.

The one rule that matters. The logo amber is 1.49:1 on cream, so it can't carry text at any size. It is the ring, large graphic shapes, and marks on navy. Anything with words in it uses --amber-deep. This is the constraint people break first, because amber is the colour they remember from the logo.

Beyond that: one accent per page, and --sea carries every link. Dark mode grounds in the navy, not a neutral black, so the brand survives the theme switch, and amber needs no darkened variant there because it has 9.6:1 against a dark ground.

One family, Apple's own. SF Pro sets every word, in two cuts: Display for headlines and anything 20px or larger, Text for reading sizes, the way apple.com pairs them. It comes from the visitor's iPhone or Mac, so there's nothing to download and nothing jumps while the page loads. Windows and Android show Helvetica or Arial in its place. SF Mono carries the technical labels on this page.

Until 31 October the site set its headlines in Bodoni Moda and its running text in Archivo, both served from this repo. The studio's rule is SF Pro on everything it makes, because any other face reads as a template, so both were retired and their files deleted. Apple's licence doesn't allow SF Pro to be hosted as a webfont, which is why the stack names the system font and never loads a file.

Weight and tracking do the work. Headlines are 600, with the tracking pulled in as the size grows: −0.034em at hero size, −0.03em for section titles, close to zero by 24px. Body is 400 at 17px on a 1.5 line. Buttons and links are 500. Three weights a page, never more.

A 4px base. Every margin in the system is one of these steps. Arbitrary values are how a layout starts looking accidental, and the difference is visible even to people who cannot name it.

The handful that appear on every client site. All of them live in tokens.css. Nothing below is styled by this page.

How the studio writes. The test: would you say this out loud to a restaurant owner across a table? If not, rewrite it.

No em dashes. Nobody reaches for one out loud or in a quick email, so a page full of them reads as written by something that doesn't talk to people. Use a full stop, a comma, or two sentences. This page had twenty and the homepage had five, which is how the rule came to exist.

Contract your verbs. "Your POS and your website probably do not share data" is not a sentence anyone says. It was on the homepage, next to "we have been through both review processes" and "tell us what you are building". No contractions anywhere is the loudest tell there is, louder than any single word choice.

Both are enforced by brand/check-voice.py, which runs in CI beside the contrast check and for the same reason: this page claimed a standard the site did not meet, and nobody caught it by reading.

• Plain words. "We build" not "we architect". "Price" not "investment".
• Numbers over adjectives. "Fifteen artworks, four languages" beats "rich multilingual experience".
• Say the cost. Published prices filter out people who were never going to pay.
• Admit limits. "AR is quoted per project" is more credible than a made-up range.
• Never invent proof. No client we have not worked with, no metric we have not measured. An empty slot beats a fabricated one.

This is the part that makes the studio faster over time. A client project overrides three tokens and inherits everything else.

<link rel="stylesheet" href="tokens.css">
<style>
  :root {
    --sea:    #C8452E;   /* client accent  */
    --ground: #FBFAF8;   /* client ground  */
    --ink:    #1A1A1A;   /* client text    */
  }
</style>

• Run python3 check-contrast.py against the client's colours before building. If their brand blue fails on their brand cream, better to raise it in week one than at handover.
• Style only with var(--…). A literal hex in a client stylesheet is a future bug. It won't follow a rebrand and it won't respond to dark mode.
• Keep the semantic aliases. Write var(--link), not var(--sea), so swapping an accent does not require reading every rule.
• The third site should take a fraction of the first. If it does not, the system is not being used. That's the signal to fix it, not to abandon it.