RISE · Wireframe Guide v3

RISE WIREFRAME
GUIDE v3.

Locked 18 September 2026 against the HUMAN v2 build. Everything on this sheet was measured, not chosen.

The system is the grid, the type, the modules and the ceilings. The order of modules changes with every case. The system does not.

Read this before opening the builder. Where a number is missing, measure the live site.

Two headline sizes. One weight.

H1 is the hero statement, alone, once per page. Everything else that reads as a headline is H2.

H1 · .t-hero: 72 / 40 · line-height .94 · weight 400 · fl(72,40). The hero statement only.
H2 · .t-title .t-claim: 63 / 35 · line-height 1 · weight 400 · fl(63,35). The project title and every section headline. One declaration, so nobody splits them again.
Body · .t-body: 30 / 15 · line-height 1.2 · ink-2. One- and two-line statements under a headline.
Description · .desc .t-body: 25 / 14. The page’s one paragraph set, under the title. 30 in a 576 column is a caption doing a paragraph’s job.
Weight: Roboto 400 everywhere. 300 was the title’s old weight and it read thin next to the hero. 500 is loaded but unused: this system makes emphasis with scale and space, never with weight.
Headline to subhead: calc(var(--gap)/2 - 3px) · 15 at 1440. Never italic.

Every left-aligned block starts on one line.

The text inset. 144 at 1440, 10vw everywhere. Hero, title, description and the mirrored split all sit on it.

Hero statement: 144 → 1368 · width calc(100% - var(--in) - var(--m)) · 1224 at 1440
Project title: 144 → 1008 · .c2-9, max-width 60vw
Description: 144 → 720 · six of twelve on the inset grid · 576 · ends on the centre line
Split, copy left: 144 → 720 · 576 · the same two edges as the description
Split, copy right: 822 → 1368 · 546 · 30px off the panel edge, see below
Centred claim: 144 → 1296 · 1152 · .grid.ins.center
The rule: “Align A to B” means B is the reference and A moves. Say which block is moving before it moves. This was inverted twice on the HUMAN build.

Media · 4:5muted loop or still · the copy column sits on the inset, 144

Copy left.
On the inset.
Same as the title.

Mirror class .b. Padding-left is the margin, padding-right is zero. Text runs 144 to 720.

Media · 4:5muted loop or still · the copy starts 822, 30px off the panel edge

Copy right.
Thirty pixels in.

Padding-left is calc(var(--m) + min(30px,2.08vw)). Fluid, so it shrinks with the column instead of squeezing it.

Why 30: The HUMAN headline “is no longer “Bot or not?”” measures 543 at 63. The column is 546. Three pixels. 33 is the ceiling. Past it the layout has nothing left to give; the copy has to get shorter.
Why fluid: A fixed 30px stays 30 while the column shrinks. Around 870 wide it forces a fourth line. min(30px,2.08vw) scales down with everything else and disappears before it can do damage.
Phones: Under 768 the split stacks, media first, copy on the inset. All padding overrides drop.

A break only exists where the line fits.

Measure the line, find the viewport it needs, gate the break there. Below the gate the copy wraps on its own.

.lb: on above 767. The default. Hidden on phones
.lbd: on above 790. The description block only: its type hits the floor before the column does
.lb15 .lb17 .lb18: on above 1500 · 1700 · 1800
.lb19 .lb20 .lb22 .lb24: on above 1880 · 2000 · 2200 · 2350
.lbn19: inverse: on below 1880, off above. For a line that should be one line on a wide screen and two balanced lines below
.lbq: quotes, on above 1800
The welded-word rule: A hidden break removes the space either side of it: usedto. The page builder inserts a space before every gated break at build time. Test at 390, 768, 1440, 1600, 1750, 1920 and 2560 before shipping.
Fluid maths: Below 1440 the font and the column both scale with vw, so the fit ratio is constant. Above 1440 the font clamps and the column keeps growing. The only danger band is where the font hits its floor and the column is still shrinking: that is what the gate is for.

The description is three short paragraphs.

Three lines, three lines, two. Where the client was, what changed, what we gave them.

Box: 576 · six of twelve on the inset grid · ends at 720, the centre line
Type: 25. About 23 characters a line. The rag Flavio asked for needed 674 at 30 and the box is 576; the fix was the size, not the grid
Widening: Not to seven columns. Every copy column on the page is six. The description would be the only block on a different measure

The module library.

Every case is assembled from these. Add one only when nothing fits, and write it here the same day.

hero(statement): 100vh. Wordmark at the margin, burger, H1 on the inset at vertical centre, arrow bottom right, note bottom left
title_block(title, paras): H2 on the inset grid, the description set beneath
split(media, claim, body, mirror): The two-panel module above. mirror=True puts the copy on the left
cline(claim, sub) · csec(): Centred H2 with an optional line. csec wraps it in a section
inset(title, note, ratio): A picture in the gutter, margin to margin. All films use this. Films are never full bleed
bleed(): Aliases inset(). Pictures do not run edge to edge; the name survives for old builds
divider(title, note): True full bleed. Section dividers only: the rotating line, the masterbrand loop
railline(name, line): Section break: a full-bleed loop with the section name as H2 and its line laid over. One per domain
tri(label, note): Three rounded 9:16, real gap between them
spread(label, note): One 16:9 artwork as a double-sided spread: two 8:9 halves, flush
duo(a, an, b, bn): One 16:9 panel, two subjects, two 8:9 halves
phones(label, note): Five rounded 9:16 story frames, the centre one held
row(items, span): N slots at span3 / span4 / span6, flush, no gutter. DOOH is two 16:9. Print is two 3:4
credits(people): Three columns, highest title first, read down then across. Type left-aligned inside every column

Copy rules that held.

From the HUMAN build. Creative voice, not corporate voice.

RISE owns the verb: “We built.” “We gave.” Never “We helped” or “We partnered with.” The first line on a case page is the credit line
Open with us, close with them: The hero starts “We.” The last headline is the client’s name and what they became
Threes: “It took the keynote stage. It took Cannes. It took the side of a car.” Verbs, in threes, the smallest word last
Plain: No “operationalizes,” no “empowering,” no “span the customer journey.” If a person would not say it out loud, cut it
Em dash: Allowed once, with approval, where the second beat earns it. Not a house style
Proof: A claim without a number is a claim. The HUMAN page carries 99 media slots and zero figures. Flag it every time until it changes
Define on first use: “Synthetics being the name we gave the machines.” The first mention, not the fourth

Measure, then apply.

Nothing on the page is set on assumption. Every break, gap, ratio and alignment is measured against its real container.

Containers at 1440: Split copy-left 576 · split copy-right 546 · description 576 · centred claim 1152 · margin grid 1296 · hero 1224
The measure: A hidden 100px span in Roboto, width divided by 100, times the target size, against the container. Headless Chromium. Fonts are blocked in the sandbox, so it measures Arial: wider than Roboto, so conservative
Verify at: 390 · 768 · 1440 · 1700 · 1800 · 1880 · 2000 · 2350 · 2560. scrollWidth equals innerWidth at every one. Line counts per block. No welded words
Pixels are not percent: “20px” moved the column. “20%” would have broken it. Read the unit twice
When a size and a break conflict: Run the solver over every break point and report the ceiling for each. Do not pick one silently
Report: What changed, what it cost, the numbers, the ruling still owed. One recommendation. No menu

Where it lives.

Desktop first, then the project.

System: _head3.py · the CSS, the module functions, the page builder. v2 stays frozen for the archived pages
Template: 11_RISE_WIREFRAME_TEMPLATE_v3.html · every module once, copy in brackets
Reference build: 11_HUMAN_CASE_WIREFRAME_V2.html · the standard, live
Kit: RISE_WIREFRAME_KIT_v3.zip · system, template, HUMAN example, guide, fonts, verification scripts
Path: ~/Desktop/RISE/04_RISE_CANON/11_BRAND_ASSETS/PAGES/
Canon: Volume 11B in the project. Canon 11 wins over this sheet; the departure is logged the same day