- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
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
| Discipline | Scope |
|---|---|
| Design | Brand identity, print, digital, campaigns |
| Photography | Commercial, product, editorial, on-location |
| Video | Commercial film, content, direction, post |
| Web + Systems | Dev, UX, automation, integrations |
| Creative Strategy | Positioning, 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.
- 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.
- 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.
- The team is built, not assembled. Years with the right people. We know how they work under pressure.
- Range. Design, photo, video, web, strategy --- one roof, one standard, one point of contact. No managing five vendors.
- 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
| Variant | Description |
|---|---|
| Horizontal | Primary layout. Brandmark left, wordmark right. |
| Stacked | Brandmark above wordmark. For square or vertical placements. |
| Icon Only | Brandmark alone. Favicons, avatars, small-format use. |
| Wordmark | Text only. When the brandmark has already been established in context. |
Logo Color Contexts
| Context | Background | Description |
|---|---|---|
| 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.
| Name | Hex | CSS Variable | Usage | Notes |
|---|---|---|---|---|
| Brand Lime | #E3FE56 | --brand | CTAs, highlights, logo | Workhorse brand color |
| Dark | #0A0A0A | --dark | Primary background | Default background |
| White | #FFFFFF | --foreground | Text on dark | Primary text color |
| Cream | #EEEBE8 | --cream | Light sections, cards | For contrast contexts |
| Gray | #595656 | --gray | Secondary, muted | Secondary text, borders |
| Accent Red | #F02D3A | --accent | Critical moments only | Use 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
| Role | Typeface | Case | Notes |
|---|---|---|---|
| Primary display / headlines | Inter Black Italic | ALL CAPS | Bold, high-energy voice. Short, punchy, 1--2 lines max. |
| Alternative headline | Geist Mono Regular | all lowercase | A "different texture" moment: side headers, feature names, punchy statements. Mono is a spice, not a meal. |
| Body / UI / everything readable | Inter Regular | sentence case | The default. Every paragraph, every description. |
| Labels / micro headers / buttons | Inter Regular | ALL CAPS, wide tracking | Navigation, tags, small descriptors. |
| Code / mono accents | Geist Mono Regular | as-is | Inline code, technical labels, decorative mono texture. |
Type Hierarchy
| Level | Role | Typeface | Specs |
|---|---|---|---|
| 1 | Eyebrow / kicker | Inter Regular | ALL CAPS, 12--14px, tracking +0.08--0.14em |
| 2 | H1 / hero headline | Inter Black Italic | ALL CAPS, 52--72px, line-height 0.95--1.05 |
| 3 | H2 / section headline | Inter Black Italic | ALL CAPS, 32--44px, line-height 1.05--1.15 |
| 4 | Alt headline / callout | Geist Mono Regular | all lowercase, 24--36px, line-height 1.2--1.35 |
| 5 | Body text | Inter Regular | sentence case, 16--18px, line-height 1.45--1.65 |
| 6 | Small body / captions | Inter Regular | 12--14px, line-height 1.35--1.5 |
| 7 | Labels / tags / buttons | Inter Regular | ALL CAPS, 12--14px, tracking +0.08--0.14em |
| Bonus | Mono / code | Geist Mono Regular | Context-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
| Variant | Usage |
|---|---|
| Primary | Main CTAs. Brand lime background, dark text. |
| Outline | Secondary actions. Border only, no fill. |
| Secondary | Tertiary actions. Muted background. |
| Ghost | Minimal footprint. No border, no fill until hover. |
| Link | Inline text-style actions. Underline on hover. |
| Destructive | Dangerous or irreversible actions. Red. |
Sizes
| Size | Usage |
|---|---|
| Small | Compact contexts, tables, inline actions |
| Default | Standard forms, cards, general use |
| Large | Hero 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
| Variant | Usage |
|---|---|
| Brand | Default. Brand lime. Primary categorization. |
| Secondary | Muted. Lower-emphasis tags. |
| Outline | Border-only. Minimal visual weight. |
| Destructive | Red. 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.
| Token | Value | Usage |
|---|---|---|
4px | 0.25rem | Micro gaps, icon padding |
8px | 0.5rem | Tight element spacing |
12px | 0.75rem | Compact internal padding |
16px | 1rem | Standard element gap |
20px | 1.25rem | Comfortable internal padding |
24px | 1.5rem | Section internal padding |
32px | 2rem | Section gaps |
48px | 3rem | Major 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
| Bucket | What It Means |
|---|---|
| Brand | What people believe --- identity, voice, guidelines |
| Presence | Where it shows up --- digital, physical, collateral |
| Assets | What gets made --- evergreen + campaign |
| Recognition | The 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.
On This Page
Brand Guidelines01 --- Who We Are02 --- What We DoThe StackAgency PartnersDirect Retainers03 --- Who We're ForAgenciesBusinessesNot For04 --- Why We Win05 --- Voice + ToneThe VibeWhat That Means in WritingThe Gut Check06 --- Writing RulesAlwaysNever07 --- Visual IdentityLogo SystemLogo VariantsLogo Color ContextsLogo Color RulesLogo RulesColor SystemColor Usage RulesTypographyFont RolesType HierarchyTypography Consistency Rules08 --- UI ComponentsButtonsVariantsSizesForm ElementsBadgesCards09 --- Spacing & LayoutBase ScaleLayout RulesDesign Rules10 --- What We Are Not11 --- The One LineThe Three-Bucket Framework