Brand and interface kit
One system, rendered from itself.
Every swatch and every type step on this page reads the live token the rest of the site uses. Nothing here is transcribed, so this document cannot quietly stop being true.
01 · Foundations
Amplify human excellence.
The foundations come first because everything else is downstream of them. They are stated verbatim and are not paraphrased anywhere on the site.
- Purpose
- Amplify human excellence.
- Vision
- A world where intelligence carries the load and people do what matters most.
- Mission
- Build trusted AI on the Microsoft platform that makes people more capable.
- The measure
- Did this make the person more capable?
Positioning
ARK360. Amplified teams for the built environment.
An agentic studio building trusted AI systems for property and construction teams. The client owns the tenancy and the data. A human is always in command.
02 · Voice
Say it plainly, and mean it.
These are enforced by the build rather than remembered. A page that breaks one of them fails the content gate and does not ship.
Say it plainly
Short sentences. Concrete nouns. If a claim needs a qualifier to survive scrutiny, the qualifier goes in the same sentence rather than a footnote.
First person singular
This is one practice, so it speaks as one person throughout. A plural voice on a solo practice is the first small untruth, and it makes every later claim cheaper.
No superlatives, no market firsts
The vocabulary of hype is banned outright, and so is any claim to be earliest or sole in a market. Those words cannot be verified by the reader, so to the reader who matters they carry no information at all.
Claims exactly true
Alignment with Microsoft is never affiliation. Prior work is labelled as employed or contract work. BTR OS is always a reference build with no paying customers and no live operators.
No prices on the page
Ranges on a page are read as quotes. The size and shape of the work vary enough that a number without a conversation is either meaningless or misleading.
03 · Logo system
One mark, three lockups.
The hexagon is defined once in the document and every instance references it, so a page with several marks does not repeat the path data.
Dark, on light
Light, on navy
Mark alone
04 · Colour
Navy carries the weight.
Navy for ground and chrome, teal as the single accent doing exactly three jobs, neutrals for everything else. The functional colours exist in the tokens and are deliberately unused.
Navy
- Navy 900--color-navy-900
- Deepest ground, button text on teal
- Navy 800--color-navy-800
- The brand navy. Hero, closing band, footer
- Navy 700--color-navy-700
- Rules and dividers on navy
- Navy 100--color-navy-100
- Strong text on navy
- Navy 200--color-navy-200
- Body copy on navy
- Navy 400--color-navy-400
- Faint meta on navy
Teal
- Teal Ink--color-teal-700
- Teal text and links on light. Passes AA at small sizes
- ARK Teal--color-teal-500
- The core accent. Exactly one filled button
- Cyan Bright--color-teal-300
- Eyebrows and icons on navy only
- Teal 050--color-teal-050
- Hover wash on light surfaces
Neutral and ink
- Paper--color-paper
- Section background, odd steps
- Surface--color-surface
- Section background, even steps
- Line--color-line
- Every rule and divider
- Ink 900--color-ink-900
- Headings
- Ink 700--color-ink-700
- Body
- Ink 500--color-ink-500
- Muted body, ledes
05 · Typography
Serif for headings, Inter for meaning, mono for metadata.
Headings carry a restrained serif at one weight. Body and interface are Inter. JetBrains Mono carries the technical readout voice: eyebrows, labels and anything that reads as a value rather than a sentence.
Heading · serif 600
Amplified teams for the built environment
Body · Inter 400
Coordination is where the week goes. Most of it is not the work anyone was hired to do, and none of it is the work anyone is promoted for.
- Micro--text-micro
- The quick brown fox
- Faintest mono meta
- Label--text-label
- The quick brown fox
- Eyebrows, tags, status labels
- Caption--text-caption
- The quick brown fox
- Secondary meta
- Body small--text-body-sm
- The quick brown fox
- Card body, footnotes
- Body--text-body
- The quick brown fox
- Primary body copy
06 · The brand applied
Rules, not cards.
The layout rules matter more than the palette. Equal cards imply equal weight, and the things being listed are rarely equal, so the default is a ruled row.
One container, one rhythm
A 1100px container with a 24px gutter, and a 64px to 96px vertical rhythm. Every section on every page uses both, without exception.
Rules, not cards
A ruled two-column list is the default way to show a set of things. Cards appear at most twice across the whole site, and only where the items are genuinely parallel choices.
Three navy bands at most
The hero on the home page, the closing band, and the footer. Everything between alternates paper and surface, which is the only vertical separator the design uses.
Teal does three jobs
Teal Ink for eyebrows and links on light, Cyan Bright for the same on navy, and ARK Teal for exactly one filled button. It is never decorative.
The base layer does the typography
Pages set sizes and nothing else. The serif family, the weight, the tracking and the heading colour all come from one element rule, so a heading cannot be styled inconsistently by accident.
07 · The four lines
What is true of every build.
The doctrine, verbatim. These are the lines the architecture has to keep, not aspirations about it.
- 01
The human is always in command.
- 02
Authority is delegated, bounded and auditable.
- 03
The system is grounded in how the person actually works.
- 04
Every interaction returns capability to the person.