The KPIcons brand system — the logo, the palette, the type, and the voice we use on every executive-facing surface we ship. Editorial, considered, confident. Written so a CRO reads it the way they read a Financial Times feature, not a SaaS microsite.
KPIcons shows up as editorial, not promotional. Warm cream paper, deep-ink type, a single gold accent, a variable serif for display, a geometric sans for body. Every page reads like a considered longform — never a microsite.
C-level buyers read the marketing site once, for 3–7 minutes, and we want it to feel like serious journalism — not another SaaS site. The visual grammar is intentional: spacious grids, hairline rules, Fraunces display type, and a restrained palette so the argument is what the reader remembers.
#EFF3F8#0A1628#009CDE — kickers, italic emphasis, active navOne KPIcons logo. Always. It has two color files — light and dark — so it stays legible on any background. Never stretch, rotate, add a drop shadow, place over a busy photo, or combine with a text wordmark. The logo is the wordmark.
logo-light.svg — same mark, inverted for contrast. Never recolor the logo by hand.!important in CSS so nothing silently shrinks.Four core colors, four status colors. Paper and ink carry the page; gold is the single editorial accent that appears on kickers, italic emphasis, and the active-nav underline. Nothing else competes for the eye.
Three typefaces. Fraunces for editorial display — variable optical-size serif, always italicized for punch words. Geist for all body copy — a geometric sans that holds up at 15px and scales to 56px. Geist Mono for numbers, labels, and anything that needs tabular figures.
One monoline SVG family, drawn on a 24×24 grid with a 2px stroke, round caps, and round joins. Our version of a system like Lucide — simple, legible at small sizes, consistent whether you see it in a sidebar or a printed deck. No emoji anywhere in product UI.
Thirty of the most-used icons from the library. The sprite lives in kpicons-icons.js; reference any glyph inline via <svg><use href="#ic-name"/></svg>.
Six calibrated steps. Stay inside these — never set a custom icon size without a reason that points back to one of these contexts.
currentColor. Set the parent's color — never hardcode fill or stroke on an icon.One voice, written as if Marco, Jake, or Darren is talking to a peer across a table. Specific, unhedged, operator-aware, a little funny. Three modes depending on context:
Short sentences. No hedging. Use when naming the problem, the diagnosis, the fix.
Longer sentences, italics for emphasis, technical precision. Use in blog posts, docs, pitch decks.
Declarative. Italic accent on the punch word. Use in CTAs, headlines, pullquotes.
Examples of things that would violate the guidelines, and what to do instead.
In the masthead, the logo is 200px tall and locked with !important. That's intentional — the logo is the wordmark, so it earns the real estate.
The logo already says KPIcons. A text wordmark next to the mark is redundant and visually noisy. One or the other — never both.
Gold (#009CDE) is the single editorial accent. Kickers, section labels, italic punch-words, and the active nav underline — that's all it's for.
No cyan, no SaaS purple, no "brand blue." One accent on a cream page is what makes the editorial rhythm read. Adding a second turns the page into a dashboard.
Fraunces (variable optical-size serif) is the reason the site reads as editorial. Use it for H1s, H2s, pullquotes. Italicize the one word that carries the thought: "One loop. Every motion."
Italic-gold is the house emphasis pattern. Bold runs read as marketing shouting — they break the editorial register. Use <b> sparingly, and only for a proper noun or a number the reader must not miss.
"$12,000 on the line. 72% close rate. 12 points to quota." Specifics earn trust. Use Geist Mono for every number so figures align and feel engineered.
No "AI-powered", no "seamless", no "game-changer", no "synergy." Any phrase that could appear on 500 other SaaS sites is a phrase we strike. If you can't say it better, say less.
Assets for press, partners, and marketing collaborators. Email brand@kpicons.com for any use outside the guidelines above.