Type

Every text size a page may use, largest first. Each one has one job.

Icon

A 24px line drawing that stands for one idea. It marks a point or a box so the eye has somewhere to land. Every icon comes from one registry and keeps one meaning.

Arrow

The one direction mark. It joins the steps of a diagram, pointing right, down or up.

White box

The container: a white fill inside a hairline border. Anything that is not running text sits in one. A white box holds a card, a diagram, a logo panel or a product screen. A card’s box has three parts: the box title line, the box text, and sometimes a box footer.

Box footer

A small green label under a hairline at the bottom of a card. It ties the card to an idea named elsewhere on the page. It is a line inside a white box, never a box of its own.

Lockup

The top of every section, always in this order: section label, section title, subhead. The label and the subhead sit in a 720px column; the title may run to 816px.

Cover

The first thing in a private overview, between two rules: who it is for, who prepared it, and when. It is what makes the page a document sent to someone rather than a web page. A cover naming its reader says what the document is by naming them, so it carries "Prepared for" and not "What this is"; the generic line is for the overview prepared for no one (MC, Sep 22, 2026).

Prepared for

The reader’s company
The reader’s name and role

Prepared by

Michael Chauliac · harperOS

Date

September 2026

Point row

Two or three ideas side by side, with no box. Each point is a marker (an icon, or a step number when the order matters), a point title, and its text.

Card grid · parts

Three cards that name the things a company buys. Each card has its icon and box title on one line, its box text, and a box footer. Where the cards run in an order, a step number takes the icon’s place.

Card grid · compare

A before and after, one card per aspect. Inside each card: the word From and what it was, then the word To and what it becomes, both in the same gray.

Card grid · shift

The compare cards as one line each, for a page that tells the before and after in less height: the aspect, the old way in gray, a green arrow, the new way in ink. Stacked on a phone.

Card grid · org

The functions as a line-drawn org chart: the company node on top, a line to each function's node, and under each function a spine with a tick to each agent. Nodes are the only boxes; every line is a 1px rule, drawn orthogonally. Six columns from 1024px, stacked below.

Card grid · roster

The function cards as one line each, for a page that names the functions and their agents in little height: the function with its icon, then its agents in equal cells, each with the agent icon. Stacked on a phone.

Card grid · function

One card per business function, each agent it holds a box carrying the agent icon, and an optional line on what they would do first. The agent names come from the role library. Every page draws them the same way: on an overview the boxes are plain, since nothing below them to link to; on an approach or proposal the scope sets two cards across, each box links to its agent's card, and an odd last card spans its row.

Card grid · quote

Someone else’s words in a card: a quote mark, the words, and who said them. Never the words of the company the page is written for.

Split

The text on the left and the picture that shows it on the right. On a phone the picture follows its text.

Product screen

A simplified picture of what the system shows you, such as the morning review. It is always marked as an example: the renderer refuses a screen whose header does not open with “Example”. The split above carries one.

Logo panel

Other companies’ products, shown by their own logos in their own colors, one category to a row. It shows which systems we connect.

Communication

Email and SMS

Logo panel · clients

The companies that run on harperOS, by their logos in their own colors, with no row label.

Stats

A few short numbers, each over a label. The number is the point.

Type specimen

The type scale shown at size. Each row names its rung, states its value and draws a sample with the real rule: a real heading, or the real block’s own renderer. The design-system page builds the rows from the canon’s scale table, so a sample cannot drift from what pages set.

Space scale

The ten spacing steps, each drawn as a bar at its own token’s width. Every distance on a page is one of these steps.

Marks

The brand’s own assets, each on the ground it is made for, with what it is for and its file. A mark whose file is not in public/ is refused, so a page cannot show a dead asset.

Actions

Buttons in a row outside the hero: one primary at most, one ghost at most, and a text link. The renderer refuses a second primary.

Swatches

A design system’s colors, each chip filled from its own token, with the value and what the color is for. The design-system page builds them from the canon and refuses a value that differs from the brand overlay. They fill whole rows, like any set.

Buttons

The primary button carries the page’s one main action. A ghost button beside it is the quieter way to read further; a hero carries one primary and at most one ghost.

Next step

The page’s one action, at the end of its section: a label, the action, and one line on what happens next.

Workflow · across

Steps left to right, joined by arrows. Use it for a sequence of three to five steps. On a phone it stacks.

Workflow · branch

One step hands the work to several boxes at once, and they hand it back. The column of boxes is a numbered step of its own, held together by a thin rule. On a phone it becomes a tree.

Workflow · stacked

Steps top to bottom at every width. Use it when the steps carry long text.

Workflow · returns

Steps left to right where the last one feeds back into the first: a loop, drawn as boxes.

List

Points inside running text, each behind a small green square.

• We needed growth and could not add the headcount.
• We built the system, and the method that fills it.

Cards

The portal’s card: a small label, a name, and its text, in pairs.

Cards · agent

One card per agent: its function, its name, what it does, and who owns it.

Cards · people

One card per person: the portrait, the role, the name, what they have done, and a link to their profile. On a public page only; the founders on About.

Co-Founder & CTO

Pierre Merzeau

Director of Engineering at XBTO. CTO and co-founder at Ouro Capital.

LinkedIn

Co-Founder, President & CMO

Patrick Adams

Led marketing organizations at PayPal, Victoria’s Secret, Chase and Citibank.

LinkedIn

Table

A comparison that has to be read across, row by row.

Assessment table

The comparison grid of an assessment: one subject held against its competitors, a column per company, a verdict per row. The subject's column carries the accent; the best value in a row is bold. A cell holds a line, a line with its source, or stacked marks. The numeric variant sets the figures in mono.

Compare rows

A long before and after, read as rows rather than cards.

Sequence

Numbered steps with a title and a line each. The inline view puts the title and its line on one row.

Flow

The older vertical diagram on live client pages. New pages use a workflow.

Function panel

The older list of functions and their agents on live client pages. New pages use the function cards.

Function head

Opens one function inside a longer section: its icon and its name. A head may also carry a number and one line where nothing above has said what the function covers.

Agent spec

One agent, as a proposal or delivery plan specifies it: the agent icon every agent shares beside the role, the purpose in bold, then one question a row, label left and answer right. The workflow row is the hero, Today muted, Tomorrow in ink on an accent rule. The entities it names are boxes carrying their icon. A company-wide build sets the cards under their function heads.

Agent card · light

An approach’s agent: the full card’s head alone, the agent icon, the role and its purpose, three across under each function head. Turning the approach into a proposal adds the rows under each card; nothing above them changes. The build refuses a full card on an approach and a light card on a proposal.

Proof list

Rows of evidence, each with a label, the proof, and its source.

Price

The proposal’s price: the figure, one line on it, and its terms.

Boxes

Quiet boxes that each hold a name and a value.

Ops

Short name-and-value rows, such as a schedule or an approval rule.

Caveat

A strip that tells the reader what to know before reading on.

Note

A short qualifier, under the thing it qualifies.

The figures are counted across every deployment.

Chips

Small labels in a row. They are never buttons.

Quote

The portal’s boxed quote. The overview uses the quote card instead.

“Things that used to take days now take minutes.”

A client CEO

Pull

One large sentence that carries the page’s voice, used once at most.

The model is not the hard part. The wiring is.

Entries

An index: each entry one link, its kicker (a date, or a date and the source), its title and a line under it. An entry that leaves the site opens in a new tab and names its source.

Product shot

The real product in an app window, never a mock-up: a registered shot copied from our own OS with its commit, its lines numbered, one caption under it.

1# communication-safety2 3Customer communications require coordinator review. Draft first, never auto-send.4 5The pipeline for any outbound communication (email, Slack, Teams): produce a draft → present it in chat for review → wait for explicit approval → send only after approval.6 7"APPROVED" is the only valid approval signal. Silence, nodding, or implicit consent are not approval.8 9Never send a communication that has not been explicitly approved by the user. Never send a communication from a tool call in the same step as drafting it.

Demo

The product at work, one use case at a time: a menu of two to four use cases beside a session in the app it runs in, a row of tabs above it on a phone. It switches without a script.

Morning briefActuals to budget

Shown on example data, with every name and figure changed.

• Morning briefAsk for your day, and get what needs you with the action for each.
• Actuals to budgetSee every line against its budget, and the two that need you.

Story

A narrative in two to five short paragraphs, at reading size: the one block on a marketing page that carries running text, because a story is running text.

Byline

Who wrote a piece and when: the author’s photograph, name and role, and the date. At the foot of the piece the sign-off view names the same person.

Michael ChauliacCo-Founder & CEO

Sep 4, 2026

Collapse

A card grid behind a labeled toggle, closed until the reader opens it, for a page that points at the detail without spending its length on it.

Closer

The page’s last line and its one action on a single row, tight: a heading and one row of actions, no subhead.

Band

A section drawn as a strip, ruled above and below, carrying one block and no words of its own: the homepage’s client logos. The section after it drops its own rule.

Sub-label

A label over a hairline that divides a section into parts. On a client document it is the ladder’s fourth step, an H4: a bold line in the body face, sentence case, numbered by its pillar first (1.1, 3.2). Elsewhere it is the green label every entry name on this page uses.

What the agent reads

Your policies, your past work and your data.

H3 block

The renderer’s type named subhead. It emits an H3, the sub-section title in the type table above; the name is the renderer’s, kept so content files still read.

Severity

The report’s high and medium markers.

High

Medium

Logos

The gray logo strip on older client pages. New pages use the clients’ logo panel, in color.

Embed

A registered visual with its own styles, built from the brand tokens. It is shown on the pages that register it.

Banner

The strip above the menu that names who the page was prepared for. A family with a client carries it on every page.

Menu

The numbered steps of the family, from the family’s own declaration. The current page is marked, and above 768px the menu stays at the top as the page scrolls.

Site menu

The public site’s menu: the wordmark, its links and one action, folding into a menu button on a phone. The site family declares its links and its action, so every site page carries the same menu.

Footer

The dark band that closes every page: the mark, the line, and the copyright. A public page adds a row of links under the copyright; a client page has none. This page’s own footer, at the bottom, is the sample, because a page carries one footer.

Private overview

The document sent to a named reader. It is rendered from blocks: content/clients/overview/ builds the staging overview at /staging/overview, the page that goes public when it is approved.

Approach and proposal

What we would build for a named reader, and how it gets built: one template at two depths. An approach is a proposal before the price and before the detail, so turning one into the other fills fields and rebuilds nothing. The standard sections live in content/templates/approach.mjs; a client fills only its slots: its functions, once, which feed both the scope and the agents.

Company read

A page about the reader's own company before anything about us: their world from their own published figures, each function today beside on agents, the workflow they described, what their companies could do together, the plan on their calendar, and the questions only they can answer. Step 02 of a warm family, before the approach.

Public page

The homepage, About and Articles. They are moving onto these blocks one page at a time: each renders first as a staging draft, and its live page switches once the two have been compared side by side.