Target Marketeer

Branding Guide

The logo, colors, type and buttons behind targetmarketeer.com.

Logo

Full logo. The target mark with the stacked wordmark, on a transparent background. Use it on white and light colours.

In the header it is 170px wide on computers and 125px on phones. Below 120px the wordmark stops being readable, so switch to the mark.

Reversed logo. White lettering for navy and other dark backgrounds.

Icon mark. The site icon, app tile and social avatar.

Keep clear a margin around the logo at least as wide as the target mark's outer ring. Never stretch it, recolor it, or set it on a busy photo without a solid panel behind it.

Color

Navy carries the brand and orange points at the action. Roughly 60% white and light greys, 30% navy, 10% orange. Orange is for the one thing on the screen you want clicked, so it stays rare.

Navy

#283071 · RGB 40 48 113Primary. Headings, buttons, banners, the logo.

Deep navy

#1B2150 · RGB 27 33 80Navy buttons when hovered, dark bands, the dark end of banner gradients.

Orange

#F57B20 · RGB 245 123 32Accent. Calls to action and highlighted words.

Burnt orange

#C85A0E · RGB 200 90 14Orange buttons when hovered, orange text on white, link hover.

Ink

#3F4150 · RGB 63 65 80Body copy and form text.

Mute

#6B7090 · RGB 107 112 144Supporting copy, small print, meta and placeholders.

Pale blue

#B9CEFF · RGB 185 206 255Text, labels and outlines on navy.

White

#FFFFFF · RGB 255 255 255Page and card background; headings on navy.

Mist

#ECF0FB · RGB 236 240 251Light section backgrounds, panels, form fields and email boxes.

Line

#E1E4ED · RGB 225 228 237Borders, dividers and input outlines.

Line on navy

#3A4179 · RGB 58 65 121Dividers on navy and deep navy.

Orange tint

#FFF1E3 · RGB 255 241 227Savings notes and warnings, with a #F6D4B0 border.

Green

#1E8E4E · RGB 30 142 78Success: added to quote, sent, paid. On a #E6F4EC tint with a #BFDCCB border.

Red

#D33A3A · RGB 211 58 58Errors, required marks, remove. On a #FBEAEA tint with a #F1C9C9 border.

Typography

Poppins for everything, served from our own site (no Google Fonts request). Weights in use: 400 regular, 500 medium for small labels, 600 semibold, 700 bold, plus 600 and 700 italic. Sizes come from one scale: 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 30, 32, 38, 42, 46 and 64px (34px for the hero on phones); anything in between rounds to the nearest. Only fluid headings that grow with the screen sit between steps. Emails use Arial, which every inbox has. One highlighted phrase per heading goes in orange italic.

Hero headlinePoppins 700, 64px, line height 1.08, -1.2px tracking (40px tablet, 34px phone): You run the business. We’ll run the marketing.
Page title (H1)Poppins 600, 46px, white on the navy banner (38px tablet, 30px phone): Marketing tips for small businesses
Section (H2)Poppins 700, 42px, navy (38px tablet, 30px phone): Everything a starting business needs
Subhead (H3)Poppins 600, 28px, orange: How it works
Card titlePoppins 700, 18px, navy: Website Base Build
BodyPoppins 400, 16 or 18px, line height 1.65, ink: Every site starts here: custom design in your brand, mobile layouts, your home page and launch.
Page labelPoppins 700, 30px, orange, just above the page title: Support & Answers
Section labelPoppins 700, 13px, uppercase, 3px tracking; small section labels only: Plan it early
Small printPoppins 400, 12 to 13px, mute: One credit per business. Not for monthly plans.

Buttons and components

Build my plan Browse bundles

Primary and secondary. The house button, used for every orange and navy button: 54px tall, 8px corners, Poppins 700 at 16px, a 2px pale blue border and the solid right arrow. Orange for the main action, navy beside it. Hover them: the color darkens (orange to #C85A0E, navy to #1B2150) and the border turns white. They never grow or move.

Learn more Add to quoteView quote

Card buttons. On service and product cards: Learn more in navy and Add to quote in orange, both 44px tall, Poppins 600 at 14px. Once added, the quote button turns into View quote (green) and a remove cross (red) in exactly the same space.

See what's included →

Text links. Navy text with an arrow for the quieter actions inside a card. They turn burnt orange on hover. Secondary buttons use solid navy, never a thin outline.

AllSEOWebsitesEmail

Filter chips. Fully rounded, white with a soft border; the selected one fills navy.

1Tell us the date

Cards and steps. White cards with a 1px line border, 12px corners and a soft navy shadow. Numbered steps sit in navy circles.