Open since 2026-09-20

The hero signature

The design plan reserved a multi-hue gradient for exactly one element — the name in the hero — and then deliberately left it undecided until there was a real home page to tune it against. Six treatments, one of them no treatment at all, rendered at the size they would actually ship at.

Run forRey’s Lab

Record

Open, not settled. These values describe the comparison as it stands; the result row stays empty until the looking is done.

Opened
2026-09-20
Status
open · undecided
Variable
fill on the name
Candidates
6, incl. control
Floor
3:1 · large text
Measured
worst stop, not mean

Hypothesis

Written before looking, so that it can be wrong in public.

The gradient earns its place only if it reads as this palette at its loudest, not as a different palette visiting. That predicts B or C wins and D loses — D is the prettiest in isolation and the one most likely to look borrowed, because it is borrowed.

The control is the real threat. The site’s whole argument is that bright colour lives on edges and rims and never on large fills, and the hero name is the largest fill on the site. A signature that contradicts the rule it sits inside is not a signature, it is a leak.

E was added after the first look and this hypothesis does not cover it, which is recorded here rather than quietly fixed. It is also the only candidate that is not a ramp, so if it wins, the finding is not “which gradient” but that the question was posed one option too narrow.

Candidates

Each band is the hero as it would ship. Scroll them at full width, on a phone, before reading anything below.

A · No gradient

The control

Portfolio & lab notes

Rey’s Lab

Placeholder positioning line, here so the name is judged with something underneath it rather than floating alone.

Near-white on violet, which is what every other heading on the site already does. If nothing below beats this, the answer is that the signature was never needed — and a control that wins is a real result, not a failed experiment.

measuring…

B · The accent pair

Cyan → gold. No new hues.

Portfolio & lab notes

Rey’s Lab

Placeholder positioning line, here so the name is judged with something underneath it rather than floating alone.

Built from the two accents the site already carries. The design plan predicted this is the only version that can ship without renegotiating the accent policy — cool to warm is the same temperature opposition the palette is built on, so the name reads as the palette rather than as an exception to it.

measuring…

C · Pair through magenta

Cyan → magenta → gold.

Portfolio & lab notes

Rey’s Lab

Placeholder positioning line, here so the name is judged with something underneath it rather than floating alone.

The same two ends with the decoration hue carrying the middle. Magenta is barred from text by policy for being too close to the coral beside it — but this is a fill, not a text colour, and it is the hue the glow already puts behind this exact spot.

measuring…

D · Full spectrum

Category 5, literally.

Portfolio & lab notes

Rey’s Lab

Placeholder positioning line, here so the name is judged with something underneath it rather than floating alone.

The rainbow-galaxy frames as the plan first described them, and the move ultrasound.money actually makes. It is the only candidate that introduces hues the palette does not contain — which is the whole question: is the strongest idea in the reference set worth an exception, or does an exception on the loudest element on the site cost more than it returns.

measuring…

E · Two words, two colours

Cyan · mint, lightness-matched.

Portfolio & lab notes

Rey’s Lab

Placeholder positioning line, here so the name is judged with something underneath it rather than floating alone.

Not a gradient. The name splits at the space it already has and each word takes one flat colour — cyan, then the mint hue that was navy's interaction accent before navy lost experiment 01, re-specified to sit at cyan's exact lightness. It asks the question the other three assume away: whether the signature needs a ramp, or whether two colours and the word break do the whole job. The hue is an import from a rejected palette, which is either the most interesting thing about it or the argument against it.

measuring…

F · E with a magenta apostrophe

Cyan · magenta tick · mint.

Portfolio & lab notes

Rey’s Lab

Placeholder positioning line, here so the name is judged with something underneath it rather than floating alone.

E with one more colour, on the smallest mark in the name. Magenta is far more saturated than the other two, which is why it cannot be a third word — but an apostrophe is small enough that the extra saturation reads as a spark rather than as a lump. It is also the one character in the name that carries no meaning, so colouring it cannot hide anything from anyone, which is exactly the condition the decoration colour is supposed to meet.

measuring…

Method

Design a comparison so one thing moves. Experiment 01 learned this the expensive way.

  1. 01

    Every band is one hero at the same size, same background, same copy. Only the fill moves.

  2. 02

    Judged at full width on a phone before a desktop — the name is the largest thing on the site and the phone is where it is largest relative to the screen.

  3. 03

    Contrast is computed in the page against the page background, reporting each candidate's worst stop. A gradient that averages well and bottoms out at 2:1 has failed.

  4. 04

    The control is judged last but on equal terms. The question is not which gradient wins; it is whether a gradient wins at all — which is why the set holds one candidate with no gradient and one with no ramp.

What the winner has to accept

These hold whichever candidate wins, and they are the reason the question is narrow enough to answer by looking.

It is allowed on exactly one element

Used once it is a signature; used twice it is a theme. Whichever candidate wins, the name in the hero is the only place it appears — not on section headings, not on the lab, not on a second page.

It has to survive the accent pair

Two accents plus a multi-hue wordmark is a lot of colour for one page. B and C spend nothing extra because they are the accents; E spends one hue; D asks the page to hold eight at once.

It cannot be the only signal

The name is a name. It carries no state and links nowhere, so the fill is decoration in the strict sense — which is exactly why it is permitted to use the decoration hue and exactly why nothing may come to depend on it.

The text stays text

Real characters, selectable, in the document, with a solid colour underneath the fill. No image, no SVG outline, no duplicate layer for screen readers to read twice.

Notes from building it

Not the result. These are what the comparison turned up about itself while it was being assembled — which is most of what a lab is for.

sRGB interpolation nearly lost B the comparison

Cyan to gold is the widest hue span in the set, and a default linear-gradient interpolates channel by channel — which sinks the midpoint into a desaturated grey-green that looks like a rendering fault. B would have been rejected on that, and the rejection would have been of sRGB rather than of the idea. Interpolating in oklab holds chroma across the middle. Every candidate now uses it, so none of them is being judged on its colour space.

The fallback has to be declared first, not last

Painting a gradient through glyphs means the element's own colour goes transparent, and a transparent colour is an invisible name anywhere the clip does not apply. So the solid near-white is unconditional and only the @supports block takes it away. The failure mode of the decoration is losing the decoration, never losing the name.

Harmony between two accents is a lightness match

Navy's mint came in at OKLCH lightness 0.844 against cyan's 0.741 — OKLCH being the colour space whose three numbers are perceptual lightness, chroma and hue, built so that equal lightness looks equal across every hue, which HSL emphatically does not. Chroma was already within 0.005, so the whole visible gap was lightness: at hero scale the second word read as louder than the first rather than as its peer. Re-specifying the mint at cyan's lightness and chroma and keeping only its hue gives #3bc696, which is the same colour idea sitting at the same volume.

Lab

#5ee9b5 · as sampled · L 0.844

Lab

#3bc696 · re-specified · L 0.741

The site's own accent pair is deliberately not matched

Cyan sits at 0.741 and gold at 0.879, and that gap is correct: they never appear as peers. Cyan marks what can be acted on and gold marks what is current, so they are separated by role and almost always by position, and gold is meant to sit brighter. E is the exception that makes the rule visible — it puts two colours inside one name, adjacent, doing the same job. Colours that are peers have to match; colours that carry different jobs must not.

A gradient's contrast is its worst stop

Averaging the stops would report a comfortable number for a ramp that bottoms out below the floor somewhere in the middle of the word. The probe reports the minimum instead, which is the only figure that describes what a reader actually has to read. All four clear 4.5:1 as built — the spectrum's violet stop is the tightest at just over 5:1, and it is the stop any future edit should be checked against.

Result

Empty on purpose. It gets filled in by looking, and then this page freezes like experiment 01.

Undecided as of 2026-09-20. When it settles, the winner moves to the home page and the losing fills stay here, scoped to this page, in the same way navy and jungle stayed on experiment 01.