Who we are, why we exist, and what we stand for. These are pulled directly from the official BFT brand guidelines and reinforced by the live website.
To create life-long client partners, employees, and relationships. From day one, we've stayed true to this by focusing our mission on serving B2B clients and continuously evolving our skills and toolsets.
Provide strategic B2B digital marketing solutions for financial services and manufacturing businesses. Custom-tailored to each client's unique challenges and goals.
A future of sustained growth, evolution, and autonomy leading to a position of Midwest Dominance. We expand our client base and staff in spaces we own and control.
We get sh!# done. That confidence lets us promise clients we'll elevate their brands, identify sales opportunities, and nurture customer relationships with the speed and precision their businesses depend on.
Three traits that show up in everything we say and make.
Our sleeves stay rolled up and we don't quit until we get it right. Problem solvers with the drive and curiosity to learn how to do it better and deliver only the best.
We know our clients, their markets, their products, and how to use the right tools to help them achieve their objectives. We never stop learning how to do better strategic planning, content, design, development, and media.
We love what we do because we want to make the world better. Asking "what if" and practicing unconventional thinking come with the job description. We maintain a positive, can-do attitude because it produces results and puts fun in every day.
Blue is the hottest, most useful, and most efficient part of a flame, the locale of its greatest energy.
The energy we direct at solving client problems, working through details, and leveraging the strengths of our team.
The intellectual capital, imaginings, and insights that fuel our best creative work. We're not mechanics. We don't work from menus.
BFT vs. Blue Flame Thinking: "Blue Flame Thinking" is our official public-facing name. Internally and in informal communication (especially social), we use "BFT." Many clients also call us BFT. Always spell it out on first reference; BFT is fine after that.
Four values guide hiring, client decisions, and how we handle hard problems. They take the place of manuals and rules.
Average thinking, average effort, and average work don't differentiate us or our clients from the ordinary. The motto is deliberately personal: it's not "Find Our Better." Find Your Better means each of us has a responsibility to challenge assumptions, expand our knowledge, look at things from different angles, explore alternative sequences of logic, fearlessly experiment, and question how things could be different.
Finding our better is something we strive for every day. What could you do better? And how will you go about it?
Find Your Better®
Our voice is how we sound. Our tone is how we adjust that voice for different contexts.
BFT's voice is Confident. Knowledgeable. Friendly. Candid. It carries a strong note of expertly-guided, attentive listening enabled by deep knowledge across hundreds of industries.
We've done this work since 1965. We don't hedge our recommendations.
We bring deep audience and category expertise to every word.
Approachable and human. Contractions are welcome. Stiffness is not.
We say the hard thing when it's the right thing. Polite, never pandering.
Our tone is always Informative. Succinct. Engaging. Authoritative in a quiet, generous way. We don't impose our perspective; we offer it constructively. We respect the intelligence of our audience.
Plain language wins. If a sentence needs a glossary, rewrite it. Jargon is a sign the strategy isn't done yet.
Ask a real question. Show interest in the reader's problem. Lead with insight, not pitch.
Contractions are fine. So are short sentences. Even fragments. We're a partner, not a press release.
"560+ clients since 1965" beats "decades of experience." Use real numbers, real names, real stakes.
| Context | Tone Dial | Example Opener |
|---|---|---|
| Homepage / Hero | Bold, declarative | "We are Blue Flame Thinking." |
| Service pages | Confident, expert | "Beyond our deep audience expertise..." |
| Blog & Insights | Conversational, curious | "Ever land on a B2B website and think... Huh?" |
| CTAs | Friendly, low-friction | "Ask us!" / "Let's chat" / "Watch us grow up" |
| About / Culture | Warm, human | "Working at BFT is a whole vibe." |
| Proposals / Decks | Direct, partner-mode | "Here's what we'd do, and why." |
Use "we" and "our." BFT speaks as a team. "We dig deep." "Our process."
Avoid third-person agency-speak. "Blue Flame Thinking believes..." reads like a brochure.
Open with a question or stat. "560+ clients later, we still ask the same first question..."
Don't open with throat-clearing. "In today's rapidly evolving landscape..."
Offer perspective constructively. Authoritative in a quiet, generous way.
Don't impose or lecture. Trust the reader's intelligence.
Use bold and italics for emphasis. One or two beats per paragraph, max.
Don't use em dashes. Use commas, parentheses, or full stops instead.
Be specific. Name industries, name tools, name outcomes.
Don't use emojis. Not in social, not in subject lines, not anywhere.
These show up across the brand. Reinforce them. Don't rewrite them.
From the homepage: "We analyze, brainstorm, contemplate, deliberate, evaluate, ideate, strategize, conceptualize, innovate, collaborate, synthesize, and troubleshoot together." Pull from this list when describing process.
| Use | Instead of |
|---|---|
| partner / partnership / client-partner | vendor, supplier, account, customer |
| find / discover | uncover, unleash |
| better | best-in-class, world-class |
| data-driven | data-informed (use sparingly) |
| dig deep / research like crazy | conduct thorough analysis |
| chat / talk | schedule a call, sync |
| let's | shall we, would you like to |
| marketing problem or question | pain point, KPI gap |
| strategy / strategic | holistic, synergistic |
BFT CTAs are short, conversational, and inviting. They almost never use "Submit" or "Click here."
Mix long and short. The cadence reads like: longer setup. Then a punch. Sometimes one word.
Example: "It's built into our DNA and baked into our culture. We're a group of problem solvers, experts, strategists, and makers on a journey to help each other and our clients find their better."
BFT loves short bulleted lists. Three to five items. Each item starts with a verb or a noun phrase, not a full sentence. Example:
The mark, the pattern, and the lockup. Three of these are workhorses. One is reserved for hero moments.
These three are used most of the time. Choose based on the background.
Reserved for moments where the full agency name needs to be present in the lockup.
For most digital UI work, prefer the Mark — it scales better at small sizes.
The official mark uses #6c3fa6 (Royal Purple), not #583DA0. The website's UI primary (Vivid Purple #583DA0) is slightly deeper and was likely tuned for screen contrast. Both come from the official PDF primary palette. For the logo, always use the supplied SVG file — don't recolor it to match UI elements.
Distance between the mark and the text should be equal to the thickness of the logo lines.
Text should align with the top and bottom of the B shape in the mark.
Vivid Purple is the brand. Deep Purple is the foundation. Cyan is the spark. The full PDF palette below is the official library — pull from it for design work that needs more range.
These are the colors actually shipping on blueflamethinking.com. Use these as the backbone for any digital touchpoint.
The complete palette from the BFT Brand Guidelines. Use these for design work that needs range beyond the web hierarchy — illustrations, decks, print, environment graphics.
| Background | Heading | Body | Accent / CTA |
|---|---|---|---|
| White / Cool Gray | Deep Purple | Body Text | Vivid Purple |
| Vivid Purple | White | White (90%) | Vivid Cyan |
| Deep Purple | White | White (85%) | Vivid Cyan |
| Vivid Cyan | Deep Purple | Deep Purple | Vivid Purple |
Gradients are a powerful tool to draw attention. Use them judiciously for maximum effect.
Every four-color family is built around our two real backgrounds — White and Deep Purple, in that order of design intent, though Deep Purple ships more often. Within each family, the darkest shade is the text anchor for White; the lightest shade is the text anchor for Deep Purple. The two shades in between exist for illustration, fills, and decorative use — they're not vetted as text against either background, even on the occasions the math happens to work out.
| Family | Text on White | Text on Deep Purple | Decorative only |
|---|---|---|---|
| Blue | Deep Blue (5.9:1) | Vivid Cyan (9.3:1) | Bright Blue, Sky Blue |
| Purple | Vivid Purple (8.1:1) | Pink (6.1:1) | Royal Purple, Light Purple |
| Teal | Deep Teal (3.1:1)† | Mint (11.8:1) | Teal, Light Teal |
| Orange | Red Orange (3.9:1)† | Yellow (8.1:1) | Orange, Light Orange |
† Deep Teal and Red Orange only clear AA for large text on White (headlines, stat labels, 18.66px+ bold) — not body copy. For body text on White, reach for Deep Blue or Vivid Purple instead.
Pick any two colors from the library and see the real AA ratio, or click a cell in the matrix below. White and Deep Purple are pinned as one-click backgrounds since those are the two we actually ship on. Numbers are calculated live with the official WCAG 2.1 relative luminance formula — nothing here is eyeballed or goes stale when the palette changes.
See the list of every color in the Full Color Library. Click any cell to load it above.
One typeface across everything: Barlow. Its subtle rounded features make it feel confident and human at the same time. Versatile across print and web.
Arial
Use Arial only when Barlow is unavailable (legacy email clients, certain office docs).
| Weight | Use For | Notes |
|---|---|---|
| Regular 400 | Body copy, captions | Default. Stay here unless you need emphasis. |
| Semibold 600 | UI labels, eyebrows | For functional UI text. |
| Bold 700 | H3, buttons, links, emphasis | Most common heavy weight. |
| Extra Bold 800 | Optional headline weight | The brand book's recommendation. Use when 900 feels too heavy. |
| Black 900 | H1, H2, H4, stat labels | Current website default. Maximum visual impact. |
| Thin 100, Extra Light 200, Light 300 | Avoid | Use extremely rarely. They lose impact at small sizes. |
Barlow Black 900 · clamp(2rem, 3rem, 5rem) · line-height 100% · letter-spacing 0.5px
Barlow Black 900 · clamp(1.5rem, 2rem, 3rem) · line-height 120% · letter-spacing 0.5px
Barlow Bold 700 · clamp(1.5rem, 1.5rem, 1.75rem) · line-height 120%
Barlow Black 900 · clamp(1rem, 1.25rem, 1.25rem) · line-height 130% · letter-spacing 0.5px · color Deep Purple
Barlow Regular 400 · 18px · line-height 1.5
Barlow Regular 400 · 16px
Barlow Black 900 · clamp(2.5rem, 4rem, 5rem) · in Vivid Cyan or Vivid Purple
The visual language beyond logo and color: shapes, corners, and the brand pattern.
Rounded corners complement the logo and give elements a more gentle, human touch. Apply them consistently to cards, buttons, image frames, and surfaces.
Default radii: 4px (UI), 8px (cards), 16px (large surfaces).
The brand pattern is an abstract nod to fire. Use it very sparingly. When used, it should almost always be animated. Reserve it for moments where the logo or brand identity is the focal point — never as a busy background under copy.
When BFT illustrates, it's simple, focused, and high-contrast. Less is more.
Motion should feel like the brand: organic, continuous, and confident. Nothing bounces, nothing spins for attention.
The motion counterpart to the Pattern Mark (see Logo System) — same shapes, same gradient bands, now flowing. This is the one animated asset every client-facing team should have on hand.
A few small, continuous loops carry most of the personality. Each one is subtle and interesting on its own — never all fighting for attention at once.
The one place motion is allowed to be more noticeable. As a section enters the viewport, its elements slide in from a direction and fade in — this is the exception to "subtle," used deliberately to mark a new section of the page rather than to decorate an idle one.
Ambient motion (bob, marquee, the pattern texture) should be calm enough to ignore. Interactive motion (hover states) should feel responsive, not delayed. Scroll reveals are the only motion allowed to actually announce itself.
Avoid: bounce, elastic, or overshoot easing anywhere. It fights the brand's steady tone the same way a sharp corner would.
prefers-reduced-motion set — pause loops and skip decorative transitions for that preference.We're picky about swag. Every piece should hold up as something a person genuinely likes the look and feel of — good design and quality first, branding second. Never obnoxious, never tacky.
An 8-point base scale keeps spacing consistent across components. Use semantic tokens (--s-3, --s-5) instead of raw pixels.
| Token | Value | Use |
|---|---|---|
--s-1 | 4px | Hairline gaps, icon-to-text |
--s-2 | 8px | Tight stacks, label-to-input |
--s-3 | 16px | Default paragraph spacing |
--s-4 | 24px | Card padding, list separation |
--s-5 | 32px | Subsection breaks |
--s-6 | 48px | Section start padding (mobile) |
--s-7 | 64px | Section breaks (desktop) |
--s-8 | 96px | Hero / major chapter breaks |
| Token | Value | Use |
|---|---|---|
--radius-sm | 4px | Buttons, inputs, tags |
--radius-md | 8px | Cards, surfaces |
--radius-lg | 16px | Hero blocks, feature panels |
Max content width: 1180px. Center with auto margins. Side gutters: --s-5 (32px) on desktop, --s-3 (16px) on mobile.
Buttons are 4px radius, Barlow 700, 18px, 12px / 28px padding. Outline is the most common BFT pattern; filled is reserved for the page's primary action.
<!-- Filled (primary action only) -->
<a class="btn btn-primary" href="/contact">Contact Us</a>
<!-- Outline on light -->
<a class="btn btn-outline-purple" href="/work">See all work</a>
<!-- Outline on dark / purple bg -->
<a class="btn btn-outline-white" href="/about">Watch us grow up</a>
<!-- Cyan (accent / playful) -->
<a class="btn btn-cyan" href="/contact">Ask us!</a>
Big number in cyan, label in white. The single most distinctive BFT layout pattern.
<div class="stat">
<span class="num">560+</span>
<span class="label">Clients so far</span>
</div>
For service tiles, blog previews, and content blocks on white or cool-gray backgrounds.
For featured stats, value-prop blocks, and dark-section content.
For the most prominent statements and quote-style callouts.
Developer reference. Collapsed by default since it only applies when you're bootstrapping a new stylesheet.
Drop this :root block into any new HTML or stylesheet to inherit the BFT system.
:root {
/* In-practice brand colors (web hierarchy) */
--bft-vivid-purple: #583DA0;
--bft-deep-purple: #322057;
--bft-vivid-cyan: #2EE5FF;
--bft-pink: #E38CDF;
--bft-cool-gray: #F1F1F6;
--bft-cool-dark: #423D4B;
--bft-text: #212121;
--bft-white: #FFFFFF;
--bft-black: #000000;
/* Full library — primaries */
--bft-deep-blue: #0067B2;
--bft-bright-blue: #0595E2;
--bft-sky-blue: #00BDEF;
--bft-royal-purple: #6C3FA6;
--bft-light-purple: #9452B5;
/* Full library — secondaries */
--bft-deep-teal: #19A49C;
--bft-teal: #31BCB4;
--bft-light-teal: #48D3CB;
--bft-mint: #7BFFF6;
--bft-red-orange: #E74C21;
--bft-orange: #F47F3B;
--bft-light-orange: #F6A24B;
--bft-yellow: #FCB732;
--bft-tan: #E2BBAA;
--bft-light-tan: #F1D8CD;
--bft-cream: #F7E6DF;
--bft-eggplant: #483766;
--bft-light-eggplant: #604B74;
--bft-light-gray: #E3E2E9;
--bft-mid-gray: #9894A3;
--bft-dark-gray: #797482;
/* Semantic roles */
--color-bg: var(--bft-white);
--color-surface: var(--bft-cool-gray);
--color-text: var(--bft-text);
--color-heading: var(--bft-deep-purple);
--color-primary: var(--bft-vivid-purple);
--color-accent: var(--bft-vivid-cyan);
--color-on-primary: var(--bft-white);
/* Type */
--font-sans: "Barlow", Arial, -apple-system, BlinkMacSystemFont,
"Segoe UI", Helvetica, sans-serif;
--fs-h1: clamp(2rem, 3rem, 5rem);
--fs-h2: clamp(1.5rem, 2rem, 3rem);
--fs-h3: clamp(1.5rem, 1.5rem, 1.75rem);
--fs-h4: clamp(1rem, 1.25rem, 1.25rem);
--fs-body: 1.125rem;
--fs-small: 1rem;
--fs-stat: clamp(2.5rem, 4rem, 5rem);
/* Spacing */
--s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px;
--s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;
/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
}
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
}
h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: 0.5px;
line-height: 100%; color: var(--color-heading); }
h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: 0.5px;
line-height: 120%; color: var(--color-heading); }
h3 { font-size: var(--fs-h3); font-weight: 700;
line-height: 120%; color: var(--color-heading); }
h4 { font-size: var(--fs-h4); font-weight: 900; letter-spacing: 0.5px;
line-height: 130%; color: var(--bft-deep-purple); }
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800;900&display=swap" rel="stylesheet">
Grab-and-go logo files. For full usage guidance, construction rules, and when to use which variant, see Logo System.
These SVGs are pulled directly from this page's own markup, so they're always in sync with what's documented above. For press-ready EPS files, high-res exports, or the official brand PDF, pull from the source asset library.