npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1712) hide show

package/dist/__w3kits/assets/design-templates/replit-deck/references/themes.md ADDED Viewed

@@ -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.

package/dist/__w3kits/assets/design-templates/saas-landing/SKILL.md ADDED Viewed

@@ -0,0 +1,124 @@
+---
+name: saas-landing
+description: |
+  Single-page SaaS landing with hero, features, social proof, pricing, and CTA.
+  Respects the active DESIGN.md color/typography/layout tokens.
+  Trigger keywords: "saas landing", "marketing page", "product landing".
+triggers:
+  - "saas landing"
+  - "marketing page"
+  - "product landing"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  preview:
+    type: html
+    entry: index.html
+    reload: debounce-100
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  craft:
+    requires: [typography, color, anti-ai-slop, laws-of-ux]
+  inputs:
+    - name: product_name
+      type: string
+      required: true
+    - name: tagline
+      type: string
+      required: true
+    - name: has_pricing
+      type: boolean
+      default: true
+    - name: proof_count
+      type: integer
+      default: 3
+      min: 0
+      max: 6
+  parameters:
+    - name: hero_density
+      type: spacing
+      default: 96
+      range: [48, 200]
+    - name: accent_strength
+      type: opacity
+      default: 1.0
+      range: [0.5, 1.0]
+  outputs:
+    primary: index.html
+  capabilities_required:
+    - file_write
+---
+# SaaS Landing Skill
+Produce a single-page SaaS landing. Agent, follow this workflow exactly.
+## 1. Read context
+Before writing anything:
+- Read `DESIGN.md` in the current working directory. If missing, stop and ask for one.
+- Identify the color palette, typography tokens, and layout principles.
+- Note the "Agent Prompt Guide" section — it overrides any instruction here if they conflict.
+## 2. Plan sections
+Required sections, in order:
+1. **Hero** — logo-or-wordmark, headline (tagline input), subhead (1–2 sentences), primary CTA, secondary CTA. Use the hero_density parameter as vertical padding in px.
+2. **Features** — 3–6 feature tiles. Each: icon, short title, 1–2 sentence body.
+3. **Social proof** — `proof_count` logos or testimonials. If 0, skip this section.
+4. **Pricing** — 2–3 tiers. Include only if `has_pricing` is true.
+5. **Footer CTA** — large accent-colored band with one-button call to action.
+6. **Footer** — minimal: links + copyright.
+## 3. Apply design system
+- All colors must come from DESIGN.md tokens. Do not invent hex values.
+- Typography: use the declared display font for headlines, body font for everything else.
+- Layout: respect the grid, max-width, and section spacing rules.
+- Components: use declared button/card/input patterns. Do not add shadows if DESIGN.md's Depth & Elevation says minimal.
+- Accent: use the accent color only once in the hero, once in the footer CTA, and for all links. Do not flood the page.
+## 4. Write the file
+Output a single self-contained `index.html` with:
+- All CSS inlined in a `<style>` block in `<head>`.
+- System font fallbacks if DESIGN.md fonts aren't loadable from Google Fonts etc.
+- No external JS.
+- Semantic HTML (`<header>`, `<main>`, `<section>`, `<footer>`).
+- Each editable element tagged with `data-od-id="<unique-slug>"` so the host app's comment mode can target it.
+## 5. Self-check
+Before finishing, verify:
+- [ ] All text is content-meaningful, not lorem ipsum (use product_name and tagline inputs; generate plausible specific copy for the rest).
+- [ ] No broken color references (every CSS color value is in DESIGN.md's palette or a valid alpha/fallback variant).
+- [ ] Responsive breakpoints match DESIGN.md's Responsive Behavior section.
+- [ ] The page looks good at 1440w, 768w, and 375w (mentally simulate).
+- [ ] Accent used no more than twice total.
+## 6. Done
+Write only `index.html`. Do not generate a separate CSS file, JS file, or README.
+---
+## For skill authors reading this as a reference
+This is a minimal but complete skill. Structure:
+```
+saas-landing-skill/
+├── SKILL.md    ← you are here
+└── assets/
+    └── base.html    (optional starter template; this skill doesn't use one)
+```
+Things to notice:
+- The `od:` front-matter block is optional for Claude-Code-only compatibility, but adding it lights up OD's typed inputs, sliders, preview metadata, and capability gating.
+- The workflow below the front-matter is plain Markdown that the agent reads as its system prompt.
+- DESIGN.md is treated as a collaborator, not an override. The skill gives the agent authority to override when the brief conflicts, but never to invent new tokens.
+- `data-od-id` tagging is how we wire elements to comment mode. Skills that want comment-mode compatibility must annotate their output.
+See [`../../docs/skills-protocol.md`](../../docs/skills-protocol.md) for the full protocol.

package/dist/__w3kits/assets/design-templates/saas-landing/example.html ADDED Viewed

@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Filebase — sync that respects your bandwidth</title>
+  <style>
+    :root {
+      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
+      --accent: #c96442; --surface: #ffffff;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 -apple-system, system-ui, sans-serif; }
+    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
+    header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
+    .logo { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
+    nav a { color: var(--fg); text-decoration: none; margin-left: 22px; font-size: 14px; }
+    button { font: inherit; cursor: pointer; padding: 11px 20px; border-radius: 8px; font-weight: 500; }
+    .btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
+    .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
+    .btn-link { background: transparent; border: none; color: var(--accent); padding: 11px 0; font-weight: 500; cursor: pointer; }
+    section { padding: 80px 0; }
+    .hero { padding: 100px 0; }
+    .hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.02em; max-width: 17ch; margin: 0 0 22px; }
+    .hero p { font-size: 19px; color: var(--muted); max-width: 56ch; margin: 0 0 36px; }
+    .hero .cta { display: flex; gap: 12px; }
+    .features { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
+    @media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }
+    .feature h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
+    .feature .num { font-family: ui-monospace, monospace; color: var(--accent); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; display: block; }
+    .feature p { margin: 0; color: var(--muted); font-size: 14.5px; }
+    .proof { text-align: center; }
+    .proof h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 28px; }
+    .logos { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; opacity: 0.6; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
+    .pricing h2 { text-align: center; font-size: 36px; margin: 0 0 12px; letter-spacing: -0.02em; }
+    .pricing .lede { text-align: center; color: var(--muted); margin: 0 0 48px; }
+    .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+    @media (max-width: 800px) { .tiers { grid-template-columns: 1fr; } }
+    .tier { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 32px; }
+    .tier.featured { border-color: var(--accent); position: relative; }
+    .tier.featured::before { content: 'Recommended'; position: absolute; top: -12px; left: 24px; background: var(--accent); color: white; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }
+    .tier h3 { margin: 0 0 8px; font-size: 18px; }
+    .tier .price { font-size: 40px; letter-spacing: -0.02em; margin: 6px 0 16px; }
+    .tier .price small { font-size: 14px; color: var(--muted); font-weight: 400; }
+    .tier ul { list-style: none; padding: 0; margin: 16px 0 24px; color: var(--muted); font-size: 14px; }
+    .tier ul li { padding: 5px 0; border-top: 1px solid var(--border); }
+    .tier ul li:first-child { border-top: none; }
+    .closing { background: var(--accent); color: white; text-align: center; }
+    .closing h2 { font-size: 38px; letter-spacing: -0.02em; margin: 0 0 14px; }
+    .closing p { opacity: 0.85; margin: 0 0 28px; }
+    .closing button { background: white; color: var(--accent); border: none; }
+    footer { padding: 28px 0; color: var(--muted); font-size: 13px; text-align: center; }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <header data-od-id="topnav">
+      <span class="logo">◰ Filebase</span>
+      <nav>
+        <a href="#features">Features</a>
+        <a href="#pricing">Pricing</a>
+        <a href="#docs">Docs</a>
+        <button class="btn-secondary" style="margin-left: 12px;">Sign in</button>
+      </nav>
+    </header>
+    <section class="hero" data-od-id="hero">
+      <h1>File sync that doesn't eat your bandwidth.</h1>
+      <p>Block-level deltas, end-to-end encryption, and a pricing model that doesn't punish you for working with video.</p>
+      <div class="cta">
+        <button class="btn-primary">Get Filebase</button>
+        <button class="btn-link">Read the whitepaper →</button>
+      </div>
+    </section>
+  </div>
+  <section class="features" id="features" data-od-id="features">
+    <div class="wrap feature-grid">
+      <div class="feature">
+        <span class="num">01</span>
+        <h3>Block-level diffs</h3>
+        <p>Edit a 4 GB Final Cut project? We sync the 200 KB you changed. Not the whole file.</p>
+      </div>
+      <div class="feature">
+        <span class="num">02</span>
+        <h3>End-to-end encrypted</h3>
+        <p>Files are encrypted on your laptop before they leave. We can't read them. Neither can law enforcement, by design.</p>
+      </div>
+      <div class="feature">
+        <span class="num">03</span>
+        <h3>Honest pricing</h3>
+        <p>One flat rate for unlimited storage. No "fair use" clauses. No throttling at 90%.</p>
+      </div>
+    </div>
+  </section>
+  <section class="proof wrap" data-od-id="proof">
+    <h2>Used by teams at</h2>
+    <div class="logos"><span>Anthropic</span><span>Stripe</span><span>Linear</span><span>Vercel</span><span>Cursor</span></div>
+  </section>
+  <section class="pricing wrap" id="pricing" data-od-id="pricing">
+    <h2>Pricing</h2>
+    <p class="lede">Pick a tier. Switch or cancel any time.</p>
+    <div class="tiers">
+      <div class="tier">
+        <h3>Solo</h3>
+        <div class="price">$8<small>/mo</small></div>
+        <p style="color: var(--muted); margin: 0;">For individuals.</p>
+        <ul>
+          <li>1 TB storage</li>
+          <li>Block-level sync</li>
+          <li>Email support</li>
+        </ul>
+        <button class="btn-secondary" style="width: 100%;">Choose Solo</button>
+      </div>
+      <div class="tier featured">
+        <h3>Team</h3>
+        <div class="price">$14<small>/seat/mo</small></div>
+        <p style="color: var(--muted); margin: 0;">For teams up to 50.</p>
+        <ul>
+          <li>5 TB pooled storage</li>
+          <li>Shared folders & roles</li>
+          <li>Priority support</li>
+          <li>Audit log</li>
+        </ul>
+        <button class="btn-primary" style="width: 100%;">Choose Team</button>
+      </div>
+      <div class="tier">
+        <h3>Enterprise</h3>
+        <div class="price">Custom</div>
+        <p style="color: var(--muted); margin: 0;">SSO, on-prem keys, SLA.</p>
+        <ul>
+          <li>Unlimited storage</li>
+          <li>SAML / SCIM</li>
+          <li>Dedicated support</li>
+        </ul>
+        <button class="btn-secondary" style="width: 100%;">Talk to sales</button>
+      </div>
+    </div>
+  </section>
+  <section class="closing" data-od-id="closing">
+    <div class="wrap">
+      <h2>Sync less, ship more.</h2>
+      <p>14-day free trial. No credit card needed.</p>
+      <button>Get Filebase</button>
+    </div>
+  </section>
+  <footer class="wrap" data-od-id="footer">© Filebase · Privacy · Terms · Status</footer>
+</body>
+</html>