Brand Guide

The complete Style Driven brand identity system. Colors, typography, voice, logo, components, spacing.

Brand Guidelines

This is not a brand book nobody reads. It is a reference. For us, for our team, and for any system or person representing Style Driven. Read it once. Then use it every time something feels off.


01 --- Who We Are

Style Driven is a full-service creative agency built by a creative, not a businessman who hired some.

Nearly 20 years of freelance work. A swiss army knife background --- design, photography, commercial film, software engineering. That breadth did not stay breadth --- it compounded into creative direction. The ability to know what good looks like across every discipline, translate what a client actually means into what a team actually builds, and hold a high standard on both sides of that conversation.

Since 2016, the right people started showing up. Not just talented --- the right kind of talented. Specialists who give a damn. By 2026 that roster became a real team: nearly 10 people across the US, Canada, the Philippines, and Brazil. Full-stack production --- design, photo, video, web, systems, creative strategy --- one roof, one standard.

We started as the production crew for other agencies. We are growing into the creative and strategic partner for businesses who are done outsourcing their identity to whoever is cheapest.


02 --- What We Do

Full-stack creative and strategic production. Everything a business needs to look like what it actually is.

The Stack

DisciplineScope
DesignBrand identity, print, digital, campaigns
PhotographyCommercial, product, editorial, on-location
VideoCommercial film, content, direction, post
Web + SystemsDev, UX, automation, integrations
Creative StrategyPositioning, messaging, offer framing

Agency Partners

The production crew behind other agencies. We show up, execute at a high level, don't make it weird. Reliability, quality, range, zero drama.

Direct Retainers

Ongoing creative and strategic partnership with businesses who need more than a one-off. We become part of how they operate --- not a vendor they call.


03 --- Who We're For

Agencies

Mid-to-large agencies that need a production team without the overhead. They need people who can plug in, communicate like professionals, and deliver without hand-holding.

Hiring for: reliability, quality, range, and zero drama.

Businesses

Founders and operators who have built something real and need their brand to reflect that. They want a creative partner, not another vendor.

Hiring for: someone with opinions who tells them when something is wrong.

Not For

Clients who want cheap. Clients who have hired five agencies and it was always the agency's fault. Clients who need to approve every pixel before we can move. We are not hard to work with. We are just specific about who we work with.


04 --- Why We Win

Not "better quality." Everyone says that. Here is the actual answer.

  1. The person running this has done the work --- every role, every discipline. We don't ask the team to do things we can't do ourselves. That changes the standard.
  2. We bridge the gap between what a client says and what needs to happen creatively. Most agencies are good at one side. We live in both.
  3. The team is built, not assembled. Years with the right people. We know how they work under pressure.
  4. Range. Design, photo, video, web, strategy --- one roof, one standard, one point of contact. No managing five vendors.
  5. We have opinions and we use them. Clients don't always know what they need. We do. We say so.

05 --- Voice + Tone

Imagine walking into a tattoo shop and your artist is a beef head covered head to toe, talks shit the whole time, but never fully crosses the line of professionalism. Underneath it is genuine expertise and genuine care about the work. You'd hire them again without thinking. You'd grab a beer with them after.

The Vibe

  • Confident bordering on cocky, but earned --- not performative
  • Talks to you like a peer, not a prospect
  • Casual language, maybe a little crude, but never sloppy
  • Dry humor, light shit-talk, zero fluff
  • Genuine expertise and genuine care about the work
  • You'd grab a beer with them. You'd trust them with something permanent.

What That Means in Writing

  • Short sentences. Fragments when they hit harder.
  • No corporate filler --- leverage, solutions, synergy, never
  • Swears used sparingly for punch, not as filler
  • Opinions stated as facts (because they basically are)
  • Self-aware humor, never self-deprecating about the work
  • The reader feels like they are being let in, not sold to

The Gut Check

Does this sound like someone who knows exactly what they are doing and does not need to convince you of it? If yes, it is ready. If it sounds like it is trying --- rewrite it.


06 --- Writing Rules

When in doubt, read it out loud. If it sounds like a LinkedIn post, rewrite it.

Always

  • Write like you are talking to someone who is smart and busy
  • Lead with the point --- bury nothing
  • Use the simplest word that does the job
  • Say what something is, not what it is "designed to" do
  • Have a point of view --- wishy-washy copy is invisible copy
  • Keep it short unless it genuinely needs to be longer

Never

  • Leverage, solutions, synergy, ecosystem, holistic, robust --- banned
  • Passive voice when active will do
  • Explaining the joke
  • Underselling the work to seem humble
  • Exclamation points that manufacture excitement the copy did not earn
  • "A team of passionate creatives" or anything that rhymes with it

07 --- Visual Identity

This is the actual system. Not a placeholder. Learn it, use it, don't improvise.

Logo System

Four logo variants across four color contexts. Each context is designed for a specific background.

Logo Variants

VariantDescription
HorizontalPrimary layout. Brandmark left, wordmark right.
StackedBrandmark above wordmark. For square or vertical placements.
Icon OnlyBrandmark alone. Favicons, avatars, small-format use.
WordmarkText only. When the brandmark has already been established in context.

Logo Color Contexts

ContextBackgroundDescription
Lime on Dark#0A0A0A (Dark)Primary --- dark backgrounds
Black on Light#EEEBE8 (Cream)Monochrome --- light backgrounds
Color on Light#FFFFFF (White)Red brandmark --- light/white backgrounds
White on Red#F02D3A (Accent Red)Accent --- red backgrounds

Logo Color Rules

  • Dark backgrounds: Lime (#E3FE56) brandmark + dot, white (#FDFDFD) text.
  • Light backgrounds (mono): All black (#0A0A0A). For single-color / monochrome applications.
  • Light backgrounds (color): Red (#F02D3A) brandmark + dot, black (#0A0A0A) text. Lime is too light on white, so red carries the brand color role.
  • Accent backgrounds: All white for maximum contrast on red.

Logo Rules

  • Use approved files only. No recreating, no outlining from memory, no close enough.
  • Minimum clear space: the height of the "S" on all sides.
  • Never stretch, rotate, recolor, add shadows or effects.
  • Don't use the dark-background version on a light background. The right variant exists --- use it.

Color System

Dark-mode first. Everything is built around #0A0A0A. Lime is the signal. Red is emergency-only.

NameHexCSS VariableUsageNotes
Brand Lime#E3FE56--brandCTAs, highlights, logoWorkhorse brand color
Dark#0A0A0A--darkPrimary backgroundDefault background
White#FFFFFF--foregroundText on darkPrimary text color
Cream#EEEBE8--creamLight sections, cardsFor contrast contexts
Gray#595656--graySecondary, mutedSecondary text, borders
Accent Red#F02D3A--accentCritical moments onlyUse extremely sparingly

Color Usage Rules

  • Site is dark-mode by default. Dark (#0A0A0A) is the primary background.
  • Brand lime (#E3FE56) is the workhorse color for CTAs, highlights, and brand marks.
  • Accent red (#F02D3A) is reserved exclusively for moments that truly demand attention. Use extremely sparingly.
  • Cream (#EEEBE8) for light-context sections or card backgrounds where contrast is needed.
  • Gray (#595656) for secondary text, muted states, and subtle borders.

Typography

Two typefaces. Used with discipline. Inter Black Italic for display. Geist Mono as texture. Inter Regular for everything readable.

Font Roles

RoleTypefaceCaseNotes
Primary display / headlinesInter Black ItalicALL CAPSBold, high-energy voice. Short, punchy, 1--2 lines max.
Alternative headlineGeist Mono Regularall lowercaseA "different texture" moment: side headers, feature names, punchy statements. Mono is a spice, not a meal.
Body / UI / everything readableInter Regularsentence caseThe default. Every paragraph, every description.
Labels / micro headers / buttonsInter RegularALL CAPS, wide trackingNavigation, tags, small descriptors.
Code / mono accentsGeist Mono Regularas-isInline code, technical labels, decorative mono texture.

Type Hierarchy

LevelRoleTypefaceSpecs
1Eyebrow / kickerInter RegularALL CAPS, 12--14px, tracking +0.08--0.14em
2H1 / hero headlineInter Black ItalicALL CAPS, 52--72px, line-height 0.95--1.05
3H2 / section headlineInter Black ItalicALL CAPS, 32--44px, line-height 1.05--1.15
4Alt headline / calloutGeist Mono Regularall lowercase, 24--36px, line-height 1.2--1.35
5Body textInter Regularsentence case, 16--18px, line-height 1.45--1.65
6Small body / captionsInter Regular12--14px, line-height 1.35--1.5
7Labels / tags / buttonsInter RegularALL CAPS, 12--14px, tracking +0.08--0.14em
BonusMono / codeGeist Mono RegularContext-dependent sizing

Typography Consistency Rules

  • One page = one dominant voice. If you use Inter Black Italic as the hero, don't sprinkle Geist Mono everywhere "for fun."
  • Max 2 typefaces per layout section. Usually: Headline + Body.
  • Vertical rhythm: space sections in multiples of 8px (or 4pt in print).
  • Alignment: stick to one primary alignment per page (left is safest). Center only for deliberate hero moments.
  • Line length: target 55--80 characters per line for body text.

08 --- UI Components

Buttons

Variants

VariantUsage
PrimaryMain CTAs. Brand lime background, dark text.
OutlineSecondary actions. Border only, no fill.
SecondaryTertiary actions. Muted background.
GhostMinimal footprint. No border, no fill until hover.
LinkInline text-style actions. Underline on hover.
DestructiveDangerous or irreversible actions. Red.

Sizes

SizeUsage
SmallCompact contexts, tables, inline actions
DefaultStandard forms, cards, general use
LargeHero CTAs, primary page actions

Form Elements

  • Text Input --- Standard single-line field with placeholder text
  • Email Input --- Typed for email validation
  • Disabled Input --- Grayed out, non-interactive state
  • Textarea --- Multi-line input for longer content
  • Switch / Toggle --- Binary on/off controls

Badges

VariantUsage
BrandDefault. Brand lime. Primary categorization.
SecondaryMuted. Lower-emphasis tags.
OutlineBorder-only. Minimal visual weight.
DestructiveRed. Warnings, errors, critical status.

Cards

Standard card anatomy: CardHeader (with CardTitle and CardDescription) + CardContent. Used for service listings, portfolio items, feature blocks. Border is foreground/10, rounded corners at xl radius.


09 --- Spacing & Layout

Base Scale

All spacing is built on an 8px grid.

TokenValueUsage
4px0.25remMicro gaps, icon padding
8px0.5remTight element spacing
12px0.75remCompact internal padding
16px1remStandard element gap
20px1.25remComfortable internal padding
24px1.5remSection internal padding
32px2remSection gaps
48px3remMajor section spacing

Layout Rules

  • Content max-width: 6xl (72rem)
  • Page padding: px-6
  • Section spacing: py-24 / py-32

Design Rules

  • Minimal by default. Every element earns its place.
  • Dark mode first. Light contexts used intentionally.
  • One clear CTA per view. Don't split attention.
  • Brand lime is the signal color. Use it to guide eyes.
  • Red is emergency-only. If everything is red, nothing is.
  • Copy is UI. Words do more work than graphics.

10 --- What We Are Not

The brand is defined as much by what it is not.

  • We are not a cheap option. We don't compete on price and we don't apologize for that.
  • We are not a yes machine. We push back when something's wrong.
  • We are not a vendor. We're a partner. That difference shows up in how we communicate.
  • We are not trying to impress anyone. We let the work do that.
  • We are not corporate. We don't talk like it, dress it up like it, or perform professionalism for people who confuse formal with competent.
  • We are not a full-service agency that outsources everything and manages up. We do the work.

11 --- The One Line

We build the brand. We create the assets. We make the presence consistent.

The Three-Bucket Framework

BucketWhat It Means
BrandWhat people believe --- identity, voice, guidelines
PresenceWhere it shows up --- digital, physical, collateral
AssetsWhat gets made --- evergreen + campaign
RecognitionThe compounding result

Brand -> Presence -> Assets -> Recognition

Everything we do maps to one of these three buckets. Every touchpoint is a deposit. Inconsistency is a withdrawal.

Every design decision should build recognition. If it does not make someone remember you, it is decoration.