first-commit
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
This commit is contained in:
Zakaria
@@ -0,0 +1,112 @@
|
||||
# Self-check · replit-deck
|
||||
|
||||
Run this list silently before emitting `<artifact>`. Anything failing at **P0** is a regression — fix it, don't ship. P1 means the deck is emittable but will feel AI-generated to a designer; fix if you have two passes left. P2 is polish.
|
||||
|
||||
Score yourself 1–5 on each block. Anything ≤ 3 means re-do that dimension.
|
||||
|
||||
---
|
||||
|
||||
## P0 — hard gates (non-negotiable)
|
||||
|
||||
### Theme lock-in
|
||||
|
||||
- [ ] `<body data-theme="…">` is set to ONE value from the enum.
|
||||
- [ ] No `style="--bg: …"` or `style="--accent: …"` on individual slides (grep confirms).
|
||||
- [ ] No `<style>` block inside a `<section>`.
|
||||
- [ ] No imported font from Google/Adobe. All fonts resolve via the theme's `--font-*` stacks.
|
||||
|
||||
```bash
|
||||
grep -nE 'style="--(bg|fg|accent|surface|border|muted)' index.html && echo FAIL
|
||||
grep -nE '<style' index.html | wc -l # expect 1
|
||||
grep -nE '@import|<link.*font' index.html && echo FAIL
|
||||
```
|
||||
|
||||
### Structural
|
||||
|
||||
- [ ] Every `<section>` has `class="slide"` (plus optional `center`).
|
||||
- [ ] Every `<section>` has a unique `data-screen-label="NN Name"`.
|
||||
- [ ] Deck chrome is present exactly once: `.deck-progress`, `.deck-counter`, `.deck-hint`.
|
||||
- [ ] The nav `<script>` is unchanged from the seed.
|
||||
|
||||
### Honesty
|
||||
|
||||
- [ ] No invented metrics. Any number displayed is from the user's brief, or labeled as illustrative.
|
||||
- [ ] Unfilled content uses `—` or a muted rectangle, not lorem or AI-made stats like "10× faster".
|
||||
- [ ] No stock SaaS emoji (🚀 📊 ✨).
|
||||
|
||||
---
|
||||
|
||||
## P1 — taste gates
|
||||
|
||||
### Typography
|
||||
|
||||
- [ ] Display face matches the theme:
|
||||
- `helix` / `world-*` / `bluehouse` → sans display, weight 600–700.
|
||||
- `holm` / `vance` / `atlas` → serif display.
|
||||
- `bevel` → Y2K italic display (Antonio / Bebas / Impact fallback).
|
||||
- [ ] Exactly ONE display family per slide. No swapping mid-slide.
|
||||
- [ ] `.lead` paragraph uses the body sans, not the display face.
|
||||
- [ ] Mono is reserved for meta-bar, eyebrow small-caps, and `.num-delta`. Not body copy.
|
||||
|
||||
### Accent restraint
|
||||
|
||||
- [ ] Accent color appears **1–2 times per slide maximum**.
|
||||
- [ ] Accent is NEVER used for:
|
||||
- body paragraph text,
|
||||
- a filled box bigger than 120×40px (bluehouse gradient cards excepted),
|
||||
- multiple adjacent elements ("accent chain").
|
||||
- [ ] In `holm` / `atlas`, accent shows up on: the final period of a title, the em-dash-prefixed eyebrow, and the progress segment. Nowhere else unless deliberate.
|
||||
|
||||
### Layout rhythm
|
||||
|
||||
- [ ] For 6+ slide decks: at least one slide is `center` and one isn't.
|
||||
- [ ] No three slides in a row look visually identical (same layout, same density).
|
||||
- [ ] For 8+ slides: include at least one "breath" slide — a giant-title divider or a one-stat hero.
|
||||
|
||||
### Theme-specific musts
|
||||
|
||||
- [ ] **helix**: every metric slide uses the `.num` primitive, not custom type.
|
||||
- [ ] **holm**: the serif appears on the headline only; meta, eyebrow, body are sans + mono.
|
||||
- [ ] **vance**: every slide has both top and bottom black bands (`.vance-top` 2×), OR is a full-bleed image slide with meta overlaid.
|
||||
- [ ] **bevel**: the Y2K display face is used for the wordmark and section titles only; body remains Inter.
|
||||
- [ ] **world-dark / world-mint**: yellow marker appears at least once, never as a body text color.
|
||||
- [ ] **atlas**: vermilion appears on ① the meta dot ② a title's final period ③ the progress segment. All three? Fine. More? Cut.
|
||||
- [ ] **bluehouse**: exactly one gradient direction per slide (135° coral→peach XOR 180° lavender→blue on one card, not both).
|
||||
|
||||
---
|
||||
|
||||
## P2 — polish
|
||||
|
||||
- [ ] `.num` values are within 3 characters of each other in width when in a `grid-6` row (so the row reads as a set).
|
||||
- [ ] `text-wrap: balance` effect is visible on 2-line headlines (verify by eye).
|
||||
- [ ] Page counter in meta-bar matches `.deck-counter` (both read "NN / NN").
|
||||
- [ ] On `holm` / `vance` / `atlas`, the body cream/ivory feels warm, not fluorescent. If it looks cold, you accidentally overrode `--bg`.
|
||||
- [ ] No CSS box-shadow except on `.bh-card` (bluehouse). Shadows elsewhere = SaaS regression.
|
||||
- [ ] `border-radius` is either 0 (helix/holm/vance/bevel/world-*/atlas) or 16–24px (bluehouse only).
|
||||
|
||||
---
|
||||
|
||||
## Five-dimension critique (silent, before emit)
|
||||
|
||||
Before writing `<artifact>`, score this deck 1–5 in each dimension. If any is **≤ 3**, fix and re-score.
|
||||
|
||||
1. **Philosophy**: Does it look like replit.com/slides's gallery, not a generic shadcn dashboard?
|
||||
2. **Hierarchy**: Is there exactly one dominant element per slide? Can you read the deck by looking at the biggest thing on each slide only?
|
||||
3. **Execution**: Is the theme rendered cleanly — type weights, spacing, accent usage all theme-consistent?
|
||||
4. **Specificity**: Does the copy belong to this project (names, numbers, dates), or could it live on any deck?
|
||||
5. **Restraint**: Are you using fewer colors / weights / icons than you could? (If yes, good. If "I used everything available," bad.)
|
||||
|
||||
Two passes is normal. Three is fine. Four means you picked the wrong theme — go back to Step 1.
|
||||
|
||||
---
|
||||
|
||||
## Emission contract
|
||||
|
||||
Stop after `</artifact>`. Do not add post-mortem commentary.
|
||||
|
||||
```
|
||||
<artifact identifier="deck-<slug>" type="text/html" title="<deck title>">
|
||||
<!doctype html>
|
||||
<html>…</html>
|
||||
</artifact>
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
# Components · replit-deck
|
||||
|
||||
Small shared primitives you'll compose slides from. None of these should be edited per-slide beyond the `[REPLACE]` content slots. If you find yourself rewriting the CSS of a component, you're fighting the theme — pick a different layout instead.
|
||||
|
||||
---
|
||||
|
||||
## meta-bar
|
||||
|
||||
Top-row brand / context / page. Every slide has one.
|
||||
|
||||
```html
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] BRAND · CONTEXT</span>
|
||||
<span>[REPLACE] NN / NN</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
- Mono, uppercase, 11px, tracked 0.1em, `--muted` color.
|
||||
- On `vance`, meta-bar sits **inside** the black top band (`.vance-top`) and gets 3 columns.
|
||||
|
||||
---
|
||||
|
||||
## eyebrow
|
||||
|
||||
Section kicker above the slide headline.
|
||||
|
||||
```html
|
||||
<p class="eyebrow">SECTION EYEBROW · OPTIONAL DATE</p>
|
||||
<p class="eyebrow accent">COLORED VARIANT</p>
|
||||
```
|
||||
|
||||
- Default: `--muted`.
|
||||
- `.eyebrow.accent` → `--accent` color. Use once per slide, sparingly.
|
||||
- On `atlas`/`holm` add a em-dash prefix: `— CHAPTER ONE …`.
|
||||
|
||||
---
|
||||
|
||||
## numeric display (`.num`, `.num-label`, `.num-delta`)
|
||||
|
||||
The single most important primitive for helix / world / atlas.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div class="num-label">Annual Recurring Revenue</div>
|
||||
<div class="num">$1.37B</div>
|
||||
<div class="num-delta">▲ 38% YoY</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `.num` is the display typeface, 48–84px, line-height 1, tight tracking.
|
||||
- `.num-delta` is **mono**, `--accent` color. Use `▲` / `▼` Unicode — never an emoji.
|
||||
- Don't wrap a number in a colored background. Number = chromatic anchor.
|
||||
|
||||
---
|
||||
|
||||
## bevel-frame (bevel only)
|
||||
|
||||
Dashed neon rectangle with corner dots.
|
||||
|
||||
```html
|
||||
<div class="bevel-frame">
|
||||
<!-- product photo or campaign image inside -->
|
||||
</div>
|
||||
```
|
||||
|
||||
- Already has `::before` / `::after` neon dots on diagonal corners.
|
||||
- Do NOT fill the frame with neon. Frame is 1px dashed border; fill is image or muted bg.
|
||||
|
||||
---
|
||||
|
||||
## world-marker (world-* only)
|
||||
|
||||
Small yellow square used inline next to section titles.
|
||||
|
||||
```html
|
||||
<span class="world-marker"></span>
|
||||
```
|
||||
|
||||
- 14×14px, flat color, no animation.
|
||||
- Appears at most twice on one slide.
|
||||
|
||||
---
|
||||
|
||||
## atlas-dot (atlas only)
|
||||
|
||||
Small vermilion disc used as chapter mark or list bullet.
|
||||
|
||||
```html
|
||||
<span class="atlas-dot"></span>
|
||||
```
|
||||
|
||||
- 10×10px. Smaller (6×6) variant manually sized for the inline `EXHIBIT 04.B` tag.
|
||||
|
||||
---
|
||||
|
||||
## bh-card (bluehouse only)
|
||||
|
||||
Colored card in the consumer-grid row.
|
||||
|
||||
```html
|
||||
<div class="bh-card peach">…</div>
|
||||
<div class="bh-card coral">…</div>
|
||||
<div class="bh-card lavender">…</div>
|
||||
```
|
||||
|
||||
- `peach` = flat warm sand.
|
||||
- `coral` = coral→peach 135° gradient.
|
||||
- `lavender` = cool lavender→blue 180° gradient.
|
||||
- Interior: `flex column`, `justify-content: space-between` — put icons/meta top, numbers bottom.
|
||||
- Always `border-radius: 24px`, always 4:3 aspect unless explicitly broken for layout reasons.
|
||||
|
||||
---
|
||||
|
||||
## progress + counter chrome (auto)
|
||||
|
||||
You do not author these. The seed ships with:
|
||||
|
||||
```html
|
||||
<div class="deck-progress" id="deck-progress"></div>
|
||||
<div class="deck-counter" id="deck-counter">1 / 3</div>
|
||||
<div class="deck-hint">← / → · scroll · swipe</div>
|
||||
```
|
||||
|
||||
…and the `<script>` auto-updates on scroll / key. Leave them alone.
|
||||
|
||||
---
|
||||
|
||||
## Content-type cross-reference
|
||||
|
||||
| Content you need to show | Primitive(s) |
|
||||
|---|---|
|
||||
| A single number | `.num` alone, centered |
|
||||
| A row of metrics | `.num-label` + `.num` + `.num-delta`, grid-6 |
|
||||
| A brand wordmark | plain `<span>` in meta-bar, serif display, 22-32px |
|
||||
| A section divider | centered `.h-hero` on a slide of its own (same theme — never swap `data-theme` mid-deck) |
|
||||
| A call-out stat with context | `.num` (big) + `.lead` (small) paired |
|
||||
| A pull-quote | `.h-xl` in display serif, `— Attribution` in mono small-caps |
|
||||
|
||||
---
|
||||
|
||||
## What **not** to component-ify
|
||||
|
||||
Resist creating: `.card.featured`, `.hero-v2`, `.metric-fancy`. These bloat the seed and make the deck drift toward "shadcn demo". The 10 layouts × 8 themes already compose into >50 distinct slide archetypes — that's enough.
|
||||
@@ -0,0 +1,457 @@
|
||||
# Layouts · replit-deck
|
||||
|
||||
Ten paste-ready `<section class="slide">` blocks. Each has a **theme pairing** note — some layouts only look good in specific themes. Copy the block, replace `[REPLACE]` with real copy, tag with `data-screen-label`.
|
||||
|
||||
All layouts assume `<body data-theme="…">` is already set.
|
||||
|
||||
---
|
||||
|
||||
## L01 · cover-hero (all themes)
|
||||
|
||||
Opens a deck. Huge display on top half, mono meta bar at top.
|
||||
|
||||
```html
|
||||
<section class="slide center" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] BRAND · CONTEXT</span>
|
||||
<span>[REPLACE] SEASON / NO.</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 28px;">[REPLACE] Eyebrow line</p>
|
||||
<h1 class="h-hero" style="max-width: 14ch;">[REPLACE] One sharp sentence.</h1>
|
||||
<p class="lead" style="margin-top: 28px;">[REPLACE] One concrete subhead.</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Theme notes**:
|
||||
- `helix`: headline tight, muted subhead, no flourish.
|
||||
- `holm`: eyebrow in uppercase mono colored `var(--accent)`. Headline uses `--font-serif-display`.
|
||||
- `vance`: add `<div class="vance-top">` with 3-column meta instead of the plain meta-bar (see L08).
|
||||
- `bevel`: wrap headline in `<span class="h-display-y2k">…</span>` (italic Y2K face).
|
||||
- `atlas`: swap to L09 `chapter-plate` for cover.
|
||||
- `bluehouse`: use L10 `pill-headline-cards-row` — the cover IS the card row.
|
||||
|
||||
---
|
||||
|
||||
## L02 · kpi-row-6 (helix · atlas · world-*)
|
||||
|
||||
Six big numbers in 3×2 grid. Replit slide-4 / slide-5 exactly.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="02 Operating Metrics">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] BRAND</span>
|
||||
<span>[REPLACE] 02 / NN</span>
|
||||
</div>
|
||||
<h2 class="h-xl" style="margin-top: clamp(40px, 6vh, 80px); margin-bottom: clamp(40px, 5vh, 64px);">Operating Metrics</h2>
|
||||
<div class="grid-6">
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Annual Recurring Revenue</div>
|
||||
<div class="num">$1.37B</div>
|
||||
<div class="num-delta">▲ 38% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Net Retention Rate</div>
|
||||
<div class="num">128%</div>
|
||||
<div class="num-delta">▲ 200 bps</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Paying Customers</div>
|
||||
<div class="num">42,850</div>
|
||||
<div class="num-delta">▲ 24% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Gross Margin</div>
|
||||
<div class="num">82.4%</div>
|
||||
<div class="num-delta">▲ 140 bps</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] Free Cash Flow</div>
|
||||
<div class="num">$112M</div>
|
||||
<div class="num-delta">▲ 55% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num-label">[REPLACE] CAC Payback</div>
|
||||
<div class="num">11 mo</div>
|
||||
<div class="num-delta">▼ 1 mo</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Theme notes**:
|
||||
- `helix`: all deltas are `var(--accent)` blue, mono family. Perfect fit.
|
||||
- `atlas`: swap `num` font-family to serif display. Delta dots → vermilion. Add hairline dividers between rows.
|
||||
- `world-dark` / `world-mint`: label color becomes `var(--accent)` yellow. Add `<span class="world-marker"></span>` before one standout label.
|
||||
|
||||
---
|
||||
|
||||
## L03 · split-hero-metric (helix)
|
||||
|
||||
One dark card (ARR) left, five line-item metrics right. Replit slide-1.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="03 Metrics">
|
||||
<div class="meta-bar">
|
||||
<span>[REPLACE] Operating Metrics</span>
|
||||
<span>[REPLACE] · Helix</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 48px); display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 4vw, 72px); height: 70vh;">
|
||||
<!-- hero card -->
|
||||
<div style="background: #0d0d0f; color: #f5f5f5; border-radius: 24px; padding: clamp(32px, 3vw, 56px); display: flex; flex-direction: column; justify-content: space-between;">
|
||||
<div>
|
||||
<div style="font-size: 15px; opacity: 0.7;">Annual Recurring Revenue</div>
|
||||
<div class="num" style="margin-top: 8px; color: #fff;">$1.37B</div>
|
||||
<div class="num-delta" style="color: var(--accent); margin-top: 12px;">▲ 38% YoY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; position: relative;">
|
||||
<div style="position: absolute; left: 0; top: 0; height: 100%; width: 55%; background: var(--accent); border-radius: 2px;"></div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; opacity: 0.5; margin-top: 12px; letter-spacing: 0.08em;">
|
||||
<span>FY24</span><span>TARGET $1.55B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- row metrics -->
|
||||
<div style="display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2vh, 28px);">
|
||||
<div style="display: grid; grid-template-columns: 180px 1fr auto auto; gap: 24px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border);">
|
||||
<span style="color: var(--muted);">Net Retention Rate</span>
|
||||
<div style="height: 4px; background: var(--border); border-radius: 2px; position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 68%; background: var(--accent); border-radius: 2px;"></div></div>
|
||||
<span class="num" style="font-size: 44px;">128%</span>
|
||||
<span class="num-delta">▲ 200 bps</span>
|
||||
</div>
|
||||
<!-- repeat 4× with: Paying Customers / Gross Margin / Free Cash Flow / CAC Payback -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
**Theme notes**: helix-only. Don't port to other themes — the dark card + blue relies on helix's specific ink + electric blue.
|
||||
|
||||
---
|
||||
|
||||
## L04 · memo-hero-statement (holm)
|
||||
|
||||
Replit slide-2 exactly: serif statement left, lots of breath. Team names bottom-left, domain bottom-right.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Cover">
|
||||
<div class="meta-bar">
|
||||
<span style="font-family: var(--font-serif-display); font-size: 32px; text-transform: none; letter-spacing: 0; color: var(--accent);">Holm</span><!-- wordmark -->
|
||||
<span>MEMO 04 / APR 2026</span>
|
||||
</div>
|
||||
<div style="margin-top: 30vh; max-width: 58vw;">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 28px;">— SERIES A — CONFIDENTIAL PRE-READ</p>
|
||||
<h1 class="h-xl" style="max-width: 18ch;">[REPLACE] Banking and back-office for the 1.4 million lawyers who were never supposed to be alone.</h1>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 50ch;">[REPLACE] One-sentence thesis as the deck subtitle.</p>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: clamp(40px, 5vh, 72px); left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;">
|
||||
<span><b>NAOMI VELEZ</b> — CO-FOUNDER, CEO · <b>DANIEL LIOR</b> — CO-FOUNDER, CTO</span>
|
||||
<span>HOLM.LAW</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L05 · two-column-ask (holm)
|
||||
|
||||
Replit slide-5: "THE ASK" with fund allocation left + TEAM card right.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="05 The Ask">
|
||||
<div class="meta-bar">
|
||||
<span>04 — THE ASK <span style="display: inline-block; width: 40px; height: 1px; background: var(--accent); vertical-align: middle;"></span></span>
|
||||
<span>HOLM · 05</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(40px, 6vh, 80px);">
|
||||
<h2 class="h-xl" style="max-width: 22ch;">[REPLACE] $11.4M Series A, led by Felicis. Closing 6/15.</h2>
|
||||
<p class="lead" style="margin-top: 20px;">[REPLACE] Re-up from First Round and Cowboy. Notable angels: Patrick McKenzie, Olympia Hostler, Marshall Kirkpatrick.</p>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start;">
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 24px;">USE OF FUNDS — 24 MONTH PLAN</p>
|
||||
<div class="vstack" style="--gap: 20px;">
|
||||
<!-- one row -->
|
||||
<div style="display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;">
|
||||
<span class="num" style="font-size: 28px; color: var(--accent);">52%</span>
|
||||
<div>
|
||||
<div style="font-weight: 600;">Engineering & product</div>
|
||||
<div style="color: var(--muted); font-size: 14px; margin-bottom: 8px;">[REPLACE] Trust accounting, payroll, multi-state filings</div>
|
||||
<div style="height: 3px; background: var(--border); position: relative;"><div style="position: absolute; left: 0; top: 0; height: 100%; width: 52%; background: var(--accent);"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- repeat: 28% Go-to-market / 12% Compliance / 8% Operations -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="background: var(--surface); border: 1px solid var(--border);">
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 20px;">THE TEAM</p>
|
||||
<div class="vstack" style="--gap: 20px;">
|
||||
<div style="display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;">
|
||||
<div style="width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 20%, var(--surface)); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); color: var(--accent);">N</div>
|
||||
<div>
|
||||
<div style="font-weight: 600;">Naomi Velez — CEO</div>
|
||||
<div style="color: var(--muted); font-size: 14px;">[REPLACE] bio line</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- repeat for Daniel Lior — CTO -->
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--border); margin-top: 24px; padding-top: 16px;">
|
||||
<p class="eyebrow" style="margin-bottom: 4px;">DIRECT</p>
|
||||
<div style="display: flex; justify-content: space-between; font-size: 14px;"><span>[REPLACE] email</span><span style="color: var(--muted);">[REPLACE] phone</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L06 · gallery-plate (vance)
|
||||
|
||||
Replit slide-3 / slide-11 (Vance Studio): black top band, artwork, black bottom band.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="02 Plate 47" style="padding: 0;">
|
||||
<div class="vance-top" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-serif-display); font-size: 22px;">VANCE STUDIO <sup style="font-size: 9px;">®</sup></span>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;">II OF V · FEATURED</span>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;">© 2026 THE ARTIST</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch;">
|
||||
<div style="background: #0a0a0a; color: var(--bar-fg); padding: clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center;">
|
||||
<p class="eyebrow" style="margin-bottom: 16px;">CATALOG — PLATE 47</p>
|
||||
<h2 class="h-hero" style="font-family: var(--font-serif-display); font-weight: 400; font-style: normal;">
|
||||
Untitled<br><em style="font-family: var(--font-serif-display);">(Threshold)</em>
|
||||
</h2>
|
||||
</div>
|
||||
<div style="background: #dcdcdc; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: #888; font-size: 12px;">
|
||||
[REPLACE] artwork image goes here — 4:5 ratio
|
||||
</div>
|
||||
</div>
|
||||
<div class="vance-top" style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-serif-display); font-style: italic; font-size: 16px;">Untitled (Threshold), 2022. Felt, plaster, and resin on plinth. 168 × 92 × 92 cm.</span>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;">PHOTOGRAPHY — M. AOKI</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L07 · campaign-cover (bevel)
|
||||
|
||||
Replit slide-13: huge Y2K display wordmark, product photo right, dashed neon frame.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Reflex SS26">
|
||||
<div class="meta-bar">
|
||||
<span>CAMPAIGN SS26</span>
|
||||
<span>01 / 05</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 4vw, 80px); align-items: center; margin-top: clamp(24px, 3vh, 48px);">
|
||||
<div>
|
||||
<h1 style="font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: clamp(100px, 14vw, 220px); line-height: 0.9; letter-spacing: -0.01em;">reflex</h1>
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin: clamp(24px, 3vh, 40px) 0;">
|
||||
<span style="width: 56px; height: 1px; background: var(--accent);"></span>
|
||||
<span class="eyebrow" style="color: var(--accent);">SHOT ON FILM</span>
|
||||
</div>
|
||||
<p class="lead" style="max-width: 38ch;">[REPLACE] Tokyo × Brooklyn. Styled by Kano Murakami. Fourteen pieces of sterling silver, scanned and forged for the collection launch.</p>
|
||||
<p class="eyebrow" style="position: absolute; bottom: clamp(40px, 5vh, 64px); left: clamp(56px, 7vw, 112px);">@BEVEL.JEWELRY</p>
|
||||
</div>
|
||||
<div class="bevel-frame" style="height: 72vh;">
|
||||
<div style="width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: #555; font-size: 12px;">
|
||||
[REPLACE] campaign image 4:5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L08 · finance-hero-grid (world-dark / world-mint)
|
||||
|
||||
Replit slide-8: title left, 3 tall photo tiles right, 3-cell stat strip bottom with yellow labels.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 World Finance" style="padding: 0;">
|
||||
<div style="padding: clamp(48px, 6vh, 80px) clamp(56px, 7vw, 112px) 0;">
|
||||
<div class="meta-bar" style="position: static; left: 0; right: 0;">
|
||||
<span>REPORT · 2026</span>
|
||||
<span>WORLD.COM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1.1fr 1.4fr; gap: clamp(32px, 4vw, 64px); padding: clamp(24px, 3vh, 40px) clamp(56px, 7vw, 112px); align-items: center;">
|
||||
<div>
|
||||
<h1 class="h-hero" style="max-width: 12ch;">World Finance <span class="world-marker" style="margin-left: 6px;"></span><br>Report</h1>
|
||||
<p class="lead" style="margin-top: 24px; max-width: 40ch;">[REPLACE] World finance refers to the global system that manages money, investments, trade, and economic activity across countries.</p>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 56vh;">
|
||||
<div style="background: #333; border-radius: 16px; position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; left: 16px; bottom: 16px; color: #fff; font-weight: 600;">Health prices<br>+12.5%</div>
|
||||
</div>
|
||||
<div style="background: #444; border-radius: 16px; position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; left: 16px; bottom: 16px; color: #fff; font-weight: 600;">Housing prices<br>+24%</div>
|
||||
</div>
|
||||
<div style="background: #555; border-radius: 16px; position: relative; overflow: hidden;">
|
||||
<div style="position: absolute; left: 16px; bottom: 16px; color: #fff; font-weight: 600;">Food prices<br>+18%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- bottom stat strip -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1.2fr 0.6fr; border-top: 1px solid var(--border); align-items: stretch;">
|
||||
<div style="padding: clamp(20px, 3vh, 36px) clamp(24px, 3vw, 40px); border-right: 1px solid var(--border);">
|
||||
<div style="color: var(--accent); font-weight: 600; margin-bottom: 8px;">Total debt</div>
|
||||
<div class="num" style="font-size: clamp(44px, 5vw, 72px);">$19.2 B</div>
|
||||
</div>
|
||||
<div style="padding: clamp(20px, 3vh, 36px) clamp(24px, 3vw, 40px); border-right: 1px solid var(--border);">
|
||||
<div style="color: var(--accent); font-weight: 600; margin-bottom: 8px;">S&P 500</div>
|
||||
<div class="num" style="font-size: clamp(44px, 5vw, 72px);">+ 6.23 %</div>
|
||||
</div>
|
||||
<div style="padding: clamp(20px, 3vh, 36px) clamp(24px, 3vw, 40px);">
|
||||
<div style="color: var(--accent); font-weight: 600; margin-bottom: 8px;">Top countries</div>
|
||||
<div style="display: flex; gap: 24px; align-items: baseline;">
|
||||
<div style="font-size: 28px;">USA <span style="display: inline-block; background: var(--surface); color: var(--fg); padding: 4px 12px; border-radius: 20px; font-size: 15px; margin-left: 8px;">+ 4.22 %</span></div>
|
||||
<span style="color: var(--muted);">|</span>
|
||||
<div style="font-size: 28px;">China <span style="display: inline-block; background: var(--surface); color: var(--fg); padding: 4px 12px; border-radius: 20px; font-size: 15px; margin-left: 8px;">+ 4.12 %</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: clamp(20px, 3vh, 36px); display: flex; align-items: flex-end; justify-content: flex-end; color: var(--muted); font-family: var(--font-mono); font-size: 13px;">Pg 02</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L09 · chapter-plate (atlas)
|
||||
|
||||
Replit slide-11: two-column chapter opener, huge serif title left, archive photo right, data strip bottom.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Chapter 01">
|
||||
<div class="meta-bar">
|
||||
<span><span class="atlas-dot"></span>THE ATLAS QUARTERLY · CHAPTER 01</span>
|
||||
<span>04 / 24</span>
|
||||
</div>
|
||||
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vh, 40px);">
|
||||
<div>
|
||||
<p class="eyebrow" style="color: var(--accent); margin-bottom: 32px;">— CHAPTER ONE — A CENTURY OF EMPIRES</p>
|
||||
<h1 class="h-hero" style="max-width: 12ch;">[REPLACE] The Imperial<br>Age<span style="color: var(--accent);">.</span></h1>
|
||||
<p class="lead" style="margin-top: 28px; max-width: 44ch;">[REPLACE] Between the Congress of Vienna and the guns of August, the world was redrawn in the language of empire — charted, claimed, and catalogued by a handful of capitals that believed history belonged to them.</p>
|
||||
</div>
|
||||
<div style="border: 1px solid var(--border); padding: 16px; position: relative;">
|
||||
<span style="position: absolute; top: 24px; left: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.4); padding: 4px 10px;">PLATE I</span>
|
||||
<span style="position: absolute; top: 24px; right: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: #fff; text-transform: uppercase; background: rgba(0,0,0,0.6); padding: 4px 10px;"><span class="atlas-dot" style="width: 6px; height: 6px;"></span>EXHIBIT 04.B</span>
|
||||
<div style="aspect-ratio: 4/3; background: #222; display: flex; align-items: center; justify-content: center; color: #555; font-family: var(--font-mono); font-size: 12px;">[REPLACE] archival photograph</div>
|
||||
<div style="padding: 14px 4px 4px; color: var(--fg); font-size: 14px;">[REPLACE] The west colonnade at first light.</div>
|
||||
<div style="padding: 0 4px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;">PHOTOGRAPHED C. 1887 · ARCHIVE 0341.B</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr) 2fr; gap: clamp(16px, 2vw, 32px); border-top: 1px solid var(--border); padding-top: clamp(16px, 2vh, 24px);">
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 8px;">PERIOD</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px;">1815–1914</div>
|
||||
<div style="color: var(--muted); font-size: 13px; margin-top: 4px;">Vienna to Sarajevo — the long peace of empire.</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 8px;">REACH</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px; color: var(--accent);">84%</div>
|
||||
<div style="color: var(--muted); font-size: 13px; margin-top: 4px;">of the globe under colonial or imperial rule by 1914.</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow" style="margin-bottom: 8px;">CAPITALS</p>
|
||||
<div style="font-family: var(--font-display); font-size: 28px;">Six</div>
|
||||
<div style="color: var(--muted); font-size: 13px; margin-top: 4px;">London · Paris · Berlin · Vienna · St Petersburg · Constantinople.</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- progress strip at very bottom -->
|
||||
<div style="position: absolute; bottom: 0; left: clamp(56px, 7vw, 112px); right: clamp(56px, 7vw, 112px); display: flex; align-items: center; gap: 12px; padding-bottom: 20px;">
|
||||
<div style="flex: 1; height: 1px; background: var(--border); position: relative;">
|
||||
<div style="position: absolute; left: 0; top: -1px; height: 3px; width: 16%; background: var(--accent);"></div>
|
||||
</div>
|
||||
<span style="font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em;">04 / 24</span>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## L10 · pill-headline-cards-row (bluehouse)
|
||||
|
||||
Replit slide-12: bold headline w/ inline pill, 3-card row underneath.
|
||||
|
||||
```html
|
||||
<section class="slide" data-screen-label="01 Driving ROI">
|
||||
<div class="meta-bar" style="color: var(--muted);">
|
||||
<span style="display: flex; align-items: center; gap: 10px;">
|
||||
<span style="width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center;">⌂</span>
|
||||
<span style="font-family: var(--font-display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--fg);">Bluehouse</span>
|
||||
</span>
|
||||
<span>01 / NN</span>
|
||||
</div>
|
||||
<div style="margin-top: clamp(48px, 6vh, 88px);">
|
||||
<h1 class="h-hero" style="max-width: 18ch;">Driving real estate <span style="display: inline-block; background: var(--card-peach); color: var(--bg); padding: 0 24px; border-radius: 48px; line-height: 1.1;">ROI</span><br>with prime properties</h1>
|
||||
</div>
|
||||
<div style="margin-top: clamp(32px, 4vh, 56px); display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; gap: clamp(16px, 2vw, 24px); flex: 1; max-height: 50vh;">
|
||||
<div class="bh-card peach">
|
||||
<div style="display: flex; justify-content: flex-end;"><span style="width: 28px; height: 28px; border-radius: 8px; background: rgba(11,21,36,0.15); display:flex;align-items:center;justify-content:center;">+</span></div>
|
||||
<div style="background: #ccc; flex: 1; margin: 8px 0 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #777; font-family: var(--font-mono); font-size: 12px;">[REPLACE] property photo</div>
|
||||
<div>
|
||||
<div class="num" style="color: var(--bg); font-size: clamp(40px, 4vw, 64px);">$2.4M</div>
|
||||
<div style="color: var(--bg); opacity: 0.7; font-size: 14px; margin-top: 4px;">asking price<br>Sunset Ridge</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bh-card coral">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex;">
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-right: -8px; border: 2px solid var(--accent); display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: var(--accent-2); margin-right: -8px; border: 2px solid #fff; display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-right: -8px; border: 2px solid var(--accent); display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="width: 28px; height: 28px; border-radius: 50%; background: var(--accent-2); border: 2px solid #fff; display:flex;align-items:center;justify-content:center;font-size:14px;">⌂</span>
|
||||
<span style="margin-left: 12px; color: #fff; font-size: 14px;">+12 properties</span>
|
||||
</div>
|
||||
<span style="width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--bg); display:flex;align-items:center;justify-content:center;">↗</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="num" style="color: #fff; font-size: clamp(56px, 6vw, 88px);">+47%</div>
|
||||
<div style="color: #fff; opacity: 0.9; font-size: 15px; margin-top: 4px;">5-year appreciation<br>vs. acquisition price</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2vw, 24px);">
|
||||
<div class="bh-card lavender" style="aspect-ratio: auto; padding: clamp(20px, 2vw, 32px);">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="num" style="font-size: clamp(36px, 3.5vw, 56px);">6.2%</div>
|
||||
<div style="font-size: 14px; margin-top: 4px;">net rental yield<br>per annum</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bh-card" style="background: var(--surface); color: #fff; aspect-ratio: auto; padding: clamp(20px, 2vw, 32px);">
|
||||
<div></div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; gap: 12px;"><span class="num" style="font-size: clamp(36px, 3.5vw, 56px);">4</span><span style="font-size: 14px; opacity: 0.8;">step payment plan<br>handover Q2 2027</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick-pick cheat sheet
|
||||
|
||||
| You want a… | Use layout |
|
||||
|---|---|
|
||||
| Cover slide, neutral | L01 cover-hero |
|
||||
| Cover slide, narrative/historical | L09 chapter-plate |
|
||||
| Cover slide, fashion/product | L07 campaign-cover or L10 pill-cards-row |
|
||||
| Metrics dashboard (6 numbers) | L02 kpi-row-6 |
|
||||
| One hero stat + supporting metrics | L03 split-hero-metric (helix only) |
|
||||
| Memo-style hero statement | L04 memo-hero-statement (holm) |
|
||||
| Team + funding allocation | L05 two-column-ask (holm) |
|
||||
| Artwork / image feature | L06 gallery-plate (vance) |
|
||||
| Data-heavy analytical page | L08 finance-hero-grid (world-*) |
|
||||
| Bold statement with supporting tiles | L10 pill-headline-cards-row (bluehouse) |
|
||||
@@ -0,0 +1,326 @@
|
||||
# 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 `<body data-theme="…">`. 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.** `<body data-theme="…">` 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-<theme>.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-<theme>.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-<theme>.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="<name>"] { … }` 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 `## <theme> — <name>` 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-<theme>.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.
|
||||
Reference in New Issue
Block a user