Brand Book

The premise

A brand book is usually a colour chart with opinions attached. This one starts from a measurement, because the measurement turned out to be the whole system.

The gold in the mark and the beige it sits on are not two colours that happen to go together. Converted to Oklch, they share a hue to within a fifth of a degree: the gold sits at 81.57 degrees and the beige at 81.78 degrees. They are the same colour at different lightness and chroma. Metal and paper, one hue.

So every neutral in the product is built on that one hue at twelve lightness steps. Nothing is grey. Nothing is imported. A card, a table rule, a disabled label and the logo are all relatives, which is why the interface can look like the identity without ever repeating it.

Two caveats, stated rather than buried. The lightness steps are not evenly spaced: they are deliberately compressed at both ends so the palest steps stay paper and the darkest stay ink. And at the top of the ramp, where chroma is under 0.015, eight-bit rounding moves the hue by a few degrees. Neither is visible. Both are in the source.

Everything downstream of that is restraint: one typeface, two corner radii, one border width, two durations. The character comes from the mark and from the warmth of the ramp. The interface itself gets out of the way.

The mark

One continuous ECG trace running a single cardiac cycle. P wave in from the left, the S of Samora sitting where the PR segment runs, QRS complex out to the right. Both tails run into the ring.

Behaviour at size

Rules

Construction, for reference

Colour

Twelve neutrals on one hue, four status colours rotated off the gold, and nothing else. There is no blue in this brand unless it is carrying information, and even then it is desaturated to the point of being a slate.

The sand ramp

sand 10 is the brand beige exactly. That is not a coincidence, it is the anchor the ramp was solved around.

Roles

Always use the role, never the ramp step. The role is what makes light and dark mode a single decision instead of two stylesheets.

Status

Olive for verified, the brand gold for partial, terracotta for risk. Each is a rotation off the gold's own hue rather than a colour borrowed from somewhere else, which is why they sit on the beige without arguing with it.

Contrast, measured

Every pairing below is computed, not assumed, and the build fails if any row fails. Two of these are worth pointing at. The filled gold button is measured against --c-accent-solid rather than --c-accent, because the display gold only manages 3.1:1 behind text and cannot be a button. And each status colour is measured against its own ten percent wash rather than the bare card, because the wash is what the text actually sits on. Measuring against the card overstates every one of them.

Typography

One family: Archivo. It carries the wordmark, the product and print. Three weights are loaded, so three weights are all that can be used.

Archivo is a grotesque drawn for high performance at small sizes, with unambiguous figures and a real tabular set. That matters more here than in most products, because Samora is mostly numbers in columns. It is also not one of the faces that ships as a framework default, which is half the reason an interface reads as generic.

The scale

Rules

Space, radius, line

A 4px grid, eight steps, no exceptions. Two corner radii. One border width. This is the part of the system that most changes how deliberate a product feels.

Elevation

Two levels, both nearly invisible, both tinted with the ink rather than pure black. Shadows are for things that genuinely float. A card does not float.

Motion

Two durations, one curve, and a named property every time.

/* wrong */
transition: all 0.2s;

/* right */
transition: background-color var(--dur-fast) var(--ease),
            border-color var(--dur-fast) var(--ease);

The fast duration belongs to hover, focus and colour. The slow one belongs to things that enter and leave, which in this system is exactly one component: .pop, used for menus and dialogs. If a third duration seems necessary, the interaction is wrong, not the scale.

Everything respects prefers-reduced-motion. That is handled once in the token file, so no component has to think about it.

Components

Live, not pictures. Everything below is rendered by the same token file you will paste into the product, so what you see here is what ships.

The ten rules

If you only read one section, read this one. These are the decisions that separate a product that looks authored from one that looks assembled.

Voice

Samora sells certainty about numbers. The writing should sound like someone who has already checked.

Specific over enthusiastic. A count, a date, a name. Never a promise, never an exclamation mark, never an apology dressed up as a mascot. When something fails, say what failed and what the user is looking at instead.

House rules

How to adopt this

The token file does most of the work. The rest is deletion.

1. Load Archivo at 400, 500 and 600. Nothing else.
2. Paste samora-tokens.css in place of the current :root block and the light and dark overrides.
3. Run the mapping table below and replace every old variable.
4. No emoji in the markup. Where an icon is needed, draw one; where it is not, use a word.
5. No colour literal outside the token file. A stray # or rgba( is a bug.
6. No transition:all. Name the properties you animate.
7. Every border-radius is var(--r-sm) or var(--r-md).

Variable mapping

Icons

Emoji come out. In their place, use a single stroke set at 1.5px on a 20px grid so the icons carry the same line weight as the ECG trace. Phosphor Icons at regular weight is a good fit and is MIT licensed. Avoid Lucide: it is the default that ships with the component library everyone recognises, which puts you back where you started.

Files