Add the four home page redesign candidates with their chooser - #87
Open
ninoxboobook wants to merge 28 commits into
Open
Add the four home page redesign candidates with their chooser#87ninoxboobook wants to merge 28 commits into
ninoxboobook wants to merge 28 commits into
Conversation
Four standalone prototype pages for the new corpuskit.org home - two creative briefs (the reading room, research in working order), each built independently by two builders - plus the chooser index, the approved brand identity document, the briefs and the builder ground rules. Serve design/home-candidates/ statically to compare them. design/ is excluded from deno fmt so the prototypes stay byte-stable. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Candidate B with a corner switcher that swaps the heading face live between the current Newsreader serif and four sans options (IBM Plex Sans, Schibsted Grotesk, Geist, Archivo), each tuned for weight, tracking and leading. Also ports candidate C's answer-anatomy section in after the workings band, restyled to B's palette. Original B is untouched; the chooser gains a B2 entry. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
The capability-notes row, the closing next-step headings and the stewardship display quote now follow the switcher; portal-mock content (the asked question, result titles, passages) and the wordmark stay serif deliberately as the product's reading voice. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Lets the body face be compared as the heading face; Source Sans 3 is loaded across its variable range so the display weight renders true. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…researched pairings Bricolage Grotesque (characterful display grotesque with its optical axis engaged), Sora (geometric-technical classification contrast; no italics, so em falls back to colour emphasis) and Hanken Grotesk (kinship pairing differentiated by weight at 560). Plex and Schibsted removed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Geometric against the humanist body read as a mismatch rather than purposeful contrast. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…place Source Sans is now the default heading state; Work Sans replaces the geometric option with a humanist-grotesque hybrid that shares the body's open apertures while differing in drawing. Newsreader stays loaded for the portal content voice and the wordmark. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Hero drops to clamp(4.2rem, 7.1vw, 8.4rem) and the section headings to clamp(2.8rem, 5.1vw, 5.9rem) so every sans option wraps the headline on two lines, verified on the widest face. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Heading column widened (1.72fr, max-width 1180px), the column gap tightened, and the hero back up to clamp(4.6rem, 8.2vw, 9.6rem). Two-line wrap verified on the widest face. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
The intro paragraph wraps to four lines again (wider column floor, slightly smaller size) so its block sits inside the heading's height, and every face's h1 tracking tightens a step for the restored scale. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
The hero's evidence and the closing's use it are now upright at inherited weight and colour, marked by A's hand-drawn blue underline (the hero one draws once on load). The em is an inline-block positioning context so the stroke spans the word. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…serif original The earlier compaction made the intro much shorter than the heading, and with bottom alignment the difference showed as a gap above it. Original size and leading return; the taller sans heading now gives it the room. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Serious grotesques in Archivo's register: Franklin brings the newspaper lineage's authority, Instrument a precise contemporary neo-grotesque. Bricolage stays as the character comparison. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Two more modern product-grade grotesques alongside the surviving Instrument Sans; Madefor gets a per-face size trim to hold the two-line hero. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Moves the sampler's sourcing up a tier: Fontshare's free-for-commercial library carries the serious neo-grotesques Google Fonts lacks past Archivo. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Söhne and Founders Grotesk load as self-hosted test webfonts from design/home-candidates/fonts-trial/, which is gitignored - the Klim test-font licence covers local mockups, not redistribution, so the files never enter the repository. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Archivo's width axis at 106% with weight 560 and tightened tracking - a display cut of the one face that has survived every cull, sized to hold the two-line hero. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Source Sans 3, Archivo and Söhne remain; every other option, its font loads and the Fontshare link are removed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Owner decision after the sampler rounds. The switcher, the alternative faces and the Klim trial machinery are removed; every heading level - hero, section h2s, feature h3s and the stewardship quote - now sets in Archivo 600 with -0.04em tracking. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
A stale font-weight 350 later in the same rule was overriding the locked 600; removed, along with the duplicate letter-spacing. The quote's emphasis becomes the pen underline like the hero and closing, with a small-screen wrap escape. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…one way in' 'An answer you can take apart' moves directly under the hero. The dark band takes candidate C's heading and intro, and on desktop it pins while scroll steps the portal mockup through Ask, Search, Library and Map, with a condensed summary captioning each step. Tabs stay clickable; mobile keeps the plain tabbed version. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
… section layout untouched The evidence section carries candidate C's pinned scrub (thread draw, highlight sweep, quality bars) in B's blue. Search, Library and Map mock the product UI like Ask does; the capability-notes row is gone; the frame holds a constant 700px so Ask - unchanged - fits exactly. The section keeps its original stacked layout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…frame The three views now carry C's mockups verbatim - query bar with modes, scored results with highlighted matched passages and the weak match, library cards with kind badges and tags, and the labelled-edge entity map - restyled only through B's tokens. Ask untouched. Also: the 'Keep the whole collection within reach' section is deleted and the run section's heading steps down to clamp(2.2rem, 3.6vw, 4.2rem). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…ship quote Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
…view C's content presented at the Ask view's scale: full-width query bar with a cited answer above results, a four-card library grid, the map full-bleed with view toggles, and C's collection-health fragment as a fifth Manage step in the scroll cycle. Match the run-cols headings to the next-step scale, and stop the mobile portal grid stretching the nav row. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
This reverts commit 7fa3a4b.
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.
Four standalone prototype pages for the new corpuskit.org home page, committed so they can be iterated on non-destructively.
design/home-candidates/index.htmlis the chooser; serve the directory statically (e.g.python3 -m http.server --directory design/home-candidates) to compare themdesign/added to the deno fmt exclude list so the prototypes stay byte-stableThese are design artefacts, not app code - nothing imports them and no routes serve them.
🤖 Generated with Claude Code
https://claude.ai/code/session_01FGCckNuKKVbyZ7yvFUYp98
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.