Same words.
Different worlds.

Style Lab. One slide of HTML, dressed eight ways.
Change the stylesheet. Keep the story.

  • 00 House style

  • 01 Risograph zine

  • 02 Swiss poster

  • 03 Neo-brutalist

  • 04 Sketchnote

  • 05 Blueprint

  • 06 Broadsheet

  • 07 LaTeX Beamer

Arrow keys to explore. Near the end, restyle the same slide live.

One specimen. Eight stylesheets.

Every style slide repeats this HTML. Only one class on the stage changes.

<div class="sl-stage sl-riso">
  <article class="sl-specimen">
    <p class="sl-kicker">Field notes · Vol. 1</p>
    <h3 class="sl-title">Good ideas travel…</h3>
    <p class="sl-dek">Sketch it, shape it…</p>
    <ol class="sl-steps">Sketch · Shape · Ship</ol>
    <p class="sl-stat">3 steps, one idea</p>
    <p class="sl-note">Same words on every…</p>
  </article>
</div>
  • TypeEight type systems. Seven ship as bundled open fonts.
  • ColorPalettes, blend modes, and overprinted inks.
  • TextureGrain, halftones, paper, and grids drawn by CSS.
  • LayoutThe same elements, placed by different grids.
  • MotionA signature entrance and transition for each style.

What stays fixed: the words, their order, and their meaning.

00

House style

Dark panels, Segoe UI, thin borders, one mint accent

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

01

Risograph zine

Two fluorescent inks, overprint, halftone, grain

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

02

Swiss poster

Strict grid, heavy grotesque, signal red, one circle

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

03

Neo-brutalist

Loud flat color, thick outlines, hard offset shadows

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

04

Sketchnote

Dot-grid paper, marker lettering, highlighter, sticky note

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

05

Blueprint

Grid, callouts, dimensions, title block

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

06

Editorial broadsheet

Blackletter nameplate, news serif, ruled columns

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

07

LaTeX Beamer

Frame title, theorem blocks, footline, Computer Modern

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

Restyle it live.

Field notes Vol. 1

Good ideas travel in small steps.

Sketch it, shape it with feedback, then ship it where people can use it.

  1. Sketch Make the idea visible.
  2. Shape Invite feedback early.
  3. Ship Put it in people’s hands.

3 steps, one idea

Same words on every style slide. Only the stylesheet changes.

Choose a style. The same elements morph into their new places.

House style

In the HTML version, these buttons restyle the specimen live.

Every place a Marp style can live.

Official levers, from a whole deck down to one slide. Checked levers drive this deck.

Theme CSS

  • /* @theme style-lab */Names the theme. Marp CLI finds it with --theme-set.
  • @import 'default';Extends a built-in theme: default, gaia, or uncover.
  • section::after { … }Styles the page number from attr(data-marpit-pagination).
  • /* @size 4:3 960px 720px */Adds a slide size preset in Marp Core.

Markdown

  • <!-- _class: sl sl-style-slide -->Classes one slide; without the underscore, every slide after it.
  • <style scoped>Styles only the current slide, like the yellow code here.
  • <!-- backgroundColor: #111 -->Directives also set color, header, footer, and paginate.
  • ![bg left:40% sepia](photo.jpg)Splits and filters background images.

Marp Core and CLI

  • <!-- class: invert -->Built-in color schemes; Gaia adds gaia and lead.
  • # <!-- fit --> Big titleFits a heading when the theme enables @auto-scaling.
  • <!-- _transition: drop -->Runs a slide transition in Marp CLI's HTML.
  • @keyframes marp-incoming-transition-…Defines a custom transition in theme CSS.

Go further: awesome-marp · Marp Community Themes · Marp Template Library · Built-in themes · Bespoke transitions

Change the voice. Keep the words.

Content first.

Write the words once. Let classes and stylesheets carry the personality.

Legible in every outfit.

Contrast, reading order, and size must survive each style, and print.

Bring your fonts.

The PDF is rendered on a runner that has none of your fonts installed.

Different worlds. The same words, still readable.

Further reading: CSS Zen Garden · awesome-marp · Marpit theme CSS · View Transitions · SIL Open Font License

Style Lab is CSS Zen Garden for slides. Every style slide repeats the same HTML specimen; only one class on its stage changes. Eight complete styles follow: the house style of the other decks as a control, then a risograph zine, a Swiss poster, neo-brutalism, a sketchnote, a blueprint, a broadsheet front page, and LaTeX Beamer, the look the Marp community recreates most often. Every departure bundles its fonts locally under open licenses, so the HTML and the PDF render the same type on any machine; the house control keeps the other decks' system fonts. Textures are CSS gradients, blend modes, and SVG data URIs; the deck contains no raster images. The live restyle slide morphs one element tree between styles with the View Transition API. Source: https://www.csszengarden.com/

Marp scopes theme CSS to slides, so each style is a set of descendant rules under one class: sl-house, sl-riso, sl-swiss, sl-brutal, sl-sketch, sl-blueprint, sl-editorial, or sl-beamer. The specimen markup contains nothing style-specific. Its data-text attribute feeds the risograph's second ink, but it is present on every copy. Decorative labels such as the blueprint's QTY come from CSS generated content with empty alternative text, so assistive technology reads only the shared words. Source: https://marpit.marp.app/theme-css

The control: the visual language of the other decks. A dark radial background, Segoe UI with an Arial fallback, thin-bordered panels, and one accent color. Every following style uses these exact words, in this order, with this markup. The next cut uses Marp's star transition.

A risograph prints one ink per drum, so colors overprint and drift out of register. This page is a stapled two-page zine spread. The headline's second ink is a pseudo-element with mix-blend-mode: multiply, so overlaps darken like real overprint, and the three steps are overprinted circles. Halftone dots are a repeating radial gradient under a mask; the grain is SVG feTurbulence in a data URI. Fluorescent pink is decorative only: text uses dark navy for AA contrast. Fonts: Bricolage Grotesque and the Special Elite typewriter face. Source: https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode

The International Typographic Style: a visible column grid, flush-left and ragged-right grotesque type, asymmetric balance, and one geometric form. The red circle is the stat paragraph itself, rounded with border-radius. Rules above the steps are borders; faint column lines are a repeating linear gradient. Font: Archivo.

Neo-brutalism exaggerates the materials of an interface: thick black outlines, hard offset shadows without blur, saturated flat fills, and heavy display type. The arrows between steps are clip-path polygons, and the kicker rides the black ticker strip at the bottom. Watch for color fatigue and hard shadows that crowd small text. Fonts: Dela Gothic One and Archivo.

A sketchnote is a hand-drawn summary: dot-grid paper, marker lettering, a highlighter, and doodled frames. The three steps climb like a staircase. Box outlines, arrows, and the circle around the number are SVG data URIs stretched with preserveAspectRatio="none" and non-scaling strokes, so the line weight stays even at any size. The highlighter is a thick text-decoration underline painted behind the glyphs. Font: Kalam.

Engineering drawings use a drafting grid, condensed upper-case lettering, numbered balloon callouts, dimension lines, and a title block in the lower-right corner. Here the kicker, stat, and label become title-block cells, and CSS counters number the balloons. Light lines on cyanotype blue; text stays near-white for contrast. Font: Barlow Condensed.

A broadsheet front page: a blackletter nameplate between two ears, a folio line, a news-serif headline and italic deck, columns separated by rules with a blackletter drop cap, a pull figure, and an editor's note box. The drop cap is ::first-letter; the column rules are borders. Fonts: UnifrakturMaguntia and Old Standard TT.

LaTeX Beamer is the academic slide class, and the look the Marp community recreates most often: awesome-marp lists Beam, Neobeam, and marp-theme-academic. Its grammar is a headline bar, a frame title, theorem-style blocks with colored title bars, a three-part footline, navigation symbols, and Computer Modern type. On entry, the pieces uncover in steps like Beamer's \pause overlays. This is original CSS; no community theme code is copied. Font: CMU Sans Serif (Computer Modern Unicode). Sources: https://github.com/marp-team/awesome-marp and https://ctan.org/pkg/beamer

Choose a style. The runtime swaps one class on the stage inside document.startViewTransition. Temporary view-transition-names let the browser move each element from its old box to its new one while cross-fading the rendering. The names exist only during a switch, so Marp's slide transitions are unaffected. Reduced motion switches instantly. Print, presenter, and no-JS views keep the authored house style, and the buttons appear only in the audience window. Chrome and Edge morph the parts. Safari cross-fades the stage instead, because WebKit misplaces elements inside Marp's scaled slides; browsers without View Transitions cross-fade too. Sources: https://developer.mozilla.org/docs/Web/API/View_Transition_API and https://bugs.webkit.org/show_bug.cgi?id=23113

A copyable map of the official styling levers. Theme CSS follows Marpit: the @theme comment names a theme, @import extends another, and section::after styles pagination. Marp Core adds @size presets, @auto-scaling for fitting headers, and the built-in default, gaia, and uncover themes. Directives and inline styles work from Markdown: _class targets one slide, and <style scoped> styles only this one. Marp CLI's bespoke HTML adds slide transitions, including custom keyframes. Sources: https://marpit.marp.app/theme-css, https://marpit.marp.app/directives, https://github.com/marp-team/marp-core/blob/main/docs/theme-authoring.md, https://github.com/marp-team/marp-cli/blob/v4.5.1/docs/bespoke-transitions/README.md

Style is a layer on top of content. Keep the words, their order, and the semantic markup stable; let classes carry type, color, texture, layout, and motion. Check every style for contrast and reading order, and print it. Bundle fonts with their licenses: the published PDF is rendered on a Linux runner. Sources: https://www.csszengarden.com/ and https://openfontlicense.org/