Dictionary
Score a page

Heroes · thirteen overtures

The opening is a content decision.

Every hero below answers a different question about the material you actually have — not about the look you want. Four are ports of heroes that shipped on real sites; the rest are system originals. Pick by precondition, then read the avoid line before committing.

This page breaks a law on purpose

Thirteen h1-scale moments, because each specimen is a whole hero. A composed page takes exactly one.

Choosing one

What does the material look like?

01Full-bleedOne photograph carries the positioning and its lower third is quiet.02OverlayA photograph has a measured empty region big enough for the claim.03PairTwo frames of the same subject, and the change between them is the argument.04AtelierA figure worth 7 of 12 columns, and a caption pair to name it.05BleedA still life with a quiet left third and six columns of type.06StatementNo figure worth showing; the line carries the fold alone.07IndexA long page whose sections have names worth reading.08LedgerFour numbers the client will stand behind.09AnnounceA real event with a real date.10Home CTAA product-first claim with a wide figure beneath it.11Page headerAn interior page that needs a signpost, not an overture.12ContactThe form is the evidence column.13RicoThe product is dashboard-shaped and is the figure.
hero/FullBleedHeroAAtelier editorialOVERTURE

Full-bleed hero

Ported from the Alpar Industry home page. The figure runs edge to edge under a rising veil; every child reads from the gate tokens, so nothing here sets a colour.

radius 0 · hairline edges · mono uppercase controls · 96rem shell

Placeholder figure

Full cycle · one contractor for all seven stages

The claim, carried by one photograph

Two sentences at most. At this size the figure is doing the arguing, and the lead only has to say what it is you are looking at.

Primary actionSecond action

Full-bleed heroits own — the figure is the plane

Character
Cinematic, single-breath, the figure doing the arguing.
Use when
One photograph ≥1920px that carries the positioning alone, with a quiet lower third for six lines of type. Shipped original: the Alpar Industry home page.
Avoid
A screenshot or render under the veil; a busy lower third; a third control; stock photography, which reads as a placeholder at this size.
Seam
The bottom edge is the seam: the next movement steps to ground and needs no rule.
Supercharge
Let the figure run to 86svh; keep the claim under 22ch so it clears the veil’s strongest band.
Portability
System-bound; the photograph is topic-bound and must be real.
hero/OverlayHeroAAtelier editorialOVERTURE

Overlay hero

Ported from the Daria release site. The claim sits in a measured quiet area of the image; below the md breakpoint the band is hidden and the same text sets above the figure.

radius 0 · hairline edges · mono uppercase controls · 96rem shell

Overlay · the zone is measured

Set where the picture is quiet

Placeholder figure

The copy continues below the figure. Everything above is the photograph and one line of type placed in its empty half.

Primary action

Overlay heroground

Character
Editorial, poster-like — the claim lives inside the picture.
Use when
A photograph with a genuinely empty region, measured rather than guessed, big enough for six or seven words. Shipped original: the Daria release site.
Avoid
Guessing the zone; an image whose quiet area moves between crops; a title over 16 characters to the line.
Seam
The figure is its own plane; the copy below re-enters the page, so a rule before the next movement.
Supercharge
Carry the zone coordinates and ink in the image record, not the page, so a re-crop updates both.
Portability
System-bound; the zone and its ink belong to the photograph.
hero/PairHeroAAtelier editorialOVERTURE

Pair hero

Ported from the Daria release site. Two frames, one ratio, one plate — so the subject is the only variable the eye can find.

radius 0 · hairline edges · mono uppercase controls · 96rem shell

Before · after

Two states of the same thing

The lead names what changed between the two frames, so the reader knows what to compare before they start comparing.

Primary action
Placeholder figure, before
No. 01 — Placeholder, not a real pair
Placeholder figure, after
No. 02 — Replace with the true comparison

Pair heroground

Character
Comparative, evidential — two frames and the difference between them.
Use when
Two photographs of the SAME subject, shot alike, where the change is the argument. Shipped original: the Daria release site.
Avoid
Two unrelated images (a gallery, not a comparison); a screenshot as one half; captions describing the photograph instead of the change.
Seam
Closes on the caption pair — the next movement needs a rule or a plane step.
Supercharge
One ratio and one plate for both frames, so the subject is the only variable.
Portability
System-bound; the pair is topic-bound.
atelier/AtelierHeroAAtelier editorialOVERTURE

Atelier hero

The system's default overture: figure right, caption pair, accent glow.

Rendered live

Atelier · the default overture

A claim in one breath, set large

The lead sets the register for everything beneath it: one or two sentences, never a wall, always in running text.

Primary actionSecond action
Placeholder figure
No. 01 — FigureCaption pair

Atelier heroground

Character
Gallery-calm, slow, material, confident.
Use when
One claim under ~10 words, a two-sentence lead, and a figure that can carry 7 of 12 columns at 8:7.
Avoid
A screenshot as the figure (use HeroBleed or the product hero); a third control; a claim over two lines at 1280.
Seam
Ends on the mono caption pair — anything below needs a rule or a plane step, the figure’s bottom edge is not a seam.
Supercharge
Keep the accent glow behind the figure on light; let the caption pair name the figure and its date; stagger hero-in by 120ms.
Portability
System-bound: 5/7 split, hero-in, caption register. Topic-bound: the figure and its aspect.
atelier/HeroBleedAAtelier editorialOVERTURE

Bleeding hero

One long breath: the figure edge is its own plane and the bottom hairline is the seam.

Rendered live

Bleed · one long breaththe figure edge is the plane

A still life, six columns of type, one hairline

Placeholder still-life

Bleeding heroground (+ texture-ledger)

Character
Cinematic, spacious, one long breath.
Use when
A still-life or object photograph with quiet left third; six columns of type; a kicker with something to say.
Avoid
Busy figures with detail on the left half — the mask leaves ~20% alpha under the type; more than two controls.
Seam
The figure edge is its own plane (ATLAS-experiments §4.2). The bottom hairline is the seam; whatever follows may sit directly on ground.
Supercharge
Put the caption inside the type column, never over the figure; let the kickerNote carry the edition or date.
Portability
System-bound: mask ramp, ledger field, 6-col type block. Topic-bound: the still-life.
hero/StatementHeroAAtelier editorialOVERTURE

Statement hero

No figure at all. The empty right third is the composition, not a gap.

radius 0 · hairline edges · mono uppercase controls · 96rem shell

Statement · no figure

One claim, set at the size it deserves

A lead is optional here. If the line needs explaining, it is not the line.

No. 01 — Statementno figure

Statement heroground · band · tint

Character
Declarative, unhurried, confident in the empty half.
Use when
The positioning line carries the fold by itself and the only available imagery would be stock. Shipped original: the Daria release site’s plain opener.
Avoid
Adding a figure later to balance it; two controls; a lead longer than two sentences.
Seam
Its own rule and caption pair close it; the next movement can open on ground.
Supercharge
Paint one word with <strong>; keep the claim to 18ch so the silence to the right is legible as a decision.
Portability
Fully portable; only the claim is topic-bound.
hero/IndexHeroAAtelier editorialOVERTURE

Index hero

The page's own structure as the figure. Numerals are derived from the list, so a reorder cannot desynchronise them.

Rendered live

Index · the shape first

The shape of the argument, before the argument

Index heroground · band

Character
Orienting, editorial — the shape of the argument before the argument.
Use when
A long page (six movements or more) whose sections have names worth reading and real anchors.
Avoid
A short page, where it promises more than follows; entries that are not anchors; more than seven rows.
Seam
The index column ends on a hairline, which is the seam into the first movement.
Supercharge
Derive the numerals from the list so a reorder cannot disagree with itself.
Portability
System-bound; the section names are topic-bound.
hero/LedgerHeroAAtelier editorialOVERTURE + LEDGER

Ledger hero

The evidence opens the page instead of arriving two movements later. Values are placeholders; a real one that is unconfirmed uses a Probel.

Rendered live

Ledger · evidence first

The claim, with its evidence already on the page

One or two sentences. The numbers to the right do the arguing; this only has to say what they are about.

Primary action
Measure
00
What this number counts, and over what period.
Measure
0.0×
Against what baseline, measured how.
Measure
00%
Of what whole — a share needs its denominator.
Measure
00
Confirmed by the client; unconfirmed slots use a Probel.

Ledger heroground · band

Character
Evidentiary from the first screen — the numbers open the page.
Use when
Four numbers the client will stand behind, more persuasive than any image, each with a derivation note.
Avoid
Rounding to look tidy; a fact without its note; more than four cells; inventing a fourth — use a Probel.
Seam
The facts band draws its own hairline pair, so it is the seam on both sides.
Supercharge
Two columns of facts, not four in a row: four abreast reads as a toolbar, not as evidence.
Portability
System-bound; every value is topic-bound and must be true.
hero/AnnounceHeroFChromeOVERTURE

Announce hero

The date lives inside the badge, so the badge expires by itself.

Rendered live

Release00.00.0000

What is new, said plainly

One sentence on what changed and one on who it is for. An announcement that needs a paragraph is a feature page.

Primary actionRead the notes

The caveat every announcement has: availability, region, or what this replaces.

Announce heroground · band · tint

Character
Dated, plain, a notice rather than a pitch.
Use when
A real event with a real date — a launch, a version, an opening — and the caveat that goes with it.
Avoid
A permanent “New” badge, which stops meaning anything the week after; an announcement with no date; three controls.
Seam
The mono note and its hairline close it; the next movement steps plane.
Supercharge
Put the date inside the badge, so the badge expires by itself.
Portability
Fully portable; the date and caveat are topic-bound.
hero/HomeCTAFChromeOVERTURE

Home hero

The chrome voice's product-first opener.

Rendered live

user user user 30K+ proof line

The claim, set large, then the product

One line of lead. The figure below is the evidence.

Primary action

Home heroband

Character
Bold, product-first, sales.
Use when
A claim with one accent word, a one-line lead, one control, and a wide product figure below.
Avoid
Two controls in a row of equal weight; a figure with off-palette UI (keep `.duotone`); centering.
Seam
The figure runs into the next section’s padding — give the next section a plane step or a rule.
Supercharge
Accent glow behind the frame; proof chip above the title with avatars.
Portability
System-bound: chip, glow, frame. Topic-bound: the product figure.
hero/PageHeaderFChromeOVERTURE (utility)

Page header

Not an overture but a signpost — the utility opener for interior pages.

Rendered live

Interior page

A signpost, not an overture

One lead, no controls, and the band plane so the ground below reads as a step.

Page headerband

Character
Plain, direct, a signpost.
Use when
Interior pages: kicker, a title under 8 words, one lead sentence.
Avoid
Controls; a figure; a second paragraph.
Seam
Sits on the band; the first section below on ground makes the step.
Supercharge
Bold one word of the title with <strong>; it paints accent-deep.
Portability
Topic-free.
hero/ContactHeroFChromeOVERTURE + form

Contact hero

The form is the evidence column.

Rendered live

Write to a person

The form is the evidence column; the claim stays left.

Get in touch

Contact heroground

Character
Practical, open.
Use when
Contact pages: headline left, the form as the evidence column.
Avoid
Lead over two sentences; a second CTA.
Seam
Followed by contact cards or the foot.
Supercharge
Keep the form title short; make email the only required field.
Portability
Topic-free.
rico/RicoHeroRProductOVERTURE

Product hero

The product voice: the dashboard is the figure and the badges carry the state.

Rendered live

Badge oneBadge two

The product claim, beside the product

A mechanism-first overture: the frame on the right is not decoration, it is the first piece of evidence.

Primary actionSecond action
app.example.com
Dashboard
Metric one
12,438▲ 24.5%
Metric two
8,291▲ 12.1%
Metric three
24.5k▲ 18.2%
Metric four
4.8%▲ 0.6%
Weekly7d

Product heroground

Character
Mechanism-first, live, exact.
Use when
A product with a dashboard-like surface; two badges, a claim, a lead, two controls.
Avoid
A figure that is not the product; a claim over two lines.
Seam
Followed by a mark strip or a mechanism header.
Supercharge
Glow behind the frame; live dot and bar-rise on first paint only.
Portability
System-bound frame and atoms; the numbers are topic-bound.

Coda

One per page. Chosen, not defaulted.

See one in a scored pageBack to the map