Ledger.

A ruled report page: tabular figures, red and green deltas, and a key-figures strip that never leaves.

Look

As designed

Use Ledger in the Studio Open full screen

How it moves

The numbers deck, a finance review or investor update, typeset on cool paper over a twelve-column rule. Use it when the argument is carried by figures and every one of them needs a unit, a base and a comparison period.

This is the specification the Studio sends to the model, written for Ledger's own look. Change the look in the Studio and every value follows.

Palette

Background#f2f4f6
Text#1a1f26
Muted#5f6a76
Accent#1f7a4d
Surface#ffffff
Hairlinergba(26,31,38,.16)

Type: Archivo. Corners: 3px.

Layout

Stage is fixed inset 0 with padding 5vh 0 0, split into a main column (1fr) and a persistent key-figures strip on the right (max(200px, 18vw)) divided by a 1px rgba(26,31,38,.16) hairline. The main column has padding 0 3vw and stacks every slide in one grid area. Body sets font-variant-numeric: tabular-nums so every figure aligns; 3px radius everywhere (a ledger is printed, not tiled).
The ruled ground. twelve 1px vertical hairlines in rgba(26,31,38,.16) at 55% opacity, absolutely positioned inside the main column at left: calc(k/12 * 100%), k = 0…11, sitting behind the content. Use twelve separate divs, not a repeating gradient, so each animates on its own.
Along the very top of the main column, a progress meter of one clickable segment per slide (data-goto, flex:1, 12px hit area). Each draws a 3px bar scaled to scaleY(.3334) in ink at 22% opacity; visited segments are #1f7a4d at 45% and scaleY(1); the active one is full #1f7a4d.
Each slide is a four-row grid: header / exhibit (1fr) / takeaway / footer. Header = the short tracker label as a 0.7rem uppercase 0.14em-tracked #1f7a4d kicker, then the action title at clamp(1.4rem, 2.4vw, 2.3rem), weight 600, line-height 1.25, max-width 52ch, then a 1px full-width rule. The exhibit hangs from the top of its row (the cover centres instead) on the bare paper, no card fill: .card, .compare > div and .carousel-item are re-cut as ruled columns with background: transparent, border: 0, border-top: 2px solid rgba(26,31,38,.16) (accent-coloured for the emphasised one).
Takeaway row. a 1px rule, then one line, a 0.66rem uppercase tracked #5f6a76 label "Implication" in a fixed 7rem left column, the sentence in 0.98rem weight 500 beside it. Footer: source line left, "Confidential, for discussion only" centred, "03 / 07" right, all 0.7rem #5f6a76 with the page number in full ink tabular figures.
Key-figures strip: heading "Key figures" (0.66rem uppercase tracked muted), then the deck's four headline figures stacked, figure 1.5rem weight 700 tabular, label 0.7rem muted, and a delta chip, then a footnote above a 1px rule at the bottom giving the as-at date and the chip convention. Every slide carries data-figure="<key>" naming which figure it relates to; on deck:change JS gives that row full ink and a 2px #1f7a4d left border and drops the others to 45% opacity (a slide with no key leaves all four lit). The strip is not clickable; the segment meter is.
Delta chips are the format's reusable element: inline, 0.68rem weight 600, padding .1rem .4rem, radius 3px, a leading ▲ or ▼ glyph, text in --pos #1f7a4d or --neg #a8322b on a 10% tint of the same colour. Use them in the strip and inside exhibits; never without a unit.
Delta chips. a small inline chip (0.68rem, weight 600, padding .1rem .4rem, radius 3) carrying a leading ▲ or ▼ and the change with its unit, e.g. "▲ +18 pts" or "▼ −4 wks cycle time". The ARROW encodes direction, the COLOUR encodes whether the change is favourable: .pos/.neg set the colour from the direction, and .good/.bad override it when a fall is a win (cycle time, days worked, cost) or a rise is a loss. Never let a red chip sit next to an action title that calls the same number a gain — that is the most common way a numbers slide contradicts itself. State the convention in the strip footnote.
Signature motion, "the report sets" (transform/opacity only): on deck:change the twelve hairlines draw down, transform: scaleY(0)→1 from transform-origin top, 400ms ease-out, staggered 35ms apart left to right (remove and re-add the class with transitions off in between to retrigger). The header rises 8px and fades in at 150ms over 450ms. The exhibit's direct children fade and rise 10px, 500ms cubic-bezier(.22,1,.36,1), staggered 70ms apart starting at 350ms. Takeaway and footer land together at 700ms. Then the strip figures count up and every delta chip pops in, scale(.9)→1 over 250ms. The outgoing slide simply fades over 220ms. Set <body data-reveal-delay="600" data-animate-delay="650">.
Signature exhibit, the WATERFALL (bridge) chart. Six equal columns in a grid with gap 0, plot height clamp(10rem, 38vh, 21rem) and a 4.2rem right gutter for the axis label. Each column carries an index i for the stagger; the bar is absolutely positioned left:19% right:19%, bottom: calc(var(--b) / var(--wmax) * 100%), height: calc(var(--h) / var(--wmax) * 100%), where --b is the level the bar starts at, --h its size and --wmax the axis maximum (150 for a 100 → 128 bridge, so the tallest bar sits at 85% and leaves room for its label). Start and end columns are full-height bars in #1a1f26 (--b:0); step columns use --pos or --neg. The value label (100, −22, +31, +14, +5, 128) sits 5px above the bar top at calc((var(--b) + var(--h)) / var(--wmax) * 100%); the step name and its detail sit below the plot in a matching six-column grid under a 1px rule. A 1px dashed connector per column runs from left:81% to left:119% at the column's closing level, so the top of one bar meets the base of the next. A solid base line closes the bottom, a dashed reference line marks the prior-year level with its label in the right gutter, and the caption names the unit: "Exhibit 1, Revenue bridge, indexed to 100 (last year = 100)". Bars grow with transform: scaleY(0)→1, origin bottom for gains and top for declines, 550ms, staggered 90ms from 500ms. The arithmetic must close: 100 − 22 + 31 + 14 + 5 = 128.
Under 900px the key-figures strip moves below the main column as a horizontally scrolling row and the twelve rules drop to six (hide every second one).

Writing rules

Action titles. Every headline is the finding, written as a full sentence with a verb. Good: "A smaller roster lifted retention to 92% and cut delivery time by 38%". Bad: "The numbers". If a reader reads only the titles they must get the whole argument.
Keep data-title as a separate 1–3 word tracker label ("The numbers") for the kicker, the segment meter and the page furniture. Both live on every slide.
One "so what" per slide in the Implication row: the consequence, not a summary of the body.
MECE groups. 3 or 4 parallel items, all the same kind of thing, mutually exclusive and collectively exhaustive.
Every figure gets a unit, a base and a comparison period, "92% client retention (FY2026, vs 74% FY2025)", never a bare "92". Deltas state what they are measured against; index series state the base year.
Every exhibit carries a source line ("Source: Studio engagement records, 2025–2026; n = 6 engagements"), a page number and the confidentiality mark. Small, muted, always present.

Navigation. ← → ↑ ↓ Space PageUp/PageDown move; Home/End; number keys 1-9 jump; F fullscreen; touch swipe. No wheel navigation. Clicking a segment in the top progress meter jumps to that slide; the key-figures strip is display only.