feat: brand the marketing site + reference themes on Living-Systems - #440
Merged
Conversation
tayebmokni
force-pushed
the
feat/brand-marketing-and-themes
branch
from
May 25, 2026 22:26
6592044 to
7bd51e0
Compare
Mirrors the foundation landed in @gonext/admin (PR #432) onto the public site renderer: • tokens.css copied from docs/design/colors_and_type.css (cream paper / forest ink / emerald + lavender + semantic). • next/font/google wires Archivo, Geist, Geist Mono, Instrument Serif as self-hosted variables on <html>. • tailwind.config.ts mirrors apps/admin so the same utility names resolve to the same tokens across both surfaces. • globals.css imports tokens.css, declares the legacy --wp-preset--* aliases the renderer's fallback HTML still uses, and ships the brand wordmark helper. • Adds Lucide + tailwind-merge + clsx to the dependency surface so component code can compose icons and class lists the same way the admin does. No visual change yet — the page components still render their existing markup. The next commits restyle the home page, the public shell, and the singular-post layout to consume the brand surface. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Restyles the public-site renderer to match the Living-Systems
brand. Three surfaces land in this commit:
1. The home route — was a vertical archive list. Becomes the
real marketing landing per docs/design/ui_kits/marketing.html:
sticky forest pill nav, cream hero with "Sites that *live*
and grow.", logo marquee, three-column features grid, forest
"alive band" with the headline stats, a "recent stories"
section that preserves the original archive data behavior,
a closing CTA, and a forest footer with four link columns.
2. The PublicShell — keeps its trusted-HTML injection contract
but now wraps the themed body in brand chrome (the same nav
+ footer used on the home page) by default. Single-post and
archive routes get the brand surround without each route
touching the chrome wiring directly.
3. The single-post fallback layout in render.ts — Archivo title
at clamp(40px → 64px), Geist 17px body at line-height 1.65,
Geist Mono meta row with an emerald-deep separator, optional
italic-accent rule on the title. Markup is paired with
globals.css so themes that opt in via class names inherit
the brand scale.
New primitives:
- <Headline> mirrors the admin's Headline contract (size +
italic accent + cream/forest surface).
- <Wordmark> ships the composite "Go" + italic "Next" mark.
Tests:
- Smoke tests on Headline, Wordmark, MarketingHero, MarketingNav,
and MarketingFooter pin the brand contract (italic accent on
"live", "Start a site" CTA copy, forest surface attributes).
- PublicShell.test.tsx grows assertions for the new chrome mode
and the children slot.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Rewrites both reference themes to consume the canonical brand
palette (cream paper / forest ink / emerald primary / lavender
secondary / soft semantic) and the four-family type stack
(Archivo display, Geist body, Geist Mono ID, Instrument Serif
italic-accent).
gn-hello (the minimum-viable starter)
• Palette: ink #0E1A14, paper #F5F2EA, muted #4A5C52,
accent #047857 — the four-slug contract the theme test
pins, now hex-aligned to the design handoff.
• Adds display + serif + mono font families alongside the
existing sans; style.css adopts the italic-accent rule on
h1/h2 and uses Geist Mono for the post-meta eyebrow.
gn-pro (the production-grade reference)
• Palette: 10 brand-aligned slugs (ink, ink-muted, paper,
paper-muted, rule, accent emerald, accent-fg, success,
warning, danger) — same slug names so existing templates
and the resolver tests keep passing.
• Gradients: emerald-glow, lavender-glow, forest-pulse, dawn
— the four organic gradients the kit uses on dark surfaces.
• Typography: display (Archivo) + sans (Geist) + mono
(Geist Mono). The italic-accent rule is pinned inline in
style.css ("Instrument Serif") because it is a brand
contract and not author-editable.
• Shadow presets re-tuned to the brand's soft-organic scale
(no hard offsets, ink-derived rgba).
style.css quality gate
• Zero hard-coded hex / rgb / hsl literals in either theme —
the gn-pro style.css test pins this and would fail on any
regression.
• Every var(--wp-preset--…) reference in style.css resolves
to a token actually declared in theme.json (the orphan-var
test).
Go theme tests pass: `cd packages/go && go test -race -count=1
./theme/...` — gn-hello + gn-pro acceptance gates green.
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-marketing-and-themes
branch
from
May 26, 2026 17:32
7bd51e0 to
503c635
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
apps/web/and thegn-hello/gn-proreference themes around the Living-Systems brand (cream paper · forest ink · emerald + lavender accents · Archivo / Geist / Geist Mono / Instrument Serif). Foundation already inmainvia PR #432 for the admin surface; this PR mirrors that contract onto the public-site renderer and the first-party themes so the entire visitor-facing stack is on-brand.Three landings:
apps/web/brand foundation — copiestokens.css, wires the fournext/font/googlefamilies on<html>, ships a Tailwind v3 config that mirrorsapps/admin/tailwind.config.ts, copies the brand SVG assets, and addscn+ Lucide + tailwind-merge to the dep surface.apps/web/src/app/page.tsxas the real marketing experience fromui_kits/marketing/index.html(sticky forest pill nav, cream hero with "Sites that live and grow.", logo marquee, feature grid with Lucide icons, forest "alive band" with the headline stats, brand-aligned "Recent stories" section preserving the original archive data flow, closing CTA, forest footer with four link columns). RestylesPublicShell.tsxso single-post + archive routes get the brand chrome by default. Single-post fallback layout inrender.tsswitches to Archivo title atclamp(40px → 64px), Geist 17px body at line-height 1.65, Geist Mono meta eyebrow.gn-hellokeeps its 4-slug contract (ink/paper/muted/accent) and adopts the brand hex codes;gn-prokeeps its 10-slug / 4-gradient / 3-family / 6-size shape and rewrites every value around the brand.style.cssfor both passes the orphan-var + no-hard-coded-colors quality gates.Tokens are LAW
Every color in the touched code comes from the canonical handoff at
docs/design/colors_and_type.css— no hex literals outside the four-family typography pinning instyle.css(which is brand contract, not author-editable).Test plan
pnpm --filter @gonext/web typecheck— greenpnpm --filter @gonext/web test— 217/217 passing (new snapshots on Headline, Wordmark, MarketingHero/Nav/Footer, PublicShell)pnpm --filter @gonext/web build— Next.js standalone build succeedscd packages/go && go test -race -count=1 ./theme/...— gn-hello + gn-pro acceptance gates green (10 palette / 4 gradients / 3 fonts / 6 sizes / no orphan vars / no hard-coded colors)pnpm --filter @gonext/admin test:ci— 340/340 passing (untouched, sanity check)/in a dev server with the API offline → verify the hero, alive band, and footer all paint with brand tokens🤖 Generated with Claude Code