Brand Surface Guide · v1.0

red.

red Niche: r (B2B) · National · Inspirational, Humorous
Primary #2ba829 · Secondary #000000 · Mood: outdoor_editorial

01 · Brand Color System

Anchor: #2ba829. The system derives five stops from the primary plus a restrained background palette in warm off-white. Green is the only saturated color that appears — black carries structural weight; no secondary accent competes.

Primary Palette — 5-stop spectrum

Ink Green#0d3f0e

Deep Green#165d17

Brand Green#2ba829

Field Green#7bcc7a

Mist Green#eaf7e9

Background Palette

Page
#f7f6f1

Card
#ffffff

Subtle
#efede7

Accent Tint
#eaf7e9

Footer / CTA
#0a0a0a

Text Colors

Surface	Heading	Body	Secondary	Labels / Eyebrow
On light (paper, card)	`#0a0a0a`	`#2a2a2a`	`#5a5d5a`	`#165d17`
On mist (`#eaf7e9`)	`#0d3f0e`	`#2a2a2a`	`#5a5d5a`	`#165d17`
On ink (`#0a0a0a`)	`#ffffff`	`rgba(255,255,255,0.88)`	`rgba(255,255,255,0.65)`	`#7bcc7a`

Accent Usage

Brand Green (#2ba829) is the only saturated accent. Use it for: CTA buttons, link hover underlines, eyebrow labels (swap to Deep Green on light surfaces for legibility), stat-band numerals, and the 6px top-of-page rule bar. Cap: no single surface should be more than ~15% covered by brand green. Never pair Brand Green with any other saturated hue.

Never Use

Any other saturated hue beyond the green stops (red, orange, purple, saturated blue)
Brand Green on Field Green (#7bcc7a) or Mist Green (#eaf7e9) backgrounds — fails contrast
Pure white (#ffffff) as a page background — paper (#f7f6f1) always
Corporate stock neon green, safety-vest green, or astroturf green — they kill the editorial feel
Low-contrast pairings (green-on-green, mid-gray on paper)

02 · Typography System

Headline font: Fraunces (modern display serif, weight 400–500) paired with Inter (weights 400/500/700/800) for labels, body, and UI. Fraunces gives the editorial lean the mood anchor calls for; Inter keeps the guide legible at data-heavy and UI sizes. On email, fall back to Georgia / Arial.

Launch the thing. Then tell us about it.

Display / HeroFraunces · 52px · 500 · line-height 1.05 · letter-spacing -1px · #0a0a0a

1,247

Stat / ImpactFraunces · 64px · 500 · line-height 1 · #2ba829

Field Notes · Issue 01

Section Label / EyebrowInter · 11px · 700 · letter-spacing 5px · uppercase · #165d17

Body copy stays long-form and conversational. Sentences breathe. Short paragraphs carry the weight. Inter at 17px with 1.7 line-height on web; 16px / 1.6 in email.

Body CopyInter · 17px · 400 · line-height 1.7 · #2a2a2a

Why this product ships before the site does.

Card / List TitleFraunces · 22px · 500 · line-height 1.2 · #0a0a0a

Start with red

CTA ButtonInter · 14px · 700 · letter-spacing 1.4px · uppercase · #ffffff on #2ba829 · padding 14px 26px · radius 3px

Per-surface sizes

Surface	H1	H2	Body	CTA
Website / Landing	Fraunces 52/44	Fraunces 32	Inter 17/1.7	Inter 14 · 1.4px
Blog article (max 740px)	Fraunces 40	Fraunces 26	Inter 17/1.8	—
Email (600px)	Georgia 28/32	Georgia 20	Arial 16/1.6	Arial 14 · 1.4px
Social 1:1	Fraunces 72–84	—	Inter 32	—
Story / Reel 9:16	Fraunces 72	—	Inter 28 · upper-third only	—
Slide deck 1920×1080	Fraunces 72	Fraunces 44	Inter 28	—

03 · Section Anatomy

Red's primary surface is the long-form landing page. Every surface pulls from this vocabulary. Sections marked Required must appear on every page; everything else is conditional.

Brand Opener — 6px top ruleRequired

Solid gradient bar from #2ba829 → #165d17. 6px at desktop, 4px at mobile. Never layered under imagery.

Never: pill shapes, multi-stop rainbow gradients, or a full-bleed color field.

Logo HeaderRequired

rred

Wordmark: Fraunces 22px, weight 500, letter-spacing -0.3px, color #0a0a0a. Mark is a 36×36 Brand Green square with a white lowercase "r" in Fraunces 22 centered. Header padding 20px 32px on a white card, 1px bottom rule #e3e6df.

Never: outline-style marks, gradients on the square, or the wordmark without the mark.

Hero / OpeningRequired

Field Notes · Issue 01

Launch the thing. Then tell us about it.

red is a B2B product in the $50–200 range. Long-form, inspirational, and occasionally funny. This is the hero treatment — one headline, one sub, one CTA, one credibility line. No hero imagery.

Start with red

Never: hero photography behind text, multi-column hero, or more than one CTA.

Stat / Data BandRequired (B2B)

94%

Placeholder metric

1,200+

Placeholder metric

$0→$X

Placeholder metric

Never: more than three stats in one band, decimals longer than one place, or a stat without a real source.

Narrative BodyRequired

The body block is a single column at 720px max-width on a #f7f6f1 page, Inter 17/1.7 in #2a2a2a. Paragraph spacing 18px. Pull quotes use Fraunces 24 italic in Brand Green with a 3px left rule.

Never: multi-column body on desktop, justified text, or sans headings inside the narrative flow.

Split Panel — Challenge / AnswerOptional (B2B)

Here's the friction.

A one-sentence frame of the problem, written plainly. No jargon. No fear-mongering.

Here's the shift.

A one-sentence frame of what changes with red. Concrete outcome, no abstractions.

Never: more than two columns in a split panel. Never balance it left-light / right-dark — always dark on the left.

CTA BlockRequired

One action per page.

Start with red

Never: two buttons side-by-side, outline buttons, or CTA copy longer than 3 words.

FooterRequired

Never: logo walls, social-icon rows, or a "made with love" line.

04 · Contrast Rules

Every pairing below has been checked at WCAG AA for body text size. Anything outside these pairs should be rejected in review.

Ink on Paper
AAA

Body on Card
AAA

White on Ink
AAA

White on Brand
AA body / AAA large

Ink Green on Mist
AAA

White on Deep Green
AAA

Ink on Field Green
AAA — use sparingly

Deep Green on Paper
AAA — links / eyebrows

05 · Gradient Reference

red uses exactly one gradient: the top-of-page brand bar. No radial gradients, no multi-color gradients, no background-filling gradients.

linear-gradient(90deg, #2ba829 0%, #165d17 100%) — 6px height, full-bleed, at the very top of every web surface.

06 · Surface-Specific Rules

Surface	Max width	Layout	Hero treatment	Brand element
Email	600px	Table-based only	Text headline & preheader (Georgia 28) — no hero image	6px `#2ba829` bar at top (bg-color fallback)
Landing page	1120px	Grid / Flex allowed	Full-page fold: eyebrow + H1 + sub + one CTA; no imagery	6px brand gradient bar
Blog article	740px body · 1120px shell	Single column	Title in Fraunces 40; optional outdoor photo below, 16:9	Brand-green 3px left rule on pull quotes
Social 1:1 (1080×1080)	—	Paper bg; 80px margin; 6px green rule bottom	Fraunces headline, 72–84px, max 7 words; eyebrow above	Lowercase "red." wordmark bottom-left
Story / Reel 9:16 (1080×1920)	—	Text zone upper third only — avoid native UI	Fraunces 72 headline max 2 lines · Inter 28 body	"red." wordmark top-right, 32px from edge
YouTube thumb 16:9 (1280×720)	—	Left-weighted text; photo or paper bg right	Fraunces 96 max 5 words · green underline under last word	Brand-green 12px bar along top edge
Slide deck 1920×1080	—	Title slide: paper bg, wordmark centered; dividers: ink bg, mist text	Content slide: max 25 words · Fraunces H + Inter body	6px brand bar bottom of every slide

Social safe zones & text placement

1:1 (feed): keep text and logo 80px from every edge. Never place text in the lower 120px (crop risk in preview cards).
9:16 (Story/Reel): text lives in the upper third only. Minimum font size 28px. Never center text vertically — IG/TikTok UI blocks the bottom 35%.
Chart / graph color sequence (first 5): #2ba829, #0a0a0a, #165d17, #7bcc7a, #5a5d5a.

07 · Copy Skeleton — Primary Surface

Paste into the landing-page HTML and fill in real copy. Every block has a fixed word/character budget so replacements stay on-brand.

[EYEBROW       · 2–4 words · Inter 11 · uppercase · #165d17]
[HERO HEADLINE · 6–10 words · Fraunces 44/52 · #0a0a0a]
[HERO SUB      · 1 sentence ≤ 22 words · Inter 16 · #5a5d5a]
[HERO CTA      · 2–3 words · Inter 14 uppercase · #fff on #2ba829]

[STAT BAND — exactly 3]
• [Number · Fraunces 44 · #165d17]  [Label · Inter 11 upper · #5a5d5a]
• [Number]                           [Label]
• [Number]                           [Label]

[NARRATIVE BODY · 250–400 words · Inter 17/1.7]
Paragraph one sets the context. Paragraph two turns to the shift.
Paragraph three grounds in the thing you ship. One pull-quote max.

[SPLIT PANEL]
Left (ink):  "Here's the friction." + 1–2 sentence framing.
Right (paper): "Here's the shift." + 1–2 sentence result.

[CTA BLOCK · ink bg]
One line in Fraunces 30 white + one CTA (same as hero).

08 · QA Checklist

Brand Green (#2ba829) is never placed on Mist (#eaf7e9) or Field Green (#7bcc7a) — always on ink, paper, or white.
No second saturated hue appears anywhere on the surface. Any red, blue, orange, or yellow — reject.
Page background is always #f7f6f1 (paper). Pure white #ffffff is reserved for cards and rule-based sections.
Every surface has exactly one CTA. Two buttons — reject.
Hero never contains imagery behind text. Text-only hero on paper or white card, full stop.
Headlines use Fraunces (500, letter-spacing -0.4px or tighter at display sizes). Inter as headline is reserved for email.
Eyebrows are always uppercase, 5px tracking, Inter 700, in Deep Green (#165d17) on light or Field Green (#7bcc7a) on ink.
Social text sits in the upper third of 9:16 frames. Bottom third is reserved for the platform UI.
Stat bands have exactly three stats. Each stat has a labeled source (date + source name) — no unsourced numbers.
No EM dashes anywhere in client-facing copy. Use "—" only within this guide; client copy uses period+period or commas.
Humor is used sparingly — one line per surface max. Inspiration is the default; humor is a spice, never the dish.

09 · Content Inventory

Deliverable	Surface	Owner	Status
Landing page v1	Website	—	not started
Welcome email (transactional)	Email	—	not started
Product announcement post	Social 1:1	—	not started
Launch Story frame set	Story 9:16	—	not started
First long-form blog	Blog	—	not started
Deck: Why red ships early	Slide deck	—	not started