Quantive Brand Guidelines
A comprehensive design system for building consistent, beautiful interfaces that embody the Quantive brand.
Brand Introduction
Quantive is a veteran-owned M&A advisory firm specializing in founder-led companies. Since 2011, we've helped hundreds of business owners maximize value through our integrated approach to valuation, performance improvement, and transaction execution.
To transform mid-market companies through expert valuation, strategic performance improvement, and flawless transaction execution—creating exceptional outcomes for founders and their teams.
We don't get better by copying successful peers. We identify what they do wrong and do those things greatly—building unique offerings that solve persistent client pain points.
85%+ closing rate compared to the 20-30% industry average. Our integrated approach consistently achieves 1-2x higher multiples than market norms.
Bold, confident, and results-driven. We communicate with clarity and purpose, avoiding jargon while demonstrating deep expertise. Professional yet approachable.
“We turn good companies into rockstar companies and baller exits.”— Quantive Brand Promise
Logo System
The Quantive logo combines a distinctive 'Q' mark with clean typography. The circular red mark represents unity, completeness, and the transformative cycle of value creation.
Logo Variants
Primary — Dark Background
Primary — Light Background
On Brand Color
Mark Only
Logo Specifications
The Q mark maintains a perfect 1:1 aspect ratio at all sizes.
The full logo should never appear smaller than 40px in height.
Maintain clear space equal to the height of the Q mark on all sides.
Usage Guidelines
Use the logo at proper scale with adequate clear space on dark backgrounds.
Never stretch, skew, or distort the logo. Always maintain original proportions.
Never change the logo colors. Use only approved color variations.
Avoid placing the logo on busy backgrounds or with insufficient contrast.
Color System
Our expanded color system supports brand consistency across all applications—from digital interfaces to printed reports and data visualizations.
Functional colors communicate meaning and state. Each semantic color includes light and dark variants for flexibility across backgrounds.
A carefully balanced palette for charts, graphs, and financial reporting. Colors are optimized for distinguishability and accessibility.
Chart Examples
Positive variance uses Success Green (#22C55E)
Negative variance uses Error Red (#EF4444)
Typography
Inter is our primary typeface, with IBM Plex Mono for code and financial data.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Inter — Primary Font
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Black 900
IBM Plex Mono — Monospace Font
Regular 400
Medium 500
Semibold 600
Bold 700
Financial Numbers
$1,234,567.89
+12.5%
-8.3%
Use the red left border accent to increase visual hierarchy and draw attention to key headings and CTAs. This treatment creates strong visual separation while reinforcing brand identity.
Premium Exits
Our Services
M&A Advisory
Premium Exits
Our Services
M&A Advisory
border-l-4 for H1 headingsborder-l-[3px] for H2 headingsborder-l-2 for H3, links, CTAspl-4 (16px) for H1, H2pl-3 (12px) for H3, links1.5–1.751.1–1.31.4–1.6Larger text needs proportionally less leading. Dark backgrounds benefit from slightly more.
45–75 chars66 chars~680pxToo wide and eyes lose track. Too narrow creates choppy reading rhythm.
-0.01emnormal+0.1emTighten large headings. Always loosen uppercase text for readability.
0.75–1em0.5em1.5–2emUse margins, not double line breaks. More space before headings than after.
leading-tight 1.25leading-snug 1.375leading-normal 1.5leading-relaxed 1.625tracking-tighter -0.05emtracking-tight -0.025emtracking-normal 0tracking-wide 0.025emfont-normal 400font-medium 500font-semibold 600font-bold 700max-w-prose 65chmax-w-xl 576pxmax-w-2xl 672pxmax-w-3xl 768pxBuilding Value Through Strategic M&A
The decision to sell your business is one of the most significant choices you'll make as a founder. After years of building something from nothing, the prospect of handing over the reins can feel overwhelming. That's why choosing the right advisory partner matters.
Our integrated approach combines deep valuation expertise with hands-on transaction execution. We don't just find buyers—we find the right buyers who understand your vision and will carry your legacy forward.
leading-relaxed (1.625) for comfortable readingmax-w-prose (65ch) constrains line lengthtracking-tight on heading for polishmt-4Building Value Through Strategic M&A
The decision to sell your business is one of the most significant choices you'll make as a founder. After years of building something from nothing, the prospect of handing over the reins can feel overwhelming. That's why choosing the right advisory partner matters. Our integrated approach combines deep valuation expertise with hands-on transaction execution. We don't just find buyers—we find the right buyers who understand your vision and will carry your legacy forward.
leading-none (1.0) cramped and hard to readleading-tight1.25Quality of earnings analysis reveals the true health of a business. We examine revenue sustainability, customer concentration, and margin trends.
leading-normal1.5Quality of earnings analysis reveals the true health of a business. We examine revenue sustainability, customer concentration, and margin trends.
leading-relaxed1.625Quality of earnings analysis reveals the true health of a business. We examine revenue sustainability, customer concentration, and margin trends.
Premium Exits
Premium Exits
tracking-tight recommendedtracking-normaltracking-widest recommendedtracking-normalLists
Consistent list styling creates visual hierarchy and improves content scanability. Our list system includes standard bullets, numbered lists, and special-purpose variants.
Typography-driven bullet lists with red accent markers. Font weight and color change by nesting level to create clear hierarchy.
- First level item with red bullet
- Another first level item
- Second level uses gray bullet
- Lighter font weight for hierarchy
- Third level is smaller text
- Muted color for deep nesting
- Back to first level
<ul class="list-standard"><BrandList variant="standard">Circled numbers for top-level items, with parenthesized letters and roman numerals for nested levels. Ideal for sequential content, procedures, and ranked items.
- First step with circled number
- Second step in the process
- Sub-step with letter format
- Another sub-step
- Detailed point with roman numeral
- Another detailed point
- Final step
<ol class="list-numbered"><BrandList variant="numbered">For benefits, features, takeaways, and validation messaging. Available in positive (green checkmarks) and negative (red X) variants.
.list-checkmark positive.list-checkmark-negative negative<CheckListItem variant="positive"><CheckListItem variant="negative">For feature lists, service descriptions, and content where each item has a distinct meaning. Icons are configurable per item and default to the primary red color.
<ul class="list-icon"><IconListItem icon={TrendingUp}>- General content lists
- Article body content
- Documentation
- Nested information
- Step-by-step processes
- Ranked items
- Sequential procedures
- Instructions
- Benefits & features
- What you'll learn
- Included items
- Dos and don'ts
- Service descriptions
- Feature highlights
- Mixed content types
- Marketing pages
Financial Tables
Financial documents require precise number alignment and clear hierarchy. IBM Plex Mono provides excellent tabular number support.
Font Comparison
Sample P&L Statement
Fiscal Year 2024
| Description | Q1 | Q2 | Q3 | Q4 | Total |
|---|---|---|---|---|---|
| Revenue | 2,850,000 | 3,125,000 | 3,250,000 | 3,225,000 | 12,450,000 |
| M&A Advisory Fees | 1,710,000 | 1,875,000 | 1,950,000 | 1,935,000 | 7,470,000 |
| Valuation Services | 712,500 | 781,250 | 812,500 | 806,250 | 3,112,500 |
| Cost of Goods Sold | (1,140,000) | (1,250,000) | (1,300,000) | (1,290,000) | (4,980,000) |
| Gross Profit | 1,710,000 | 1,875,000 | 1,950,000 | 1,935,000 | 7,470,000 |
| Operating Expenses | (855,000) | (937,500) | (975,000) | (967,500) | (3,735,000) |
| EBITDA | 855,000 | 937,500 | 975,000 | 967,500 | 3,735,000 |
Formatting Rules
Use parentheses and red for negative values. Never use minus signs.
Dollar sign prefix, comma separators. No decimals unless showing cents.
One decimal place, explicit +/- prefix. Green positive, red negative.
Right-align numbers. Use tabular figures for vertical alignment.
Monospace Font Stack
font-family: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Consolas', monospace;Charts & Data Visualization
Consistent, branded charts for presenting data. Built on Recharts with shadcn/ui theming.
Combo Charts
Combine bars, lines, and scatter points to show multiple data series with dual Y-axes. Ideal for financial metrics, deal activity, and performance tracking.
PE deal activity by quarter
Source: PitchBook • Geography: US • As of June 30, 2025
Area Charts
Stacked area charts with gradient fills are ideal for showing cumulative values over time. The gradient effect adds visual depth while maintaining readability.
Chart Color Palette
Use these colors consistently across all charts. The palette is designed for accessibility and visual distinction.
Use green for gains/positive values and red for losses/negative values.
• Use Chart 2 (Steel Blue) as the primary data color
• Use Chart 4 (Cyan) for secondary series and lines
• Use Chart 5 (Amber) for highlights and estimates
• Reserve Chart 1 (Red) for brand accents only
Spacing & Layout
Consistent spacing creates visual rhythm and hierarchy. Our spacing scale is based on an 8-point grid system.
Spacing Scale
After small text
After H3, body text
After H1 headlines
Section separators
8-Point Grid
All elements snap to an 8px grid. Heights, widths, margins, and padding should be multiples of 8.
Layout Guidelines
- • Standard document: 1" all sides
- • Presentations: 0.5" all sides
- • Business cards: 0.125" bleed
- • Letterhead: 0.75" top, 1" sides
- • 12-column grid for layouts
- • 24px column gutters
- • Align elements to baseline grid
- • Generous white space preferred
Components
Pre-built UI components styled with our brand design tokens.
Buttons
Interactive States (Primary Button)
Badges
Cards
Cards are used to group related content and actions.
+15.3% from last month