greetings -- Brand Surface Guide

Section 01

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

Section 02

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 03

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

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

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

Section 05

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

Section 06

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>

Section 07

QA Checklist

No soft coral, pink-red, or orange tones — primary red only is #D91212 and its defined spectrum
Hero background is always dark (#000 or #111) — never white or cream
CTA button on red section background uses #000, not #D91212 — never red-on-red
Social text overlays are upper-third — never center or bottom where native UI obscures
Email uses Arial only — no Montserrat or Inter in email templates
Body copy is Inter 400 — never Montserrat for paragraph-length text
All caps labels use Montserrat 700 with 2–3px letter-spacing — never bold-italic or serif for labels
Stat/impact numbers use Montserrat 900 in #D91212 — never black or gray for stats
Cards are white with #E5E5E5 border — never tinted or colored card backgrounds
No purple, orange, or warm tones appear anywhere on any surface

Section 08

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

Brand Color System

Primary Palette

Background Palette

Text Color Rules

Typography System

Section Anatomy

Hero / Opening

CTA Block

Service Cards

Stat / Data Band

Contrast Rules

Surface-Specific Rules

Email

Website / Landing Page

Blog

Social

Video Thumbnails

Slide Decks

Copy Skeleton — Email Template

QA Checklist

Content Inventory

Content Pillars

Tone Reference

Active Product

Community / Distribution