Our mission
Refueling the lives of people on the go.
We're more than a convenience store. This is the working reference for how Refuel looks, sounds, and behaves — everywhere from a pump topper to a rewards app screen. It replaces the static PDF: when the brand moves, this page moves with it.
Convenience
Fast, easy, and right where you need us.
Quality
New standards for what a stop should feel like.
Family
Everyone is welcome. We're all a family here.
Growth
More communities, same great experience.
01 — Logo
The mark, and how to protect it
The capsule is the brand. Use it consistently across every channel — and when in doubt, give it more room, not less.
Primary logo
Clearance space = the height of the “u” on all four sides. The dashed field shows the minimum breathing room.
Minimum size
Shown here at true minimum
96px wide on screen · 25.4mm (1in) wide in print
Never smaller. Below this the steam swoosh and outline collapse. Same floor applies to the Double Quick mark.
Approved variations
✓ Always
- Use the supplied artwork at original proportions.
- Use the white-outline version when placing on brand color.
- Keep full clearance space around the capsule.
- Send single-color adaptations to Marketing before production.
✕ Never
- Stretch, squash, or re-proportion the mark.
- Recolor the logo or swap its font.
- Crop to a partial or incomplete lockup.
- Place green logos on orange — or orange on green.
02 — Color
Five colors, used at full strength
The palette is deliberately tight so Refuel is recognizable at 60 mph. No tints, no shades — only the exact mixes below. Click a chip to copy.
Tip: the CSS variable name is printed under each chip.
Color pairing rule
Never layer green over orange, or orange over green.
When those two must meet, go to black or white for the mark, type, or icon sitting on top.
Working neutrals (digital only)
Warm greys derived from Roadway Black for screen UI — borders, secondary text, disabled states. They are not print brand colors and never replace Snowbank in layout.
03 — Typography
Montserrat does all the work
One family, a clear hierarchy, and weight doing the heavy lifting. Headlines are sentence case (sometimes with a bold highlight word) or uppercase bold for impact.
Character set
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! @ # $ % ^ & * ( )
Locked display faces
Heisei Maru Gothic — the Refuel logo face. Lives inside the logo art only.
Neue Aachen Pro — Double Quick logo face (V 100% · H 83.468% · tracking −6).
Dirty Headline — Hot N' Crispy deli face, uppercase only.
Never set live copy in these three.
04 — Layout
Space, corners, shadow, motion
Generous and breathable. Everything sits on a 4px step, inside a 1200px container, left-aligned.
Spacing scale
Corners
6 · sm
12 · md
16 · card
Pill
The capsule from the logo is the shape motif: actions and tags go full pill, containers stay softly rounded.
Elevation & motion
Shadows are warm-tinted and low. The hard 4px “sticker” offset is the one playful exception — badges and stickers only.
Motion: 120–220ms ease-out. Hover lifts or darkens; press shrinks to 0.98. No bounce on functional UI.
05 — Components
The digital kit
Live components, not screenshots. Every mark below is the real thing — flip the surface switch to check each one on warm paper and on Roadway Black before you ship it.
Buttons — pill, bold label
One primary action per view. Labels are 1–3 words, sentence case, always bold. On Roadway Black the dark variant disappears — use primary, secondary, or a white outline instead.
Tags & badges
Tags label; badges count. Never use a tag as a button. Tonal tags have no dark-surface variant — on Roadway Black, place them on a white card (as shown) or switch to a solid fill.
Inputs
Focus ring is Fresh Pour Orange. Labels sit above, never as placeholder-only. Inputs are light-surface only — on a dark field, keep the whole form on a white card.
Card
Save 3¢ / gallon
Every fill-up with a Refuel Rewards card earns a discount at the pump — no app required.
Sign upWhite on warm paper, hairline border, soft warm shadow. 16px corners.
Brand icons
Click any icon to copy its file URL. Hand-drawn, single-weight, deliberately imperfect. Available in black, On the Go Green, and Hot Deal Orange — pick the one that keeps the green/orange rule intact. Functional UI glyphs (chevrons, close, account) come from Lucide, not this set. Never substitute emoji.
06 — Accessibility
Legible at a glance, for everyone
Our customers read our signs from a moving car and our screens in direct sun. These are the combinations that hold up — ratios computed live against WCAG 2.1.
Safe defaults
For body copy: Roadway Black on paper, on Snowbank, or on On the Go Green — and white on Roadway Black. These four cover almost everything.
White on Hot Deal Orange lands at 3.69:1. It's our signature combination and it's cleared for headlines (24px+ / 19px bold) and for UI components like buttons, which only need 3:1 — but set a button label at 16px bold or larger, and never run paragraph copy in white on orange.
Watch out
White on On the Go Green fails body-size text — use Roadway Black instead. Fresh Pour Orange is an accent, not a text color on light backgrounds.
Beyond color
14px minimum body on screen, 44px minimum tap targets, a visible orange focus ring on every interactive element, and real alt text on logo and food imagery.
07 — Tone of voice
Family-friendly convenience
Our tone of voice is our personality — what we say and how we say it. Relatable, reputable, and fun. Speak to the customer as “you,” speak as “we.”
Inclusive
We believe in unity in our community. Everyone is welcome. We're all a family here.
Reliable
Consistent, trustworthy, dependable. Customers can rely on us for their on-the-go needs.
Informative
Knowledgeable industry leaders. We know family and convenience — and we know how to have fun.
Say it exactly like this
Website
Friendly, inviting, informative, reliable. Where our story and values live.
Laid-back, fun, humorous. Memes, awareness, and promos. #TheRefuelWay #refuel #doublequickstores
More formal, educational, business-focused. Still warm, never stiff.
✓ Write this
“Save 3¢ a gallon, every fill-up. Join Refuel Rewards in about a minute.”
Direct, benefit first, tells you how long it takes.
✕ Not this
“Refuel is pleased to announce the launch of an innovative loyalty solution.”
Corporate, slow, and about us instead of you.
08 — Double Quick
Double Quick — “We Keep You Movin'”
Our sister convenience banner runs its own complete identity: its own mark, its own faces, its own palette. Treat it with the same care as Refuel — never blend the two systems inside a single lockup.
Primary logo
Full color and stacked, as supplied. Keep clearance equal to the height of the “d” on all four sides. Single-color adaptations need Marketing Team approval before production.
Minimum size
Shown here at true minimum
96px wide on screen · 25.4mm (1in) wide in print
Same floor as Refuel. Below it the outline weight and the dot in “dou.ble” stop reading.
Logo variations
Color palette
Restricted to these three, at full strength — no tints, no shades. Click a chip to copy its hex.
Typography
Neue Aachen Pro — the Double Quick logo face. It lives inside the logo art only, set at vertical scale 100%, horizontal scale 83.468%, tracking −6.
Montserrat — all live copy, in the same hierarchy Refuel uses: H1 medium/bold, H2 bold, sub-heads semibold, body regular, buttons bold.
Never set headlines or body copy in Neue Aachen Pro.
Co-branded lockup
When both marks appear together, Refuel always sits on the left. This applies to every variation.
✓ Always
- Use supplied artwork at original proportions.
- Place the mark on white, green, or blue.
- Use the greyscale variation on black.
- Keep Refuel on the left in any co-branded lockup.
✕ Never
- Stretch, distort, or re-proportion the mark.
- Recolor the logo or change its font.
- Use a partial or incomplete lockup.
- Place it on a ground that blends into the mark.
09 — Hot N' Crispy
Hot N' Crispy Chicken
Our in-store deli program. Rustic, hand-stamped, and hungry-looking — it lives on deli signage, packaging, and menu boards inside Refuel stores.
Primary logo
Spelling is fixed: Hot N' Crispy — never “Hot and Crispy” or “Hot N' Krispy.”
Chicken mark & palette
Set in Dirty Headline, uppercase only, inside the logo art. The textured chicken may stand alone as a deli mark; live copy stays in Montserrat.
10 — Assets
Grab the real files
Always download from here rather than pulling a logo off a slide or the website. Need EPS or vector for large-format print? Ask Marketing.
Refuel primary logos
2 filesRefuel primary variations
5 filesRefuel secondary logos
7 files
'U' logomark
2 files
Refuel Rewards logos
2 files
Double Quick logos
3 filesCo-branded lockup
1 filesFood concept logos
4 files
11 — Governance
Who owns this, and how to use it
Who this is for
Marketing, digital product designers, and store & franchise teams. Anything you'd hand to an agency lives here too.
How to use it
Click any color chip to copy its hex or CSS variable. Flip the surface toggle to check components on dark. Download marks straight from the Assets section.
Before you publish
Single-color logo art, 'U' logomark usage, and any new lockup need Marketing Team approval prior to production.
Spot something off, or need a new asset?
Marketing owns this document. Send requests, corrections, and new lockups their way — and they'll land here with a version bump.
Refuel Brand & Design System · v2.1 · September 2026 · www.refuelmarket.com