💄 site: tevm-family theme, hero, platform picker and cross-repo nav

[roninjin10]

Visual/UI layer for the ZEVM docs site (zevm.tevm.sh). Branched off prod/zevm-readiness (PR #59), which is where the current site/ vocs build and its prose live — so this targets that branch, not main. The documentation prose is unchanged; this PR is theme, layout and components only.

Theme — matched to the family, not invented

Checked the live sibling contract.tevm.sh before styling: it renders with --vocs-color-accent:#0085FF, the Geist / Geist Mono type stack, and /tevm-logo-light.png + /tevm-logo-dark.png. This site now uses the same accent, the same logo assets (fetched from the live sibling), and a favicon.

Custom tokens are defined with light-dark(). Vocs 2.7 sets color-scheme on [data-vocs-theme=light|dark], so a single token set resolves correctly for both the system preference and the explicit theme toggle — no duplicated .dark blocks.

Two build-level gotchas worth recording: vocs 2.7 takes accentColor at the top level of the config (there is no theme or font key), and user CSS must live at src/pages/_root.css — a styles.css at the root is silently ignored by the vocs:user-styles plugin.

Hero

components/Hero.tsx — what ZEVM is, npm install @evmts/zevm@beta with a copy button, and CTAs into the quickstart, CLI reference and repo. The existing code samples on the page render below it unchanged.

Interactive component: PlatformPicker

ZEVM ships nine prebuilt native packages under npm/platforms/*, wired into @evmts/zevm as optionalDependencies. The picker lets a reader select OS × arch × libc and shows the exact package they will get, with the libc control appearing only for Linux and unsupported arch/OS combinations disabled and struck through. It guesses the visitor's platform from the UA on mount. Unsupported combos link to the build-from-source guide instead of dead-ending.

Zero new dependencies, self-contained, and used on both the landing page and Installation — where the platform question actually gets asked.

Cross-repo navigation

A tevm family topNav dropdown on every page, plus a FamilyNav grid at the bottom of the landing page. Both link all 13 live family sites: tevm.sh, contract, bundler, cli, test, logger, ethers, mud, examples, voltaire, guillotine, mini, zevm.

Verification

npm run build (clean):

✓ built in 5.02s
[ssg] processing static generation...
[prune] removed static-only 39 chunk(s) and 0 asset(s) from server bundle
✓ 1 file generated in 255ms

Rendering and interactivity were checked with headless Chromium against vocs preview in both color schemes (temporarily pointing baseUrl at localhost so client assets hydrate; restored before commit):

light {"theme":"light","heroText":"ZEVM","heroColor":"rgb(27, 27, 31)",
       "heroFont":"Geist, ui-sans-serif, system-ui, sans-serif","surface":"#fff",
       "heroBg":"rgb(247, 248, 250)","selectedChip":"macOS",
       "pkg":"@evmts/zevm-darwin-x64","familyLinks":13,"accent":"#0085FF"}
light after Linux+musl -> @evmts/zevm-linux-x64-musl
light after Win+ia32   -> @evmts/zevm-win32-ia32-msvc
light pageerrors: none

dark  {"theme":"dark","heroText":"ZEVM","heroColor":"rgb(242, 243, 245)",
       "heroFont":"Geist, ui-sans-serif, system-ui, sans-serif","surface":"#17181c",
       "heroBg":"rgb(30, 32, 39)","selectedChip":"macOS",
       "pkg":"@evmts/zevm-darwin-x64","familyLinks":13,"accent":"#0085FF"}
dark after Linux+musl -> @evmts/zevm-linux-x64-musl
dark after Win+ia32   -> @evmts/zevm-win32-ia32-msvc
dark pageerrors: none

Both themes hydrate with no page errors, the picker resolves the correct package for every combination exercised, and all 13 family links render.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zevm-docs	Error		Jul 30, 2026 6:02pm