Powered by TVG Tech · Internal reference
Brand & Design System
A living style guide for the redesign identity — the audit-ledger palette,
the editorial type scale, and the signature component tokens. Every value
below is the live token from src/styles/global.css.
This page is noindex and excluded from the sitemap.
01 · Logo
Wordmark lockups
Pure type lockup — no icon file. "The" in Source Serif 400, "VOIP" in 700, "Guru" in 600, all Navy 900. Endorsement line in Archivo 600, uppercase, with 0.18–0.3em tracking. Clear space ≥ the cap-height of the "G" on all sides.
02 · Color
10 swatches · with AA notes
- Navy 900 #0A2540
--navy-900
Primary. Headlines, dark sections, logo.
AA on paper & white
- Navy 800 #0E2E4D
--navy-800
Raised panels on navy sections.
Surface — pairs with white text
- Blue 600 #1F5FC4
--blue-600
Primary CTA fill (white text), links, eyebrows, paper-side accents.
White on blue 5.4:1 — AA
- Blue 700 #174A9E
--blue-700
CTA hover / pressed state.
White on blue 7.6:1 — AA
- Steel 400 #7FA8E0
--steel-400
Signature accent on navy — underline, ticks, stamps, numerals.
Accent (non-text)
- Green 700 #0C6B45
--green-700
Savings figures, stamps & success only.
AA on white (5.3:1)
- Audit Red #B3423A
--audit-red
Auditor’s strike rule on “before” prices only.
Decorative rule
- Paper #F6F3EC
--paper
Page background. Warm, low chroma.
Ink 900 on paper ≈ 13:1
- Ink 900 #1F2730
--ink-900
Body text strong.
≈ 13:1 on paper
- Line #E6E0D4
--line
Borders, dividers, card edges.
Non-text divider
Accessibility: CTAs are Blue 600 (#1F5FC4) with white text — 5.4:1, AA at all sizes; hover Blue 700 is 7.6:1. The tonal-blue accent is non-text (Steel 400 on navy, Blue 600 on paper). Savings green (#0C6B45) on white passes AA at body sizes. Body text (#1F2730) on paper (#F6F3EC) ≈ 13:1. Never rely on color alone — savings always carry the word "saved / cut / recovered."
03 · Type
Specimens & scale
Source Serif 4 for display, headlines, and every big numeral (400 / 500 / 600 / 700,
+ italic as an editorial accent). Archivo for body, UI, labels, and buttons
(400 / 500 / 600 / 700 / 800 — 800 reserved for stamps + doc labels).
text-wrap:balance on headings,
pretty on paragraphs.
Display / H1
Source Serif 4 · 700 · clamp(38px,5.6vw,68px)
Find the system that fits.
Section / H2
Source Serif 4 · 700 · clamp(28px,3.6vw,44px)
Real clients. Real savings.
Hero numeral
Source Serif 4 · 700 · clamp(44px,8vw,86px) · tabular-nums
$671,000
Subhead / H3
Source Serif 4 · 600 · 22px
An advisor on your side.
Body large
Archivo · 400 · 19px
The vendor pays us, not you.
Body / UI
Archivo · 500 · 17px
Compare 50+ vendors in one place.
Small
Archivo · 400 · 15px
30 minutes. No pitch. No cost.
Eyebrow
Archivo · 600 · 13px · uppercase · 0.12em
What we compare
Doc label
Archivo · 800 · 11px · uppercase · 0.22em
Savings audit
Stamp
Archivo · 800 · 12–13px · uppercase · 0.14em
75% recovered
04 · Components
Buttons · forms · stamps · strikes
Buttons · Blue 600 action color
Form fields · label + input + focus ring
Tab into a field to see the Blue 600 focus ring (--focus-ring);
tap targets are ≥44px.
Stamp · green / mint on navy / steel
StrikePrice · auditor's strike (Audit Red)
OutlinedNumeral · blue on paper / steel on navy
DottedLeader · row + highlight
Every month on the wrong plan is money you never get back.
The money walks out the door quietly, month after month — and nobody on the sales call is on your side.
05 · Tokens
Copy-ready :root block
The live custom-property block from src/styles/global.css.
Every value on this page resolves to one of these. Blue 600 is the sole
action color — amber / #F5B800 is fully retired.
:root {
/* surfaces */
--paper:#F6F3EC; --surface:#FFFFFF; --surface-2:#FBF9F4;
--navy-900:#0A2540; --navy-800:#0E2E4D; --navy-700:#102C4A; --navy-footer:#071C30;
--navy-grad:linear-gradient(180deg,#0B2946,#081E36);
/* text (on paper) */
--ink-900:#1F2730; --ink-700:#46505B; --ink-500:#5B6470; --ink-400:#6B6452;
/* text tones on navy */
--on-navy-body:#A9BCCF; --on-navy-label:#9FB3C8; --on-navy-fine:#7E93A8;
/* lines */
--line:#E6E0D4; --line-2:#ECE6DA;
/* action (CTA) — Blue 600 (amber retired, RD-D-01) */
--blue-600:#1F5FC4; --blue-700:#174A9E; --blue-50:#E8F0FB; --line-blue:#CFE0F6;
/* signature accent — tonal blue */
--steel-400:#7FA8E0;
/* savings (only) */
--green-700:#0C6B45; --mint-300:#9FE0BF; --green-50:#E8F3EC; --line-green:#C4E3D1;
/* audit devices */
--audit-red:#B3423A; --cert-bg:#FBF7EC; --cert-line:#E4D9BC; --error:#C0392B;
/* type */
--font-display:'Source Serif 4','Source Serif 4 Fallback',Georgia,serif;
--font-ui:'Archivo','Archivo Fallback',system-ui,sans-serif;
--h1:clamp(38px,5.6vw,68px); --h2:clamp(28px,3.6vw,44px); --h3:22px;
--body-lg:19px; --body:17px; --small:15px;
--num-hero:clamp(44px,8vw,86px);
/* radius / shadow */
--r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px; --r-pill:999px;
--shadow-sm:0 1px 2px rgba(10,37,64,.06);
--shadow-md:0 4px 16px rgba(10,37,64,.08);
--shadow-lg:0 24px 60px rgba(10,37,64,.10);
/* a11y */
--focus-ring:0 0 0 3px rgba(31,95,196,.14); --tap-min:44px;
}