Why this site
looks like
paperwork.

Steady sells two food supplements to people who have already been lied to by a supplement company. That is the brief in one line. The customer is 25 to 40, trains three or four times a week, has read a long argument online about magnesium oxide versus bisglycinate, and has paid £79 a month for a green powder whose label said “proprietary blend, 8,700 mg”. They are sceptical because they have been had.

So I designed for the second visit rather than the first: the one where somebody comes back with a phone in their hand to check whether the amounts still say what they said last month. That assumption decided everything else. The certificate of analysis is a hero asset here and gets as much room as the photography.

Type and colour

Bricolage Grotesque does the headline work between 40 and 85 pixels. I chose it for the variable width axis, which lets me set the hero line as a dense block that behaves like a stamp rather than a sentence. Inter carries every number, and this site is mostly numbers: 32 ingredient rows, three certificates, a seven-part cost breakdown. Every table is set in tabular figures so columns of milligrams line up instead of shimmering as they change.

Bone #FBF7F0 for the page, deep forest #1F3A2E for text and two full-bleed bands, citrus #D8F24E as the only colour allowed to shout, terracotta #C8563C for the honest asides. Terracotta measures 4.05:1 against bone, which fails AA for body copy, so it only ever appears as a fill, a rule, a focus ring or display-sized type; small terracotta text uses a darkened #9A3E28 at 6.36:1. The rule for citrus is narrower still: it may carry forest at full strength and nothing else, which is why every citrus surface on the site is either a button or a highlight and never a paragraph.

What I rejected: the sports-nutrition default of black, chrome and a lightning bolt, and the wellness default of sage, cream and a lowercase serif. Steady is neither aggressive nor soothing. It is a shop that shows you its receipts, so the visual language came from packaging and paperwork: two-pixel rules, offset shadows with no blur, panels shaped like the back of a pouch.

Three radii, and a rule for each

The first version of this build carried seven arbitrary corner radii between 12 and 26 pixels, with sibling panels differing by two pixels for no reason anybody could have stated. That is not a scale, it is a habit. There are now three, and each one has a job: 12 pixels for anything nested inside another panel, 20 for a standalone card or photograph, 28 for the four surfaces that behave like documents — the buy box, the ingredient table, the certificate and the comparison table. The two-pixel rule and the blur-less offset shadow got the same treatment. The shadow is now a ranking device rather than a texture: at most one surface and one control per section, on the thing you are meant to look at first and the thing you are meant to press. That took it from thirty surfaces to fourteen. Full table of tokens on the research page.

The order the objections get answered in

Above the fold there are four things on every device: the claim, both prices, the add button, and six real ingredient rows. The last one is the unusual choice. Most supplement sites put a lifestyle photograph there. I put the top of the label there, overlapping the photograph, because for this buyer the label is the lifestyle photograph.

The section order is an argument. Objection one is “you are about to lie to me”, so section 01 is three claims we do not make, struck through. Objection two is “what is in it”, which is the full 32-row table with the reasoning behind each dose. Objection three is “prove it”: the Eurofins certificates, including the February batch with a chlorate residue on it, because publishing only the flattering result is not publishing. Objection four is the price, so the pricing cards sit beside a breakdown of where the £39 goes, down to the 85p a pouch that testing costs. Reviews and the FAQ come last. No testimonial appears before the evidence, which is the reverse of the usual funnel and is the entire point.

Three breakpoints, three layouts

At 1440 the hero is a 7/5 split, the photograph bleeding off the right edge with the label panel hanging 92 pixels back into it. At 834 that hang would crowd the type, so the panel moves alongside the photograph instead and the pair sit as a row; the ingredient section rearranges too, with the scoop breakdown and the spirulina shot going side by side above a full-width table rather than stacking in a left rail. At 390 both drop to one column and the comparison table stops being a table altogether: eight rows by four columns inside 350 pixels is unreadable at any size, so each row becomes a card with a two-by-two grid of values and the Steady cell filled citrus. The ingredient table itself survives 390 on one measurement, the longest unbreakable INCI string, “methyltetrahydrofolate”, which needs about 123 pixels of the 346 available. Mobile also gets a buy bar that slides in after 760 pixels of scroll with its own plan switch, because by then the hero is a very long way up.

What moves, and why

Seven interactions, all load-bearing. The subscribe/one-off switch is global state: flipping it rewrites the hero price, the pricing cards, the second product, the sticky bar and every line in the basket at once, so the £6 difference is felt rather than explained. The ingredient table filters by group and by free text and announces “showing 12 of 32” to a live region. The basket drawer runs a real total including the £6 both-pouches discount, with a free-delivery bar that only appears when it is relevant. The batch selector swaps an entire certificate. The FAQ is a plain accordion with proper aria-expandedstate and nothing clever at all. The last two are confessions rather than features: the certificate’s download button and the checkout button both open an honest panel saying this is a portfolio build and no file or payment processor is wired up, because a dead control on the one section carrying the entire trust argument is worse than no control.

The thing I cut

I built a sort control on the ingredient table so you could rank by NRV. Then I deleted it. Sorting breaks the promise that section makes, which is that this is the label in label order, and a table you can reorder is a table you can no longer check against the pouch in your kitchen. The group filter gets you to the vitamins in one tap without changing the sequence. I would rather lose the feature than the thing it existed to prove.

Steady is a fictional brand built as a portfolio piece. The company number, VAT number, lab references and reviews are invented. The nutrition figures are realistic and the regulatory wording is real.