Brand guidelines

How Accretion looks, sounds and builds.

One reference for everyone who makes something with our name on it. If the website changes, it changes here first.

Graphic designersLogo, color, type, icons, imagery.
Web developersType tokens, buttons, cards, forms, spacing, page types.
Social media managersVoice, colors, post sizes and layouts.
Ads designersAd sizes, safe zones, headlines, calls to action.

Color

Eight colors. No more, no pure black.

The website build checks every page and refuses colors outside this list. Use about 60% cream and white, 30% navy family, 10% gold.

Navy#14213D · RGB 20, 33, 61Primary. Headlines on light, dark sections, the managed price block.
Gold#B8925F · RGB 184, 146, 95Accent. Primary buttons, eyebrows on dark, icons, key phrase in a headline. Never body text on light backgrounds.
Cream#FBF9F4 · RGB 251, 249, 244Page background. Text on navy.
White#FFFFFF · RGB 255, 255, 255Cards and panels that sit on cream.
Midnight#0B1326 · RGB 11, 19, 38Our darkest color. Footer, deep heroes. We never use pure black.
Deep blue#2C3E66 · RGB 44, 62, 102Secondary dark. Illustrations, animated scenes, charts.
Bronze#7A5B32 · RGB 122, 91, 50Hover state, eyebrows and links on light backgrounds.
Sand#E9D8B8 · RGB 233, 216, 184Soft panels (Essentials rows, at-a-glance boxes), text on dark.

Text that is easy to read

Contrast ratio shown; 4.5 or higher passes for normal text. Gold text only goes on navy or midnight. On light backgrounds, use bronze.

Navy on Cream15.2 : 1
Cream on Navy15.2 : 1
Navy on White16.0 : 1
Navy on Sand11.4 : 1
Gold on Navy5.6 : 1
Gold on Midnight6.4 : 1
Bronze on Cream5.9 : 1
Sand on Navy11.4 : 1

Typography

Two typefaces, one scale.

Playfair Display for headings: classic and confident. Jost for everything else: clean and easy to read. Every page uses these styles; the values printed here come from the live site.

HeadingsPlayfair DisplaySemibold 600. Italic 600 for one key phrase, in gold on dark.
Text, buttons, labelsJostRegular 400 for text, Medium 500 for emphasis, Semibold 600 for buttons and labels.

Who we help

Eyebrow · .t-eyebrow

Marketing that pulls people in, one plan at a time.

Subtitle · .t-lead

The marketing company that pulls people in.

Heading 1 (page title, one per page) · .t-display

Three services. Clear prices.

Heading 2 (section title) · .t-h1

Social Media Management

Heading 3 (card title) · .t-h3

What’s included

Heading 4 · .t-h4

Speed and lasting

Heading 5 · .t-h5

Get found first on Google, Maps and AI answers like ChatGPT. Long-term organic results that are slow to build and slow to lose.

Paragraph · .t-body

Ad spend is paid directly to the platform.

Small text · .t-small
Button textButton text · .btn

Spacing

Everything sits on an 8-point grid.

Spacing is always one of these numbers. It keeps every page calm and lined up.

8162432486496
Sections96 px top and bottom on desktop, 64 px on phones. The content is 90% of the screen width, never wider than the page.
Cards24 to 32 px inside. 16 px between cards.
Text12 px from eyebrow to title, 12 to 16 px from title to subtitle, 32 to 40 px before the content.
Tap targetsAt least 44 px tall on phones, buttons 48 px.

Buttons

Three buttons. One job each.

All three use the same type, so importance comes only from fill. One gold button per screen: the action we want most.

PrimaryBook a free call Gold. Hover: bronze with cream text, lifts 2 px. The main action.
SecondarySee how we helpNavy outline. Hover: fills navy. The second choice.
Text buttonChoose Essentials Gold underline. Hover: bronze, thicker line. Small actions.
On darkChoose managedCall (224) 212-1900Ghost button: cream outline, fills cream on hover.
Do
  • Start with a verb: Book, Choose, See, Call.
  • Keep it to 1 to 4 words.
  • Show a gold ring when selected with the keyboard (built in).
Don't
  • Put two gold buttons side by side.
  • Write "Click here" or "Submit".
  • Make a text link look like a button, or a button look like text.

Text styles

Links, lists and quotes.

Links

Read our terms and conditions before you choose a package.

Underlined in gold. Hover: bronze with a thicker line.
Bold and italic

Semibold for the one thing to remember. Italic only for names of things.

Bulleted list
  • Short items, no end punctuation if fragments
  • Parallel wording
  • Seven items or fewer
Numbered list
  1. Use for steps in order
  2. Start each step with a verb
  3. One action per step
"Romeo and his team are phenomenal. Super flexible to adjust to our specific needs."M.P. · Google review

Quotes come only from real reviews. Initials only for clients.

Cards

Cards change with what sits behind them.

A card is always one shade apart from its section, so it reads as a separate thing.

On cream

White card

Default for services, reviews and steps.

On cream, emphasis

Navy card

For the one thing we want them to choose, like a price.

Secondary option

Sand panel

For smaller options and at-a-glance facts.

On navy

Glass card

A thin sand line on dark sections.

Clickable cards lift 4 px and get a gold border on hover. Cards that aren't clickable never move.

Forms

Ask for less. Label everything.

Every field has a visible label above it. Fields are 48 px tall. Errors say what to do, in words, not just color.

Choices

Icons

Simple line icons, five ways to hold them.

Drawn on a 24 px grid, 1.75 px line, round ends, no fills. The same icon can sit in any of these holders; pick the one that contrasts with its section.

Navy tile, gold line (default)
Gold tile, navy line (highlight)
Sand tile (soft panels)
Outline (lists, small spaces)
On dark
Animated (hover to see)
The line redraws on hover. Use for clickable cards only.
Sizes32 px in lists, 48 px on cards, 64 px for a section's main icon.
RulesOne idea per icon. Always beside a word; never the only label.

Imagery and motion

Real work, real people, gentle motion.

Do
  • Real photos of client work and the people who do it, in natural light.
  • Website mockups on phones and laptops, with client names removed.
  • Our accretion swirl and gold dust behind headlines on dark sections.
  • Simple navy, deep blue and gold illustrations for ideas photos can't show.
Don't
  • Generic stock photos of handshakes and people pointing at screens.
  • Client logos or full names in any image.
  • Filters that change our colors, or text baked into photos.
  • Images without alt text describing what's in them.
MotionHovers 0.2 s. Reveals 0.6 s. Nothing flashes or loops fast.
Reduced motionIf a visitor turns motion off, we show the still version.
SpeedImages under 200 KB, WebP, sized to how big they show.

Voice and tone

Say less. Mean more.

We sound like a confident expert explaining something to a friend: short sentences, plain words, real numbers.

ShortOne idea per sentence. Most under 15 words.
PlainNo jargon. If a term is needed (SEO, GEO), say what it does.
ConcreteNumbers, places, time frames. "25 to 30 leads a month", not "lots of leads".
About themSay "you". Talk about their outcome, not our process.
We sayWe get you found on Google.
We don't sayWe leverage cutting-edge SEO strategies to maximize your online visibility.
We sayYour phone rings more.
We don't sayWe drive increased lead generation and conversion optimization.
We sayOne team. One plan.
We don't sayA full-service, end-to-end, 360-degree digital marketing agency.
We sayYou own your accounts.
We don't sayClients retain ownership rights of digital assets as outlined in our agreement.
We say3-month agreements, never 6 or 12.
We don't sayNo long-term contracts required!*
We sayAccretion is how planets are made. It’s how we grow your business too.
We don't sayOur name comes from a scientific term relating to gradual accumulation.
Words we avoidOn marketing pages we never say "customers", "clients" or "supporters". Say "people", "your audience" or name them (homeowners, patients, voters). Legal pages and real review quotes keep their wording. Client names: initials only.

Social and ads

Same brand, every feed.

Posts and ads follow the same colors, fonts and voice as the website.

Feed post1080 × 1350 (4:5) for Instagram and Facebook. Keep text 80 px from every edge.
Reels, Stories, TikTok, Shorts1080 × 1920. Keep words out of the top 270 px, bottom 480 px and right 140 px.
CoversUse the files in brand/social: Facebook, YouTube, X, Google Business Profile, LinkedIn.
Ads1080 × 1080, 1080 × 1350 and 1080 × 1920. Headline in the first 3 to 5 words. One call to action.
Every post or ad
  • Background: navy, midnight or cream.
  • Headline in Playfair, 8 words or fewer; the key phrase can be gold italic.
  • Supporting text in Jost, one or two short lines.
  • Logo small, top or bottom, never in the middle.
  • A real photo or a simple illustration, not both.
Never
  • Colors outside the eight.
  • More than two typefaces, or all caps paragraphs.
  • Prices or claims the website doesn't show. If it isn't on the site and in Stripe, it isn't in an ad.
  • Client names or logos without written permission.

Building pages

Four page types, each with its own layout.

Web developers: every page has exactly one Heading 1, headings never skip a level, and the build warns if they do.

HomeSends each visitor to the right door: Businesses, Practices or Campaigns.
Client type pagesBusinesses, Practices, Campaigns. Built to close on a call: problem, cost of waiting, our three services, proof, plan, price, promise, FAQ.
Industry pagesA pitch deck for one trade: how their customers buy, a 12-month plan, sample work, results, the package we recommend.
ServicesEverything we do, the only list of industries, how it works, and packages.
  1. Alternate section backgrounds: cream, white, navy. Never two navy sections in a row.
  2. Each section: eyebrow, Heading 2, subtitle, then content.
  3. One gold button per section.
  4. Prices and package names match Stripe exactly.
  5. Check desktop, tablet (768 px) and phone (375 px) before publishing.

Downloads

Brand files.

LogosSVG and PNG, light and dark.Download logos
FontsFree from Google Fonts: Playfair Display and Jost.Get the fonts
Book a free call