/*
Poster: a loud, type-led, flat style. Big Shoulders Display carrying
every headline at poster scale, a bright raspberry opening, black
structure, indigo the accent, aqua the light fill. For a cover, a
one-sheet, or a launch page; a long document belongs in the sibling style,
Folio (lib/templates/styles/folio/), which is the restrained direction.
From St. Clair AI, Lahe Styles (https://stclair.ai/lahe-styles.html),
version 1.1.1. This style's page: https://stclair.ai/lahe-styles/poster.html
Load this file after lib/templates/system-tokens.css and
lib/templates/document.css. It sets its own raw palette, points the base's
colour roles at it, self-hosts its two fonts from ./fonts/, and adds rules
only where the direction genuinely differs from the base. Its layout is
the last block in the file, so this one file is the whole style.
Where it came from. Folio and Poster both come from three tearsheets
in the September 2026 documents brainstorm. B, Poster Block, is this
style's source: Ken called it "gorgeously bold", with the raspberry block
reading museum chic, the indigo band appealing to his gamer side, and the
black, indigo and raspberry bands running into each other as a keep. Ken's
reservation stands and is why this is not the default document style: it
reads "I'm a designer" more than "I'm an AI professional", and he was
unsure clients would like it at document scale. Ken approved this
direction as "beautiful, I love it" for a cover or a one-sheet.
Measured contrast. Every number from scripts/contrast.py, which is the only
place these are produced, written here by scripts/sync_headers.py. Floors:
4.5:1 for body and anything under 24px, 3.0:1 for a drawn mark or rule.
BEGIN MEASURED
body text on the page ground #000000 on #ffffff 21.00:1
secondary copy and the lede #55555d on #ffffff 7.38:1
section numbers, captions, meta #5f5f67 on #ffffff 6.33:1
a link in running prose #5215dc on #ffffff 8.40:1
the focus ring on the ground #5215dc on #ffffff 8.40:1
body text on the raised ground #000000 on #f2f2f3 18.77:1
a boxed table head on the raised ground #5f5f67 on #f2f2f3 5.65:1
body text in the default panel #000000 on #dff6f9 18.69:1
body text on the accent tint and code #000000 on #ebe5fb 17.13:1
body text on the emphasis tint #000000 on #fde4eb 17.47:1
the indigo insight label on its tint #5215dc on #ebe5fb 6.85:1
the deep raspberry caveat label on its tint #b0164c on #fde4eb 5.70:1
text on the black band and callout #ffffff on #000000 21.00:1
secondary copy on the black band #d4d4d8 on #000000 14.21:1
the aqua section number on the black band #6de1f0 on #000000 13.68:1
the aqua dot bullet on the black band #6de1f0 on #000000 13.68:1
the day number on the black today marker #ffffff on #000000 21.00:1
text on the indigo band and callout #ffffff on #5215dc 8.40:1
the dimmed white section number on the indigo band #cfbdf5 on #5215dc 4.90:1
text on the deep raspberry band and callout #ffffff on #b0164c 6.85:1
the section number on the deep raspberry band #fde4eb on #b0164c 5.70:1
the dot bullet on the deep raspberry band #fde4eb on #b0164c 5.70:1
black on the aqua callout #000000 on #6de1f0 13.68:1
the deep raspberry dot bullet on the ground #b0164c on #ffffff 6.85:1
the deep raspberry dot on the default panel #b0164c on #dff6f9 6.10:1
the deep raspberry all-day label, 12px text #b0164c on #ffffff 6.85:1
the black hanging rule #000000 on #ffffff 21.00:1
masthead and hero text on the raspberry band #000000 on #f6547e 6.49:1
the lede and meta line on the raspberry band #000000 on #f6547e 6.49:1
a link inside the raspberry band #000000 on #f6547e 6.49:1
a list dot inside the raspberry band #000000 on #f6547e 6.49:1
faint meta on the aqua wash block #5f5f67 on #dff6f9 5.63:1
faint meta on the raspberry wash block #5f5f67 on #fde4eb 5.26:1
faint meta on the indigo wash block #5f5f67 on #ebe5fb 5.16:1
the deep raspberry check on the raspberry wash #b0164c on #fde4eb 5.70:1
the deep raspberry check on the indigo wash #b0164c on #ebe5fb 5.59:1
the deep raspberry check on the chalk #b0164c on #f2f2f3 6.12:1
the deep raspberry status dot on the aqua badge #b0164c on #6de1f0 4.46:1
the error panel's red label on its tint #a8231c on #fbeceb 6.26:1
body text in the error panel #000000 on #fbeceb 18.30:1
the error panel's red frame on the ground #a8231c on #ffffff 7.19:1
END MEASURED
Pairs tried and dropped, with their numbers, are listed in scripts/contrast.py
under REJECTED: white on bright raspberry, bright raspberry as the caveat
label, an indigo link inside the raspberry band, black on indigo, aqua on
white, and aqua on the deep raspberry band.
*/
/* ---------- fonts, self-hosted ----------
A Google Fonts is not enough for a style folder: a style has to be
a folder the switcher can point at, and a folder that reaches the network
for its type renders wrong on a plane, behind a proxy, or in a PDF export.
One file per family, not one per weight, because Google's css2 endpoint
returns the same latin woff2 for every weight of a variable font.
| File | Family | Range | Google version |
| ------------------------------------- | --------------------- | ---------- | -------------- |
| big-shoulders-display-variable.woff2 | Big Shoulders Display | 400 to 900 | v24 |
| figtree-variable.woff2 | Figtree | 400 to 900 | v9 |
Both are SIL Open Font License 1.1. fonts/LICENSE carries the licence and
both copyright lines. These are the same two files Folio ships in its
own fonts/, copied rather than shared, so each style folder travels
alone. To update: fetch the css2 URL with a browser User-Agent so Google
returns woff2 blocks, pull the url() out of each latin block, copy the
files over these (and over Folio's), and update the version column above
in both places.
curl -H "User-Agent: Mozilla/5.0 ... Chrome/126.0 Safari/537.36" \
"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400..900&family=Figtree:wght@400..900&display=swap"
The fallback stacks in each font token stay in place, so a page that
cannot reach these files still gets a real face. */
@font-face {
font-family: "Big Shoulders Display";
font-style: normal;
/* The whole axis is declared because the file carries it. Folio and
Poster both use 800 for headlines, which is what B and O used and what
Ken saw. */
font-weight: 400 900;
font-display: swap;
src: url("./fonts/big-shoulders-display-variable.woff2") format("woff2");
}
@font-face {
font-family: "Figtree";
font-style: normal;
/* Runs past 700 so a inside a Figtree label that is already at 700
still gets a real face rather than a smeared fake bold. */
font-weight: 400 900;
font-display: swap;
src: url("./fonts/figtree-variable.woff2") format("woff2");
}
:root{
/* ---------- type ----------
Figtree is the display token, so the small display uses in the base
(section numbers, table heads, h4, labels) stay a normal-width face.
Big Shoulders is a separate token that the headline rule below reads,
and here it reaches h3 and the facts figure too: this direction spends
the poster face on everything big enough to carry it. */
--font-poster:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif;
--w-poster:800;
--font-display:"Figtree",system-ui,sans-serif;
--font-body:"Figtree",system-ui,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--w-display:700;
--w-bold:700;
/* Poster scale. B set h1 up to 152px and Ken's note was that a long line at
that size becomes a tower, so this stops short of it; the title a page
sets here should be five or six words. Token overrides, not rules. */
--text-h1:clamp(56px,9vw,120px);
/* h2 stops at 50px. At 72px, and still at 54px on a folded section with
its chevron, a section title of seven or eight words wrapped and pushed
the section number onto its own line under the heading. */
--text-h2:clamp(38px,3.9vw,50px);
--text-h3:clamp(26px,2.8vw,34px);
--text-figure:40px;
/* ---------- the palette, in Poster's own names ---------- */
--chalk:#f2f2f3;
--haze:#e3e3e6;
--black:#000000;
--graphite:#55555d;
--slate:#5f5f67;
--fog:#d4d4d8;
/* The bright raspberry carries black and never white. */
--raspberry:#f6547e;
--raspberry-deep:#b0164c;
--raspberry-dark:#8c1140;
--raspberry-wash:#fde4eb;
--indigo:#5215dc;
--indigo-deep:#3e0fae;
--indigo-wash:#ebe5fb;
/* Aqua reads only on black. On white it all but disappears (REJECTED). */
--aqua:#6de1f0;
--aqua-wash:#dff6f9;
/* Families for the specimen's palette view; the format is explained where
system-tokens.css declares the house version. White is the base's own
token, named here because it is this page's ground. */
--palette-families:"white chalk haze: The page ground, its raised ground and hairlines \
| black graphite slate fog: Body text and headlines, the bands, the rule \
| raspberry raspberry-deep raspberry-dark raspberry-wash: The opening band, and in its deep shade the dots, the caveat and the emphasis fill \
| indigo indigo-deep indigo-wash: The accent: links, the insight label, the indigo band \
| aqua aqua-wash: The light fill, the default panel, and marks on the black band";
/* ---------- roles ---------- */
--surface:#ffffff;
--surface-raised:var(--chalk);
--on-surface:var(--black);
--on-surface-soft:var(--graphite);
--on-surface-faint:var(--slate);
--border:var(--haze);
--accent:var(--indigo);
--accent-hover:var(--indigo-deep);
--accent-tint:var(--indigo-wash);
--link:var(--indigo);
--focus:var(--indigo);
--mark:var(--raspberry-deep);
--fill:var(--aqua);
--on-fill:var(--black);
--tint:var(--aqua-wash);
/* The deep shade, carrying white. The bright raspberry carrying black was
tried here first and dropped; contrast.py says why. */
--emphasis:var(--raspberry-deep);
--emphasis-hover:var(--raspberry-dark);
--emphasis-tint:var(--raspberry-wash);
--structure:var(--black);
--on-structure:#ffffff;
--on-structure-soft:var(--fog);
--on-structure-faint:var(--aqua);
/* ---------- lines and radius ----------
O's 6px rule: heavy rules match the heavy face. Square corners. */
--divider:6px solid var(--black);
--line:2px solid var(--haze);
--line-ink:3px solid var(--black);
--r:0px;
--r-lg:0px;
/* No pills in this family: the calendar's today marker is square. */
--r-pill:0px;
}
/* ---------- headlines ----------
The poster face on every heading big enough to hold it, plus the facts
figure, with a tight line-height: Big Shoulders at the base's 1.12 leaves
air between stacked lines. The specimen ladder samples are listed so the
specimen reports the face a reader sees rather than the display token. */
h1,h2,h3,.facts dt,
.ladder--h1,.ladder--h2,.ladder--h3,.ladder--figure{
font-family:var(--font-poster);
font-weight:var(--w-poster);
line-height:.95;
letter-spacing:0;
}
/* ---------- the opening band ----------
The raspberry block behind the masthead and the hero, which is B's museum
chic moment. Done without a wrapper element, the same way as Textbook's
caramel band: the two elements drop the column's max-width and take the
same inset back as padding, so the ground runs edge to edge while the text
stays on the column. No vw unit, because 100vw includes the scrollbar.
The selector mirrors the page rule's own shape so the two carry the same
specificity and this file, loading second, wins. The text roles are
repointed to black for the band's own ground: indigo and the greys all
measure under the floor on raspberry. */
:is(body, body > main, .band) > :is(.masthead, .hero){
background:var(--raspberry);
max-width:none;
padding-inline:var(--layout-bleed);
--on-surface-soft:var(--black);
--on-surface-faint:var(--black);
--link:var(--black);
/* A list in the opening (a rendered Markdown hero carries one) drew its
dots in deep raspberry on the bright raspberry, which all but vanished.
The marks are black here, like the text. */
--mark:var(--black);
}
/* ---------- a page with a main wrapper ----------
Lahe renders Markdown into body > main, and the base gives main the
column. Under that, the opening band and every block were held to the
column: their colour stopped at its edge, and a bullet hanging at the
list inset sat on that edge. Here main gives up the column and runs the
full page width, so the hero and the blocks inside it go full bleed the
same way they do on a page with no wrapper, and take the column back as
padding. Anything else in main (Lahe's metadata fold, its read-only note)
is put back on the column. The selector carries the base column rule's
specificity so it wins. */
:is(body, .band) > main:not(.band, [data-lahe]){max-width:none;padding-inline:0}
body > main > :not(.masthead, .hero, section.sheet, details.fold, .checkin, .band, .bleed){
max-width:var(--maxw);
margin-inline:auto;
padding-inline:var(--gutter);
}
/* ---------- the opening of a rendered Markdown document ----------
A Markdown hero holds everything before the first H2, and that can be the
whole document: Lahe's CLI reference has pages of prose and tables before
its first section, and all of it sat on the bright raspberry, which is a
fill for a title, not for reading. So in a rendered Markdown page the
raspberry band sits behind the title alone, and the rest of the opening
goes back to the page ground with the page's own roles.
The title's band runs edge to edge with a spread box-shadow, clipped to
the title's own height. It draws no shadow: it is a flat fill, and it is
used because a percentage inside the title would measure against the
hero's narrower content box, not the page. */
:is(body, .band) > main > .hero{
background:var(--surface);
padding-block-start:0;
--on-surface-soft:var(--graphite);
--on-surface-faint:var(--slate);
--link:var(--indigo);
--mark:var(--raspberry-deep);
}
:is(body, .band) > main > .hero > h1{
background:var(--raspberry);
box-shadow:0 0 0 100vmax var(--raspberry);
clip-path:inset(0 -100vmax);
padding-block:var(--section-gap-narrow) var(--s6);
margin-bottom:var(--section-gap-narrow);
/* A Markdown title is whatever its author wrote, often ten words, and at
the full poster h1 it stood four lines tall: the tower Ken warned about.
It takes the section heading's display size instead, so the page opens
at the same scale it keeps. */
font-size:var(--layout-display-h2);
}
/* A hero on its own ground carries the full section gap inside that ground,
so the room under the lede lives inside the band. */
:is(body, body > main, .band) > .hero{padding-block-end:var(--section-gap)}
/* ---------- the emphasis band ----------
Aqua is the faint role on black, and it measures under the floor on deep
raspberry, so this band repoints its own faint role to the raspberry wash.
The base's .band--purple .n rule then resolves through it unchanged. */
.band--purple{--on-structure-faint:var(--raspberry-wash)}
/* ---------- list markers inside a band ----------
The base leaves a dot at --mark and a numeral at --on-surface inside a
band; both take the band's own faint colour instead. */
.band ul li::before{background:var(--on-structure-faint)}
.band ol li::before{color:var(--on-structure-faint)}
/* =========================================================================
COMPONENTS: the 1.1.0 set, in poster terms.
The base draws these quietly: hairline frames, washes, the display face at
a modest size. Here they sit on the layout's coloured blocks, where a haze
hairline reads as a grey smudge and a wash disappears into a wash. So the
frames are the style's black rule, the fills are the saturated colours, and
every figure big enough for the poster face gets it.
========================================================================= */
:root{
/* The poster face is condensed, so a number needs more size than the base
gives it to carry the same weight on the page. */
--text-stat:clamp(44px,4.6vw,60px);
--text-stat-large:clamp(72px,10vw,128px);
--text-quote:clamp(36px,4.2vw,56px);
/* Every picture is framed in the black rule: a screenshot with a white
ground needs an edge, and on a coloured block a haze line reads grey. */
--image-frame:var(--line-ink);
}
/* ---------- stat tiles ----------
The bordered tile takes the black frame, the tinted one is a solid aqua
block carrying black, and the large one is a black poster panel with the
number in white. The number is always the poster face. */
.stat-value{font-family:var(--font-poster);font-weight:var(--w-poster);letter-spacing:0;line-height:.9}
.stat{border:var(--line-ink)}
.stat--tint{
background:var(--fill);
border-color:transparent;
--on-surface-soft:var(--on-fill);
--on-surface-faint:var(--on-fill);
}
.stat--large{
background:var(--structure);
border-color:var(--structure);
color:var(--on-structure);
--on-surface-soft:var(--on-structure-soft);
--on-surface-faint:var(--on-structure-soft);
}
/* ---------- pull quote ----------
A headline, not a sentence in bold: the poster face at quote scale. The
ruled version takes the 6px black rule above and below, the same weight as
the rule under a section heading. */
blockquote.pullquote p{font-family:var(--font-poster);font-weight:var(--w-poster);line-height:.98;letter-spacing:0}
blockquote.pullquote footer{font-weight:var(--w-bold);color:var(--on-surface)}
blockquote.pullquote.pullquote--ruled{border-block:var(--divider)}
/* ---------- badges ----------
The tinted badges are washes in the base, and the layout's blocks are the
same washes, so a raspberry badge on a raspberry block vanishes. Here every
badge is a saturated fill: indigo and deep raspberry carry white, aqua
carries black. */
.badge{font-weight:800}
.badge--cobalt{background:var(--accent);color:var(--on-structure)}
.badge--purple{background:var(--emphasis);color:var(--on-structure)}
.badge--sage{background:var(--fill);color:var(--on-fill)}
.badge--cobalt .badge-dot,.badge--purple .badge-dot{background:var(--on-structure)}
/* ---------- eyebrow ----------
Black and heavy rather than faint: on a coloured block a grey label reads
as a smudge. Spaced, the way the section tab is. */
.eyebrow{font-weight:800;color:var(--on-surface);letter-spacing:.04em}
/* ---------- step sequence ----------
A black grid: the outer frame and the rules between steps are all the
black rule. The number is the poster face, as big as the facts figure. */
ol.sequence:not(.sequence--rows) > li + li{border-left:var(--line-ink)}
ol.sequence > li::before{
font-family:var(--font-poster);
font-weight:var(--w-poster);
font-size:var(--text-figure);
line-height:.9;
color:var(--on-surface);
}
ol.sequence--rows > li,ol.sequence--rows > li + li{border-top:var(--line-ink);grid-template-columns:3rem minmax(0,1fr)}
ol.sequence--rows > li:last-child{border-bottom:var(--line-ink)}
ol.sequence--rows > li::before{font-size:var(--text-h3);line-height:.9}
/* ---------- data table ----------
The naked table's total already takes the 6px black rule. The boxed table's
total is a black bar with white figures, the bottom line of a poster. */
table.boxed tfoot td{background:var(--structure);color:var(--on-structure);border-top:var(--line-ink)}
/* Inline code in a cell holds together, so a flag such as --state-dir never
breaks at its own hyphen; the cell wraps between flags instead. The first
column is left free to wrap: it holds the row's label, which can be a whole
command, and held on one line it pushed the table past the column. */
td:not(:first-child) code{white-space:nowrap}
/* ---------- figure on a plate, and the option cards ----------
Both are printed sheets laid on a coloured block: the page ground inside,
the black rule round the edge. The plate's caption strip is ruled off in
black too. */
figure.plate,.option{border:var(--line-ink);background:var(--surface)}
figure.plate figcaption{border-top:var(--line-ink);color:var(--on-surface)}
figure.plate figcaption b{font-weight:800}
.image-card{background:var(--surface)}
/* ---------- full-width image ----------
The picture is its own block in the stack: it runs edge to edge between
black rules, and its caption sits on a black strip under it, so it stacks
flush with the coloured sections above and below. */
figure.bleed{background:var(--structure)}
.bleed > figcaption{margin-top:0;padding-block:var(--s3) var(--s5);color:var(--on-structure-soft)}
/* ---------- the error panel ----------
Same red as the base, framed in the style's 3px rule weight. The red is the
base's status colour: Poster has no red of its own, and the deep raspberry
is already the emphasis, so it cannot also mean "failed". */
.panel--danger{border:3px solid var(--danger)}
/* =========================================================================
LAYOUT: stacked blocks.
Everything above sets colour and type. Everything below changes structure
only, on the shared markup: the section head, the page grid, alignment,
the opening, and rhythm. It reads the base's --layout-bleed and
--layout-display-h2.
1. Every section is its own full-width block of colour, and the blocks
touch, so the page reads as a stack of posters rather than a column
of text with gaps. The grounds cycle through the palette's washes.
Body copy sits on each one, so the grounds are the washes, never the
saturated fills (the house rule on long text over a saturated
ground). A section that holds a tinted component (a panel, an
insight, code) goes back to the page ground, so the component keeps
its own edge.
2. The heading is huge and flush left, with the heavy rule below it.
3. The number is a small black tab hanging from the top edge of its
block, at the right-hand corner of the column.
4. The opening band and the three full-bleed bands already are blocks;
they lose their top margin so they stack flush with the rest.
5. Under 820px the blocks stay full width, the heading comes down a
step, and the tab stays in the corner.
========================================================================= */
:root{
--layout-display-h2:calc(var(--text-h2) * 1.6); /* a section opens like a cover */
}
/* ---------- the blocks ----------
The selector mirrors the page rule's shape so it carries the same
specificity, and this rule, coming after it, wins. */
:is(body, body > main, .band) > :is(section.sheet, details.fold, .checkin){
max-width:none;
padding-inline:var(--layout-bleed);
position:relative;
}
section.sheet{padding-block:var(--section-gap)}
section.sheet:nth-of-type(4n+1){background:var(--tint)}
section.sheet:nth-of-type(4n+2){background:var(--emphasis-tint)}
section.sheet:nth-of-type(4n+3){background:var(--accent-tint)}
section.sheet:nth-of-type(4n+4){background:var(--surface-raised)}
section.sheet:has(.panel, .insight, pre, .callout){background:var(--surface)}
details.fold{background:var(--surface-raised);padding-block-start:var(--section-gap)}
.checkin{background:var(--tint);padding-block:var(--section-gap)}
.band{margin-top:0;position:relative}
body > footer{margin-top:0}
/* ---------- the head: huge, flush left, the heavy rule below ---------- */
.sheet-head,details.fold summary.fold-head,.checkin .checkin-head{
border-top:0;
padding-top:0;
border-bottom:var(--divider);
padding-bottom:var(--s3);
}
.band .sheet-head{border-bottom-color:var(--on-structure)}
:is(.sheet-head,.fold-head,.checkin-head) h2{font-size:var(--layout-display-h2)}
/* ---------- the number, a tab in the top corner ---------- */
:is(.sheet-head,.fold-head) .n{
position:absolute;
top:0;
right:var(--layout-bleed);
padding:var(--s1) var(--s3);
background:var(--structure);
color:var(--on-structure);
font-size:var(--text-micro);
letter-spacing:.06em;
}
/* On a black band the tab turns over: the band's text colour, black on it. */
.band :is(.sheet-head,.fold-head) .n{background:var(--on-structure);color:var(--structure);opacity:1}
.band--cobalt .sheet-head .n{color:var(--accent)}
.band--purple .sheet-head .n{color:var(--emphasis)}
/* A band's inner element is the one that carries the column, so the tab is
placed against the band itself, at the same corner as on every block. */
.band > div{position:static}
/* ---------- the two smaller heads ----------
They sit inside a block, so the tab stays with the block's own head: the
medium head's label is a small black tab at the right end of its own rule,
in the flow. Each level keeps the rule below its heading and drops weight:
6px under the section, 3px under the medium head, 2px under the small one. */
.sheet-head--medium{
border-bottom:var(--line-ink);
padding-bottom:var(--s2);
align-items:flex-end;
}
.sheet-head--medium .n{
position:static;
padding:var(--s1) var(--s3);
background:var(--structure);
color:var(--on-structure);
font-size:var(--text-micro);
letter-spacing:.06em;
}
.sheet-head--small{border-bottom:2px solid var(--black);padding-top:0;padding-bottom:var(--s2)}
@media (max-width:820px){
:root{--layout-display-h2:calc(var(--text-h2) * 1.15)}
section.sheet{padding-block:var(--section-gap-narrow)}
/* The tab needs room above the heading on a phone, where the heading can
reach the right edge. */
section.sheet,details.fold,.checkin{padding-block-start:calc(var(--section-gap-narrow) + var(--s4))}
/* The boxed sequence stacks, as in the base, with the black rule between
the steps instead of the haze hairline. */
ol.sequence:not(.sequence--rows) > li + li{border-left:0;border-top:var(--line-ink)}
}