Stakeholder mockup · directional design · back to mockup index
Valuation Platform — style guide

Color

Conservative neutral surface scale, single restrained primary, and a quiet accent reserved for the valuation range bar. No semantic colors in CTAs — credibility is the brand.

Surface & text

Background--color-bg / #ffffff
Surface subtle--color-bg-subtle
Surface muted--color-bg-muted
Text--color-text / #0f172a
Text muted--color-text-muted
Text subtle--color-text-subtle

Brand

Primary#1e3a8a — deep navy
Primary softtinted bg / chips
Accent#0f766e — used only on the range bar

Typography

Inter for UI; Source Serif Pro for editorial copy in Insights. Headings use a 1.2 modular scale; numbers use tabular figures so valuation readouts don't wobble between digits.

--fs-60 / h1 heroA grounded valuation
--fs-36 / h2How buyers think
--fs-30 / h3Valuation range
--fs-24 / h4Section heading
--fs-18 / leadLead body — used at the top of pages and in section intros to set context.
--fs-16 / bodyBody — long-form prose, form labels, primary copy. Set at 1.55 line-height for readable density.
--fs-14 / denseDense UI — helper text, captions, secondary info.
--fs-12 / metaMeta — eyebrow labels, legal, disclaimers, timestamps.

Editorial (Insights)

A buyer's offer is rarely a single number. It is a range, anchored on adjusted EBITDA and tempered by the realities of your market and the quality of your earnings.


Spacing

4px base, T-shirt sized scale. Use spacing tokens, not raw px, everywhere. Section vertical rhythm is --sp-9 on desktop, --sp-7 on mobile.

--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
24px
--sp-6
32px
--sp-7
48px
--sp-8
64px
--sp-9
96px

Buttons

Three variants. Tone is professional and unhurried — labels like "See valuation range" and "Request a confidential discussion" rather than "Get your valuation now".


Forms & inputs

Generous tap targets (min 44–48px). Currency inputs lead with a $ glyph. Labels above the field, helper text below.

Industry (chip group variant)

Valuation range bar

Signature component. Always shows range + midpoint together — never a single number. The midpoint dot is anchored visually but the low/high values carry equal hierarchy in the readout.

Low $4.6M
Midpoint $5.7M
High $6.8M
$0 $10M+

This estimate is directional. It is not a formal appraisal, does not create an advisory relationship, and should not be relied on for transaction pricing.


Cards, badges, callouts

Methodology

EBITDA-first model

Buyers normalize earnings before applying a multiple. We follow the same logic so the estimate maps to how an offer is built.

Reference

Why a range

A real offer is rarely a single number. We mirror that.

Confidential discussion — a 30-minute conversation about your range, what would move it, and timing. Educational, no obligation.
Heads up: the calculator is a starting point. Detailed quality-of-earnings work is what tightens the range during a transaction.

Step indicator & tabs

  1. 1Industry & revenue
  2. 2Earnings
  3. 3About you
  4. 4See range

Tabs use a thin underline accent in the primary color, not a fill. They sit on a 1px divider that runs the full width of the section.