Brand system — 2026
Connected
intelligent
together.
The rules that keep Sammes looking like Sammes. Everything here is implemented as design tokens, so the system and the website cannot drift apart.
01 — Logo
Primary, mark, lockup
Primary wordmark — ink. Inter Tight 800, tracking 0.18em.
Primary wordmark — paper. Reverse only on light fields.
The mark — four-leaf clover. Reads at 16 px.
The mark — ink. Four leaves also read as four linked nodes.
The mark on an accent field. One accent per composition.
Clear space
Keep a clear space equal to the height of the wordmark's capital S on every side. Never place type or imagery inside it.
Minimum size
Wordmark 24 px tall on screen. Mark 16 px. Below that, use the mark alone.
Never
Stretch, rotate, outline, add shadow, add gradient, or set the wordmark in another typeface. Do not place it on a busy photograph.
02 — Colour
Mono base · one accent per product
Rule 01
The base is always monochrome. Accents never carry body text.
Rule 02
One accent per composition. Accents only meet on the app index.
Rule 03
Body text must reach 4.5:1 contrast. Accents are for large text and graphics.
03 — Typography
Display · Editorial · Technical
Inter Tight — display & labels
100–900 variable
Connected
The giant wordmark, headlines and every micro-label. Tight tracking, heavy weights, uppercase for labels.
Newsreader — editorial
200–800 variable, incl. italic
Connectivity without intelligence is noise.
Manifestos, pull quotes and legal prose. Light weights, generous line height, italics for emphasis.
JetBrains Mono — technical
100–800 variable
58.888° N, 5.567° E — ORG 938 141 657
Coordinates, indices, dates and any notation that should read as machine output.
10 px · uppercase · 0.14em
11 px · uppercase · 0.08em
16–18 px · 1.55 line height
04 — Graphic elements
The connective tissue
Hairline rules
1 px rules divide every section, column and meta bar.
Crop bracket
Corner brackets frame images and diagrams.
Badges & buttons
Editorial chip
Typeset
inline imagery floats inside the measure.
Technical diagram
Crosshair and ring for technical callouts.
Grain
A fine film grain sits over photography and accent bands.
05 — Tokens
tokens.css
Everything above is defined once in
assets/css/tokens.css and consumed everywhere else. Change
a token, change the brand.
| Token | Value | Role |
|---|---|---|
--ink | #0B0B0C | Dark stage |
--paper | #F4F3EF | Light stage |
--connect | #1B2CFF | App 01 accent |
--intel | #C8FF3D | App 02 accent |
--social | #FF2D6B | App 03 accent |
--font-display | Inter Tight | Display and labels |
--font-serif | Newsreader | Editorial |
--font-mono | JetBrains Mono | Technical |
--fs-display | clamp(3.5rem, 1rem + 18vw, 20rem) | Hero wordmark |
--gutter | clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem) | Page gutters |