Document annotations · visual study
Ten shapes, ten yellows, one brightness limit
The document surface is held constant so the highlight is the only moving part. Round two keeps option 02’s soft shape and moves through ten yellow-family colors; round three pushes one of them to the normal-text contrast boundary.
- Typeface
- Inter Variable
- Body
- 15px / 24px
- Background
- oklch(0.145 0 0)
- Foreground
- oklch(0.985 0 0)
The padding trick: options marked “visual outset” grow with paint (usually a shadow or an expanded overlay rectangle), not CSS padding. Option 02 and all of round two now use about 4px on the x-axis and 2px on the y-axis without changing line height or text wrapping.
Current solid ochre
Control · high coverage, square fragments, warning-adjacent hue.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Soft amber halo
Keeps the familiar hue, lowers the chroma, and softens every edge.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Smoked sand
A low-saturation warm neutral that reads more like paper than status.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Lilac halo
A collaboration-like color that separates comments from warnings.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Indigo wash
Cool and workmanlike; reads as selected text instead of a warning.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Teal wash
Quiet on the warm-black surface while remaining easy to scan.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Dusty rose
Still warm, but clearly distinct from amber warning and review states.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Marker band
A translucent stroke across the lower glyph area instead of a box.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Underline + haze
The lightest block treatment; a precise edge anchors a faint wash.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Neutral glass outline
Almost colorless fill; a violet hairline defines the selected range.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
One shape, ten yellows
Every sample below uses option 02’s translucent, rounded treatment with the wider 4px horizontal outset. Opacity and geometry stay fixed; only OKLCH lightness, chroma, and hue move.
Pale lemon
The brightest, cleanest yellow in the set.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Citron
A sharper yellow with a slight greenward pull.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Canary
A familiar highlighter yellow without the solid-marker density.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower
Balanced yellow-gold with a little more body.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Marigold
Warmer and slightly deeper, without reaching orange.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Saffron
The warmest saturated option in this round.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Honey
A darker, quieter golden yellow for long selections.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Wheat
Pale and desaturated; closer to parchment than marker ink.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Khaki
A subdued, slightly olive yellow with low visual urgency.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Antique gold
The deepest yellow; restrained but still clearly highlighted.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
How bright can it go?
This ramp uses Sunflower (option 14), the unchanged white foreground, and the same borderless geometry. At 15px / 400 weight the text is “normal text,” so WCAG 2.2 AA requires at least 4.5:1 contrast. Sixty percent is the brightest practical stop here at 4.66:1; 62% falls below the requirement.
Sunflower · 25%
Quiet baseline, slightly dimmer than the color round.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 30%
Close to option 14, with a small brightness lift.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 35%
Clearly highlighted, still soft across long ranges.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 40%
A strong but comfortable mid-range treatment.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 45%
Bright and unmistakable, just below enhanced contrast.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 50%
Halfway to the source yellow; intentionally prominent.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 55%
Very bright, with a modest accessibility buffer.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 58%
Near the limit, but retains a useful contrast margin.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 60%
Brightest recommended stop for this exact color and text.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.
Sunflower · 62%
Boundary proof: visibly brighter, but no longer compliant.
Summary
Build a TypeScript Node package that plugs into an existing Express application and serves a local, read-only traffic minimap. Each node represents a normalized HTTP method + Express route; the dashboard polls an in-memory snapshot and uses node size for request volume and color for latency/error health. The MVP is developer-only, single-process, ephemeral, and requires no database or authentication.