Align docs with the Reflex marketing design

Merged
AL
4d ago
+1689-433

The documentation site still used the older visual system across its navigation, landing pages, article controls, and component catalogs. This brings those surfaces into the current Reflex marketing style with Inter/Geist typography, warm neutral colors, the opal announcement banner, and compact, consistent controls.

Changes

  • Restyle the docs overview, AI workflow cards, component and integration catalogs, recipes, and 404 page.
  • Align desktop and mobile navigation, search, feedback, code examples, tables, callouts, and Back/Next links; add an accessible title and close control to the mobile documentation drawer.
  • Keep the documentation content, routes, code syntax colors, and live example behavior intact. Add scoped hooks in reflex-site-shared, local font assets with licenses, and support for dark mode and reduced motion.

Validation

  • Docs application suite: 668 passed, 65 skipped (test_published_seo.py excluded because this is a local change).
  • Relevant shared docs component tests: 71 passed. Frontend quality checks: 5 passed.
  • Production compilation and bundle completed for all 1,073 registered docs routes.
  • Manually checked representative desktop/mobile pages, light/dark themes, navigation and search, live examples, API controls, integration filtering, and the compact Back/Next links.
  • Ruff checks and formatting, Pyright, codespell, and git diff --check passed for the changed files.

Browser coverage is representative rather than an automated run of every documentation route. This PR is a draft for visual review.