Brand and interface kit · version 5
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 · Foundation
The three lines, and the only ground truth.
Everything else is downstream of these. They are stated verbatim and are never paraphrased.
- Purpose
- Amplify human excellence.
- Vision
- A world where artificial intelligence serves human excellence.
- Mission
- Building intelligent systems that amplify human excellence.
ARK360 is a one-person Sydney studio building private AI systems for legal, property, medical and retail businesses. The purpose, vision and mission are built into the work rather than stated beside it, which is why this document sits on the same site and reads the same tokens.
The idea is simple. A person stays in command, and an intelligent system extends what they can do. That is what amplification means here, and it is the test every build must pass.
The principle
Amplify human excellence. Your data. Your systems. Your authority. The person stays in command.
02 · Voice and tone
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
- Sentence case, plain verbs, one job per sentence. Concrete nouns. If a claim needs a qualifier to survive scrutiny, the qualifier goes in the same sentence rather than a footnote.
- Plain and exact
- Clear, confident, plain Australian English. ARK360 is a one-person Sydney studio building private AI systems for Australian legal, property, medical and retail businesses, and the copy may use we where that is true of the studio. Every claim must be exactly true today.
- Amplify, never replace
- The framing is always that a person becomes more capable. Any wording that promises to remove a role, shrink a team or take a human out of the loop describes a different product than this one.
- Claims exactly true
- Where a claim needs a caveat to be true, the conservative version is the one that ships. Prior work is labelled as employed or contract work and never as ARK360 client work.
- Nothing acts unattended
- The product does not send, post or commit on anyone's behalf without a person releasing it, so the copy never suggests it might. Authority language is always bounded, auditable and role-scoped.
- Punctuation and spelling
- Middots separate. En dashes mark ranges. Never an em dash. Australian spelling throughout: judgement, colour, organised, artefact.
- No money figure under early access
- Access is early access to a local kit on a box in the customer's office, selective and not a self-serve buy, and it carries no price. The v2.2 package and Care figures and the support term that followed them are retired everywhere on the site, so no dollar appears on any page or in the citation copy. Support is available after the first install, and that is the whole of what the site says about it. Microsoft Azure in an Australian region is an option inside the path, quoted separately, and never a brand the kit is sold on. The public label is the residency, the region the tenancy sits in, not a nickname for the cloud.
- One door, in full
- The primary action everywhere is Book a fit call, the whole string, on the hero, the header, the mobile bar, the forms, the industry pages and the closing band. It is never shortened to fit, and the gate fails a shortened label on any link or button. The second door is Join early access, which lands on the Access page, and the third is Email.
The test
Read the sentence back. If it could not be said to an operator's face, with the build open on the table, it does not ship.
The printed guide sets these rules beside examples of the vocabulary to avoid. Those examples are not reproduced here, because the same gate that reads every other page reads this one: printing the banned words to illustrate the ban would fail the build. That is the rule demonstrating itself.
03 · Logo system
One mark, three lockups.
A rounded hexagon split into six segments, a complete all-around view of a system. It sits beside the wordmark, a bold ARK and a light teal 360, set in Inter.
Horizontal · primary
Horizontal · reversed
Mark alone
- Clear space
- A quarter of the mark height on all sides, and never less.
- Minimum sizes
- Mark 24px or 7mm. Horizontal lockup 110px or 30mm. Stacked 64px or 18mm.
- Never
- Do not stretch, skew or rotate. Do not recolour beyond the two colourways. Do not place on an off-brand ground. Do not substitute the typeface. Never redraw the mark: export from the master vector.
04 · Colour and accessibility
Navy carries the weight.
Teal is the single accent, spent once per composition. Everything else stays quiet, so every asset looks correct printed in a single colour.
Navy
- Navy 900--color-navy-900
- The deepest ground. Not button text: the filled button is white on Teal Ink, and navy on teal measures 3.55 to 1
- ARK Navy--color-navy-800
- The brand navy. Weight, trust and chrome: the hero, the closing band, the footer
- Navy 700--color-navy-700
- Rules and dividers on navy
- Navy 600--color-navy-600
- Diagram fills and raised surfaces on navy
- Navy 500--color-navy-500
- A mid navy that carries text on light
- Navy 100--color-navy-100
- Strong text on navy: the deck, the eyebrow and links
- Navy 200--color-navy-200
- Body copy and meta on navy: the footer descriptor, headings and captions
- Navy 400--color-navy-400
- Non-text only. Measures 4.59 to 1 on navy, which clears AA by 0.09 and reads washed at 10 to 13px, and the gate refuses it on any text
Teal
- Teal Ink--color-teal-700
- Teal text, eyebrows and links on white or wash, and the filled button. Never on navy, where it measures 3.16 to 1, and never on Panel, for the reason set out below
- ARK Teal--color-teal-500
- The single accent, spent once per composition. Decorative on white; on navy it carries text
- Teal 400--color-teal-400
- Emphasis and hover on navy
- Cyan Bright--color-teal-300
- Links on navy, and the 360 in the reversed wordmark
- Teal 050--color-teal-050
- Hover wash on light surfaces
Neutral and ink
- White--color-paper
- Section ground, odd steps
- Wash--color-surface
- Every alternating band, and the ground of panels and callouts. The page ground is Paper
- Panel--color-panel
- Declared, and currently applied to nothing. Kept because the prohibition below is the reason it is not used casually. Until v5 this swatch rendered transparent: a token no utility referenced was dropped from the built CSS, so the page that exists to read live tokens was reading a missing one. Every token is emitted now, used or not
- Hairline--color-line
- Every rule and divider
- Rule--color-line-strong
- Form field borders and table heads
- Ink 900--color-ink-900
- Headings
- Ink--color-ink-700
- Body copy
- Muted--color-ink-500
- Secondary text, captions, metadata
- Ink 400--color-ink-400
- Non-text only. Measures 3.03 to 1 and the gate refuses it on any text
Measured contrast
| Pair | Ratio | Level | Use |
|---|---|---|---|
| Ink on white | 11.5:1 | AAA | Body copy on light surfaces |
| Ink on Panel | 10.2:1 | AAA | Body copy inside a panel |
| ARK Navy on white | 15.9:1 | AAA | Headings and the wordmark |
| White on ARK Navy | 15.9:1 | AAA | Body and headings on navy |
| Navy 100 on ARK Navy | 10.4:1 | AAA | The deck, the eyebrow and the nav on navy |
| Navy 200 on ARK Navy | 8.0:1 | AAA | Footer meta: headings, captions, the attribution |
| Muted on white | 5.6:1 | AA | Secondary text, captions, metadata |
| Muted on Panel | 4.95:1 | AA | The smallest safe type on a panel |
| Teal Ink on white | 5.0:1 | AA | Links and eyebrows at any size |
| Teal Ink on Wash | 4.8:1 | AA | Links and eyebrows on a washed band |
| Teal Ink on Panel | 4.5:1 | prohibited | Measures below AA before rounding. Teal type never sits on Panel |
| ARK Teal on ARK Navy | 5.6:1 | AA | Accents and text on navy |
| Cyan Bright on ARK Navy | 7.9:1 | AAA | Links on navy |
| Navy 400 on ARK Navy | 4.59:1 | prohibited | Non-text only. Clears AA by 0.09 and shipped on 10px footer meta, which is where it read washed |
| Teal Ink on ARK Navy | 3.16:1 | prohibited | Below AA. Eyebrows on navy are Navy 100; links on navy are Cyan Bright |
| ARK Teal on white | 2.8:1 | decorative | Rules, middots and marks. Never type |
| Ink 400 on white | 3.03:1 | prohibited | Non-text only. This one shipped on a label and axe found it |
The rules, and the three prohibitions
Body copy is ink on white, or white on navy. ARK Teal on navy carries text. ARK Teal on white is decorative only: rules, middots and marks, never type. Solid teal buttons use Teal Ink with white text.
Teal type never sits on Panel. The pairing measures 4.47 to 1 and falls just under the 4.5 that AA requires for normal text, which makes it the most dangerous combination in the palette: it looks right, it reads right, and it fails. Panel is a container ground. Text on it is ink or muted, both of which clear AA comfortably.
Ink 400 is never type either, and that one is not theoretical. It shipped on an 11px label on the platform page at 3.03 to 1, and the token's own comment had said decorative only for weeks beforehand. A comment is not a control, so the content gate now fails the build if the class appears on any text at all.
Navy 400 joined it in September 2026. It clears AA on navy by 0.09 and sat on the footer headings, captions and attribution at 10 to 13px, where a designer read it as washed. The near miss that looks correct is the one worth a rule, so the gate refuses it on text too. All three prohibitions are machine-checked rather than remembered.
05 · Functional colour
Four roles. Teal is not one of them.
Success, warn, danger and info, each on three steps, each measured on every ground the site uses. Teal is the brand accent, spent once per composition, and a teal tick or a teal warning would spend it on a job that is not the brand's.
- Success Ink--color-success-700
- Text on paper (6.49 to 1) and wash (6.15). Never on navy, where it measures 2.46
- Success--color-success-500
- Marks and borders on light; text and marks on navy (5.48). Never type on light at 2.91
- Success tint--color-success-050
- The ground under a success message. Text on it is ink (10.23) or Success Ink (5.78)
- Warn Ink--color-warn-700
- Text on paper (6.04) and wash (5.72). Never on navy, where it measures 2.64
- Warn--color-warn-500
- Marks and borders on light; text and marks on navy (6.01). Never type on light at 2.65
- Warn tint--color-warn-050
- The ground under a warning. Text on it is ink (10.71) or Warn Ink (5.63)
- Danger Ink--color-danger-700
- Text on paper (5.13), wash (4.86) and panel (4.56). Never on navy (3.10), and never on its own tint, where it measures 4.48 and fails AA by 0.02
- Danger--color-danger-600
- The v4 Error red, and what the --color-error alias reads. Borders and marks. 4.63 on paper clears AA and 4.38 on wash does not, so it never carries type
- Danger mark--color-danger-500
- Marks and borders on light; text and marks on navy (5.23). Never type on light at 3.05
- Danger tint--color-danger-050
- The ground under a failure message. Text on it is ink (10.03), with a Danger or Danger mark border. Danger Ink does not sit on it
- Info Ink--color-info-700
- Text on paper (6.86) and wash (6.49). Never on navy, where it measures 2.32. Blue, so an information note is never mistaken for the brand accent
- Info--color-info-500
- Marks and borders on light. On navy it measures 4.57, which clears AA by 0.07, so it is marks and large type there and body text stays white
- Info tint--color-info-050
- The ground under an information note. Text on it is ink (10.05) or Info Ink (6.00)
Use matrix
| Role | On paper and wash | On navy |
|---|---|---|
| Success | Text: Success Ink. Mark and border: Success. Ground: Success tint | Text and mark: Success (5.48). No tint on navy |
| Warn | Text: Warn Ink. Mark and border: Warn. Ground: Warn tint | Text and mark: Warn (6.01). No tint on navy |
| Danger | Text: Danger Ink, on paper or wash, never on the tint. Mark and border: Danger or Danger mark. Ground: Danger tint, carrying ink text | Text and mark: Danger mark (5.23). No tint on navy |
| Info | Text: Info Ink. Mark and border: Info. Ground: Info tint | Marks and large type: Info (4.57). Body text stays white. No tint on navy |
| Teal | Never a status colour. Eyebrows, links and the filled button, spent once per composition | Never a status colour. Cyan Bright for links, ARK Teal for the one accent |
On their tints
Success
Sent. Your fit call request is in.
Warn
A fit has not opened yet. We will tell you when one does.
Danger
That did not send. Email instead and it will be read just the same.
Info
The kit runs on the box in your office. You decide what leaves.
Two near misses, recorded
Danger Ink on Danger tint measures 4.48 to 1, under AA by 0.02. It is Teal Ink on Panel in a second hue: it looks right, reads right and fails. So the tint carries ink text with a danger border, and Danger Ink sits on paper or wash. The specimens above do exactly that, for every role, so the four cannot be told apart by their type and do not need to be: the border and the words carry the meaning.
Info on navy measures 4.57 to 1, which clears AA by 0.07. Under the rule that retired Navy 400 from text, that is marks and large type on navy, and body text there stays white. Blue rather than teal for this role is not taste: an information note in the brand accent would read as the brand speaking, and the accent has one job.
06 · Typography
Two typefaces, strict jobs.
Inter carries meaning, and weight does the expressive work. JetBrains Mono carries metadata: dates, tags, tokens and small-caps section labels. Never mono for body copy.
Display · Inter 800
Private AI systems you own.
Body · Inter 400
The system carries the coordination load; the person keeps the judgement.
- Display
- Inter 800 · -0.035em
- The page heading
- Heading
- Inter 700 · -0.02em
- Section headings
- Subheading
- Inter 600 · -0.015em
- Card and row headings
- Body
- Inter 400 · line height 1.6
- Every sentence
- Label
- Mono 500 · 0.14em · caps
- Eyebrows and readouts, Teal Ink on light and Navy 100 on navy
- 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
- Lede--text-lede
- The quick brown fox
- The home hero lede, the doctrine, and pull quotes. Section renders its own lede at body size
- Subheading--text-h3
- The quick brown fox
- Card and row headings
- Heading small--text-h2-sm
- The quick brown fox
- Every section heading at base width, stepping up to Heading from md
- Heading--text-h2
- The quick brown fox
- Section headings from md
- Display xs--text-display-xs
- The quick brown fox
- Every page h1 at base width, stepping up to Display small from md
- Display small--text-display-sm
- The quick brown fox
- Page headings from md, including the home hero at that width
- Display--text-display
- The quick brown fox
- The home hero headline from lg
07 · Motion and density
Three durations, two densities, one rule.
Motion is decoration and decoration never gates content. The durations are custom properties, so a component that uses one needs no reduced-motion rule of its own: the media query collapses all three.
- --duration-instant
- 80ms
- Hover and focus colour. Anything a pointer expects to have already happened
- --duration-quick
- 180ms
- A reveal the reader caused: the mobile menu, a status message, the mobile bar stepping aside
- --duration-base
- 320ms
- Anything that moves position. Nothing on the site is slower than this
Under prefers-reduced-motion every duration on the site, token or not, becomes 0.01ms and scroll behaviour becomes instant. Nothing is hidden until it is seen: no scroll-triggered reveal exists here, for the reason section 09 records.
Console density
| Token | Comfortable | Compact | Use |
|---|---|---|---|
| --density-row | 44px | 32px | Minimum row height in a list or table. Comfortable is the pointer target minimum |
| --density-gap | 16px | 8px | Space between controls |
| --density-cell-x | 16px | 12px | Horizontal cell padding |
| --density-cell-y | 12px | 6px | Vertical cell padding |
Comfortable is the default and the site renders nothing else. A console built on this kit switches by setting data-density to compact on an ancestor, so the two surfaces share one definition of what compact means rather than each keeping its own.
08 · Imagery
Nothing that makes a claim the copy cannot.
The site has no photograph and no screenshot today, and that is correct until there is a real one. What is banned is listed first, because each entry is offered to a site like this every week.
Never
- Neon AI gradients
- Glowing gradients, sparkles and light trails. They say magic, and the product is a system a person runs.
- Robot and neural-net stock
- Humanoid robots, glowing brains, node-and-edge networks. None of them is what is installed.
- Purple mesh
- The violet-to-blue mesh every AI launch page shipped in the same year. It is another company's brand, and it is not in the palette.
- Glass that fails contrast
- Frosted panels and translucent cards over busy grounds. The type on them cannot be measured, so it cannot pass.
- Fantasy dashboards
- Invented consoles, charts with no data behind them, and any screen of a feature that is not shipped. A screenshot is a claim.
- Decorative animation that costs the first paint
- Looping vector animation, video backgrounds and anything that delays the largest contentful paint to decorate a page.
- Fake customer logos
- Logo walls, greyed placeholders that read as logos, and any mark of a company that has not agreed to be named. The customer slot on the home page is empty and says so.
- Affiliation marks
- Supplier, platform, cloud, hardware or chip-maker logos. Each reads as an endorsement or a relationship the studio does not claim, and the offer is described without any of them.
Preferred, in this order
- Real interface crops
- A crop of a shipped screen, at the size it is read, with the content it actually holds. Only once there is one.
- Ruled diagrams
- Hairlines, cells and mono labels, drawn from the mark and the page's own words. The hero frame is the reference.
- Sparse Australian field photography
- Secondary only, rights-cleared, of the places the work happens: a site, a building, a walk. Never a stock model at a laptop.
Text is never rasterised. Anything that reads is HTML, so it is selectable, responsive and read aloud. Every resource loads from this origin, and the gate fails one that does not.
09 · Layout
One container, and rules instead of cards.
The layout is deliberately plain. On a site whose argument is that claims should be checkable, a busy page reads as something covering for thin evidence.
- One container, one rhythm
- An 1180px container with a 24px gutter, so 1132px of content, and a 64px to 96px vertical rhythm. Every section on every page uses both. This line said 1100px for months while ProductShot, four files away, derived 1132px from the real value and said so.
- Rules, not cards
- A ruled two-column list is the default way to show a set of things. Cards are for genuinely parallel choices only: the four roles, the four niches, the stages of a diagram. Equal cards imply equal weight, and the things being listed are rarely equal. This line claimed at most twice across the whole site, which was never true and is not the useful rule.
- Navy is chrome and bookends
- On the home page: the header, the hero, the closing band and the footer. Elsewhere the header is paper and only the footer is navy. Everything between alternates white and wash, which is the only vertical separator the design uses.
- Teal does three jobs
- Teal Ink for eyebrows and links on light, Cyan Bright for links on navy, and Teal Ink again for the filled button. Eyebrows on navy are Navy 100 and the proof strips are white: at 10 and 11px mono the brighter neutral reads, and Teal Ink on navy measures 3.16 to 1. ARK Teal is decorative on light at 2.83 to 1 and never carries type there. Teal is never a status colour: a tick, a warning, a failure or a note takes its hue from the functional palette, and the gate fails a teal class on any status or alert element.
- One filled button per view
- Not one per site, and held at every width. Below lg the fixed mobile bar carries the page's filled button, so the hero primary on the home and access pages steps down to a hairline on navy there and fills from lg, where the bar is gone and the header's copy of the door is a text link. The bar steps aside while the enquiry form it points at is on screen, because the form's own submit is the filled button in that view. At 1280 there is one filled button in view: white on Teal Ink.
- The base layer does the typography
- Pages set sizes and nothing else. The family, the weight, the tracking and the heading colour all come from one element rule, so a heading cannot be styled inconsistently by accident. The display specimen below is the one deliberate exception: it is a paragraph pretending to be a heading, so it has to say so in full.
- Nothing hides until it is seen
- No scroll-triggered reveal. An earlier build hid every section until an observer reported it, and a fast scroll or a restored position skipped elements the observer never reported, so whole sections stayed blank. Motion is decoration and decoration never gates content.
10 · Applications
Locate the line, then stay out of the way.
Navy field, mark-derived texture, inverse logo, one teal accent. Each application takes its line from the placement table below and adds nothing of its own.
- Personal banner
- 1584 by 396. Navy field, mark-derived texture, text right of centre, inverse logo, one teal accent. Variants carry the purpose, the mission, or nothing at all.
- Company banner
- 1128 by 191. The position line and the inverse logo, and nothing else competing with them.
- Email signature
- 1200 by 200 at double density, with a hairline teal rule under the wordmark and the purpose set in mono caps.
- Share card
- 1200 by 630. Navy field, the mark bottom right, the domain in mono. One card per route, each carrying that page's own headline rather than a single brand line, so a shared link describes the page somebody is actually sharing.
- Document band
- A header and footer band, logo flush with no white edge, so a printed page is recognisable from across a desk.
- Hero frame
- The home hero carries a ruled system diagram in place of any illustration: two cells, a person and the system carrying the real mark, the one teal rule between them where a person reviews what leaves, and Map, Build and Hand over beneath, the same three words the page locks. Hairlines on navy, text that is text, no raster, no price and no feature that is not shipped. The gate holds the frame to exactly one teal class and no image.
- Early access surfaces
- Every filled call to action on the site is Book a fit call, the full string with no short form, and lands on the enquiry form, which is the fit call request and the early access application. The header, the hero, the closing band and the form submit all carry it. Below lg a bar fixed to the bottom edge carries the page's one filled button where a thumb reaches, with the early access microcopy beside it from sm and the home indicator inset padded under it. It does not hide on scroll. It steps aside only while the form it points at is on screen. No surface carries a money figure under early access, and the brand guide is the one route without the bar.
- Access path
- One ruled block on the home page, the industry pages and the access page: the status, the title Early access · local kit, the body, and the facts beside it. Not two package cards, and Microsoft Azure in an Australian region is a fact inside the block, never a second card. Equal cards say equal choices, and there is one way in. Under it the soft line offers a 20-minute fit call by email, and on the access page Care is a footnote, paused until the first kit is live, never a second card.
- Trust strip
- Above the enquiry form on the home page, in the order a reader can check it: the principle, who builds it stated as a one-person Sydney studio, and a customer slot that is empty and says why. The slot fills only when an install is live and that customer agrees to be named. It is designed as an empty state, not padded with placeholders, and the gate fails an image inside it.
- Status and messages
- The enquiry form's sent and failed messages are Success Ink and Danger Ink on the wash they sit on. A status, an alert, a badge or a note takes its colour from the functional palette in section 05, on the step the use matrix names for its ground, and never from teal.
- Product interface
- A screen of an installed system inherits these tokens and carries this mark, at the density step the console tokens define. None is shown on this site today. A screenshot stands in for a claim only when it is a real crop of a shipped screen a customer runs, and the first install has not happened, so the imagery rules in section 08 hold until it has.
11 · Line placement rules
One line per surface.
This is the page that stops drift. Every asset locates its own line here, without a decision. If an asset cannot find its line in this table, it does not carry one.
- HeadlinePrivate AI systems you own.
- The home page h1, the home share card, and the slogan in structured data. It never names ARK360; the wordmark does that
- DeckLocal business AI for legal, property, medical, and retail SMBs. On a box in your office, with optional Microsoft Azure cloud tenancy in an Australian region when you need more.
- The home hero deck, locked word for word, and never naming ARK360
- PurposeAmplify human excellence.
- Brand banners, document header bands, social cards
- MissionBuilding intelligent systems that amplify human excellence.
- Supporting copy and sublines
- VisionA world where artificial intelligence serves human excellence.
- Long-form only: the About page and this one
- PrincipleAmplify human excellence. Your data. Your systems. Your authority. The person stays in command.
- The home principle strip and the footer proof strip
- DescriptorARK360 builds, installs and hands over a private AI system for Australian legal, property, medical and retail businesses, on a box in your office. You own it. A person stays in command.
- The default metadata description, the organisation record in structured data and the footer on every route. The home page carries its own description, ending on the fit call
The purpose is never a subline; the mission is never a tagline. Retired phrases, claims of affiliation and hype vocabulary do not return under any heading. Version 4 was reconciled to Foundation V4 in August 2026 and dropped the studio-era material that described ARK360 as a consulting practice. Version 5, September 2026, is a continuity refresh and not a rebrand: the mark, the two typefaces, navy and teal are unchanged, and it adds the functional palette, the motion and density tokens, the imagery rules and the early access applications, with the gate extended to hold each of them.