@open-slide/core 0.0.11 → 0.0.13

package/skills/create-theme/SKILL.md

@@ -0,0 +1,194 @@
+---
+name: create-theme
+description: Use this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces a single markdown file under `themes/<id>.md` describing palette, typography, layout, fixed Title/Footer components, and motion philosophy. Do NOT use for editing slides themselves — only for authoring `themes/<id>.md`.
+---
+
+# Create a slide theme
+
+This skill produces one markdown file under `themes/<id>.md` that describes a reusable visual identity for slides — palette, typography, layout, fixed Title/Footer/Eyebrow components, motion. Themes are agent-facing documentation, not executable runtime: a slide author reads the theme markdown and applies it when writing `slides/<id>/index.tsx`.
+
+A theme is **distinct from a slide's `design` const**. The theme markdown is authoring-time aesthetic direction (read by `create-slide`, copied into slide source). A per-slide `const design: DesignSystem = { … }` (declared at the top of `slides/<id>/index.tsx`) is the runtime tokens object the user can tweak from the Design panel in the dev UI. Both can coexist: the markdown theme commits the *direction*, the per-slide `design` const makes the slide *tweakable*. This skill only writes the markdown.
+
+You only write a single file under `themes/`. Never modify slides or other configuration. The canvas / type-scale defaults that themes can override live in the **`slide-authoring`** skill — read it before writing the theme so your overrides are stated explicitly.
+
+## Step 1 — Identify the input source
+
+A theme can be derived from any combination of three input shapes:
+
+- **Image references** — paths or URLs to slide screenshots, mood-board images, brand assets.
+- **Free-text description** — prose describing the desired palette, fonts, feel.
+- **An existing slide** — `slides/<id>/index.tsx` whose visual identity should be lifted out into a reusable theme.
+
+If the user's original message already specifies the inputs unambiguously, skip the question and proceed. Otherwise call `AskUserQuestion` (multi-select) so they can pick one or more sources, and ask follow-ups (paths, slide id, prose) only as needed.
+
+## Step 2 — Gather raw inputs
+
+- **Images**: read each path with the `Read` tool (it accepts images). Note dominant colors as hex, type weight/style, layout rhythm, decorative motifs, and any recurring chrome (header bar, footer line, page numbers).
+- **Text**: extract explicit tokens (hex codes, font names, motion verbs) and implicit tone words ("editorial", "playful", "brutalist"). Resolve vague language into concrete decisions before writing.
+- **Existing slide**: read `slides/<id>/index.tsx` and pull:
+  - The `palette` object → Palette section.
+  - Font constants and any `font-size` patterns → Typography section.
+  - Padding / alignment patterns → Layout section.
+  - Recurring components (TrafficLights, Eyebrow, Footer-style helpers, WindowShell, …) → Fixed components section.
+  - `@keyframes` blocks and the shared `styles` string → Motion section.
+  - The aesthetic feel implied by the design → Aesthetic paragraph.
+
+When inputs disagree (e.g. images use blue but the description says green), ask the user which to honor.
+
+## Step 3 — Pick a theme id
+
+Use **kebab-case**, short, descriptive. Examples: `editorial-noir`, `brutalist-mono`, `pastel-soft`, `dev-terminal`. Check `themes/` to avoid collisions.
+
+## Step 4 — Write `themes/<id>.md`
+
+Produce a file with this exact section order. Section bodies adapt to the theme; the headings stay consistent across all themes.
+
+````markdown
+---
+name: <Human title, e.g. "Editorial Noir">
+description: <one-line elevator pitch>
+mode: light | dark | system
+---
+
+# <Theme name>
+
+## Palette
+
+| Role   | Value     | Notes                          |
+| ------ | --------- | ------------------------------ |
+| bg     | `#0f172a` | page background                |
+| text   | `#f8fafc` | primary copy                   |
+| accent | `#fbbf24` | callouts, eyebrow, key numbers |
+| muted  | `#94a3b8` | secondary copy, dividers       |
+| ...    | ...       | extend as the theme requires   |
+
+## Typography
+
+- Display font: `<stack>` — weight 800–900 for headlines.
+- Body font: `<stack>` — weight 400–500.
+- Type-scale overrides (only list what differs from `slide-authoring` defaults):
+  - Hero title: 180 px (default 140–200 ✓)
+  - Body text: 36 px
+
+## Layout
+
+- Content padding: 120 px from canvas edges (1920 × 1080).
+- Alignment: left-aligned, single column.
+- Grid notes: optional 12-column overlay at 80 px gutter for content pages.
+
+## Fixed components
+
+These are paste-ready. Copy them verbatim into a slide that uses this theme.
+
+### Title
+
+```tsx
+const Title = ({ children }: { children: React.ReactNode }) => (
+  <h1
+    style={{
+      fontSize: 140,
+      fontWeight: 900,
+      lineHeight: 1.05,
+      letterSpacing: '-0.02em',
+      margin: 0,
+      color: '#f8fafc',
+    }}
+  >
+    {children}
+  </h1>
+);
+```
+
+### Footer
+
+```tsx
+const Footer = ({ pageNum, total }: { pageNum: number; total: number }) => (
+  <div
+    style={{
+      position: 'absolute',
+      left: 120,
+      right: 120,
+      bottom: 60,
+      display: 'flex',
+      justifyContent: 'space-between',
+      fontSize: 24,
+      color: '#94a3b8',
+    }}
+  >
+    <span>EDITORIAL NOIR · 2026</span>
+    <span>{pageNum} / {total}</span>
+  </div>
+);
+```
+
+### Eyebrow / accents (optional)
+
+```tsx
+const Eyebrow = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ fontSize: 26, letterSpacing: '0.2em', color: '#fbbf24' }}>
+    {children}
+  </div>
+);
+```
+
+## Motion
+
+- Philosophy: static / subtle / rich — pick one and explain in one sentence.
+- Reusable keyframes (paste-ready, only if the philosophy is subtle or rich):
+
+```css
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+```
+
+## Aesthetic
+
+One paragraph. What it feels like, the references it draws on, what to avoid (e.g. "no rounded corners; no gradients; no decorative emoji"). Commit to a single direction — minimal, maximalist, editorial, retro, brutalist, soft/pastel, neon, paper/print.
+
+## Example usage
+
+```tsx
+const Cover: Page = () => (
+  <div style={{ width: '100%', height: '100%', background: '#0f172a', color: '#f8fafc', padding: 120, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+    <Eyebrow>CHAPTER 01</Eyebrow>
+    <Title>The Big Idea</Title>
+    <p style={{ fontSize: 36, color: '#94a3b8', maxWidth: 1200, marginTop: 32 }}>
+      A short subtitle that explains what this slide is about.
+    </p>
+    <Footer pageNum={1} total={5} />
+  </div>
+);
+```
+````
+
+## Step 5 — Self-review
+
+Run this checklist before finishing:
+
+- [ ] Palette covers `bg` / `text` / `accent` / `muted` at minimum, all as hex.
+- [ ] Type scale specifies hero, heading, body, caption sizes (or explicitly defers to `slide-authoring` defaults).
+- [ ] At least Title and Footer are defined as paste-ready React with concrete inline styles.
+- [ ] Motion section commits to one of static / subtle / rich.
+- [ ] Aesthetic paragraph names a single coherent direction.
+- [ ] File lives at `themes/<id>.md` and only that file was created — no slide changes, no config changes.
+- [ ] Frontmatter `mode` is one of `light`, `dark`, `system`.
+
+## Step 6 — Hand off
+
+Tell the user:
+
+- The theme id and file path.
+- That `/create-slide` will list it as a picker option on its next run.
+- A one-line summary of the look (palette + aesthetic).
+
+Do not run the dev server. Do not modify slides — even to demonstrate the theme; that is the user's next move.
+
+## Anti-patterns
+
+- ❌ Writing executable code in `themes/<id>.md` outside the labeled component snippets — the file is documentation.
+- ❌ Producing more than one file. One theme = one `themes/<id>.md`.
+- ❌ Inventing palette / fonts when the user supplied images or an existing slide. Extract, don't fabricate.
+- ❌ Editing `slides/`, `packages/`, `package.json`, or `open-slide.config.ts`.
+- ❌ Skipping the Fixed components section. Title and Footer are the most common reuse target — they must be paste-ready.

package/skills/slide-authoring/SKILL.md

@@ -0,0 +1,288 @@
+---
+name: slide-authoring
+description: Technical reference for writing or editing open-slide pages — file contract, 1920×1080 canvas, type scale, layout, palette/visual direction, and assets. Consult this whenever you are about to write or modify any file under `slides/<id>/`, including from inside the `create-slide` or `apply-comments` workflows, or for any ad-hoc slide edit. Triggers on phrases like "edit slide", "tweak this page", "fix the layout", "change the palette", "investigate the slide framework", "how do slides work here".
+---
+
+# Authoring open-slide pages
+
+This skill is the **technical reference** for everything that happens inside `slides/<id>/index.tsx`. It does not own a workflow:
+
+- `create-slide` owns "draft a new deck" — it asks the user scoping questions, then delegates the *how* to this skill.
+- `apply-comments` owns "process inspector markers" — it finds markers and applies edits, but the edits themselves follow the rules here.
+- Any ad-hoc slide edit (manual tweak, one-off fix) should also consult this skill before touching the file.
+
+When any of those paths reach the point of *writing React code for a page*, this is the source of truth. Do not duplicate the knowledge below into other skills — link here instead.
+
+## Hard rules
+
+- Put the slide under `slides/<kebab-case-id>/`.
+- Entry is `slides/<id>/index.tsx`. Images/videos/fonts go under `slides/<id>/assets/`.
+- Do **not** touch `package.json`, `open-slide.config.ts`, or other slides.
+- Do not add dependencies. Only `react` and standard web APIs are available.
+- Do not create `README.md` or other prose files inside the slide folder — just `index.tsx` + `assets/`.
+
+## File contract
+
+```tsx
+// slides/<id>/index.tsx
+import type { Page, SlideMeta } from '@open-slide/core';
+
+const Cover: Page = () => <div>…</div>;
+const Body: Page = () => <div>…</div>;
+
+export const meta: SlideMeta = { title: 'My slide' };
+export default [Cover, Body] satisfies Page[];
+```
+
+- `export default` is a **non-empty array of zero-prop React components**, one per page, in order.
+- `meta.title` (optional) shows in the slide header. Default is the folder name.
+- The slide id is the kebab-case folder name. Pick something short and descriptive (`q2-roadmap`, `team-offsite-2026`).
+
+## Canvas
+
+Every page renders into a fixed **1920 × 1080** canvas. The framework scales it; you design as if the viewport is literally 1920×1080.
+
+- Use **absolute pixel values** for `font-size`, padding, positioning. No `rem`, no `vw`/`vh`, no `%` for type.
+- The root element of each page should fill the canvas: `width: '100%'; height: '100%'`.
+- Prefer inline `style={{ … }}`. Any CSS you load is global — scope classnames carefully.
+
+### Type scale (start here, adjust to taste)
+
+| Element          | Size       |
+| ---------------- | ---------- |
+| Hero title       | 140–200px  |
+| Section heading  | 80–120px   |
+| Page heading     | 56–80px    |
+| Body text        | 32–44px    |
+| Caption / label  | 22–28px    |
+
+### Spacing
+
+- Content padding: **100–160px** from canvas edges. Never let text touch the edge.
+- Line-height: 1.2 for headings, 1.5–1.7 for body.
+- Breathing room between elements: 32–64px.
+
+### Vertical budget — content MUST fit 1080px
+
+The canvas does **not** scroll. Anything below 1080px is silently cropped. Before writing JSX, do the math on paper and confirm the page fits. This is the #1 cause of broken slides — assume you will overflow unless you've checked.
+
+**Usable height** = `1080 − top_padding − bottom_padding`. With 120px padding on each side that's **840px**. With 160px each side, **760px**. Pick the padding first, then design within that budget.
+
+**Element height** = `font_size × line_height × number_of_lines`. A bullet that wraps to 2 lines counts as 2 lines. Add the gap below it (32–64px) before summing the next element.
+
+**Worked example — single content page, 120px padding (budget = 840px):**
+
+| Element                                  | Height                  |
+| ---------------------------------------- | ----------------------- |
+| Heading: 80px × 1.2 × 1 line             | 96px                    |
+| Gap                                      | 64px                    |
+| Body paragraph: 40px × 1.6 × 3 lines     | 192px                   |
+| Gap                                      | 48px                    |
+| 5 bullets: 40px × 1.6 × 1 line each      | 320px (5 × 64px)        |
+| 4 gaps between bullets: 24px each        | 96px                    |
+| **Total**                                | **816px ✅ fits in 840** |
+
+Swap the heading to 120px or add a 6th bullet and you're over. **Verify every page like this before you write it.**
+
+**Page-level rules:**
+
+- One heading + body OR one heading + ≤5 short bullets. Not both blocks of body copy *and* a long bullet list.
+- A bullet should fit on one line at the chosen font size. If it wraps, either shorten the copy or move it to its own page.
+- Hero title pages (140–200px) carry a title + 1 subtitle + maybe an eyebrow — nothing else.
+- Section headings (80–120px) need almost nothing else on the page.
+- If you find yourself raising padding, shrinking type below the scale's lower bound, or tightening line-height under 1.4 to make things fit — **split into two pages instead**. Splitting is always the right answer when the budget is tight.
+
+**Never** use `overflow: auto/scroll`, negative margins, or transforms to hide overflow. The canvas is fixed; cropped content is gone.
+
+## Visual direction
+
+Pick a coherent look and hold it across every page:
+
+- **Palette** — 1 background, 1 primary text, 1 accent, 1 muted. Define as constants at the top of the file.
+- **Typography** — one display font + one body font. System stack unless the user specifies. Heavy weight for headlines (800–900), normal for body (400–500).
+- **Layout grid** — pick a single content padding (e.g. 120px) and stick to it. Left-aligned content feels editorial; centered feels ceremonial.
+- **Aesthetic commitment** — choose ONE: minimal, maximalist, editorial, retro, brutalist, soft/pastel, neon, paper/print. Don't mix.
+
+Consult the `frontend-design` skill for deeper aesthetic guidance if the user wants something bold.
+
+## Themes
+
+If `themes/<id>.md` exists at the project root and the slide is meant to follow it, **the theme file overrides the defaults in this skill** — its palette, typography, layout padding, and Title/Footer components are authoritative. Read the theme file before applying anything else in this section.
+
+Themes are produced by the `create-theme` skill and are pure documentation: copy the palette and the paste-ready Title / Footer / Eyebrow components straight into your slide. If the theme's frontmatter has `mode: dark` or `mode: light`, treat that as the slide's background mode (e.g. when picking which logo variant to import).
+
+## Design system (opt-in, per-slide)
+
+A slide can declare its own typed design tokens at the top of `index.tsx`:
+
+```tsx
+import type { DesignSystem, Page } from '@open-slide/core';
+
+export const design: DesignSystem = {
+  palette: { bg: '#f7f5f0', text: '#1a1814', accent: '#6d4cff' },
+  fonts: {
+    display: 'Georgia, "Times New Roman", serif',
+    body: '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif',
+  },
+  typeScale: { hero: 168, body: 36 },
+  radius:    { md: 12 },
+};
+```
+
+`export` it (rather than plain `const`) so the framework can read the object and inject CSS variables at the canvas root automatically.
+
+The shape is intentionally minimal — it only covers what the Design panel can currently tweak. Anything outside this set (heading sizes, spacing, motion, extra palette colors) belongs as plain hard-coded constants in the slide file.
+
+There are **two consumption surfaces**, and you should mix them inside the same slide:
+
+- **`var(--osd-X)` for visual properties (color, font, font-size, radius)** — these get instant updates while the user drags a slider in the Design panel, before any file write.
+  ```tsx
+  <div style={{ background: 'var(--osd-bg)', color: 'var(--osd-text)', borderRadius: 'var(--osd-radius-md)', fontFamily: 'var(--osd-font-body)', fontSize: 'var(--osd-size-body)' }}>
+  ```
+  Available vars: `--osd-bg`, `--osd-text`, `--osd-accent`, `--osd-font-display`, `--osd-font-body`, `--osd-size-hero`, `--osd-size-body`, `--osd-radius-md`.
+
+- **Direct `design.X` reads** — when you need a JS number for arithmetic or to label something in the UI. These update via HMR after the panel commits the file, not while dragging.
+  ```tsx
+  <p>{design.typeScale.hero}px</p>
+  ```
+
+The dev UI has a **Design** button in the slide header (next to Inspect). Edits update an in-memory draft and the live-preview overlay; a floating Save / Discard bar at the bottom of the canvas commits or reverts. The const stays the single source of truth — production builds bake the saved values.
+
+When to use it: any time the slide should remain tweakable from the panel after generation. When to *not* use it: one-off slides whose palette is intentionally fixed (then use the local `palette` constants pattern from the starter template). Both styles can coexist across slides — the panel only operates on the *currently viewed* slide.
+
+Format constraints (for the panel's AST writer):
+- Must be `[export] const design: DesignSystem = { … }` (or `as DesignSystem` / `satisfies DesignSystem`) at module top level.
+- Object initializer must be a literal — no spreads, no helper calls. Plain values only.
+- `DesignSystem` must be imported from `@open-slide/core` (the panel adds the import automatically when creating a fresh block).
+
+## Starter template
+
+```tsx
+import type { Page, SlideMeta } from '@open-slide/core';
+
+const palette = {
+  bg: '#0f172a',
+  text: '#f8fafc',
+  accent: '#fbbf24',
+  muted: '#94a3b8',
+};
+
+const fill = {
+  width: '100%',
+  height: '100%',
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+} as const;
+
+const Cover: Page = () => (
+  <div
+    style={{
+      ...fill,
+      background: palette.bg,
+      color: palette.text,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      padding: '0 160px',
+    }}
+  >
+    <div style={{ fontSize: 28, color: palette.accent, letterSpacing: '0.2em' }}>
+      CHAPTER 01
+    </div>
+    <h1 style={{ fontSize: 180, fontWeight: 900, margin: '32px 0', lineHeight: 1.05 }}>
+      The Big Idea
+    </h1>
+    <p style={{ fontSize: 40, color: palette.muted, maxWidth: 1200 }}>
+      A short subtitle that explains what this slide is about.
+    </p>
+  </div>
+);
+
+const Content: Page = () => (
+  <div style={{ ...fill, background: palette.bg, color: palette.text, padding: 120 }}>
+    <h2 style={{ fontSize: 80, fontWeight: 800, margin: 0 }}>Section heading</h2>
+    <ul style={{ fontSize: 40, lineHeight: 1.6, marginTop: 64, paddingLeft: 48 }}>
+      <li>One clear point per line</li>
+      <li>Keep to 3–5 bullets</li>
+      <li>Let the space breathe</li>
+    </ul>
+  </div>
+);
+
+export const meta: SlideMeta = { title: 'The Big Idea' };
+export default [Cover, Content] satisfies Page[];
+```
+
+## Assets
+
+Place files under `slides/<id>/assets/`. Import them as ES modules:
+
+```tsx
+import hero from './assets/hero.jpg';
+// …
+<img src={hero} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+```
+
+For URL-only access:
+
+```tsx
+const videoUrl = new URL('./assets/intro.mp4', import.meta.url).href;
+```
+
+Skip the `assets/` folder entirely for pure-text slides.
+
+## Image placeholders
+
+When a page genuinely needs a real image **the user has to provide** — a product screenshot, a team photo, a chart from their data — leave a typed placeholder instead of inventing a stand-in:
+
+```tsx
+import { ImagePlaceholder } from '@open-slide/core';
+
+<ImagePlaceholder hint="Product hero screenshot" width={1280} height={720} />
+```
+
+The user uploads the real file via the Assets panel, then clicks the placeholder in the inspector and picks "Replace…" — the JSX is rewritten to a real `<img>` with the import added.
+
+**Use a placeholder only when** a specific concrete image is required by the deck's topic. Examples that warrant one: a product-intro deck (product screenshot per feature), an offsite recap (team photo), a case study (customer logo, dashboard screenshot).
+
+**Do not use a placeholder** for decoration, generic "stock photo" filler, hero imagery on a text-heavy slide, or anywhere a typographic / iconographic / illustrative solution would do. If you can carry the page with type, layout, and color — do that. Empty placeholders the user has to fill are friction; only spend that friction when the alternative is worse.
+
+Size the placeholder to the slot it occupies. Pass `width`/`height` when the layout has a fixed image box; omit them when the placeholder fills a flex/grid cell. The `hint` should describe the *content* the user needs ("Q3 revenue chart") not the *role* ("hero image").
+
+## Runtime behavior you get for free
+
+- Home page lists every folder under `slides/`.
+- Clicking a slide shows a left thumbnail rail, main page, prev/next, page counter.
+- Arrow keys / PageUp / PageDown navigate. `F` enters fullscreen play mode.
+- In play mode: Space/→ next, ← prev, Esc exit.
+- Hot reload: edit `index.tsx` and the browser updates live.
+
+## Self-review before finishing
+
+- [ ] `slides/<id>/index.tsx` `export default`s a non-empty `Page[]`.
+- [ ] Every page's root fills `100% × 100%`.
+- [ ] Content lives inside padding (no text kisses the edge).
+- [ ] **For every page, sum (font_size × line_height × lines) + gaps + 2×padding ≤ 1080px.** If close, split the page. No `overflow: auto` escape hatches.
+- [ ] No bullet wraps to a second line at the chosen font size.
+- [ ] One coherent visual direction across every page (palette + type scale).
+- [ ] If the slide should be tweakable from the Design panel, it declares a top-level `const design: DesignSystem = { … }` and references `design.X` from inline styles.
+- [ ] One idea per page.
+- [ ] All imported assets exist on disk under `slides/<id>/assets/`.
+- [ ] Every `<ImagePlaceholder>` corresponds to a real image the user must supply — not decorative filler. If it could be replaced by typography or layout, it should be.
+- [ ] Nothing outside `slides/<id>/` was edited.
+
+## Anti-patterns
+
+- ❌ Walls of text. If a page has more than ~40 words, split it.
+- ❌ Using the full canvas for body copy. Respect 100–160px padding.
+- ❌ Overflowing 1080px vertically. Cropped content is invisible — split the page.
+- ❌ `overflow: auto` / `overflow: scroll` / `overflow: hidden` to "hide" too much content. The canvas doesn't scroll; you've just hidden the bug.
+- ❌ Shrinking type below the scale's lower bound, or padding below 100px, to cram more in. Split instead.
+- ❌ Bullets that wrap to a second line — either shorten or move to its own page.
+- ❌ Body type under 28px — unreadable on a projector.
+- ❌ Inconsistent palette across pages.
+- ❌ Installing packages. Only `react` and standard web APIs are available.
+- ❌ Writing CSS to a shared file. Inline styles or scoped classnames only.
+- ❌ Creating `README.md` or other prose files inside the slide folder.
+- ❌ Editing `package.json`, `open-slide.config.ts`, or other slides.
+- ❌ Sprinkling `<ImagePlaceholder>` across pages "for visual interest". Placeholders are for content the user owns; they're not stock-photo slots.
+- ❌ Using a placeholder for an icon or decorative shape — those are typography/SVG problems, not asset problems.

package/src/app/{App.tsx → app.tsx}

@@ -1,8 +1,9 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import config from 'virtual:open-slide/config';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Toaster } from './components/ui/sonner';
-import { Home } from './routes/Home';
-import { Slide } from './routes/Slide';
+import { Home } from './routes/home';
+import { Presenter } from './routes/presenter';
+import { Slide } from './routes/slide';
 
 export function App() {
   return (
@@ -10,6 +11,7 @@ export function App() {
       <Routes>
         <Route path="/" element={config.build.showSlideBrowser ? <Home /> : <NotFound />} />
         <Route path="/s/:slideId" element={<Slide />} />
+        <Route path="/s/:slideId/presenter" element={<Presenter />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
       <Toaster />
@@ -19,10 +21,10 @@ export function App() {
 
 function NotFound() {
   return (
-    <div className="grid h-screen place-items-center bg-background px-6 text-center">
+    <div className="grid h-screen place-items-center bg-background px-6 text-center text-foreground">
       <div>
-        <p className="font-mono text-sm tracking-widest text-muted-foreground uppercase">404</p>
-        <h1 className="mt-2 text-2xl font-semibold tracking-tight">Page not found</h1>
+        <p className="folio">404 · not found</p>
+        <h1 className="mt-2 font-heading text-2xl font-semibold tracking-tight">Page not found</h1>
       </div>
     </div>
   );