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 carries its own font. Bodoni Moda is embedded in each lockup 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. That costs about 60 KB per file, which is why the lockups are for handing out and the site's own header sets the name in live HTML instead. Regenerate them 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.

Three faces, three jobs. Bodoni Moda is the display face: high contrast, fine hairlines, and enough character to be recognisable at a glance, which is the whole point of one. Archivo is a workhorse that stays readable at 17px on a phone in sunlight, which is where most of this work gets read. IBM Plex Mono carries anything technical: labels, specs, prices.

This page said Bricolage Grotesque until recently, and loaded it, while the homepage set every heading in Bodoni and never loaded Bricolage at all. The design system and the shipped site disagreed about what the studio's face is. The site is what clients see, so the site won.

Bodoni needs size. Its thin strokes thicken and thin across a single letter, which is what makes it beautiful at 60px and mushy at 15px. Use it for display only: headlines, section titles, the lockup. Below roughly 20px, or anywhere the text has to be read instead of seen, use Archivo. A weight of 500 is the ceiling. Heavier fills the counters in and the elegance goes.

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.