Boardroom.

A narrow meta rail, one point per slide in serif, and a brass hairline that sweeps across on every change.

Look

As designed

Use Boardroom in the Studio Open full screen

How it moves

Dark, sober and expensive, an investment-bank pitch or a board pack rather than a startup deck. Use it for results reviews, investor updates and any argument that has to read as high-stakes and few-words.

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

Palette

Background#0e1621
Text#eef1f5
Muted#8d9bab
Accent#c8a15a
Surfacergba(255,255,255,.045)
Hairlinergba(255,255,255,.13)

Type: Source Serif 4 + Public Sans. Corners: 2px.

Layout

Deep dark stage (#0e1621), fixed inset 0, nothing scrolls. Two zones: a fixed meta rail down the left, width max(128px, 12vw), with a 1px rgba(255,255,255,.13) hairline on its right edge; and the body to its right.
Rail contents, three rows (grid-template-rows auto 1fr auto, padding 4.2vh 1.1rem 3.4vh): TOP, a 9px solid #c8a15a square mark, then the deck name ("Studio Year in Review") at 0.7rem, weight 600, uppercase, letter-spacing .16em, colour #eef1f5. MIDDLE (vertically centred), the slide's short data-title as a section label at 0.75rem, weight 600, uppercase, letter-spacing .18em, #8d9bab, with a 2.2rem × 1px #c8a15a rule above it. BOTTOM, the confidentiality mark and the date stacked, 0.65rem, #8d9bab. On every slide change the section label cross-fades: opacity → 0 over 300ms, swap the text, opacity → 1 over 300ms. It is not clickable.
Body. padding 9vh 6vw 8vh calc(rail + 4vw); slides all sit in one grid area (grid-area 1/1), each a flex column with justify-content centre, gap 3vh, max-width 68rem. Order inside a slide: kicker "Section 03" (0.68rem, weight 600, uppercase, letter-spacing .2em, #c8a15a); the action title; the object; the implication line.
Action title. 'Source Serif 4', 'Iowan Old Style', Georgia, serif at clamp(1.8rem, 3.2vw, 3.2rem), weight 400, line-height 1.2, letter-spacing -.01em, max-width 46ch, text-wrap balance, a sentence set like a pull quote in a prospectus. One accent word or figure inside it may be wrapped in <em> and set in #c8a15a italic; never more than one per slide.
Implication line (the "so what"): NOT a box. A 1px #c8a15a rule, 0.85rem of space, the label "Implication" at 0.68rem uppercase letter-spacing .2em #8d9bab, then one line of 'Public Sans', system-ui, sans-serif at 1rem weight 500 prefixed by a 6px solid #c8a15a square. Max-width 60ch. Restraint is the point.
Footer furniture, pinned at bottom 2.6vh across the body column (left calc(rail + 4vw), right 6vw, max-width 68rem): a 1px rgba(255,255,255,.13) hairline, then the slide's source line at 0.7rem #8d9bab on the left and, on the right, the tick-mark nav followed by "03 / 07" at 0.75rem weight 600 in #c8a15a with tabular figures.
Signature motion, "the sweep": a fixed 1px-tall element spanning the full stage at top 46vh, background #c8a15a, opacity .22, restarted on every deck:change (remove the class, force reflow, add it back). Two-step keyframe animation, 1100ms total, fill both: 0% transform scaleX(0) with transform-origin left centre, easing cubic-bezier(.65,0,.25,1) → 63.63% scaleX(1) (the 700ms extend) → 63.64% transform-origin flips to right centre, same easing → 100% scaleX(0) (the 400ms retract). It reads as a highlight, not a wipe. Under it the outgoing slide fades out over 300ms while the incoming slide drifts up from translateY(18px) and fades in over 900ms with a 200ms delay, easing cubic-bezier(.22,1,.36,1). Big figures count up in step. Nothing else moves. Set <body data-reveal-delay="700" data-animate-delay="700">.
Object overrides make the shared objects read as a memo, not tiles: cards lose their fill and border and keep only a 1px top hairline in #c8a15a at 40% (the accent card gets the full-strength hairline); stat values are set in 'Source Serif 4', 'Iowan Old Style', Georgia, serif at weight 400 with tabular figures over a 1px rule; rings use a 6px #c8a15a stroke with butt caps on a rgba(255,255,255,.13) track; the compare object drops its boxes, "before" gets a 1px rgba(255,255,255,.13) left border, "after" a 2px #c8a15a left border; bullets and timeline dots are squares; carousel dots are 2px × 10px brass ticks. Radius stays 2.
Signature exhibit, the Harvey ball scorecard: a table-like list of four assessment rows, grid-template-columns minmax(6rem,15rem) 2.6rem minmax(0,1fr), each row separated by a 1px rgba(255,255,255,.13) rule with .8rem padding. Left, the row label at 0.98rem weight 500; centre, a Harvey ball; right, a short #8d9bab verdict. A Harvey ball is a 22px inline SVG on viewBox 0 0 24 24: a rim circle cx12 cy12 r10.25, fill none, stroke #c8a15a, stroke-width 1.5; behind it a pie circle cx12 cy12 r5, fill none, stroke #c8a15a, stroke-width 10 (so it paints the full 10px radius), stroke-dasharray "<f × 31.416> 31.416" and transform="matrix(-1 0 0 1 24 0) rotate(-90 12 12)" so the wedge grows clockwise from twelve o'clock. Five states: 0 → dasharray 0, 25 → 7.854, 50 → 15.708, 75 → 23.562, 100 → 31.416; carry the level on data-fill and give each ball a <title> for screen readers. A legend row under the table spells the five states out (0 not raised · 25 below · 50 meets · 75 above · 100 strong) at 0.7rem #8d9bab. Set font-variant-numeric: tabular-nums on the whole exhibit.
Under 900px the rail becomes a top bar: the mark, deck name, section label and furniture in one wrapped row with the hairline along its bottom edge; body padding shrinks to 15vh 5vw 12vh and the scorecard drops to two columns with the verdict on its own row. Under 760px the rail drops the section label and the date, type steps down, and body padding becomes 13vh 5vw. Keep min-width 0 on the slide, its children and the scorecard cells so nothing can push the fixed stage wider than the viewport.

Writing rules

Action titles. The headline is the finding, a full sentence with a verb, not a label. Good: "A smaller roster lifted retention to 92% and cut delivery time by 38%". Bad: "Retention". If the reader reads only the titles, they must get the whole argument.
Keep both titles. data-title stays a 1–3 word section label ("The numbers") for the rail and the furniture; the action title is the long sentence in the body. Every slide has both.
The so-what. One implication line per slide, set under the brass rule, the consequence, not a summary of the slide. "Retention, not new business, now funds the studio", never "Retention went up".
MECE groups. Parallel items come in threes or fours, mutually exclusive and collectively exhaustive, and every item is the same kind of thing (all decisions, all phases, all commitments) with roughly the same length.
Sources and furniture. Every slide carries a source line ("Source: Studio engagement records, 2025–2026; n = 6 engagements"), a page number and the confidentiality mark. Charts carry labels, units and, where one is needed, a legend. Small, muted, always present, never decorative.

Navigation. → ↓ Space PageDown = next; ← ↑ PageUp = prev; Home/End; 1-9 jump; F fullscreen; touch swipe. No wheel. The rail's section label is not clickable; the only navigation affordance is a row of 7 brass tick marks at the bottom right (1px wide, 10px tall, data-goto buttons; the active one 2px wide and full brass).