← bluefrog / build notes
Portfolio entry №19, and the first drawn from the data & systems register: a page whose entire visual argument is the client's own brand story — blue is one of the rarest colours in nature, so the blue thing is the only saturated thing on the page.
Blue Frog Communications is a real Zero2Webmaster client — a solo strategic-communications consultancy whose tagline is “Break Through the Jungle of Communications Noise”. Every fact and sentence of client copy on the page was harvested verbatim from the live site (bluefrogcomms.com) on 2026-08-31. Nothing was embellished; the three statistics are the client's own and are the only numbers on the page.
Kerry's standing style-variety mandate requires each new flagship page to be a completely different style with a new above-the-fold structure. At eighteen entries, the ledger held six dark-cinematic pages, four broadsheets, six light editorial/journal pages, one photo-cinematic page and one print poster — and had never drawn from the fable-25 Data & systems category. For a consultant whose value proposition is signal-versus-noise, that gap is also the thematically correct direction: the page performs signal emerging from noise rather than claiming it.
#101c19), on which everything is desaturated noise except the blue.Two measurements made the whole design. First: the client's brand orange fails WCAG AA on the client's own white site. Measured 2026-08-31:
| Ink | Ground | Ratio | AA |
|---|---|---|---|
| #f8681b | #ffffff (live site) | 3.01 | fail |
| #f8681b | #f7fafc (live site) | 2.87 | fail |
| #f8681b | #edf2f7 (live site) | 2.67 | fail |
| #f8681b | #101c19 (this page) | 5.81 | pass |
The orange is only readable as text on a dark ground. Second: Blue Frog's orange (#f8681b) sits three-to-twenty-six channel points from SAVE THE FROGS! orange (#f5821f) — two frog-named organisations in one portfolio with effectively the same orange would read as one house style. Both findings resolve the same way, and it happens to be the brand's own thesis: lead with blue, ration the orange. The dark ground is therefore argued from measurement — it is the only ground on which the client's own brand colours are all AA-legible at once — and it is a concrete, demonstrable improvement over the live site, where the brand orange cannot safely be used as text at all.
| Token | Hex | on #101c19 | on #16241f | on #1d2f28 | Tier |
|---|---|---|---|---|---|
| paper | #f2f6f4 | 16.02 | 14.75 | 12.93 | body + display |
| mist | #cbd8d3 | 11.90 | 10.95 | 9.60 | secondary prose |
| moss | #9aaea5 | 7.46 | 6.87 | 6.02 | mono labels, furniture |
| signal | #4db8f0 | 7.84 | 7.22 | 6.33 | links, all text-tier blue |
| signal-hi | #7fcdf5 | 9.94 | 9.15 | 8.03 | resolved signal, emphasis |
| brand-blue | #198dd7 | 4.85 | 4.47 | 3.92 | fill only — never text |
| deep-blue | #20558b | 2.27 | 2.09 | 1.84 | decoration only |
| orange | #f8681b | 5.81 | 5.35 | 4.69 | rationed — rules, one CTA fill |
The two-tier accent rule: #4db8f0 is the text-tier blue everywhere; #198dd7 (the client's own bright blue) is a fill only — note it passes on the page ground but fails on the panel tint, exactly the per-surface trap that has bitten two earlier builds in this series. Listing it fill-only means the trap cannot fire.
Button text on any brand fill is the dark canopy #101c19, never white: canopy on orange measures 5.81:1 where white measures 3.01:1; canopy on brand blue 4.85:1 where white is 3.60:1; canopy on signal blue 7.84:1 where white is 2.23:1. Every button's ink is re-asserted at higher specificity than any section-scoped link rule, and button-text-on-fill was measured in the build's own audit pass, not just links.
The one set-piece is a canvas in which a message is buried in visual noise and resolves as the reader drives it. It passes the series' relevance test completely — a signal resolving out of noise, on a page whose tagline is Break Through the Jungle of Communications Noise, is the thesis, not a flourish.
Framed as findings, not criticism — four things the live site currently gets wrong, and what this rebuild does instead.
The live site's contact button says Book Now under copy promising a 30-minute intro call — but it links to mailto:Paige@BlueFrogComms.com, so it opens an empty email draft. This rebuild ships the honest version: an email CTA labelled as one (Email Paige), with the 30-minute intro call named in the supporting line. If a real scheduling link exists (Calendly or similar), the CTA becomes a true Book Now.
On the live /my-work/ page, the PetSmart Charities Brand Video blurb reads literally Together withnd n and the “Next Things” entry reads An educatio — broken WordPress content, almost certainly a botched edit. This rebuild ships the PetSmart entry with its title and video and no body copy, and folds the “Next Things” list into a “Selected engagements” index (its ten items are intact and read as a portfolio index). No replacement text was invented.
The live H1 (“Strategic communications consulting that cuts through the noise…”) is too long to set as display type. This rebuild keeps it as the page's real <h1> — for search engines and screen readers — and promotes the tagline to the display line, so the fold leads with the six words that carry the brand.
The live “Proven Results Across industries” heading has a lowercase industries; corrected here. And per the palette section above: the brand orange is not AA-legible as text anywhere on the live site's white grounds — this page's dark ground is the fix, not a style preference.
Everything on the page is verbatim client copy except: the section rubrics (00 / THE NOISE … 07 / TALK), the nav labels, the hero scroll cue, the instrument section's heading and explainer (“Turn the signal up.” / “Every pixel below is a pure function…”), the instrument's determinism caption and tier words, the “Selected engagements” label, the CASE numbering, the video captions' channel attributions (real channel names from YouTube oEmbed), the pull-quote attribution line, the philosophy sign-off line, and the footer's “Showcase rebuild — build notes” link. None of these makes a factual claim about the client that the source site does not make.
