Design direction: noise audit + refinement plan#233
Draft
jackhenderson12 wants to merge 1 commit into
Draft
Conversation
Audits the live site (homepage, Updates, Projects, Tools, an article; desktop + mobile, light + dark) and names the concrete sources of clutter, then proposes a tightened, within-brand direction. Key findings: - Yellow used as full-page wallpaper instead of punctuation (root cause) - Flat hierarchy: identical uppercase kicker labels, no section rhythm - Messer display underused; homepage hero is Suisse Bold sentence case (the brand book's "incorrect" example) - Link-stuffed paragraphs; min-h-screen+content-between dead space - Dark-mode black-on-black (no body bg set) — ADA failure - Off-brand palette drift (gray/red/light-gold); ~13 ad-hoc type sizes - One-off cards/accordions instead of a small reusable component set Proposes: reclaim yellow as accent on white surface; ~6 type roles (one Messer weight); a small component library (section header, content card, button pair, motifs); spacing/grid discipline; foundation fixes. Includes before/after for the homepage and a listing page, plus a small-PR sequence. No template changes in this PR. Co-Authored-By: Claude Opus 4.8 <[email protected]>
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
1 participant
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.
What this is
Step 1 of the refinement workflow — a planning PR, not a code change. It adds a single file,
DESIGN_DIRECTION.md, auditing where thesite's execution gets noisy and proposing a tightened direction within the existing brand
(black / white /
#EDFF38, Messer + Suisse Int'l). No templates, tokens, or styles change here.Opened as a draft for review — please react to the direction and the open questions at the
bottom before I start the visual PRs.
How I audited
Local
npm run build(passes) served and reviewed: homepage, Updates listing, Projects, Tools,and a blog article — desktop + mobile, light and dark mode.
Headline findings
bg-golden-fizz(homepage, Tools,the shared
introductionmacro). When everything is yellow, yellow can't mark anything. Root cause.no section rules, no scale contrast.
own "incorrect" example); Messer is reduced to the logo + one stat.
min-h-screen + content-betweendead space.<body>sets no background/color, soprefers-color-scheme: darkvisitors get black text on a dark canvas across all unpainted pages. ADA failure; one-line fix.
gray/red/light-goldin config) and ~13 ad-hoc type sizes.<table><tbody><ol>withmultiple
<h1>s, no shared section-header/"see all" rhythm.Proposed direction (detailed in the doc)
primary/secondary buttons, motif utilities (underline, icon-circle, highlight, number-circle, stat).
Constraints respected
Stays in 11ty + Nunjucks + Tailwind. Preserves content, routes, redirects, i18n (
portuguese/),Fathom, newsletter.
npm run buildpasses.Please weigh in on
should stay fully yellow on purpose?
🤖 Generated with Claude Code