Hero
Ask for it as hero
The top of every page: a label, the title and one line under it, then a button, a picture of the product beside the copy or under it, or the facts a private document opens on. Every page has exactly one.
Form Title and buttons
The top of a marketing page: a label, the title, one line under it and up to two buttons. It is the form a hero takes with no cover and no aside.
One company, one system.
People direct, agents execute, and knowledge compounds.
This example sets eyebrow, title, accent, statement, cta; each of its cta sets href, label.
The settings for this example
{
"eyebrow": "The operating system",
"title": "One company, one system.",
"accent": "one system.",
"statement": "People direct, agents execute, and knowledge compounds.",
"cta": [
{
"href": "/demo",
"label": "Book a demo"
},
{
"href": "/overview",
"label": "Read the overview"
}
]
}Form With a picture of the product
The same top, with a picture of our product to the right of the copy from the desktop up, and under it on a phone. Setting aside chooses it.
One company, one system.
People direct, agents execute, and knowledge compounds.
This example sets eyebrow, title, accent, statement, aside.
The settings for this example
{
"eyebrow": "The operating system",
"title": "One company, one system.",
"accent": "one system.",
"statement": "People direct, agents execute, and knowledge compounds.",
"aside": {
"type": "product-shot",
"shot": "session-all",
"caption": false
}
}Form With the product under the title
A page where the product is the first thing a reader judges: the title, one line and one button, then the product as one full-width panel under them, playing one session once and holding its finished frame. Setting view to "stacked", with an aside, chooses it.
One company, one system.
People direct, agents execute, and knowledge compounds.
This example sets eyebrow, title, accent, statement, cta, aside.
The settings for this example
{
"view": "stacked",
"eyebrow": "The operating system",
"title": "One company, one system.",
"accent": "one system.",
"statement": "People direct, agents execute, and knowledge compounds.",
"cta": {
"href": "/demo",
"label": "Book a demo"
},
"aside": {
"type": "product-shot",
"shot": "session-brief",
"caption": false
}
}Form Private overview
A document prepared for one reader: who it is for, who prepared it and when, then the title. Setting cover chooses it.
How your company could run on one system.
What we would build first, and why.
This example sets eyebrow, cover, label, title, accent, statement; each of its cover sets label, name, value.
The settings for this example
{
"eyebrow": "Private overview",
"cover": [
{
"label": "Prepared for",
"name": "The reader's company",
"value": "The reader's name and role"
},
{
"label": "Prepared by",
"value": "harperOS"
},
{
"label": "Date",
"value": "October 2026"
}
],
"label": "The overview",
"title": "How your company could run on one system.",
"accent": "one system.",
"statement": "What we would build first, and why."
}Options
| Option | What it sets | What it takes | Needed |
eyebrow | The small label above the title. | words | Optional |
title | The title. | words | Always |
accent | The words of the title set in the accent color. | words, or a list of lines | Optional |
statement | The line under the title, two sentences at most. | words | Optional |
label | A small label above it, or the name a screen reader announces. | words | Optional |
cover | The facts a private overview opens on: who it is for, who prepared it, when. Across its variants, each can hold: label, name, value, today | a list of entries | Optional |
blocks | Sections drawn under the title, inside the hero, written as on a page. | a list of as in the example's settings | Optional |
body | The text under the title. | words | Optional |
mono | A small line in the label face under the title. | words | Optional |
list | A short list under the title. | a list of words | Optional |
meta | Facts listed under the title. Across its variants, each can hold: label, name, value, today | a list of entries | Optional |
note | One small reassuring line, with no link. | words | Optional |
parent | The page this one belongs under, shown above the label. Across its variants, each can hold: href, label | a group of details | Optional |
cta | A button, or a button and a quieter one beside it. Across its variants, each can hold: href, label | one entry, or a list of them | Optional |
aside | A picture of our product to the right of the title, or under it when the hero is stacked: { type: "product-shot", shot: the picture's name }. | as in the example's settings | Optional |
display | Set the title at the largest size. | yes or no | Optional |
scope | The proposal form that opens on its scope. | yes or no | Optional |
