Brand Color System

Primary Palette

Red 900
#7A0A0A
Darkest — headings on light bg
Red 700
#B00E0E
Dark accent — hover states
Red 500 — Primary
#D91212
Brand anchor — CTAs, accents
Red 300
#F04040
Light accent — icons, tags
Red 100
#FDE8E8
Tint — alert backgrounds, pills

Background Palette

Black
#000000
Hero backgrounds, headers
Near Black
#111111
Dark sections, code blocks
Off White
#FAFAFA
Page background
White
#FFFFFF
Card backgrounds

Text Color Rules

On white/off-white background: Headings = #111111 · Body = #2d2d2d · Labels/captions = #555555

On black/dark background: Primary text = #FFFFFF · Secondary text = #999999 · Accent text = #D91212

CTA buttons: Background = #D91212 · Text = #FFFFFF · Hover bg = #B00E0E

Links: #D91212 · Hover = #7A0A0A

Never Use These Colors
Soft coral reds — too playful
Pink-red — off brand
Orange — clashes with red anchor
Purple — no brand signal
Cream/beige — too warm for this palette

Typography System

Headline: Montserrat 800–900 (Heavy geometric sans)  |  Body: Inter 300–400 (web) / Arial (email)  |  Labels: Montserrat 700 all-caps tracked

Display Headline
Campaign-Ready.
Every Time.
Montserrat 900 · 42px / 1.1 · #111111 · -1px tracking
Stat / Impact Number
$5K
Max project value
Montserrat 900 · 64px · #D91212 · -2px tracking
Section Label / Eyebrow
Our Services
Montserrat 700 · 11px · ALL CAPS · 3px letter-spacing · #D91212
Body Copy
We show up prepared, execute cleanly, and deliver files you can put to work immediately. No back-and-forth, no surprise timelines. Just campaign-ready photography from a team that takes the outcome as seriously as you do.
Inter 400 · 15px / 1.7 · #2d2d2d · max-width 620–700px
Card / List Title
graddy — Product Photography
Montserrat 700 · 17px · #111111 · -0.2px tracking
CTA Button Text
Get a Quote
Montserrat 700 · 13px · ALL CAPS · 1.5px tracking · bg #D91212 · text #FFFFFF · padding 14px 28px · radius 4px

Section Anatomy

Hero / Opening

Product Photography
Imagery That
Sells Your Brand.
Campaign-ready product photography, $1,000–$5,000. No back-and-forth. Just results.
Get a Quote
Background
#000000
Headline
Montserrat 900 · 36–48px · #FFFFFF
Subtext
Inter 400 · 15px · #999999
CTA
bg #D91212 · Montserrat 700 · #FFF
Never do this here
Don't use a white/light hero background — the brand is bold and dark. Never place body-weight text directly on the red CTA button area.

CTA Block

Ready to Shoot?
Get a quote in 24 hours. No pressure, just a clear scope and price.
Start a Project
Background
#D91212
Headline
Montserrat 900 · 28px · #FFFFFF
Button
bg #000000 · Montserrat 700 · #FFFFFF
Padding
48px 40px · max-width 800px
Never do this here
Never use a red button on the red background. The CTA inverts to black. Never add a border/outline button on the red section.

Service Cards

Photography
graddy
Campaign-ready product photography for B2B brands. Polished, fast, and built for use.
$1,000–$5,000 →
Card BG
#FFFFFF · border #E5E5E5 · radius 8px
Section BG
#FAFAFA
Eyebrow
Montserrat 700 · 10px · #D91212
Price Link
Montserrat 700 · 13px · #D91212 → arrow
Never do this here
Never use a colored card background — keep cards white. Never omit the eyebrow label above the card title.

Stat / Data Band

48h
Quote Turnaround
$5K
Max Project
0
Rounds of Confusion
Background
#111111
Stat Number
Montserrat 900 · 48px · #D91212
Stat Label
Inter 400 · 12px · ALL CAPS · #999999
Layout
Flex row · centered · 48px gap

Contrast Rules

Pairing Usage WCAG AA
Aa
#FFFFFF on #000000
Hero text, dark sections PASS
Aa
#FFFFFF on #D91212
CTA buttons, CTA sections PASS
Aa
#FFFFFF on #7A0A0A
Headings, dark red variant PASS
Aa
#111111 on #FFFFFF
Body text, card titles PASS
Aa
#D91212 on #FDE8E8
Alert banners, tag pills PASS
Aa
#B00E0E on #D91212
Never use — insufficient contrast FAIL

Surface-Specific Rules

Email

  • Max width: 600px, table-based layout
  • Fonts: Arial (body), Georgia (only for pull quotes)
  • Body text: 15px / 1.6 / #2d2d2d
  • Heading: Arial Bold 22px / #111111
  • CTA button: bg #D91212 · text #FFF · padding 12px 24px · no border-radius in Outlook
  • Background: #FFFFFF · outer bg #F4F4F4
  • Header bar: #000000 with white wordmark
  • Footer: #111 bg · 11px #999 text · unsubscribe link

Website / Landing Page

  • Max width: 1100–1200px
  • Layout: CSS Grid / Flexbox
  • Fonts: Montserrat + Inter via Google Fonts
  • Body text: 15–16px / 1.7
  • Mobile breakpoint: 768px
  • Section padding: 80px 0 desktop · 48px 0 mobile
  • Card radius: 8px · shadow: 0 2px 12px rgba(0,0,0,0.07)
  • Image aspect: 16:9 for hero · 4:3 for gallery · 1:1 for thumbnails

Blog

  • Article width: 720–760px centered
  • Body: Inter 400 · 16px / 1.8 · #2d2d2d
  • H1: Montserrat 900 · 36px · #111
  • H2: Montserrat 700 · 22px · #111
  • Pull quote: 20px · italic · left border 4px #D91212 · #555
  • Images: Full article width · radius 8px · caption 12px #999
  • CTA block: #FDE8E8 bg · centered · Montserrat 700 CTA link

Social

  • Feed (1:1): 1080×1080 · text in upper-third safe zone
  • Stories / Reels (9:16): 1080×1920 · safe zone 250px top + bottom
  • LinkedIn (16:9): 1200×627 · headline centered · brand bar bottom
  • Text overlay: Montserrat 900 · white · soft shadow only
  • Brand element: Wordmark bottom-right · 10% width
  • Background: Dark photo or #000 — never white backgrounds on social

Video Thumbnails

  • Size: 1280×720
  • Text zone: Left 60% of frame
  • Headline: Montserrat 900 · 48–64px · white · shadow
  • Color bar: #D91212 horizontal stripe — 8px top or bottom
  • Logo: Bottom-right · white version
  • Background: Product/shoot image · dark overlay if needed

Slide Decks

  • Ratio: 16:9 · 1920×1080
  • Title slide: #000 bg · Montserrat 900 · white headline · red accent
  • Section divider: #D91212 bg · Montserrat 900 · white
  • Content slide: #FAFAFA bg · left-aligned content · black/red accent
  • Chart sequence: #D91212 → #7A0A0A → #111111 → #999999 → #FDE8E8
  • Body text: Inter 400 · 20px

Copy Skeleton — Email Template

<!-- 600px email, Arial only --> <table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff; max-width:600px; margin:0 auto;"> <!-- Header bar --> <tr><td style="background:#000000; padding:20px 32px;"> <p style="font-family:Arial,sans-serif; font-size:20px; font-weight:700; color:#ffffff; margin:0;">greetings</p> </td></tr> <!-- Body --> <tr><td style="padding:32px 40px;"> <h1 style="font-family:Arial,sans-serif; font-size:24px; font-weight:700; color:#111111; margin:0 0 16px;">[Headline]</h1> <p style="font-family:Arial,sans-serif; font-size:15px; color:#2d2d2d; line-height:1.6; margin:0 0 24px;">[Body copy]</p> <!-- CTA button --> <table><tr><td style="background:#d91212; padding:14px 28px;"> <a style="font-family:Arial,sans-serif; font-size:13px; font-weight:700; color:#ffffff; text-decoration:none; text-transform:uppercase; letter-spacing:1.5px;">[CTA Text]</a> </td></tr></table> </td></tr> <!-- Footer --> <tr><td style="background:#111111; padding:20px 40px;"> <p style="font-family:Arial,sans-serif; font-size:11px; color:#999999; margin:0;">greetings · National · <a style="color:#d91212;">Unsubscribe</a></p> </td></tr> </table>

QA Checklist

Content Inventory

Content Pillars

  • Product Photography — how to plan and execute a shoot that elevates your brand
  • Behind the Scenes — the work ethic and process that makes the difference in quality
  • Before & After — transformation from raw concept to polished final image

Tone Reference

  • Voice: Casual but professional
  • Energy: Product launch — confident, action-oriented
  • Avoid: Passive voice, vague superlatives, corporate jargon
  • Goal: Generate more leads and inquiries

Active Product

  • graddy: Product photography, $1,000–$5,000
  • Audience: B2B brand owners, marketing managers
  • Differentiator: We work hard — outcomes first

Community / Distribution

  • r/ProductPhotography
  • r/AskPhotography
  • r/smallbusiness
  • r/Entrepreneur
  • r/branding

greetings — Brand Surface Guide — Generated by Emerson North