diff --git a/DESIGN_DIRECTION.md b/DESIGN_DIRECTION.md new file mode 100644 index 00000000..d9a9bc16 --- /dev/null +++ b/DESIGN_DIRECTION.md @@ -0,0 +1,241 @@ +# Design Direction — Refining the RadicalxChange Site + +**Status:** Proposal for review. No production templates change in this PR — it is the audit +and plan only. Token, component, and template work follows in small, separate PRs once this +direction is agreed. + +**Goal (restated):** The brand is right; the *execution* is noisy. Same content, same brand +(black / white / `#EDFF38` yellow, Messer + Suisse Int'l), but calm, ordered, and confident — +a clear hierarchy that guides the eye. This is refinement and tightening, **not** a re-skin. + +Reference for the *feel*: [ai-now-institute](https://ainowinstitute.org/) (restraint, generous +whitespace, uniform cards, calm rhythm) and our own deck templates (oversized Messer headlines, +yellow as punctuation, lots of negative space). + +--- + +## 1. The concrete sources of noise — what I found + +Audited live via a local build (`npm run build` passes) of the homepage, Updates listing, +Projects, Tools, and a blog article, desktop + mobile, light **and** dark mode. Findings are +grouped from most to least damaging. + +### 1.1 Yellow is used as wallpaper, not punctuation — the single biggest offender +The brand book is explicit: yellow is a high-contrast accent ("black lettering on yellow/white +**or** yellow/white on black"). On the site, yellow is the *background of entire screens*: + +- **Homepage** — the whole page is `bg-golden-fizz` ([`src/site/index.njk:58`](src/site/index.njk)). +- **Tools** — two full-height yellow blocks ([`src/site/tools/index.njk:67,82`](src/site/tools/index.njk)). +- **The shared `introduction` macro** — `min-h-screen bg-golden-fizz` + ([`src/site/_includes/components/introduction.njk:4`](src/site/_includes/components/introduction.njk)), + reused by Projects, About, Vision, Community and more. + +When everything is yellow, yellow can no longer *mark* anything. The pages read as loud and +flat, with no figure/ground and nowhere for the eye to rest. This is the root cause of the +"noisy" criticism. + +### 1.2 No hierarchy: every section looks identical +The homepage is a single column of stacked blocks, each introduced by the **same** treatment — +bold, uppercase, same size kicker label: + +> FROM THEORY TO PRACTICE: · PROOF AT THE NATIONAL SCALE: · OUR ROLE: +> THE MECHANISMS BEHIND THE WORK — THE PLURAL STACK: · WE INVITE YOU TO JOIN US: + +Five near-identical labels in a row means nothing is prioritized — the eye gets no signal about +what matters. There are no section rules, no scale contrast, no rhythm; sections are separated +only by inconsistent vertical gaps. + +### 1.3 The display font is barely used where it matters most +Messer (our confident, condensed, ALL-CAPS display face — the heart of the brand) is reduced to +the logo and one pull-stat. The **homepage hero headline is set in Suisse Bold, sentence case** +([`src/site/index.njk:75`](src/site/index.njk)) — which is precisely the "incorrect" example in +the brand book (p.12). The deck's whole personality is "oversized Messer headline"; the most +important page on the site doesn't use it. + +### 1.4 Link-stuffed paragraphs +Body copy is packed with inline underlined links — the homepage "theory to practice" and "join +us" blurbs are walls of underlines ([`src/site/index.njk:8,18–26`](src/site/index.njk)); 8+ +links in two sentences. It reads as clutter and gives the visitor no clear next action. + +### 1.5 `min-h-screen` + `content-between` strands content in dead space +The intro macro and homepage wrapper use `min-h-screen … content-between`. On tall viewports +this pushes the headline to the top and the rest to the bottom, leaving a **huge empty yellow +void** in the middle (clearly visible on Projects). Vertical spacing is a side effect of flex +distribution rather than an intentional scale. + +### 1.6 A dark-mode contrast failure — black on black (accessibility bug) +`global.css` sets no background or text color; `` is transparent with black text. Pages +that don't paint their own background (Updates, every blog/announcement/paper article, Search, +Wiki, Community lists) inherit the browser's **dark** canvas for visitors whose OS is in dark +mode → **black text on a near-black background, effectively invisible.** Reproduced locally by +emulating `prefers-color-scheme: dark`. This violates the brand's own ADA contrast rule on a +large share of the site. + +### 1.7 Palette drift in the config +`tailwind.config.js` defines colors outside the three-color brand: `red #C53030`, +`gray #6C6C6C`, `light-gold #FAFFC3`, `light-black #010101` +([`tailwind.config.js:42–48`](tailwind.config.js)). `text-gray` is in active use (e.g. the +`.see-more-link`). Off-brand greys are a quiet but real source of muddiness. + +### 1.8 Too many type sizes, inconsistently applied +13 type tokens (`size--4 … size-4` + four display sizes) with per-page one-off choices: the same +"card title" is `text-size-2` on Updates but `text-size-0/2` on Tools; section labels vary +between `text-size-0`, `font-bold uppercase`, and `text-size--1`. No documented "use this size +for that role." + +### 1.9 One-off components instead of a small reusable set +Recurring patterns are re-implemented inline each time rather than shared: + +- **Cards**: the Updates card (type · title · author · date · underline) is genuinely good — + but Projects uses a `border-2` box, the homepage stat uses another bordered box, and Tools + uses a different concept tile. Four card idioms, no shared macro. +- **Section header + "see all"**: no shared component; each listing re-rolls its own heading, + rule, and "Load more / Find out more" affordance with different wording and styles. +- **Projects listing** is a hand-rolled `