Brand & Design System
PipelineRoad
Design System
The complete visual identity and design system for PipelineRoad — the AI-powered capital raising copilot for emerging fund managers. Dark institutional aesthetic. Warm copper accents. Bloomberg Terminal meets modern SaaS.
Brand: PipelineRoad
Domain: pipelineroad.com
Stack: Astro + Vercel
Aesthetic: Institutional dark mode
01 — Color Palette
Deep institutional dark mode anchored by near-black navy. A single warm copper accent provides all energy. White is never pure #fff — always the warm off-white #f0f2ef. Sage green bridges dark and light contexts.
Core Palette
Primary BG
Navy
#060e0a
--navy
Alt BG
Navy Light
#091510
--navy-light
Accent / CTA
Copper
#c4856a
--accent
Mid-Ground
Sage
#1a2e22
--sage
Light Sections
Sand
#f0ebe4
--sand
Text / FG
White
#f0f2ef
--white
Accent Gradient & Glow
CTA Gradient — 135deg #d4976a → #c4856a
Copper Glow — box-shadow
Accent Glow — radial bg
White Opacity Scale
100%
90% body
60% sub
40% meta
20% muted
10% border
5% fill
Data Source Card Colors (Product UI)
Preqin
PitchBook
LinkedIn
Dakota
Bloomberg
SEC EDGAR
eVestment
02 — Typography
Four font families. Serif for emotional headlines, sans-serif for clarity, monospace for data/labels, Outfit exclusively for the brand wordmark. Never mix roles.
Capital raising, reimagined
How to Raise a PE Fund in 2026
Thesis-Driven Investor Matching
PipelineRoad replaces the need for a $400K/year internal BD hire. Our AI scans 30+ institutional data sources, matches your thesis to the right LPs, and our team manages outreach through final close.
White-glove support from onboarding through final close. Platform + managed service.
Capital Raising Intelligence
PIPELINEROAD
Mar 03 2026 — 5 min read — Jordan Stokes
Rules
HeadlinesAlways DM Serif Display, weight 400 (never bold). Letter-spacing: -0.025em. Color: --white (never accent).
BodyInter 400 at 15px / 1.65 line-height. Color: --white-90. Max-width: 720px for readability.
Labels & TagsJetBrains Mono, uppercase, letter-spacing 0.12-0.14em. Color: --accent for active, --white-20 for muted.
Wordmark OnlyOutfit is ONLY used for "PIPELINEROAD" nav brand text. Never for any other content.
03 — Logo & Wordmark
The logomark is a stylized "P" letterform (3px stroke, round caps) with a copper accent dot at the baseline. Always paired with "PIPELINEROAD" in Outfit 500. The brand is PipelineRoad — the .ai is the domain only, never part of the brand name.
PIPELINEROAD
Primary — on Navy
PIPELINEROAD
On Sand / Light
PIPELINEROAD
On White
Favicon / App Icon
Naming RuleBrand is "PipelineRoad" (one word, camel case in prose). Domain is pipelineroad.com. Never write "PipelineRoad.ai" as the brand name. In nav/logo: "PIPELINEROAD" (all-caps, Outfit).
Download Assets
04 — Photography & Imagery
Photography is full color — not desaturated or filtered. Images are tastefully selected for institutional warmth, natural light, and editorial composition. People in real environments, architecture with presence, infrastructure at scale. No stock feeling, no artificial color grading.
Photography Direction
Institutional
Modern architecture, glass towers, clean geometry. Full color, natural light.
Workspace
Boardrooms, strategy sessions. Candid, warm tones, not staged.
Infrastructure
Bridges, factories, logistics. Dawn/dusk light. Monumental scale.
Corporate
Modern office exteriors, lobbies. Full color, golden hour preferred.
Photo Treatment on Dark BGNO desaturation or heavy filters. Images are full color.
Use gradient overlay: linear-gradient(to top, rgba(6,14,10,.7) 0%, transparent 60%) for text readability.
Fallback bg-color always set in case image fails to load.
Use gradient overlay: linear-gradient(to top, rgba(6,14,10,.7) 0%, transparent 60%) for text readability.
Fallback bg-color always set in case image fails to load.
Photo Treatment on Light BGFull color, no overlay needed. Natural shadows.
Slight border-radius: 8px. No drop shadow on sand backgrounds.
Light sections use real photography without any blend modes.
Slight border-radius: 8px. No drop shadow on sand backgrounds.
Light sections use real photography without any blend modes.
Do
Full color, natural light
Tasteful editorial selection
Real environments & people
Warm tones, golden hour
Architectural with presence
Tasteful editorial selection
Real environments & people
Warm tones, golden hour
Architectural with presence
Don't
Heavy desaturation/grayscale
Smiling group stock shots
Abstract 3D renders
Overly filtered or graded
Pure white backgrounds
Smiling group stock shots
Abstract 3D renders
Overly filtered or graded
Pure white backgrounds
05 — Illustration Style
Illustrations are data-driven, architectural, and restrained. Thin copper lines on dark fields. Think Bloomberg aesthetics meets clean data visualization. No playful or whimsical elements.
Signal Charts
Area charts with copper gradient fill. Thin strokes, dot markers at data points.
Venn / Overlap
Thesis-investor overlap. Copper for active zone, white opacity for data layers.
Architecture Diagrams
Rounded rect modules, dashed connectors. Copper highlights the output node.
06 — Icon System
Monoline icons, 1.5px stroke, round caps and joins. Copper for active, --white-40 for default. Never filled. Size: 24-28px in UI, 16-18px in compact contexts.
Active State (Copper)
Analytics
Investors
Search
Signal
Platform
Dashboard
Timeline
Outreach
Default State (white-40)
Analytics
Investors
Search
Signal
Platform
Dashboard
Timeline
Outreach
07 — UI Components
Buttons
Primary CTAbackground: linear-gradient(135deg, #d4976a, #c4856a)
color: #fff
border-radius: 4px
box-shadow: 0 2px 12px rgba(196,133,106,0.35), 0 0 20px rgba(196,133,106,0.15)
:hover — shadow intensifies, bg darkens
color: #fff
border-radius: 4px
box-shadow: 0 2px 12px rgba(196,133,106,0.35), 0 0 20px rgba(196,133,106,0.15)
:hover — shadow intensifies, bg darkens
Ghostbackground: transparent
border: 1px solid --white-20
color: --white-60
:hover — border-color: --white-40, color: --white
border: 1px solid --white-20
color: --white-60
:hover — border-color: --white-40, color: --white
SizingDefault: 12px 28px, 0.88rem
Small: 7px 18px, 0.8rem
Font: Inter 500
Always 4px radius (never rounded pill)
Small: 7px 18px, 0.8rem
Font: Inter 500
Always 4px radius (never rounded pill)
Form Elements
Input Specbackground: rgba(255,255,255,0.08)
border: 1px solid rgba(240,242,239,0.12)
border-radius: 6px
font: Inter 0.88rem
Inline form: input + CTA fused, shared border-radius
border: 1px solid rgba(240,242,239,0.12)
border-radius: 6px
font: Inter 0.88rem
Inline form: input + CTA fused, shared border-radius
Tags & Labels
Capital Raising
LP Intelligence
Emerging Manager
New
Active
Stat Callouts
$2.4T
Institutional dry powder tracked
30+
Institutional data sources
14 days
Avg. time to first LP meeting
08 — Cards & Content Blocks
Blog Cards (Dark)
Guide
How to Raise a PE Fund Without a Placement Agent
The landscape has shifted. Here's what emerging managers need to know.
Intelligence
State of Capital Raising in 2026
Fundraising timelines are compressing for the first time in three years.
Playbook
Building Your LP Outreach Strategy
A systematic approach to investor outreach that respects everyone's time.
Feature Cards (Dark vs Light)
Thesis-Driven Matching
AI that understands your investment thesis
We don't spray-and-pray a generic LP list. Our AI reads your thesis, maps it to investor mandates, and surfaces only the institutions with genuine fit.
Managed Outreach
White-glove from first email to final close
Our team handles sequencing, follow-ups, and scheduling. You show up to meetings with LPs who already understand your strategy.
09 — Data Visualization
Charts use copper fill with gradient fade. No gridlines. Minimal axis labels in monospace. White-05 backgrounds for bar tracks. Always dark mode context.
Horizontal Bar Chart
Pension Funds
$1.2T
Endowments
$840B
Family Offices
$620B
Fund of Funds
$410B
Stat Blocks
$2.4T
Dry powder tracked
4,200+
LPs in database
72%
First-call conversion
14d
Avg. to first meeting
10 — Section Composition System
Every homepage section follows a strict composition pattern. Section labels animate on scroll. Alternating dark/light backgrounds create visual rhythm. The copper line extends as the section enters the viewport.
Section Label Pattern
Capital Raising Intelligence
Label text is --white-20 at rest, animates to --white-60 when in-view. Line sweeps left-to-right via scaleX(0)→scaleX(1) with copper glow.
Section Label CSSfont: JetBrains Mono 0.65rem uppercase
letter-spacing: 0.14em
::after line: scaleX(0) → scaleX(1)
transition: 300ms cubic-bezier(0.16, 1, 0.3, 1)
Glow: box-shadow 0 0 8px rgba(196,133,106,0.35)
letter-spacing: 0.14em
::after line: scaleX(0) → scaleX(1)
transition: 300ms cubic-bezier(0.16, 1, 0.3, 1)
Glow: box-shadow 0 0 8px rgba(196,133,106,0.35)
Dot Prefix (Alt Sections)Alt sections get a ::before copper dot
width: 3px, height: 3px, border-radius: 50%
background: --accent
Appears left of label text
width: 3px, height: 3px, border-radius: 50%
background: --accent
Appears left of label text
Dark vs Light Sections
Dark Section
Headline in --white
Body text in --white-90. Borders use --border (rgba white 10%).
Light Section
Headline in --navy
Body in rgba(6,14,10,0.55). Borders: rgba(6,14,10,0.06).
Section PaddingDefault: 72px 48px (homepage) | 64px 48px (brand guide) | Border-bottom: 1px solid --border between sections | Alt sections: background --navy-light | Light sections: background --sand
11 — Product UI Patterns
The homepage showcases the PipelineRoad platform through a full interactive dashboard mockup (960×560px) with animated scenes, a bento intelligence grid of 13+ data source cards, and sticky-scroll feature panels. These are our primary product marketing assets.
Hero Dashboard Mockup
Investor Targeting › 323 results
Filters
Pension Fund
Endowment
Family Office
Fund of Funds
AUM Range
$500M-$5B
Dashboard Mockup SpecFixed size: 960×560px
Scales via JS ResizeObserver (transform: scale())
3D tilt on load: perspective(1200px) rotateX(8deg)
Eases to 0deg on scroll (Star Wars effect)
Multi-scene: Targeting → Outreach → Signals → Meetings
Auto-cycles through scenes with animated cursor
Scales via JS ResizeObserver (transform: scale())
3D tilt on load: perspective(1200px) rotateX(8deg)
Eases to 0deg on scroll (Star Wars effect)
Multi-scene: Targeting → Outreach → Signals → Meetings
Auto-cycles through scenes with animated cursor
Dashboard StylingSidebar: 44px, #28282e, collapsed icons
Active tab: copper left-border indicator (2px)
Topbar: #fff, 1px border, breadcrumb nav
Match badges: copper bg at 10% opacity
Avatar gradients: unique per contact
box-shadow: 0 8px 40px rgba(0,0,0,0.45), copper glow spread
Active tab: copper left-border indicator (2px)
Topbar: #fff, 1px border, breadcrumb nav
Match badges: copper bg at 10% opacity
Avatar gradients: unique per contact
box-shadow: 0 8px 40px rgba(0,0,0,0.45), copper glow spread
Bento Intelligence Grid
The centerpiece of the homepage. 13+ data source cards arranged in a bento grid, each styled to match the real product's brand (Preqin navy, Bloomberg black/amber, LinkedIn blue, Dakota teal). SVG network lines connect each card to a central hub with a 3-phase sweep animation.
Card TypesPreqin: allocation bar charts
PitchBook: tabbed interface + bars
Bloomberg: terminal monospace amber
LinkedIn: profile card + avatar
Dakota: pipeline progress stages
SEC: filing data display
Each has unique bg color and internal UI
PitchBook: tabbed interface + bars
Bloomberg: terminal monospace amber
LinkedIn: profile card + avatar
Dakota: pipeline progress stages
SEC: filing data display
Each has unique bg color and internal UI
Network LinesSVG paths with obstacle-aware routing
3-phase animation sequence:
1. White border orbit (600ms)
2. Line color sweep (650ms, 200ms delay)
3. Glow expansion (700ms)
Easing: cubic-bezier throughout
3-phase animation sequence:
1. White border orbit (600ms)
2. Line color sweep (650ms, 200ms delay)
3. Glow expansion (700ms)
Easing: cubic-bezier throughout
Card Interactioncard-active state: translateY(-2px) scale(1.012)
Enhanced shadow on hover
Source highlight: bg-size 0% → 100%
Shuffle deck cycles card variations
Staggered animation delays per card
Enhanced shadow on hover
Source highlight: bg-size 0% → 100%
Shuffle deck cycles card variations
Staggered animation delays per card
Sticky-Scroll Feature Panels
Platform features are presented as a left-sticky nav (280px) with right-scrolling detail panels. As user scrolls, the active nav item updates. Each panel shows a detailed UI mockup of that feature.
Sticky Navwidth: 280px, position: sticky, top: 120px
4 items: Investor Signals, Smart Outreach, Soeren, Meetings
Active item: --white text, accent number
Inactive: --white-20
Panel transition: opacity + translateY(8px) over 0.4s
4 items: Investor Signals, Smart Outreach, Soeren, Meetings
Active item: --white text, accent number
Inactive: --white-20
Panel transition: opacity + translateY(8px) over 0.4s
Feature PanelsEach panel = full UI mockup of feature
Outreach: email compose, channel picker (Email/LinkedIn/SMS/Phone/WhatsApp)
Signals: real-time signal monitoring with pulse dots
Meetings: calendar grid with scheduled meetings
Light background (#fff) context
Outreach: email compose, channel picker (Email/LinkedIn/SMS/Phone/WhatsApp)
Signals: real-time signal monitoring with pulse dots
Meetings: calendar grid with scheduled meetings
Light background (#fff) context
12 — Motion & Animation
All animations are scroll-triggered via IntersectionObserver. Motion is purposeful and restrained. Primary easing: cubic-bezier(0.16, 1, 0.3, 1) for spring-like entry. Stagger: 60ms between elements.
Section Label Sweeptrigger: IntersectionObserver, threshold 0.15
line: scaleX(0) → scaleX(1), origin left
duration: 300ms
easing: cubic-bezier(0.16, 1, 0.3, 1)
glow: box-shadow fades in simultaneously
text: --white-20 → --white-60
line: scaleX(0) → scaleX(1), origin left
duration: 300ms
easing: cubic-bezier(0.16, 1, 0.3, 1)
glow: box-shadow fades in simultaneously
text: --white-20 → --white-60
Text Reveal (Fade + Blur + Rise)initial: opacity 0, filter blur(8px), translateY(12px)
final: opacity 1, blur(0), translateY(0)
duration: 500ms
easing (transform): cubic-bezier(0.34, 1.56, 0.64, 1) [overshoot]
stagger: 60ms per element via CSS variable --d
final: opacity 1, blur(0), translateY(0)
duration: 500ms
easing (transform): cubic-bezier(0.34, 1.56, 0.64, 1) [overshoot]
stagger: 60ms per element via CSS variable --d
Hero Dashboard 3D Tiltinitial: perspective(1200px) rotateX(8deg)
on scroll: rotateX eases 8° → 0°
easing: quadratic ease-in-out
range: 0px to ~350px scroll
will-change: transform for GPU acceleration
"Star Wars crawl" effect
on scroll: rotateX eases 8° → 0°
easing: quadratic ease-in-out
range: 0px to ~350px scroll
will-change: transform for GPU acceleration
"Star Wars crawl" effect
Typewriter Effect~30ms per character
cursor: 1.5px wide, --accent color
blink: step-end 0.8s infinite
used in: email body, signal processing
cursor disappears after typing completes
cursor: 1.5px wide, --accent color
blink: step-end 0.8s infinite
used in: email body, signal processing
cursor disappears after typing completes
Scene Transitionsopacity: 0 → 1
transform: translateY(8px) → 0
duration: 0.4s ease
pointer-events: none on inactive scenes
scenes are absolutely positioned, inset: 0
transform: translateY(8px) → 0
duration: 0.4s ease
pointer-events: none on inactive scenes
scenes are absolutely positioned, inset: 0
Scroll Revealtrigger: IntersectionObserver, threshold 0.15
one-shot (unobserve after reveal)
class: .scroll-reveal → .in-view
works for entire sections, not just text
section stays revealed after first trigger
one-shot (unobserve after reveal)
class: .scroll-reveal → .in-view
works for entire sections, not just text
section stays revealed after first trigger
Film Grain Overlay (Global)body::before with fixed position, inset 0, z-index 9999, pointer-events none. SVG feTurbulence filter (fractalNoise, baseFrequency 0.9, numOctaves 4) at 3% opacity. Repeating 256px tile. Present on every page. Adds subtle analog texture.
13 — Product Marketing Patterns
How we present the product on the homepage. Trust logos, testimonial format, video placement, multi-step email capture, and the "Ask AI" external validation links.
Trust Logo Carousel
Akash
Matterway
CapOut
CabFare
AlphaSpan
Stretto
+ 18 more
Logo CarouselInfinite vertical scroll, CSS mask-image gradient fade at top/bottom edges. 24+ logos. SVG format, monochrome white at 20% opacity. Hover: opacity increases. No brand colors on partner logos — all rendered in neutral white.
Testimonial Format
“Fast, smart, accountable. They’re not just doing the work, they’re in it with us.”
Anthony Hsiao
Co-Founder, Matterway
Co-Founder, Matterway
▶
Testimonial SpecLeft: circular photo (56px) + serif italic quote + name/role attribution. Right: video with poster image + play button overlay. Below: stats row (30+ sources, 4x response, 6wk to meetings). Quote font: DM Serif Display italic.
Multi-Step Email Capture
Step 1
email@fund.com
Email capture
Step 2
First
Last
Name fields
Step 3
9am
10am
11am
1pm
2pm
Calendar picker
Conversion FlowHero: inline email → name → calendar picker. Modal: same 3 steps in centered overlay. Step 4: confetti animation (24 particles, copper/cream/green, 2-3.5s fall). Trust copy below CTA: checkmarks + "Quick setup call" / "We configure to your fund" / "Free trial. No credit card."
"Ask AI About Us" Links
Ask AI:
Perplexity
ChatGPT
Claude
Gemini
Grok
Ask AI PatternExternal links to AI search engines pre-prompted with PipelineRoad context. Appears in hero and footer. Icon-only on mobile, label + icon on desktop. Color: --white-40, hover: --accent. Part of our GEO (Generative Engine Optimization) strategy.
14 — Conversion Modal
The conversion modal is a 2-column overlay: left = social proof (testimonial + stats), right = 3-step form flow. Triggered by any CTA button across the site.
Left ColumnPhoto (56×56px circular) + testimonial quote
Serif italic for quote text
Author name + role + company
Divider line (--border)
Stats row: 30+ Sources | 4x Response | 6wk Meetings
Serif italic for quote text
Author name + role + company
Divider line (--border)
Stats row: 30+ Sources | 4x Response | 6wk Meetings
Right Column (Form)Step 1: Email input
Step 2: First name + Last name
Step 3: Calendar picker (weekdays, 10 time slots)
Step 4: Checkmark animation + "You're all set"
Trust items: 3 checkmark bullets below submit
Step 2: First name + Last name
Step 3: Calendar picker (weekdays, 10 time slots)
Step 4: Checkmark animation + "You're all set"
Trust items: 3 checkmark bullets below submit
Modal OverlayBackground: dark overlay with backdrop-filter blur
Close: X button, overlay click, Escape key
Step transitions: fade animation between steps
Calendar: 5-day week view, time slots 9am-3pm
Close: X button, overlay click, Escape key
Step transitions: fade animation between steps
Calendar: 5-day week view, time slots 9am-3pm
Confetti (Step 4)24 particles spawn from top
Colors: copper shades, cream, dark green
Random: position (5-95%), size, rotation, duration
Fall: 2-3.5s with slight rotation
Triggers on confirmation display
Colors: copper shades, cream, dark green
Random: position (5-95%), size, rotation, duration
Fall: 2-3.5s with slight rotation
Triggers on confirmation display
15 — Layout & Spacing
Key Dimensions
Page Width
1400px
--page-w — border-left/right: 1px --border
Content Width
720px
--content-w — article body max-width
Sidebar
200px
--sidebar-w — sticky TOC on homepage
Spacing Scale
XS — 8px
Icon gaps
SM — 12px
Card gaps, grid gap
MD — 16-20px
Paragraph margin, inner pad
LG — 24-32px
Section label mb, card pad
XL — 48px
Section horizontal pad, H2 mt
2XL — 72px
Section vertical padding
Border Radius Scale
4px
Buttons, tags
Buttons, tags
6px
Inputs, favicon
Inputs, favicon
8px
Cards, images
Cards, images
12px
Dashboard, hero
Dashboard, hero
50%
Avatars
Avatars
Nav Bar
Sticky Nav Specposition: sticky, top: 0, z-index: 100. Background: rgba(4,10,7,0.92) with backdrop-filter: blur(16px). Border-bottom: 1px solid --border. Padding: 16px 32px. Left: logo (SVG P + Outfit wordmark). Right: nav links (--white-40, hover --white) + CTA button (copper gradient + glow shadow).
16 — Voice & Tone
We Sound Like
✓ A practitioner peer who manages capital
✓ Numbers woven in, never decorative
✓ Calm authority (Dakota + Affinity + Campbell Lutyens)
✓ Institutional but approachable
✓ Short sentences. Each earns the next.
We Never Sound Like
✗ A SaaS pitch deck
✗ Buzzword-heavy (synergy, leverage, ecosystem)
✗ Casual startup tone
✗ Vendor pitching a prospect
✗ Over-promising or hyperbolic
Positioning
PipelineRoad is the AI-powered capital raising copilot for emerging fund managers. Platform + managed service. Not just software. Not just service. Both.
Key Terminology
Capital raising copilotPrimary descriptor. Not "fundraising platform."
Emerging fund managerOur ICP. Fund I/II/III raising $50M-$500M.
Thesis-driven matchingAI matches fund thesis to LP mandates. Not spray-and-pray.
White-gloveManaged service layer. Human team + AI platform.
SoerenAI agent inside platform. A feature, like Clippy. Mentioned once max.
LP intelligence30+ institutional data sources. Not "database" alone.
Litmus Test
"If it sounds like something you'd say to a client already paying you, it's institutional voice. If it sounds like you're convincing a prospect to get on a call, it's vendor voice. We always use institutional voice."
17 — Slide Backgrounds & Templates
Slide templates for investor decks, pitch presentations, and internal strategy. All slides use the PipelineRoad dark mode aesthetic. 16:9 aspect ratio. Download as SVG and adapt in Figma or PowerPoint.
Title Slide
Content Slide
Divider & Section Break
Slide Rules
Dimensions16:9 aspect ratio (1920×1080px)
Logo: top-left, 12-16px
Copper line: bottom edge, 2px
"Confidential" tag: top-right, mono 0.5rem
Logo: top-left, 12-16px
Copper line: bottom edge, 2px
"Confidential" tag: top-right, mono 0.5rem
TypographySection labels: JetBrains Mono, copper
Headlines: DM Serif Display, --white
Body: Inter 400, --white-60
Stats: DM Serif Display, copper
Headlines: DM Serif Display, --white
Body: Inter 400, --white-60
Stats: DM Serif Display, copper
BackgroundsPrimary: #060e0a + radial copper glow
Alt: #f0ebe4 (sand) for contrast
Split: 50/50 sand + dark
Never use pure white or pure black
Alt: #f0ebe4 (sand) for contrast
Split: 50/50 sand + dark
Never use pure white or pure black
19 — Asset Downloads
Download brand assets for use in presentations, marketing materials, and design work. All SVGs are resolution-independent and can be opened in Figma, Illustrator, or any design tool.
Logo Package
Color Palette
Icon Set
Social Templates
Typography
PIPELINEROAD
Brand & Design System — v3.0 — March 2026 — Internal use only
Social media templates and ad creative for LinkedIn, Twitter/X, and paid campaigns. All follow PipelineRoad brand guidelines. Full color imagery where applicable. Dark backgrounds with copper accents dominate.
LinkedIn Post Graphics (1200×628)
convert to second meetings
LinkedIn Paid Ad (1200×628)
is 14 days away.
Twitter/X Header (1500×500)
OG Image / Blog Thumbnail (1200×630)
Social / Ad Rules
LinkedIn ad: 1200×628px
Twitter header: 1500×500px
OG image: 1200×630px
Instagram square: 1080×1080px
Copper line: bottom 2px edge
Max 2 type sizes per graphic
CTA button: copper gradient, only on ads
Never crowd the frame — generous whitespace
Blog promo: title + "pipelineroad.com/blog"
Ads: one value prop + CTA, never more
Keep under 40 characters for headline
Author: "By Jordan Stokes" on content