# Upshift theme — authoring reference
Marp theme: `upshift`. Source: `upshift-theme.css`. Accent `#E8612A`, ink `#0D1117`, Manrope + Fraunces (local `woff2` in `fonts/`).
Pick a slide class for each slide based on the **shape of the content**, not the vibe. Each class expects a specific markdown contract — straying from the contract falls back to base styles and looks broken.
## Frontmatter
```markdown
---
marp: true
theme: upshift
paginate: true
html: true
lang: en-US
---
```
## Slide class declaration
```markdown
(cover + closing only)
```
Classes combine with spaces: `light two-col`, `image chapter`, `light agenda long`, `light sources`.
## Base typography (applies to every slide)
| Markdown | Role | Rendered |
|---|---|---|
| `# H1` | Slide headline | Fraunces, 72px |
| `## H2` | Slide label (above H1) | Manrope caps, 22px, orange |
| `### H3` | Subheading within content | Manrope bold, 20px |
| `**bold**` | Emphasis | Full white |
| `_italic_` | Secondary/muted text | Manrope regular, dimmed (NOT italic — repurposed) |
| `> quote` | Blockquote | 3px orange left border, inset bg |
| `---` | Slide break | — |
| `` | Speaker notes | Hidden in slide, shown in speaker view |
Orange top stripe and page number are added automatically.
---
## Slide class reference
### `cover` — title slide
Contract: `img.logo` · `#` title · `paragraph` subtitle · `paragraph` date.
```markdown
# AI Killed the Billable Hour
What it means for your firm — and what to do about it
Shawn Yeager · Upshift · March 2026
```
The second paragraph auto-styles as small uppercase date/attribution.
### `closing` — final CTA / contact
Contract: `img.logo` · `#` big headline · 1–3 contact paragraphs.
```markdown
# Let's talk.
shawn@upshiftco.com
[upshiftco.com](https://upshiftco.com)
```
### `chapter` — part/section divider
Contract: `##` small orange label · `#` large headline. Usually combined with `image`.
```markdown
## Part 2
# Why efficiency isn't enough
```
### `image` — full-bleed photo background
Contract: `` Marp directive + H1/H2 overlay. Auto-applies dark desaturated filter + warm gradient. Use alone for image transitions or combined with `chapter`.
### `statement` — oversized serif claim
Contract: optional `##` label + 1–3 short paragraphs. Fraunces, 52px. `**bold**` turns orange, `_italic_` becomes a smaller muted caption.
```markdown
## The shift
The cost of expertise delivery has **collapsed to near zero.**
_Three-beat pause._
```
Use for the deck's load-bearing claims. Keep under ~6 lines.
### `quote` — attributed pull quote
Contract: `>` blockquote + attribution paragraph (`**Name**` · context).
```markdown
> To transition from bespoke to scalable, firms must cultivate the courage to codify their knowledge.
**CB Insights** · Future of Professional Services
```
### `stat` — single big number
Contract: `#` giant number · `p` small label. Centered.
```markdown
# 87%
of companies use AI in at least one part of recruiting
```
### `agenda` — numbered ToC (short phrases)
Contract: `##` label · `ol` of 3–6 items, each one short phrase. Manrope 40px text + tiny orange leading-zero counter.
```markdown
## The agenda
1. The shift that already happened
2. Why efficiency isn't enough
3. What the firms that survive look like
4. How to start on Monday
```
### `agenda long` — numbered takeaway (long sentences)
Same primitive as `agenda`, inverted scale. Big Fraunces italic numeral, 22px body, hairline dividers. Use for "questions to ask," "principles to remember," CTA takeaway lists where each item is a full sentence.
```markdown
## Questions to ask your partners this week
1. If AI cuts our delivery time in half, what happens to our revenue under the current billing model?
2. What would we sell if we could serve clients continuously instead of per-engagement?
3. Which of our services could we price on outcomes instead of hours?
4. What do our clients pay us for that AI can now do — and what do they pay us for that it can't?
```
`agenda` and `agenda.long` are the only two classes that expect ordered lists. Everything else wants `ul`.
### `pillars` — 3 concept labels + descriptions
Contract: `##` label · `ul` of 3 items, each with **two paragraphs** per item (label, then description). First paragraph renders as 52px serif.
```markdown
## The other side
- Revenue that compounds
Not projects that reset to zero. Clients stay because you're embedded in how they run.
- Pricing that goes up
You sell outcomes, not time. Firms offering advisory services earn 30%+ higher MRR.
```
Optional arrow in labels: `Episodic →
Continuous`.
### `data` — 3 big metrics + labels
Contract: `##` label · `ul` of 3 items, each **two paragraphs** — big number, then label. First paragraph renders as 96px Fraunces.
```markdown
## Your clients already moved
- 60%
of senior marketing leaders already spend less on agencies because of AI
```
### `contrast` — two opposing numbers
Contract: `##` label · `ul` of **exactly 2** items, each two paragraphs (number, label). First number renders white, second orange. Divider between.
```markdown
## The ceiling
- **25–40%**
Efficiency gain from bolting AI onto existing models — then it stops
- **3×**
More likely to see real EBIT impact when you redesign workflows instead
```
### `two-col` — side-by-side lists
Contract: `##` label · `###` col 1 heading · `ul` col 1 · `###` col 2 heading · `ul` col 2.
```markdown
## The old game vs. the new game
### Old game
- AI is a productivity tool
- Protect the billing model
### New game
- AI is a commercial catalyst
- Redesign what you sell
```
### `process` — sequential stepped cards
Contract: `##` label · `ul` of 3 items, each with **three paragraphs** (step label, title, body). Horizontal row with orange arrows between.
```markdown
## Episodic → Continuous
- Accounting
Real-time delivery
Client transactions feed an AI engine that updates the return continuously.
```
### `timeline` — time-bound horizontal sequence
Contract: `##` label · `ul` of items, each **three paragraphs** (date, title, body). Dots connected by horizontal line.
### `comparison` — criteria-by-options table
Contract: `##` label · markdown table. First column is muted (criteria), last column is emphasized (recommended option).
```markdown
## How to choose
| Criterion | Option A | Option B |
|---|---|---|
| Speed | Slow | Fast |
```
### `sources` — appendix citations
Contract: `##` label · `ul` of citations. Each item: claim + `_source em_` on a new line. Renders in 2 columns, 18px. Typically combined with `light`.
```markdown
## Sources
- 88% AI adoption; 6% see EBIT impact _McKinsey, State of AI 2025_
- 60% of marketing leaders already cut agency spend _CB Insights, Future of Professional Services_
```
---
## Modifiers
### `light` — navy-on-parchment
Flips the palette: parchment background, navy text. Works with every content class. Use for bio slides, breathable sections, and anywhere you want a visual reset after heavy dark slides.
### `long` — scale inversion on `agenda`
Currently the only size modifier. Pairs with `agenda` to switch from short-phrase (big text, tiny number) to long-sentence (small text, big italic number). If you want to add more size variants to other classes, follow this pattern: additive modifier class, shared primitive, scale overrides only.
### Combination examples
| Classes | Use |
|---|---|
| `image chapter` | Photo backdrop part divider |
| `light two-col` | Old-vs-new with easy readability |
| `light process` | Three-step flow on parchment |
| `light agenda long` | Takeaway-question CTA slide |
| `light pillars` | Three concepts on parchment |
| `light sources` | Citations appendix |
---
## Authoring checklist
Before committing a new slide:
1. **Does the content shape match a class contract?** If not, either reshape the content or stop and reach for `statement` / base text — don't force it.
2. **Ordered vs unordered list?** Only `agenda` and `agenda.long` use `ol`. Everything else is `ul`.
3. **Paragraph count per `li`** matters for list classes:
- `pillars`, `data` → 2 paragraphs per item
- `process`, `timeline` → 3 paragraphs per item
- `contrast` → 2 items only, 2 paragraphs each
4. **Blank line between paragraphs inside an `li`** is required — without it CommonMark collapses them into one paragraph and the class breaks.
5. **Item count**:
- `pillars`, `data`, `process` → 3 items
- `contrast` → 2 items
- `agenda`, `agenda.long` → 3–6 items
6. **Label shape**: `##` is the small orange label (22px caps), `#` is the big headline. Most content slides use only `##` — the H1 belongs to statement, chapter, stat, cover, closing.
7. **Speaker notes** go in `` after slide content, before the `---` break.
8. **Image slides**: `` — not a normal markdown image. Path is relative to the markdown file.
## Adding a new slide class
1. Decide if it's genuinely new or a variant of an existing class. Add a modifier (`foo long`, `foo compact`) before adding a new top-level class.
2. Write the CSS inside `upshift-theme.css` following the numbered-section convention. Include:
- `section.NAME { ... }` with `justify-content: center` if vertically centered.
- Per-child selectors that assume the markdown contract (`li > p:first-child`, `li > p:nth-child(2)`, etc.).
- `li::before { content: none }` if the base `ul li::before` dash bullet should disappear.
3. Document the contract in this file in the class reference, including a copy-pasteable example.
4. Add a speaker-notes example to one real slide so the pattern shows up in at least one shipped deck.
5. Build: `./build.sh .md html` — check the rendered slide in the browser before shipping to PDF.