Internal reference

Design system

Components and primitives for PageDecks, shown live in the current mode. The pattern behind them: context-v/blueprints/PageDeck-Pattern-for-Slide-Focused-Astro-Knots-Sites.md. See them working in the first deck.

ModeToggle

src/components/basics/ModeToggle.astro

Cycles light → dark → vibrant and remembers the choice. Sits wherever it is placed; every toggle on a page shares one mode.

Click to cycle. Props: class.

PageDeck

src/layouts/PageDeck.astro

The player. Wraps slide components (each renders one top-level <section>) in a scroll-snap container with keyboard control, a slide counter, #s-N deep links, and reveal on arrival. Props: label (required), enableScrollSnap, showHints, hintDuration.

<DeckLayout title="…" noindex>
  <PageDeck label="Deck title">
    <S01Cover />
    <S02Next />
  </PageDeck>
  <DeckChrome context={getDeckContext(Astro.url.pathname)} />
</DeckLayout>

Key	Action
↓ · PageDown · Space	Next slide (a slide taller than the screen scrolls first)
↑ · PageUp · Shift+Space	Previous slide
Home · End	First · last slide
← · →	Previous · next version of the deck (DeckChrome)
c	Hide or show the chrome
f	Fullscreen
m	Cycle color mode
Esc	Show the chrome again
Double-click	Upper half goes back, lower half goes forward

Keys with Cmd, Ctrl, or Alt held are left to the browser, so copying and finding still work.

DeckChrome

src/components/deck/DeckChrome.astro

The floating capsule at the bottom right of a deck: back to the gallery, version cycling when a deck has more than one version, slide up and down, and the mode toggle. Talks to PageDeck only through deck:section-* events. Props: context (from getDeckContext), homeHref.

SlideFolio

src/components/deck/SlideFolio.astro

The running head across the top of a slide. A double rule in light mode. Props: number, label.

Deck vocabulary

src/styles/deck.css

Classes slides compose. Their sizes come from --deck-* tokens on .page-deck, the one place to tune a deck's scale. Improvise the rest in inline Tailwind.

Eyebrow · .deck-eyebrow

A deck title in the current mode

A lede supports the title without competing with it.

51%

.deck-panel with .deck-stat

.deck-card + .fx-surface

Body text at --deck-font-body.

.deck-label

Small text at --deck-font-small.

<section class="deck-slide" id="s02-next" data-slot="next">
  <SlideFolio number={2} label="Next" />
  <div class="deck-inner">
    <p class="deck-eyebrow reveal-item">Eyebrow</p>
    <h2 class="deck-title reveal-item" style="--delay: 90ms">Title</h2>
  </div>
</section>

.deck-slide: One slide: full-height, snaps, padded by --deck-pad-*
.deck-inner: Centers content at --deck-measure
.deck-eyebrow: Mono kicker; oxblood in light, aqua in vibrant
.deck-title-xl / .deck-title: Display type at --deck-font-title(-xl)
.deck-lede: Large supporting line; italic in light
.deck-body / .deck-small: Running text sizes
.deck-stat: Big tabular figure
.deck-label: Small mono label
.deck-rule: Ink rule in light, gradient glow in vibrant
.deck-card: Card padding and radius (pair with .fx-surface)
.deck-panel: Top rule in light and dark, glass card in vibrant
.reveal-item: Fades in on arrival; stagger with style="--delay: 120ms"

Mode variants

Tailwind variants for improvising per mode inside a slide. They apply to utilities only, not to the component classes above; a component class that changes per mode says so in deck.css.

light:: Applies only in light mode
dark:: Applies in dark and vibrant (vibrant is dark-based)
vibrant:: Applies only in vibrant mode

This box is ruled ink in light, plain in dark, and a violet wash in vibrant.