Internal
Style library
Quick visual reference for BlinkMetrics components and brand colors. Use this page to pick a treatment or check how things currently look.
Color palette
- Navy 900
#022E3F - Navy 700
#0B526D - Maroon
#400307 - Red (primary)
#BE202B - Maroon deep
#7F060D - Orange
#D56427 - Gold accent
#F9A719 - Soft gold
#FFCD77 - Cream
#FFEBC8 - Soft teal
#E4F9F9 - Surface
#FAFCFC - Text near-black
#011016
Typography
Every heading below renders straight from src/styles/global.css.
No per-page overrides. Components opt into the display tier via the
.display-heading class, or implicitly via wrapper selectors:
.page-hero h1, .split-hero h1,
.cta-band h2, .hc-archive-header h1.
Display · 40 / 46 / 64 px · line-height 1.05
How can we help?
H1 · 34 / 38 / 42 px · line-height 1.15
Page title
H2 · 24 / 26 / 34 px · line-height 1.2
Section heading
H3 · 22 / 22 / 26 px · line-height 1.25
Subsection heading
H4 · 20 / 20 / 22 px · line-height 1.25
Card title / prose sub-sub-heading
H5 · 18 px · line-height 1.3
Minor heading
H6 · 16 px · line-height 1.3
Smallest heading
Body · Figtree 18 px
Short body copy sample. Figtree is the default workhorse face for paragraphs, navigation, and UI labels.
Kicker · Figtree 13 px uppercase
Help center
Hero — centered text, with scattered shape pattern
Default Hero treatment. Use shapes={false} (shown
below) when a page has its own imagery or dense content that would
compete with the pattern.
<Hero variant="navy" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="navy-bright" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="maroon" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="maroon-bright" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="yellow" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="yellow-bright" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="surface" />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
Hero — centered text, solid color only
<Hero variant="navy" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="navy-bright" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="maroon" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="maroon-bright" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="yellow" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="yellow-bright" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
<Hero variant="surface" shapes={false} />
Example kicker
How can we help?
A short tagline sits here and wraps naturally.
SplitHero — text left, media right
Used for integration landing pages and anywhere a product screenshot
or screenshot-like media sits alongside the headline. Light variants
(cream, white) work for content-first pages;
color variants carry more marketing weight.
<SplitHero variant="navy" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="navy-bright" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="maroon" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="maroon-bright" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="yellow" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="yellow-bright" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="cream" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
<SplitHero variant="white" />
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
Plain — no hero treatment (content-only)
For full-HTML snapshot pages and anywhere the content should start immediately with no visual preamble. Just a page title, body copy, and a CTA on the default surface color.
no component — plain prose
Integration
Custom HubSpot reporting, done for you in 30 days
We blend your HubSpot data with the rest of your stack so you can track the metrics you actually run the business on.
book a discovery callButtons
CTA band
Still stuck?
We'd rather dig in than leave you stuck
If the guides don't cover what you need, send us a note. We answer questions about setup, usage, and anything BlinkMetrics-related.
talk to our teamCards
Pricing box
Rendered by IntegrationPricingCard. Used on all integration pages — rich pages pass
integration-specific bullets; stubs use the generic copy shown here.
$5,000
Custom reporting built for your business
- Done for you — dedicated data analyst, 4 private workshops over Zoom
- 1 custom reporting dashboard
- Blend your data across 100+ supported apps
- Live dashboard in 30 days, guaranteed