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.

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.

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.

Feature bentoground

Character

Structured, generous, product-catalogue.

Use when

Exactly five capabilities with art; the tall card gets the most copy.

Avoid

Titles over five words; art with its own palette (use `.duotone`); a sixth card.

Seam

Dense — follow with a PASSAGE, quote or the logo strip.

Supercharge

Sunk tone so the lattice reads as one; subtitle lengths matched across pairs.

Portability

System-bound bento; art is topic-bound.

Feature listground · band

Character

Inventory, even, quick.

Use when

Eight features with an icon, a short title and one sentence.

Avoid

Fewer than four; long descriptions; mixed icon styles.

Seam

Hairline tops on each cell make it self-bounded; dense — breathe after.

Supercharge

Square icon tiles on wash; category filter via data.

Portability

Topic-free.

Sticky feature gridground

Character

Patient, reference-like.

Use when

Six to twelve features under one heading that stays put while they scroll.

Avoid

Fewer than six (the rail has nothing to stick to); two headings.

Seam

Long — the following movement must change plane.

Supercharge

Keep the sidebar text one sentence; h2 at h3 scale.

Portability

Topic-free.

Highlight rowsground

Character

Steady zigzag, one benefit at a time.

Use when

Four rows, each a title with one accent word, two sentences and a figure.

Avoid

Odd counts; rows without figures; more than 60 words per row.

Seam

Rows own their spacing; the last row closes the movement — change plane after.

Supercharge

Number the kickers; sunk plate under the figure so illustrations read as specimens.

Portability

Topic-bound figures; system-bound rhythm.

Mark stripground · band

Character

A line of trust, fast.

Use when

One mono claim line and six marks.

Avoid

Marks of different mass; a heading larger than the label.

Seam

Airy — the breath after a hero.

Supercharge

Bold only the number in the claim; hairline above the strip.

Portability

Topic-bound marks.

Dark testimonialgate

Character

Climactic, human, the one dark moment.

Use when

A quote under 30 words from a named person; ~⅔ through the page.

Avoid

Two per page; a figure that fights the type; centering.

Seam

Gate above and below: it is the plane change. Nothing else dark on the page.

Supercharge

Let the opening quote mark paint accent; role and company in mono.

Portability

Topic-free.

Pricing columnsground

Character

Comparative, decisive.

Use when

Three plans from JSON with a monthly/annual switch; one featured.

Avoid

Four columns; two featured; prices you cannot show (use a Probel).

Seam

Dense — precede with a section header, follow with FAQ or the coda.

Supercharge

Accent ring on the featured plan only; suffix in mono uppercase.

Portability

Topic-free.

FAQground · band

Character

Helpful, calm.

Use when

Four to eight questions, answers under 60 words.

Avoid

Questions that are claims; all open at once.

Seam

Flat plate; comes before the coda.

Supercharge

Open the first; keep the plate 8 columns wide.

Portability

Topic-free.

Sticky FAQground

Character

Reference, patient.

Use when

Eight or more questions; title sticks.

Avoid

Fewer than six.

Seam

Long — change plane after.

Supercharge

h2 at h3 scale in the rail; one sentence under it.

Portability

Topic-free.

Light CTAground (panel plate)

Character

Quiet close.

Use when

Pages that already had their gate moment.

Avoid

Two controls of equal weight; long lead.

Seam

Last movement before the foot.

Supercharge

Rating in mono; one control.

Portability

Topic-free.

Dark CTAgate plate on ground

Character

Resolved, weighty.

Use when

Pages with no other gate moment; a proof chip and one control.

Avoid

Combining with a dark testimonial on the same page.

Seam

The plate is its own plane; ground above and below.

Supercharge

Veil the figure if one is used; keep the h2 under 8 words.

Portability

Topic-free.

Contact cardsground

Character

Directory, open.

Use when

Four ways in, each an icon, a title and one sentence.

Avoid

Three or five; long text.

Seam

Follows the contact hero.

Supercharge

Sunk tone; icon tiles on wash.

Portability

Topic-free.

Timeline feedground

Character

Chronological, calm.

Use when

Changelogs, releases: dated entries with short HTML bodies.

Avoid

Entries without dates; images on every entry.

Seam

Long; the dashed rail carries it; change plane after.

Supercharge

Mono dates in the left column; accent marker on the rail.

Portability

Topic-free.