# Themes · replit-deck Eight complete visual systems captured from **replit.com/slides**. Each theme is a commitment — once the deck picks a theme, every slide inherits from that theme's token set via ``. Do not override per-slide. All hex values were sampled from the actual Replit Slides landing-page PNGs with ImageMagick on **2026-04-29** (see `SKILL.md` → *Scope & provenance*). Don't guess, don't substitute "similar" colors from memory. To add or refresh a theme, follow the procedure in *Contributing a new theme* at the bottom of this file. --- ## How to pick | If the brief mentions… | Pick | |---|---| | SaaS, metrics, board, analytics, fund | `helix` | | law firm, memo, pre-read, confidential, investor note | `holm` | | art, sculpture, photography, catalog, portfolio, gallery | `vance` | | fashion, campaign, lookbook, SS26, jewelry, editorial | `bevel` | | policy, macro, finance report, world economy, dark mood | `world-dark` | | lighter companion deck for a world-dark topic (ESG, wellness finance, sustainability) | `world-mint` | | history, chapter, archive, long-form narrative, museum | `atlas` | | consumer product, real estate, lifestyle, playful | `bluehouse` | **Never mix two themes in one deck.** `` is the single source of truth for the whole deck — one value, no per-slide overrides. This is enforced as a P0 gate in `checklist.md`. If the brief really needs two visual registers (e.g. chapters vs. data), either pick the theme that already carries that internal contrast (`bluehouse` has gradient cards; `atlas` has chapter plates vs. data strips), or split the content into two separate decks. `world-dark` and `world-mint` are stylistic siblings (same palette, inverted surface), so if you need a companion deck in a different mood they are the most coherent pair — but **still one theme per file**. --- ## helix — Modern minimal Reference: replit slide-1, slide-4, slide-5. ``` --bg #fafafa near-white --fg #19191c ink --muted #6e6e73 --border #e4e4e7 --accent #5889fe electric blue --display Inter Display · weight 600 · tracking -0.02em --body Inter --mono JetBrains Mono (bps / YoY labels) ``` **Do** - Huge `.num` (`$1.37B`, `128%`, `42,850`) — dominant element on the slide, no decoration. - Blue shows up in `▲ 38% YoY` / `▼ 1 mo` labels only. Use the mono family for those. - Plenty of white space. Slides often have the content only in the top or left half. - Page counter bottom-right in mono (`03 / 05`). **Don't** - No gradients. No card shadows. No rounded accent bars. - Never put a KPI inside a blue-filled box — blue is type-color only. - Don't tilt or slant. - Don't add emoji or icons to metric cards. **Best layouts**: `kpi-row-6` · `split-hero-metric` · `big-number-center`. --- ## holm — Editorial serif memo Reference: replit slide-2, slide-5. ``` --bg #e4dfd7 warm cream --fg #0f0f0e ink --muted #7c7e84 --border #c7c1b7 --accent #52311d deep chestnut --display Tiempos / GT Super style serif · weight 500 --body Inter sans (body copy + mono eyebrows) --mono JetBrains Mono (MEMO 04 / APR 2026 style meta) ``` **Do** - Serif display only on the **one** hero statement per slide. Body copy stays sans. - Eyebrows (`SERIES A — CONFIDENTIAL PRE-READ`, `04 — THE ASK`) in **mono, uppercase, widely tracked**, colored by `--accent` or muted. - Large vertical rhythm. Think one sentence at 64–96px occupying the left half, the rest breathing. - A small chestnut wordmark ("Holm") in the top-left meta bar is the only branding. **Don't** - No pure white surface — the cream is the identity. Don't lighten to #fff. - Don't use the serif for body paragraphs (it will feel like a novel, not a memo). - No boxed cards. A memo has edges only from whitespace. **Best layouts**: `memo-hero-statement` · `two-column-ask` · `name-card-team`. --- ## vance — Gallery catalog Reference: replit slide-3, slide-7. ``` --bg #f1ede2 gallery cream --fg #171815 ink --bar #0a0a0a black band (top and/or bottom of slide) --bar-fg #f1ede2 cream-on-black --accent #171815 ink (there is no chromatic accent) --display serif display · weight 400 (italic variants encouraged) --body Inter ``` **Do** - Top band holds `CATALOG — PLATE NN`, `II OF V · FEATURED`, `© 2026 THE ARTIST` — always three-column meta in ALL CAPS small tracked type on black. - The artwork / photo fills the middle plate, edge-to-edge. - Serif title (`Untitled (Threshold)`) may break across two lines with italic for the parenthetical. - Bottom band mirrors top: caption on left (`Untitled (Threshold), 2022. Felt, plaster, and resin…`), `PHOTOGRAPHY — NAME` on right. **Don't** - No color accents. Chromatic noise kills the gallery tone. - Don't center-align text inside the bands — always left/center/right three-column. - Don't use the cream as a solid background without the black bands; the two-tone is the identity. **Best layouts**: `gallery-plate` · `spread-image-quote` · `index-grid`. --- ## bevel — Y2K editorial Reference: replit slide-6, slide-13. ``` --bg #0d0d0b near-black --fg #eae6dd warm off-white --muted #a29e95 --border #2a2a28 --accent #c8ff00 neon / chartreuse (outline + dots only) --display Y2K display face — Antonio / Bebas / italic chrome sans · weight 700 --body Inter ``` **Do** - Display wordmark (`bevel`, `reflex`) in the chrome-y Y2K italic face — oversized, often rotated off-axis by 0 (but tracked wide). - Dashed neon frames around product imagery. Each frame gets `::before` / `::after` neon dots in the corners. - Small neon square markers (`14 PIECES`, `SS26 INDEX`) in the corners. - Product imagery treated as lookbook: desaturated on black, caption under image in serif-italic small caps. **Don't** - Never fill anything with neon. Neon is outline, dot, or 1-char accent only. More than ~2% neon by area = slop. - Don't use photography that looks like stock SaaS. If the brief is SaaS, pick a different theme. - Don't use sentence case for the display wordmark. **Best layouts**: `campaign-cover` · `product-triptych` · `index-grid`. --- ## world-dark — Finance dark Reference: replit slide-8, slide-10. ``` --bg #0d3a2b deep racing green --fg #bcd6cd mint text --muted #789f91 --border #1d4c3c --accent #e8f615 neon yellow --display Inter Display · weight 500 --body Inter ``` **Do** - Big sans display for the report title (`World Finance Report`, `Monetary Policy`). - Neon yellow appears as: - a small **square marker** (14×14px) near section breaks, - the color of section labels (`Total debt`, `S&P 500`) above the dark green cells, - **never** as a fill for a text block. - Horizontal divider lines are 1px hairlines in `--border`. - Image tiles (portraits, skyline, streetscape) use tall 2:3 aspect, full-bleed, with captions in white overlaid bottom-left. **Don't** - No icons in KPI cells. - Don't use the yellow for links or CTAs — it is a pointer, not a button. - No rounded corners on dividers or cells. **Best layouts**: `finance-hero-grid` · `quadrant-policy` · `indicator-strip`. --- ## world-mint — Finance light (sibling) Reference: replit slide-9. Exact mirror of `world-dark`: swap `--bg` with `--fg`. Deep green becomes the type color; mint becomes the surface. Yellow accent stays identical. Use `world-mint` as a **standalone deck** when the topic is gentler (ESG report, wellness finance, sustainability). If a `world-dark` deck wants a lighter companion piece for a separate audience, make it a **separate deck file** with `data-theme="world-mint"` — do not alternate slides inside one deck (see one-theme rule above). **Do / Don't**: same as world-dark. **Best layouts**: `section-divider-giant-title` · `quadrant-policy` · `indicator-strip`. --- ## atlas — Museum chapter Reference: replit slide-11. ``` --bg #111010 near-black --fg #e7e6e2 ivory --muted #827d78 --border #2a2826 --accent #de3f40 vermilion --display serif display · weight 500 --body Inter ``` **Do** - Vermilion dot (●) before `THE ATLAS QUARTERLY · CHAPTER 01` in the meta bar. - Huge serif titles split across 2 lines (`The Imperial` / `Age.`) — the period is always vermilion. - Three-column data strip at the bottom: `PERIOD` / `REACH` / `CAPITALS`, labels in mono all-caps small, data in sans display (one word per column if possible). - Right half often carries an archival photograph inside a thin ivory hairline border with `PLATE I` label top-left and `EXHIBIT 04.B` tag top-right. - Progress bar at the very bottom (vermilion segment + ivory hairline). **Don't** - Never use the vermilion for body text or callouts — only for the terminal period, the meta dot, and the progress segment. - Don't pair the serif with a mono kicker that's larger than 12px; the mono must always feel like a catalogue footer. - Avoid images with modern styling (filters, gradients). Archive-grade black & white or sepia only. **Best layouts**: `chapter-plate` · `timeline-strip` · `photo-with-caption`. --- ## bluehouse — Consumer card Reference: replit slide-12. ``` --bg #0b1524 deep navy --fg #ffffff --muted #8ea0b8 --border #1a2c46 --accent #fb675d coral --accent-2 #ff8f68 peach (for gradient) --card-peach #e0af99 --card-lavender #c7cff0 --display Inter Display · weight 700 · tracking -0.025em --body Inter ``` **Do** - Big bold sans headlines (`Driving real estate ROI with prime properties`) with an inline **pill** highlighting a key noun (e.g., `ROI`) — pill uses `--card-peach` or `--card-lavender` background with navy text. - 3–4 cards below in a horizontal row, mixing: - one photo card with a subtle tint overlay, - one **coral→peach gradient** card with the hero stat (`+47%`), - one **cool lavender→blue gradient** card with a secondary stat, - one **navy / peach neutral** card for small numbers. - Cards are `border-radius: 24px`, 4:3 aspect, label top-left, number/stat bottom-left. - Tiny icon cluster top-left of gradient cards (e.g., property-pin chips overlapping). **Don't** - Don't use the coral for headline text. It lives **inside** gradient cards. - No more than one gradient direction per slide (either 135° coral→peach OR 180° lavender→blue, not both on the same card). - Don't put text over the photo area that's smaller than 16px — the imagery competes. **Best layouts**: `pill-headline-cards-row` · `product-gradient-grid` · `hero-photo-split`. --- ## Cross-theme don'ts (all 8) - No emoji (SaaS trap). - No hand-drawn SVG people (AI-slop). - No "aggressive purple gradient" — bluehouse is the only theme allowed to gradient, and only peach/coral/lavender. - No rounded left-border cards with a hex-shift accent (generic AI card). - Invented metrics are forbidden. Use `—` or a muted rectangle when the number doesn't exist yet. - The display face is a **theme setting**, not a slide setting. Never mix serif and Y2K in one deck. --- ## Contributing a new theme If replit.com/slides ships a new template you want reflected here, or you want to propose a fork theme, follow this procedure so colors stay honest (no memory guesses, no "looks about right"). ### 1. Capture the source PNG Screenshot the replit.com/slides card at **2× device pixel ratio** (macOS: `Cmd+Shift+4` on a HiDPI display captures 2×). Save as `reference-.png`. Crop to just the template card — exclude chrome and shadows. ### 2. Extract the dominant colors ```bash # Install once (macOS): brew install imagemagick magick reference-.png \ -resize 200x200 \ -colors 8 \ -unique-colors txt:- \ | tail -n +2 \ | awk '{print $3}' \ | sort -u ``` This quantizes to 8 dominant colors and prints their hex values. The top few will be surface / type / border; the rare one is usually the accent. For a specific point (e.g. sampling the accent from a known pixel): ```bash magick reference-.png -format "%[pixel:p{420,280}]" info: ``` ### 3. Map to the 6-token palette Every theme uses the same 6 tokens plus a display font. Fill in: ``` --bg surface (largest area, ≥ 50% coverage) --fg type color (largest area inside text blocks) --muted secondary text (~40% alpha feel) --border hairline dividers, 1px --accent chromatic accent (≤ 5% coverage — the rare color) --font-display sans / serif / Y2K display — see the three allowed families in template.html ``` If the source uses two near-identical grays, collapse to one `--border`. Don't invent new tokens; every theme must map cleanly to this set so `data-theme` switching stays lossless. ### 4. Add the theme block 1. Append a new `body[data-theme=""] { … }` block to `assets/template.html` in the theme tokens section. Mirror an existing block's token order. 2. Add the theme row to the `od.inputs.theme.values` enum in `SKILL.md` (frontmatter). 3. Add a "When to pick" row to the pick-table in `SKILL.md` and to the table in this file. 4. Write a new `## — ` section below (palette block + Do / Don't / Best layouts), matching the shape of the other eight. 5. Add a P1 theme-specific must to `checklist.md` (one bullet describing the theme's non-negotiable visual tell). 6. Add a row to the reviewer screenshot-mapping table in the PR description so future contributors can reconcile drift. ### 5. Verify - Render a one-slide example with the new theme and compare side-by-side with the source PNG. If the `--accent` looks off, re-sample with a larger `-colors` count (try `16`) and pick the one whose coverage matches the source. - Add an `example-.html` to `examples/` if the new theme is visually contrasting from the existing four (helix / holm / atlas / bluehouse). Otherwise a preview via `examples/README.md`'s instructions is enough.