feat(docs): brand restyle — Living-systems tokens, fonts, landing + doc layout - #435
Merged
Conversation
tayebmokni
force-pushed
the
feat/brand-docs-site
branch
from
May 25, 2026 22:24
cde5427 to
8c40d85
Compare
Mirrors the @gonext/admin Living-Systems setup into apps/docs:
- Add src/styles/tokens.css mirroring docs/design/colors_and_type.css
(cream paper, forest ink, emerald + lavender accents).
- Wire Archivo, Geist, Geist Mono, Instrument Serif via next/font/google
in app/layout.tsx so the four CSS variables resolve at runtime.
- Add tailwind.config.ts + postcss.config.mjs with the brand colour,
spacing, radius, shadow, and font-family extensions.
- Copy logo-wordmark.svg, logo-mark.svg, favicon.svg, favicon.ico from
apps/admin/public into apps/docs/public.
- Rewrite styles/docs.css to consume the brand tokens directly:
topbar with wordmark + nav + paper-3 search pill, forest sidebar with
emerald-bright hover, paper article column with Archivo h1/h2 and
italic-accent emerald, Instrument Serif italic blockquotes, forest
code blocks tuned to the brand palette via Shiki token overrides.
- Restyle the landing page (app/page.tsx) with the giant Archivo
"Docs that *grow* with you." headline, Geist subtitle, emerald
"Read the docs" primary CTA + paper-2 "API reference" secondary,
and a forest "alive band" with organic radial-glow gradients
hosting the subsystem feature grid.
- Refit SearchBar.tsx to the paper-3 pill with a leading Lucide
search icon and a trailing kbd hint.
Tokens (--paper, --emerald, --font-display, ...) are the contract with
the design handoff; this PR introduces them in apps/docs but never
defines new values — they all come from src/styles/tokens.css which is
a verbatim mirror of docs/design/colors_and_type.css.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Two new vitest snapshots that guard the visual contract of the
restyled docs site:
- src/test/landing.test.tsx — asserts the hero headline carries the
italic-accent <em> ("grow"), the two CTAs link to /docs and /api
with the right brand classes, the forest band has its own italic
accent ("five"), and the ADR footnote links into /adr.
- src/test/search-bar.test.tsx — asserts the .search-bar__field
pill wraps a Lucide svg + an input + a ⌘K kbd hint, and the
input is the documented `searchbox` role with the docs placeholder.
Behavioural concerns (Fuse fuzzy matching, build pipeline) are
already covered upstream; these tests only pin the JSX structure
that the brand CSS attaches to.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Adds lockfile entries for tailwindcss, postcss, autoprefixer, and lucide-react which the brand restyle introduced in apps/docs. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
tayebmokni
force-pushed
the
feat/brand-docs-site
branch
from
May 26, 2026 17:32
8c40d85 to
7f98932
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restyles the
@gonext/docssite to match the Living-systems brand (PR #415's bare scaffold + PR #432's admin foundation). Tokens are sourced fromdocs/design/colors_and_type.cssvia a per-app mirror — no new values introduced.src/styles/tokens.css(mirrorsdocs/design/),tailwind.config.ts+postcss.config.mjsmatching the admin extension, four Google Fonts (Archivo, Geist, Geist Mono, Instrument Serif) loaded vianext/font/googleinapp/layout.tsx, brand assets copied intoapps/docs/public/.app/page.tsx): giant ArchivoDocs that *grow* with you.headline with the italic-accent rule, Geist subtitle, emerald primary CTA (Read the docs) + paper-2 secondary (API reference), forest "alive band" with organic emerald + lavender radial-glow gradients hosting the subsystem feature grid.styles/docs.css): forest sidebar with emerald-bright hover and emerald active-rail, paper article column with Archivo h1/h2 (auto-numbered01.italic serif), Instrument Serif italic blockquotes, Geist Mono code blocks on forest with Shiki tokens re-tuned to emerald keywords + lavender variables + amber strings.components/TocSidebar.tsx): sticky paper-3 card with brand typography (CSS-only change).components/SearchBar.tsx): paper-3 pill with leading LucideSearchicon, ⌘K kbd hint, paper-2 results dropdown.Two new vitest snapshots (
landing.test.tsx,search-bar.test.tsx) pin the JSX contract; existing 31 tests untouched.Test plan
pnpm --filter @gonext/docs typecheck— cleanpnpm --filter @gonext/docs test— 36 passed (5 files)pnpm --filter @gonext/docs build— 52 static pages, no warningspnpm --filter @gonext/docs lint— no ESLint warnings or errorspnpm --filter @gonext/docs devand spot-check/,/docs/00-architecture-overview,/adragainstdocs/design/ui_kits/docs/index.html🤖 Generated with Claude Code