We were not given brand guidelines for this brief, so we derived a working set from the live site: three pages sampled element by element, then the rules behind the values written down. helfy® may well hold guidelines internally; these are ours, and everything in this walkthrough is built from them.
A style guide written by looking at screenshots is a guess. These values came out of the browser itself, which is why they include things nobody would invent, like a 10.5px root unit.
Orange covers between 0.1% and 1.6% of any page. That is not restraint for its own sake: it means the next action is findable by colour alone, with no competing orange to disambiguate.
There is no grey in the system. Every secondary tone is black or white at reduced alpha — rgba(0,0,0,0.75) for body copy — so it borrows the hue of whatever sits behind it. One text token works on white, on teal and on the pink footer without an override.
Only 400 and 700 exist. No 500, no 600, across three pages. Hierarchy is built from size and colour alone, so a reader is only ever reading or being told the topic.
Know your health.
Hero · 52px · 700 · lh 1.30 · +0.6pxTake your personalised test.
Heading · 40px · 700 · lh 1.30 · +0.6pxThe truth about sleeping tablets
Card title · 24px · 700 · lh 1.30Quick links
Sub-head · 18px · 700 · lh 1.30Quit taking random supplements and guessing what your body needs.
Lead · 16.8px · 400 · lh 1.76 · +0.63pxGet started
Button · 15.75px · Roboto Mono · +1.05pxReceive a detailed report breaking down your results.
Body · 14.7px · 400 · lh 1.76BalanceKit
Product title · 13px · 700 · lh 1.30© 2026, helfy · Refund policy · Privacy policy
Meta · 11.55px · 40004 · ADS → QUIZ
Label · 11.55px · Roboto Mono · +1.05px · this deck's extensionThe sizes are a rem ladder on a 10.5px root, not a modular scale — measured steps are 1.07×, 1.30×, 1.33× and 1.67×. To extend the system, replicate the ladder, not a 1.25× progression. One honest deviation: on helfy's own site mono is reserved for button labels, and every row above except Button is Montserrat. This deck extends mono to eyebrows, labels, trace lines and email meta, because a walkthrough of a routing machine wants its instrumentation to read as instrumentation. It buys a documentary register and spends part of what mono was doing for the buttons.
A single 1.05 scale factor on a 10px root produces the type ladder, the spacing ladder and the container width. The odd fractions are a consequence of that one number, not hand-picked values.
There is not a single horizontal rule anywhere on the site. Sections are separated by a full-bleed background change at a 36px gap. The colour band does the work a divider line would.
These are the two components the whole system turns on, rebuilt from the measured values and shown at the sizes the site actually uses.
Mono label at 15.75px with 1.05px tracking, the widest tracking anywhere in the system. Primary is #FF751A with a black label, not white. The secondary variant only exists on teal.
BalanceKit£470.00The image is the only edge: 12px rounded on the top two corners, flush along the bottom so the crop meets the text. Content centred. A row of these reads as objects rather than boxes.
Left: the only shadow in the system, 10px 12px 20px at alpha 0.1, tinted rgba(26,71,71,·) so it reads as light in a teal room rather than a generic drop shadow. Right: what most surfaces actually get. The blog page carries none at all.
Each of these is a decision with a plausible alternative that another designer would reasonably have taken. That is what makes them useful rather than descriptive.
A second typeface used only on button labels, over the conventional display-font-for-headlines pairing.
Why it holdsOn a page selling blood tests, a headline in a novelty face reads as marketing; a label that looks like terminal output reads as a control. People trust a switch that looks like machinery.
Accent confined to fills on clickable things, over spreading it into headings, icons, links and hover states.
Why it holdsSomeone deciding whether to spend £499 needs to find the next step without first working out which orange thing is the button.
No fill, no border, no shadow on cards — a 12px-rounded image with a flush bottom edge is the only boundary.
Why it holdsWhen the product is a physical kit that arrives in the post, the buyer wants to look at the object, not at a box drawn around the object.
Secondary text built from black-and-white alpha, over a grey ramp with per-surface overrides.
Why it holdsText that inherits its surface never looks pasted on. A fixed #666 reads cold on the pink footer and muddy on teal.
behelfy.com runs a Dawn-derived theme. The 10.5px root, the 1260px container, the 36px section gap and the radius values are theme knobs. The fractional pixel values are a consequence of the 1.05 body scale, not hand-picked numbers.
The teal/orange/pink split, the monospace CTA, the two-weight ladder and the containerless card are where the actual taste lives. Those are the parts worth defending in a review.
On the hackathon day the time went on strategy and the funnel framework, which is the part that has to be right. This design system was measured and written up afterwards. Design is window dressing that can change after the build; the framework underneath it cannot.
None were supplied with the brief, so this is what the live site does, measured and written down. It should be checked against anything helfy® holds internally before it is treated as canonical.
The original version of this deck was warm cream with a serif display face — a look with no relationship to helfy. Every page here was rebuilt on the system above: white and teal grounds, Montserrat in two weights, mono pill CTAs, containerless cards, and colour bands instead of divider rules.
The kit was produced with /taste, a Claude Code skill that measures a live site and writes the system out as tokens plus rules. Those rules were loaded into this build, which is how seven pages stayed on-system: two font weights, one accent, and no divider line anywhere.
Never Guess®. The system follows from that.
Brand guidelines were discovered and rebuilt after the day, not during it. Design system measured from behelfy.com across three pages at 1440×900; values are observed, not supplied by helfy®. Verify against any internal brand documentation before treating as canonical.