Round 2 (final) · Stakeholder review · not for distribution
Value A Company — mockups r2
Round 2 (final) · May 2026

Value A Company — final UI mockups for stakeholder sign-off.

The final pass at every launch-scope page, plus the design system they're built from. Now built against the real VAC brand (lockup, palette, typography) so what you see is what we'll ship. Each page is responsive (desktop + mobile) and consumes the same tokens — so feedback maps one-for-one to implementation.

Pages in this round

Each card opens the desktop view. Resize the browser window to see the responsive mobile layout.

Desktop & mobile, same source

Responsive HTML/CSS — not separate desktop and mobile files. The same document is rendered at two widths below to show how the home page and the calculator result page adapt.

Home · desktop Open in new tab →
Home · mobile
Calculator result · desktop (HOT state) Open in new tab →
Result · mobile

What's new in round 2

  1. Real VAC brand. Logo lockup and logomark in place (top bar, hero, footer, style guide gallery). Palette corrected to the exact brand teal (#10746F); navy was already #1E3A8A.
  2. Brand gradient surfaced. The signature vertical teal-to-blue gradient now drives the valuation range fill and the midpoint number (background-clipped text). Used sparingly elsewhere — the range bar earns most of the gradient's presence.
  3. Typography committed. Spectral (Google Fonts, OFL) for headlines and editorial body — the open-source stand-in for Beaufort Pro. Inter for body and UI. Both self-hostable; no Adobe Fonts dependency.
  4. Mobile nav drawer. Working hamburger + drawer pattern, with a 44px tap target and accessibility attributes. Round 1 had styling but no markup.
  5. Footer rebuilt. Dark navy footer using the approved color-on-white lockup variant. Better white-label credibility than the light footer in round 1.
  6. Accent button variant. .btn--accent (teal) added for moments where teal is the right tone — "Subscribe" on Insights, secondary actions on the result cards.

Where feedback is most useful

  1. Tone & copy. Does the writing feel buyer-aligned and educational, or does anything tip into sales-y? Banned phrases ("instant valuation", "free consultation", urgency framing) should be absent — flag if you spot any.
  2. Brand integration. Does the VAC mark sit comfortably in the top bar? Does the gradient feel restrained or overused? The range bar is the one place it lives at scale.
  3. Typography pairing. Spectral headlines + Inter body. Anywhere it reads off?
  4. Calculator centrality on home. Is the calculator clearly the center of gravity, or does the page read as a brochure?
  5. Routing surfaces. Toggle through the five result-state CTAs. Do borderline and non-ICP users feel respected without being pushed?
  6. Range component. Does the low / midpoint / high readout feel honest? Single-number readouts should appear nowhere; please flag if any do.
  7. Mobile layout. Resize the browser narrow, or open on a phone. Anything that breaks the visual hierarchy or feels cramped?