docs: give the README figures a dark counterpart - #435
Merged
Merged
Conversation
GitHub dark mode painted every figure on a white canvas: the banner, the parsing and retrieval diagrams, and the benchmark grid. Each figure now ships a light and a dark file selected by a <picture> element with prefers-color-scheme, so the switch needs no CSS. - Banner: the light and dark hero exports replace knowhere-banner.png. - Parsing and retrieval: refreshed from the new 01/02 designs. Those designs ship light only, so the two diagrams stay single-variant for now. - Benchmark: re-rendered from the design SVG at 1600x1120 with a 2x device scale. The dark variant comes from the same SVG with color literals remapped and geometry untouched, holding each element relative contrast (bars 1.56:1 to 1.89:1, grid 1.30:1 to 1.56:1, text at or above 4.5:1). - Sources: both benchmark SVGs live in docs/assets/source/ with the palette mapping and the render recipe. - Dropped the four figures the README no longer references. Text in the benchmark SVG is exported as glyph paths, so future metric changes belong in the generating script, not in the SVG.
The banner sat at the left edge while the headline, badges, links, and every figure are centered, because it was the only image in the file without a centering wrapper. Wrap it in the same <p align="center"> the other figures use.
The new hero banner already renders "Prepare unstructured data for AI agents", so the h1 directly below it repeated the same sentence inside the first screen. Drop the h1 and keep the wording in the banner alt text, where screen readers and search still pick it up.
5 tasks
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
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
<picture>elements withprefers-color-scheme, so dark-mode readers no longer get white canvases and theswitch needs no CSS.
benchmark grid.
itself: the
h1below it repeated the words already drawn inside the artwork, sothe
h1is gone and the wording lives on in the banneralttext.heightattribute. GitHub's markdown CSS setsmax-width: 100%but neverheight: auto, so the attribute kept the box at500px while the width shrank to the README column, stretching the artwork and its
headline by 30%.
docs/assets/source/, with the palettemapping and the render recipe documented next to them.
Verification
width="1000" height="500"renders 768x500 (ratio 1.536 against the natural2.000);
width="1000"alone renders 768x384 (ratio 2.000). A template matchagainst the artwork in a live page screenshot agreed with the stretched case
(0.48 horizontal scale, 0.58 vertical), so the attribute is dropped and every
image in the file now sets width only.
headline; the
alttext carries the headline that used to be theh1.--force-device-scale-factor=2(headless Chromium), which yields 3200x2240.Compared against the design export: edge correlation 0.79 with mean absolute
pixel difference 1.26 (the design export is JPEG), and identical OCR values for
all six metrics.
geometry, labels, and numbers are untouched. Color-region pixel counts match the
light render within 0.7% (background 6,342,136 vs 6,343,012; bars 484,352 vs
484,288; accent 136,273 vs 136,170; ink 82,545 vs 82,007), the edge correlation
between the two renders is 0.9963, and every label still OCRs on the dark render.
Text contrast stays at or above 4.5:1 (primary 17.8:1, secondary 5.5:1, accent
6.7:1).
README.mdresolves, no script or workflow readsthe removed
h1, andgit diff --checkis clean.preview.
Deployment Notes
knowhere-banner.pngandbenchmark.pngare gone. Externalpages that hot-link those two paths would break; the self-hosted and dashboard
repos were checked and do not reference them.
Checklist