Redesign the app shell, sidebar, and library directory#36

What changed

A redesign of the site shell and every page, split into focused commits so each can be reviewed (and reverted) on its own:

1. Apply next/font variables on html so the configured fonts load. The variable classes were on <body>, but Tailwind resolves --font-sans on :root. The reference was invalid there, so every page fell back to the browser's default font.

2. Use SF Pro Rounded with a Nunito fallback for the UI font.

3. Rewrite library descriptions without em dashes or promotional copy. 10 used em dashes and 7 read as marketing, which goes against the contributing guide's factual-description rule.

4. Add sidebar and category icons. These are Iconsax PNGs rendered as CSS masks, so they follow the text colour.

5. Move every route into a shared app frame. Every page now shares:

   • one sidebar with the brand, search, navigation, page-specific content, GitHub stars and theme toggle
   • a full-height content card that is the only scrolling area

   The sidebar widens on /libraries to hold the filters, and the sidebar search drives the directory directly. Screens below 1024px get a compact top bar. This commit also adds a token-based dark/light theme with no brand-blue chrome, custom scrollbars, and icons centred on the capital letters of their labels.

6. Redesign the directory filters, toolbar, and cards.

   • The category pill slides between options, and the section headers are full-width.
   • Sort and view are segmented controls.
   • Card previews show at their real 1.9:1 ratio instead of being cropped.
   • Result changes animate with FLIP (cards glide to their new positions), without scaling any text.

7. Redesign the library detail page.

   • A sticky side card holds the preview, links and details.
   • Install methods sit in a segmented track, with a blur wave when you switch commands.
   • Getting started is a numbered timeline.
   • The copy button cross-fades and resizes to fit its label.
   • The page no longer has a footer.

8. Rebuild the docs in the new style.

   • Section navigation with a sliding pill, and an "On this page" list that follows the section being read.
   • Shared docs components replace the per-page markup and teal styling.
   • Pages slide in from the direction you navigate.

9. Redesign the contributors and sponsors pages.

   • Contributors are shown as cards, with totals.
   • Sponsors has an honest empty state instead of placeholder tiers.
   • Neither page shows the footer any more.

Each commit type-checks on its own. The shared stylesheet is layered, so the CSS for commits 6–9 lands in commit 5 and their markup follows.

This is a larger design change. The contributing guide asks for an issue first for changes like this; I'm happy to split it into separate PRs or open one if you prefer.

Type

• New library
• Library metadata correction
• New verified components
• Bug fix
• Feature
• Documentation

Verification

• I kept this pull request focused. (It's one redesign across the site, split into focused commits.)
• I ran npm test and npm run build successfully. (32/32 tests pass.)
• I checked light and dark modes when the interface changed.
• I checked keyboard access and reduced motion when interaction changed. (Focus rings, arrow-key tab switching and prefers-reduced-motion rules are in place, but I haven't done a full keyboard pass.)
• I added screenshots or a recording for visible changes. (To follow.)

Related issue

None.

🤖 Generated with Claude Code