v1.0 — Brand System

The Renegade
brand system.

Logos, color, typography, and components that power the Renegade Talent Group identity. Sales • Leadership • Operations — Home-Improvement & Construction Talent.

RTG · LOCKUP · 01
Renegade Talent Group full logo
02Palette

Color

Navy anchors authority. Orange ignites action. Neutrals carry the system.

#14233A
Navy
#14233A
rgb(20, 35, 58)
Primary brand color. Headlines, surfaces, key UI.
#0F1B2D
Navy Deep
#0F1B2D
rgb(15, 27, 45)
Dark backgrounds, hover/active states for navy.
#E8521E
Renegade Orange
#E8521E
rgb(232, 82, 30)
Accent, CTAs, motion-streak motif.
#F15A24
Orange Bright
#F15A24
rgb(241, 90, 36)
Highlights, hover sheen, energetic moments.
#FFFFFF
White
#FFFFFF
rgb(255, 255, 255)
Primary background.
#F5F6F8
Warm Off-White
#F5F6F8
rgb(245, 246, 248)
Alternating section backgrounds.
#4A5568
Slate
#4A5568
rgb(74, 85, 104)
Body text on light surfaces.
#C9D1D9
Light Gray
#C9D1D9
rgb(201, 209, 217)
Borders, dividers, disabled states.
03Typography

Type System

Saira Condensed for athletic, bold headlines. Inter for clean, readable body copy.

TYPE · SCALE
Display
BUILD THE TEAM
Saira Condensed · 800 · 72px / 0.9
H1
Renegade Headline
Saira Condensed · 800 · 48px / 0.95
H2
Section Title
Saira Condensed · 700 · 30px / 1.1
H3
Subheading
Saira Condensed · 700 · 20px / 1.2
Body
Direct, confident copy that does the work. We talk like the trade — clear, fast, and to the point.
Inter · 400 · 16px / 1.6
Caption
Supporting detail · metadata · UI labels
Inter · 600 · 12px / 1.4
04Components

Buttons

Orange drives action. Navy holds the line. Ghost stays quiet.

primary
Highest emphasis.
default
hover
disabled
secondary
Medium emphasis, structural.
default
hover
disabled
ghost
Low emphasis, inline.
default
hover
disabled
05Components

Cards

Brand-styled surfaces with the angular motion accent applied at corners and edges.

Blade Card

Built to Move Fast

Square corners, clipped bottom-right blade, and a hard offset shadow. Pressed-in on hover.

#RTG-024
Image Card

Renegade Placements

Hero card with navy media area, diagonal motif, and an orange corner blade.

Stat Card
247
Placements / quarter
▲ +18% QoQ
Featured
Ribbon Card

Top Performer

Diagonal ribbon flag for callouts, awards, or featured items.

Split
Before
/ After
21 Days
"

They placed our VP of Sales in 18 days. The guy is a renegade.

JC
J. Carpenter
CEO · BuildCo
Tier · 02
$12k/mo
  • Dedicated recruiter
  • Quiet search protocol
  • 90-day guarantee
JD
Jordan Davis
VP · Operations

12 yrs scaling field teams. Roofing, remodel, MEP. Available — limited intro slots.

SalesLead
03
Step Card

Vet & Verify

Numbered badge sits over the corner — perfect for process flows and checklists.

Dark CTA Band

Quiet searches.
Loud results.

Use the dark band sparingly — for calls to action, key statements, or section breaks. Pair with the caution-tape edge and blueprint grid for blue-collar grit.

▸ 18-day average placement
06Components

Form Elements

Display only — these are styled examples, not functional inputs.

FORM · 06
07Components

List Items

Five list patterns. Use them to break up dense copy, organize features, and signal hierarchy.

Numbered Checklist
Sequenced steps, ranked qualifications, or ordered must-haves.
  • 01Industry Operator Background
  • 02Confidential Process
  • 03Verified Track Record
  • 04Long-Term Fit
Square Bullet
Default bullet list. Tight, scannable, on-brand.
  • Appointment Setters
  • In-Home Sales Closers
  • Sales Managers
  • Sales Directors
PULL LIST
Quote List
Orange rail. For principles, manifestos, or quoted standards.
  • Confidential
  • Industry-Specific
  • Relationship-Driven
  • Built By Operators
Status List
Yes / no compare. Use for "what we do vs. what we don't".
  • Operator-built process
  • Confidential candidate search
  • Mass resume blast
  • Public job-board exposure
Tag List
Inline chips for roles, specialties, and filters.
SalesLeadershipOperationsProductionServiceMarketingRecruitingFinance
08Motifs

Accents & Graphic Elements

The diagonal motion-streak echoes the speed lines in the logo badge. Use it sparingly as a recurring signature.

Motion Streak

The primary signature motif. Use at low opacity over navy or as a top-edge accent.

Angled Divider

Use between major sections in long-form content to introduce angular energy.

Orange Underline

Hire the renegades.

A short orange underline beneath a key phrase punctuates the headline.

Bar Mark
Sales • Leadership • Operations
Home-Improvement & Construction Talent

Vertical orange bar pairs naturally with tagline lockups (see dark logo lockup).

09Voice

Voice & Tone

Bold. Direct. Confident. No-nonsense. Discreet.

Bold
Direct
Confident
No-Nonsense
Discreet
We SayWe place trade leaders who close.
We Don'tWe synergize talent acquisition pipelines.
We SayRoofers, remodelers, GMs — we know the bench.
We Don'tIndustry-leading recruitment professionals.
We SayThree weeks. The right hire. Done.
We Don'tStreamlined end-to-end staffing solutions.
We SayQuiet searches. Loud results.
We Don'tConfidentially-managed executive discovery.
10Imagery

Photo Style

Authentic real-world imagery: actual tradespeople, job sites, and sales environments. Never cheesy stock. Strong contrast, warm light when possible, candid moments over posed shots.

RTG · PHOTO
Image Placeholder
On the Job
Real tradespeople actively working — measuring, framing, finishing.
RTG · PHOTO
Image Placeholder
Leadership at Work
Site walks, client meetings, decisions being made in the field.
RTG · PHOTO
Image Placeholder
The Sales Floor
Showrooms, dealer meetings, handshakes that close the deal.
10 — Reference

Design Tokens

Copy these CSS variables into any project to reuse the Renegade brand system.

/* Color */
--background: #FFFFFF;
--foreground: #14233A;
--surface:    #F5F6F8;
--navy:       #14233A;
--navy-deep:  #0F1B2D;
--orange:     #E8521E;
--orange-bright: #F15A24;
--slate:      #4A5568;
--mid:        #6B7785;
--light:      #C9D1D9;
--border:     #E5E8EC;
/* Typography */
--font-display: "Saira Condensed", sans-serif;
--font-sans:    "Inter", sans-serif;

/* Scale */
display: 72px / 0.9   · 800
h1:      48px / 0.95  · 800
h2:      30px / 1.1   · 700
h3:      20px / 1.2   · 700
body:    16px / 1.6   · 400
caption: 12px / 1.4   · 600 uppercase

/* Radius */
--radius-lg: 0.75rem;