rowkit.dev 2.0: VitePress docs with the brand, and a landing page in both themes

[NikolaiKushner]

rowkit.dev 2.0, as design/briefs/site.md and Figma «Site v2» describe it: a product site instead of an operating-system costume. The site still opens in modern; Windows 98 is a switch away, or ?theme=win98.

Docs: VitePress's default theme with the brand on it

• The desktop shell goes — windows, Explorer and Finder, the taskbar, the Dock, Start, Spotlight, our own tree and 404, the Windows 98 code colours. 30 components.
• VitePress's layout, search, 404, light and dark, with the brand: vermilion links, active item and outline marker, the logo, a 15px sidebar.
• «Examples in: Windows 98 | Modern» switches the theme the live examples are drawn in. It sits in the nav bar from 1360px, above the page at 768–1359px, and in the menu on a phone. Each example sits on its own theme's face; VitePress's dark mode turns the modern ones dark.
• Props tables become a list on a phone; a demo is its own stacking context, so its table frame no longer covers the nav bar.

The landing page

At 1440 and 390, in Windows 98, modern light and modern dark. The sections, top to bottom:

• The hero. The install command with Copy, and the live Users table: search, a status filter, sort, selection, pages, edit and delete. Over the table, «See the whole site in Windows 98 | Modern» redraws the whole site.
• «One set of components. Any look.» One form in Windows 98, in modern and in a defineTheme() theme, with the code that makes the third.
• Components. Eight live previews and «Coming next».
• «Built like a professional tool». Six reasons and the numbers.
• The rest: a data table page in code, «Before you install», «Start in a minute», and the footer.

Every number on the page is the repository's own:

• 38.85 kB for the library and 2.64 kB for a Button, from pnpm size;
• 1,494 tests;
• 313 tokens.

Where it departs from Figma is written in the brief:

• Vermilion as small text is #c8361c. The brand's own is 4.48:1 on paper.
• «Your theme» sets five values, not two. With two, the panel's checkbox and hover would stay blue, so the code under it would not match what it shows.
• The code sample's columns are objects. That is what DataTable takes; Figma has strings.

Checks

• Lighthouse on the home page, Introduction, Installation, Button, DataTable and Themes, phone and desktop:

  Category	Score
  Accessibility	100 everywhere
  SEO	100 everywhere
  Best Practices	96
  Performance, desktop	99–100
  Performance, phone	84–99

  Best Practices is 96 only because the Vercel Analytics script 404s when served locally.

• Axe finds nothing on the landing page in any of the three looks.

• No horizontal scroll at 375 and 1440.

• Lint, prettier --check on tracked files, pnpm typecheck and the docs build all pass.

Fixed on the way:

• Code colours. The default github-light and github-dark have tokens at 3.2–4.3:1. Code blocks now use github-light-high-contrast and github-dark-default.
• Hydration. The «Your theme» panel and the theme builder now hand their <style> its CSS as innerHTML. As a text child, the server escaped its quotes and every page load logged a hydration mismatch.
• The nav bar at 1280px. The switch ran 6px past the bar's edge, which is why it now joins the bar from 1360px.

No changeset: only docs/ and design/ change. Main is merged in; the old shell icons main redrew in #32 stay deleted, since nothing on the new site uses them.

🤖 Generated with Claude Code