Round 2 (final) · Stakeholder review · back to mockup index
Value A Company — style guide
Design system · round 2

Style guide

A reference for tokens, brand assets, typography, and components used across the Value A Company site. Every page in this mockup set consumes these values directly — change a token, change the site.

Brand assets

Five logo variants ship from Brian. The lockup is the primary mark; the logomark is used in tight spaces (top bar, favicon, social avatars). All files are stored in assets/logos/ as SVG.

Value A Company lockup, color
Lockup · color on light backgrounds — primary brand mark
Value A Company lockup, color with white wordmark
Lockup · color on dark color mark, white wordmark — for dark backgrounds
Value A Company lockup, all white
Lockup · all white single-color reverse — only on approved dark backgrounds
Value A Company logomark, color
Logomark · color standalone "VAC" mark — tight spaces, favicon source
Value A Company logomark, white
Logomark · white standalone reverse mark — dark backgrounds
Asset gaps still open with Brian: no black-only single-color variant, no horizontal lockup, no favicon-optimized mark, and no formal brand guidelines doc. The header logo in these mockups is a hand-paired "logomark + wordmark in Spectral" composition that stands in for a horizontal lockup until one is delivered.

Color

Conservative neutral surface scale, two-color brand palette (VAC blue + VAC teal), and a quiet brand gradient used only on the signature range component and a couple of accent moments. No semantic colors in CTAs — credibility is the brand.

Brand

VAC blue (primary)--color-primary#1E3A8A
Blue soft--color-primary-softtinted bg, chips
VAC teal (accent)--color-accent#10746F
Teal soft--color-accent-softtinted bg, chips

Brand gradient

--gradient-brand  ·  linear-gradient(180deg, #10746F 0%, #10746F 55%, #1E3A8A 100%)
Direct extraction from the logo SVG. Used on the valuation range fill (its signature surface), plus the mockup banner and hero bullet dots. Avoid deploying as a large surface background — the logo is the place the gradient earns its presence.

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

Typography

Two typefaces, both from Google Fonts (OFL-licensed, self-hostable).

Serif

Spectral

Headlines, brand moments, editorial body, and the valuation midpoint number. Chosen as the open-source stand-in for Beaufort Pro (the wordmark typeface in the logo).

Sans

Inter

Body copy, UI, form fields, buttons, navigation, footer. Sized at 1rem (16px) base with 1.55 line height for prose density.

Display & heading scale (Spectral)

--fs-60 / h1 heroA grounded valuation
--fs-36 / h2How buyers think about value
--fs-30 / h3Valuation range
--fs-24 / h4Section heading

Body & UI scale (Inter)

--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 body (Insights articles)

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

Four variants. Tone is professional and unhurried — labels like "See valuation range" and "Request a confidential discussion" rather than "Get your valuation now". Minimum 44px tap target on every variant.

Forms & inputs

Generous tap targets (min 44–48px). Currency inputs lead with a $ glyph. Labels above the field, helper text below. Focus rings use the primary navy at 3px offset.

Industry (chip group variant)

Valuation range bar

Signature component. Always shows range + midpoint together — never a single number. The fill uses the VAC brand gradient and the midpoint number is rendered in the same gradient via background-clip. 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.

Featured

Industry multiples

Each industry has a typical range. Your scale, growth, and earnings quality move you within it.

Brand moment

Range, not a number

A real offer is rarely a single number. We mirror that. This card uses a soft teal tint — used sparingly.

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.
Neutral callout — used for asides and footnotes that don't need brand attention.

Step indicator & tabs

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

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