Starter Decksite2deck

01 Starter template

The deck engine, wearing its neutral skin.

This is the template every brand deck starts from — and a live tour of the component vocabulary. Every slide teaches the component it is built with: keep the structure, replace the copy, and let a brand's tokens.css re-dress the whole thing.

Single-file builds Opens from file:// Prints to PDF No webfonts, no network

site2deck · Starter DeckTemplate — replace this line

02 The method

Five steps from website to deck.

1 · Extract the design system straight off the company's website — exact colors, fonts, logo, iconography. 2 · Skin: encode it as a tokens.css over the brand-neutral engine in shared/. 3 · Author slides from the component vocabulary this deck demonstrates — no new CSS. 4 · Build to one self-contained HTML that opens offline and prints to PDF. 5 · Iterate by visual spot-check in the browser.

Extract Skin Author Build Iterate

site2deck · Starter DeckThe method

03 Component — the table

What this deck teaches, slide by slide.

The .menu table is the deck's register voice — agendas, tiers, comparisons. Header cells speak tracked uppercase in the mono face; tr.hl tints the row that matters. Here, the section up next.

Section	What it demonstrates	Key classes
Cover & titles	Photo-hero cover, grid-textured dividers	.slide.cover · .has-grid
Numbers	Stat tiles, the dark banner, the TBD marker	.stats · .banner · .tbd
Cards	The card family and its accent variants	.card · .acc–.acc-4 · .feature
Media	Splits and accent-washed photo cards	.split · .pcard
Icons & lists	Feature rows, category tiles, clean lists	.feat · .cats · ul.clean
Sequence	Roadmap lanes and roster columns	.road · .who
Sharing	Internal-only slides and the standalone build	data-internal · build.mjs

site2deck · Starter DeckAgenda

04 Component — stat tiles

Three or four numbers carry the argument.

Stat tiles hold your load-bearing numbers: a big display-font value over a one-line label. When a number isn't confirmed yet, it wears the TBD marker — loud on purpose, so a draft can never pass for final.

1280×720

the fixed stage every slide lays out on — type scales with cqi clamps, never hardcoded px

1

self-contained HTML file per build — attach it, open it offline, print it

0

network requests once built — fonts, icons, and images ship inside the deck

TBD

your fourth number — wrap anything unverified exactly like this until a source confirms it

The dark register — .banner

site2deck · Starter DeckStat tiles

05 Component — the card family

Cards are the workhorse. Accents do the sorting.

Accent 1 · .acc

The primary voice

Top border and kicker take --accent. A .ck kicker, a display-font h3, one short paragraph — that is the whole anatomy.

Accent 2 · .acc-2

First support hue

Use the support accents to sort cards into families — themes, phases, options — not to decorate.

Accent 3 · .acc-3

Second support hue

Each variant re-keys the border and kicker; the body type stays ink so the grid reads as one system.

Accent 4 · .acc-4

Third support hue

Four accents is the ceiling. If a slide needs a fifth category, the slide needs a rethink.

Plain · .card

No top border

The unaccented card is for supporting matter that shouldn't compete.

The .emp line sits pinned to the card's foot — a caveat, a source, a date.

Featured · .feature

The headline card

The one card allowed a tinted background — --color-primary-light with a primary border. At most one per slide.

site2deck · Starter DeckCards

06 Component — the split

Half media, half argument.

The split pairs one image with the case it supports. The media box is a bordered, rounded frame; the content column centers itself vertically.

The frame crops, never squashes — object-fit: cover fills the box at any aspect ratio.
ul.clean is the list voice — accent-dot bullets, a bold lead-in, one line of support each.
Alternate sides across slides — media left here, media right on the next split, so a long deck keeps a rhythm.

assets/split.svg is a placeholder — swap in a photo from the brand's own site and keep the alt text honest.

site2deck · Starter DeckThe split

07 Component — photo cards

Copy on photography, legible by design.

Each .pcard variant washes its image with one of the skin's accents, darkening to near-opaque behind the caption — so white type never gambles on what the photo is doing.

Wash · .p-1

Primary accent

The gradient runs --accent-rgb down into --accent-deep-rgb.

Wash · .p-2

Second accent

Same geometry, keyed to --accent-2-rgb. Use a trio to compare themes.

Wash · .p-3

Third accent

--accent-3-rgb, falling to ink at the base. Plain .pcard washes to pure ink.

site2deck · Starter DeckPhoto cards

08 Component — icons

An icon language without an icon font.

◐One glyph

◆One label

●Six across

▲Wraps to three

■Accent color

◈Surface fill

◆

Feature rows — .feat

Icon box, bold title, one-line description. Four to six of these make a slide.

●

Variants take the support accents

.feat.c-2 and .feat.c-3 re-key the icon box; the type stays ink.

▲

The starter uses plain glyphs

No icon webfont ships with the template — geometric characters stand in.

■

Brand decks self-host real icons

Bundle the site's icon font into assets/, then swap these glyphs for <i class="bi bi-*"> tags.

site2deck · Starter DeckIcons

09 Component — roadmap lanes

Extract, author, ship — in lanes.

The .road grid puts a tracked-uppercase timeframe over a heading and a short list, three lanes under one rule. It happens to be the workflow for this very repo.

First hour · extract

Skin the engine

Run node extract.mjs <url> against the brand's site
Spot-check tokens.css next to the live site
Swap in the real logo and a hero photo

First day · author

Write the slides

Start from these slides; keep the kicker → h2 → lede frame
Compose from the component vocabulary, not new CSS
Mark every unconfirmed number TBD

Ship · build

Build and share

node build.mjs your-deck — one standalone file
Add --public to strip internal slides
Print to PDF straight from the browser

site2deck · Starter DeckRoadmap

10 Sharing — build outputs

One deck, three files.

The builder inlines everything — styles, script, fonts, images — into a single HTML file you can attach to an email. The highlighted row is the file most people should receive.

Output	What it is	Send it to
index.html	The working copy — needs the repo beside it (shared/ engine, assets/).	Nobody. It's your editing surface.
starter-standalone.html	One self-contained file, every reference inlined. Opens offline, prints to PDF.	The client, the team, anyone.
starter-public.html	The standalone, minus every slide tagged data-internal.	Wider circulation.

Generated files are git-ignored. Rebuild them any time: node build.mjs starter, plus --public for the trimmed cut.

site2deck · Starter DeckBuild outputs

11 Component — the roster

Six files, one clear job each.

The .who entry is a name over a role — built for teams and contributors, equally good as a manifest. Top row travels with the deck; bottom row is the shared machinery.

tokens.css

The brand skin — colors, fonts, radii. The only stylesheet that changes per brand.

index.html

The slides, authored by hand from the component vocabulary this deck demonstrates.

assets/ & fonts/

Per-deck images, icons, and woff2 files — so a deck folder stays portable.

shared/deck.css

The engine — stage geometry, components, print block. Zero brand values.

shared/deck.js

Navigation — keys, click zones, touch, deep links, and the page counter.

build.mjs

The inliner — folds a deck and its assets into one standalone HTML file.

site2deck · Starter DeckThe roster

12 Sharing — internal slides

This slide never leaves the building.

Add the data-internal attribute to a slide's <section> tag and the public build drops the whole slide — markup, images, speaker candor and all.

Keep the working deck honest — guardrails, open questions, and draft economics live here.
One source file, two audiences — no forked decks quietly drifting apart.
The counter self-corrects — deck.js counts slides at load, so nothing needs renumbering.

Try it

Diff the two builds

Build both outputs and open them side by side: the standalone shows all 14 slides, the public build 13 — and no other difference.

site2deck · Starter DeckInternal only

13 Next

Now point it at a real brand.

Run the extractor against a company website and this same deck re-renders in their colors, their type, their logo. Keep the structure, replace the copy, and wrap anything you can't verify in a TBD marker. The skin changes; the discipline doesn't.

Your palette Your type Your logo Same engine

site2deck · Starter DeckNext

14 Colophon

The skin comes off. The engine stays.

Every slide you just read was shared/deck.css wearing this deck's neutral tokens.css. Replace the tokens and the same fourteen slides speak another brand's language — that is the whole trick.

Your wordmark here

your-company.com hello@your-company.com City, Country

site2deck · Starter DeckMIT — remix freely