web: rebuild the homepage on the premium marketing grammar

[0thernet]

Summary

Rebuilds atet.sh on the shared Hraness premium marketing grammar (@hraness/design-kit v0.4.0, plan of record kb/plans/portfolio-homepage-premium-20260905.md, per-site entry 17). Light is the default; dark follows the existing appearance menu and prefers-color-scheme. Nebula Sans is the only face (the serif display face is gone), labels are sentence case in the text face, monospace is reserved for code, and the gold accent binds once through --hraness-site-accent. No transitions or animations were added; the page works without JavaScript.

Headline: Make and edit video with your coding agent

Lead: Atet gives your agent one local project to generate images, video, and voice, edit screen recordings and imported footage, add captions, graphics, and motion, and export finished videos. Your source files never change. (33 words)

Sections, in order: site header (wordmark, four links, one primary action, appearance menu last) · hero (eyebrow pill, headline, lead, "Ask your agent to …" example, two actions, license/version/platform footnote) · product frame showing the four working-model commands as a terminal transcript with a caption saying it is a transcript, not a recording (no real Atet render or receipt exists in the repository; atet doctor --json output is not documented in shape) · facts strip · pillars (Generate, Edit, Deliver) · install panel (skill command, CLI install) · the four example requests as cards · workflow flow · interfaces grid (Skill, CLI, SDK, MCP) · trust section (source media unchanged, project state stays local, Gateway credentials stay local, operations leave receipts) · questions (account, cost, credentials, platforms, overwrite, uploads, skill targets, website, who made it) · maker (Ben Guo, verified facts only, links to hraness.com, @hraness, GitHub) with the approved name story · closing call to action · Hraness footer. index.md mirrors the new copy. The not-found page shares the header and action treatment.

Dependency

• apps/web/package.json: @hraness/design-kit v0.3.0 → v0.4.0. apps/web/bun.lock was regenerated in isolation (only the design-kit lines changed); the root workspace bun.lock carries the same two-line change.

Test expectations changed (apps/web/site.test.ts)

• Dependency map and local lockfile pins move to design-kit#v0.4.0.
• "uses a restrained editorial visual system" is now "uses the shared premium marketing system": it pinned the serif --font-display, --radius-control: 0.2rem, and --radius-surface: 0.45rem, which are the old visual treatment. It now pins Nebula Sans, the accent binding, the 0.625rem radius, a light :root with a dark override, no serif, no uppercase tracking, no transitions, the new headline, the product frame, and the maker section.
• "uses one install, examples, workflow, interfaces, and design information architecture" pinned the retired sticky docs-index sub-navigation and four docs-section split layouts; it now pins section order, header link order, and the grammar roles.
• The 404 theme-color pin follows the new paper color (#faf8f3, also in theme.ts, index.html, and preview.html).
• The built stylesheet budget rises from 64,000 to 72,000 bytes. The design-kit grammar file grew from 14,474 to 35,456 bytes with v0.4.0 while site CSS shrank from 28,696 to 14,566 bytes; the built asset is about 70.6 KB.

Every other pin, including the old tagline "Make and edit visual media with your coding agent." (now the closing call to action), the install ordering, the example requests, the workflow stages, the trust claims, the creation story, the appearance menu, and the footer, passes unchanged.

Validation

• bun run check in apps/web: 29 tests pass, build succeeds, verify:preview passes (320×180 layout evidence, no horizontal or vertical failures).
• Built output served locally and screenshotted with agent-browser at 1440×900 light and dark and 390×844 light through the whole page; document.documentElement.scrollWidth === window.innerWidth at 390 (no horizontal scroll). Fixed during review: pillars alignment (a dl margin reset beat the grammar), orphan cards in the interfaces and trust grids, inline-code backgrounds inside the dark install blocks, the phone header stacking to three rows, transcript clipping on phones, and invisible button text on the 404 page.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
atet	Ready	Preview	Sep 5, 2026 2:18pm UTC