From c13aff9f2baca034206ac1d9ee63bc11720b4305 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 7 Aug 2026 13:42:46 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=BE=20docs:=20give=20the=20page=20the?= =?UTF-8?q?=20identity=20its=20name=20implies?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The library is called cereale and the page was generic dark-developer-docs with an emoji in the brand mark. Three directions were drafted and scored by separate judges on identity, legibility and craft; this is the disciplined one with the two grafts that fixed its own weaknesses. Palette. Indigo on off-white becomes rye-brown on oat paper, warm in both themes. The accent is deliberately NOT wheat-gold: gold is both the cliche and a collision with --warn, which already owns amber, and two amber families would make "our brand" and "needs your attention" the same colour. One ornament, used three times. A 2px mark repeated every 9px: as a rule above each section head, stood on end as the stalk beside each note, and in place of the three fake macOS traffic lights on every code panel — which were the most generic pixels on the page. The brand emoji and the emoji favicon both go, replaced by the same figure drawn as a five-rect SVG: an ear of grain reduced to its skeleton, which is the section rule stood upright. An emoji is a different picture on every OS, so it is the one brand element you do not control. Grafted from the two directions that lost: - Ruled links. On a palette this warm, --accent-text and --text-muted sit 1.14:1 apart, so colour alone loses a link in prose. Links now keep body colour and carry a 2px accent rule, which satisfies 1.4.1 outright. - --accent-on-code. #editor:focus drew its ring in --accent against the always-dark slab: 2.86:1, a live 1.4.11 failure on the shipped page. The new single-valued token measures 7.03:1. - --border-ui, for icon-only and outlined controls, which were on --border-strong at 1.60:1. Now 3.54:1. - --err-line/--err-text, replacing three loose literals. Two bugs found by rendering rather than by reading. The header overflowed the viewport by 63px across the whole 641-767px band, hidden rather than fixed by body{overflow-x:hidden}; the Size link added in the previous commit widened that to 109px. The nav-link breakpoint moves 640px to 860px, which is where they actually fit. Verified: 72 foreground/background pairs computed in both themes, none below 4.5:1 for text or 3:1 for non-text; no horizontal overflow at any of 20 widths from 320 to 1920; no page errors and no external requests in either theme; the playground still compiles and runs; markup parses with nothing unclosed; check:docs passes and the generated files stay in sync. Not taken: recolouring --t-decorator to the brand. It is the best identity idea in the set — the decorators are what the library is — but the six --t-* tokens are a shared vocabulary, page.js emits their class names, and the playground highlights code the reader pastes in. One token, easy to revisit. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01SAcqrz3FcadkYr3xG32CjK --- docs/index.html | 253 ++++++++++++++++++++++++++++-------------------- 1 file changed, 149 insertions(+), 104 deletions(-) diff --git a/docs/index.html b/docs/index.html index df3a0a1..6da59bf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -7,7 +7,7 @@ - + @@ -22,35 +22,54 @@