One system, rendered from itself.

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.

Success Ink--color-success-700

Text on paper (6.49 to 1) and wash (5.96). 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.55). 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) and wash (4.72). Never on Panel (4.20 on the v5.2 panel), 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.25 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.30). 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

On their tints

• Success

  Sent. You are on the waitlist.

• 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.

Durations

--dur-micro

120ms

Hover colour and a press. Anything a pointer expects to have already happened

--dur-fast

200ms

A lift, a tooltip, the mobile menu, the mobile bar stepping aside

--dur-base

320ms

A fade or a crossfade, a card or a mark entering with the page

--dur-slow

480ms

The hero product settle, and a section entrance sparingly. Nothing on the site runs longer, and nothing loops

Easings

--ease-out

cubic-bezier(0.16, 1, 0.3, 1)

An entrance or a settle: fast out of the gate, long and quiet at rest

--ease-inout

cubic-bezier(0.4, 0, 0.2, 1)

A change in place: hover, a colour, a shadow

--ease-in

cubic-bezier(0.4, 0, 1, 1)

An exit, which is always the shorter of the pair

The entrance

The rules

Opacity and transform only, and never on text

Nothing that moves position animates a layout property. A fade and a rise of 8px on the out easing is the entrance; the hero product settles from 0.96 to 1 over the slow step; a stagger between siblings is 60ms at most; a hover darkens or lifts and nothing more. Type is static: a picture, a mark or a swatch may enter, a word never does, because an accessibility pass that lands mid-fade reads the type against a half-transparent ground and fails a pairing that is fine at rest.

Once, with the page

Every entrance on the site plays once as the page paints and finishes at rest. No scroll-triggered reveal, no scroll-jack, no parallax stack, no bounce or spring, no autoplay video, no twenty-item stagger. Polish over spectacle.

Reduced motion is opacity-only

Under prefers-reduced-motion the rise and the scale collapse to rest, so the same keyframes play as a plain fade over the same duration; transitions keep colour and opacity and drop transform; scrolling is never smoothed. It is not no motion: a fade that becomes a flash cut reads as broken.

Console density

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.

Tiles, one idea each

Every band is a full-bleed tile (v5.1): paper and wash in turn since v5.2, separated by their ground and never by a hairline, with the vertical padding read from one token, 64px below md, 96px from md and 112px from lg. Content sits in an 1180px container with a 24px gutter, or at the 980px reading width when the tile is one heading and one paragraph. One idea per tile, more air than the page had before, and the heading centred over it.

Rules inside, tiles between

Inside a tile, a ruled list is still the default way to show a set of things, and equal cards imply equal weight, which is the point where the six are one story: the use cases on the home page are six equal paper cards with the hairline on the wash, three by two from lg, their commercial priority in the order and never in size. On the Product page the one product is raised, the add-on is flat and Care sits on Panel with no lift, one card to a tile, never a grid of hardware columns.

Navy is the accent

White and black carry the page (v5.2); teal and navy are the highlights. The header and the hero are paper, the closing band and the footer are the navy bookend, and between them the tiles alternate paper and wash with at most one navy tile where the page turns: the box band on the home page, How it works on the Product page. The gate counts navy sections inside main and fails a third, and fails a navy ground in the hero region. Eyebrows on navy are Navy 100, body copy on navy is Navy 100 or white, and Teal Ink never sits on it.

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. The hero primary on the home and Product pages is filled Teal Ink at every breakpoint, and the Calculator beside it is the one ghost: a teal hairline and Teal Ink text. It stepped down to an ink hairline below lg for a day so the fixed mobile bar could be the filled button there, and beside the teal ghost that put two secondary styles in one row. The bar moves instead: below lg it steps aside while the hero's pill row is on screen and comes back once the row has scrolled away, and it steps aside again while the waitlist form it points at is on screen, because the form's own submit is the filled button in that view. On the pages with no hero button the header carries the filled waitlist beside its text-link Book a call. At 1280 there is one filled button in view: white on Teal Ink.

Pills, in pairs

Every call to action is a pill (v5.1), and nothing else is, so a pill always means you can press this. The pair is one filled primary, Teal Ink with white text, and one ghost, a hairline with teal text and no fill: Join the waitlist and Calculator. Two doors and no third: the gate holds the hero row to exactly the pair. The ghost is never filled and never blue: there is no action blue in the palette, and the gate fails the hex anywhere it appears.

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. The v5.2 entrance plays once with the page, on the picture and never on the words, and is at rest before a reader can scroll. Motion is decoration and decoration never gates content.

Shape and rhythm

Pill--radius-pill

Pill

Every call to action: the filled primary, the ghost secondary, the mobile bar, the form submit and the footer chips. Nothing else is a pill

Tile rhythm--space-tile-y

The vertical padding of every tile: 64px below md, 96px from md, 112px from lg. One token, so no page runs tighter or looser than the next

Hero gap--space-hero-gap

The air from the h1 to the deck and from the deck to the buttons: 20px below md, where the fixed bar needs the room, 36px from md and 44px from lg

Kit object width--hero-product-max

The kit object under the hero copy, the product canvas: 896px at most since the Phase 4 structure polish, the product-page scale, up from 704px in the Phase 1 home overhaul and the 512px of the v5.1 craft sheet

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

DeckCut empty days. Ask across your files. Draft the next step. You stay in command.

The home and Product 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.

Long-form only: the citation copy and this page

DescriptorARK360 is building a private AI teammate for build-to-rent operations, on a box in your office. You own it. You stay in command. Early access: join the waitlist.

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 waitlist

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. Version 5.1, the same month, is additive: the pill, the tile rhythm, the product-first hero and the reading step, with navy and teal untouched and no blue admitted. Version 5.2, the same month again, changes the weight and not the values: white and black carry the page, teal and navy are the highlights, the neutrals move to the cooler greys, and the motion section is the Designer's locked research, four durations and three easings, opacity and transform only.