Visual Guidelines — Savage Studio

Brand Identity

Logo Usage

  • Primary: Full "SAVAGE STUDIO" wordmark with gradient
  • Secondary: "SS" monogram
  • Clearspace: Minimum 20% of logo width on all sides

Color Palette

Brand Colors

NameHexRGBUsage
Champagne#C9A962201, 169, 98Primary accent, CTAs, highlights
Gold#D4AF37212, 175, 55Hover states, premium indicators
Brass#B5956B181, 149, 107Secondary accent, muted gold

Background Colors

NameHexRGBUsage
Obsidian#0A0A0A10, 10, 10Primary background
Onyx#14141420, 20, 20Cards, elevated surfaces
Charcoal#1C1C1C28, 28, 28Subtle backgrounds
Graphite#2A2A2A42, 42, 42Borders, dividers

Text Colors

NameHexRGBUsage
Pearl#F5F5F5245, 245, 245Primary text on dark
Silver#A0A0A0160, 160, 160Secondary text, labels
Smoke#6B6B6B107, 107, 107Tertiary text, placeholders

Semantic Colors

NameHexRGBUsage
Crimson#DC2626220, 38, 38Errors, sold out, urgent
Emerald#10B98116, 185, 129Success, available, confirmed
Amber#F59E0B245, 158, 11Warnings, limited availability

Gradients

Primary Gradient:

background: linear-gradient(135deg, #C9A962 0%, #D4AF37 50%, #B5956B 100%);

Text Gradient:

background: linear-gradient(135deg, #C9A962 0%, #D4AF37 50%, #B5956B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

CSS Variables

:root {
  /* Brand */
  --color-primary: #C9A962;
  --color-primary-hover: #D4AF37;
  --color-accent: #B5956B;

  /* Backgrounds */
  --color-bg: #0A0A0A;
  --color-bg-elevated: #141414;
  --color-bg-subtle: #1C1C1C;
  --color-border: #2A2A2A;

  /* Text */
  --color-text: #F5F5F5;
  --color-text-muted: #A0A0A0;
  --color-text-subtle: #6B6B6B;

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
}

Typography

Font Stack

PurposeFontFallback
Display/HeadlinesInter Boldsystem-ui, sans-serif
BodyInter Regularsystem-ui, sans-serif
Code/TechnicalJetBrains Monomonospace

Type Scale

ElementSizeWeightLine Height
H1clamp(1.875rem, 5vw, 3.75rem)7001.1
H2clamp(1.5rem, 3vw, 2.25rem)7001.2
H3clamp(1.25rem, 2vw, 1.5rem)6001.3
H4clamp(1.125rem, 1.5vw, 1.25rem)6001.4
Body1rem (16px)4001.6
Small0.875rem (14px)4001.5
Caption0.75rem (12px)4001.4

Headline Treatment

  • Bold weight
  • Title case or ALL CAPS for impact
  • Letter spacing: -0.02em for large headlines
  • Champagne/Gold gradient for hero text

Photography Style

Event Photography

Technical:

  • High contrast
  • Deep blacks preserved
  • Champagne/gold highlights when possible
  • Low-light capable (ISO 1600-6400)

Composition:

  • Capture energy and movement
  • Natural moments over posed
  • Crowd perspective + artist perspective
  • Include venue/space context
  • Dramatic lighting preferred

Subjects:

  • Artists performing
  • Crowd reactions (genuine)
  • Production elements (lights, DJ booth)
  • Candid community moments
  • VIP experiences

Portrait Photography

Style:

  • Dark background (Obsidian or Onyx)
  • Dramatic side lighting
  • Authentic expression
  • Champagne/gold accent lighting when possible

Use for:

  • Artist features
  • Founder/Partner photos
  • Team photos
  • Promoter spotlights

Avoid

  • Over-saturated colors
  • Heavy Instagram filters
  • Fake candids
  • Poor lighting
  • Cluttered compositions
  • Generic stock photos

Video Style

Event Highlights

Length: 30-60 seconds (social), 2-3 minutes (YouTube)

Elements:

  • Quick cuts synchronized to beat
  • Mix of wide shots + close-ups
  • Audio from actual event
  • Minimal text overlays
  • Champagne color grade

Pacing:

  • Open with strongest moment
  • Build energy through middle
  • End on emotional high

Documentary/Long-form

Length: 5-15 minutes

Elements:

  • Interviews with natural audio
  • B-roll of events/spaces
  • Story arc (setup, journey, payoff)
  • Branded graphics for transitions
  • Consistent color treatment

Graphic Design

Event Flyers

Layout:

SAVAGE STUDIO PRESENTS
━━━━━━━━━━━━━━━━━━━━━
[EVENT NAME]
featuring
[HEADLINER - largest, champagne]
[Support 1] • [Support 2]

[Date] • [Venue] • [Price]

Requirements:

  • Savage Studio logo top or bottom
  • Series branding prominent
  • Date, venue, price clearly visible
  • Artist names in visual hierarchy
  • Dark background (Obsidian)
  • Champagne accent on key elements

Social Graphics

Instagram Post:

  • Square (1080x1080) or Portrait (1080x1350)
  • Text readable at thumbnail size
  • Brand colors (Champagne/Gold on Obsidian)
  • Logo subtle but present

Instagram Story:

  • 1080x1920
  • Key info in center third (safe zone)
  • Interactive elements when possible
  • Consistent visual treatment

Digital Assets

Website

Aesthetic:

  • Dark theme (Obsidian background)
  • Minimal, clean layout
  • Champagne accents on CTAs
  • Fast loading
  • Mobile-first

Elements:

  • Hero with current/next event
  • Event calendar
  • About section
  • Artist roster
  • Contact/booking

Email

From name: Savage Studio Template: Dark theme matching website Accent: Champagne for buttons/links Tone: Insider, exclusive, not salesy


Merchandise (Future)

Products

  • T-shirts (black with gold print)
  • Hoodies (black with embroidered logo)
  • Hats (snapback, dad hat styles)
  • Stickers (die-cut logo)
  • Posters (event-specific)

Design Rules

  • Logo prominent but tasteful
  • Quality blanks (Comfort Colors, etc.)
  • Limited runs create scarcity
  • Event-specific designs drive urgency
  • Always dark base colors

Brand Applications

Event Production

Stage:

  • Branded backdrop (logo + gradient)
  • Logo on DJ booth/stand
  • Champagne/gold lighting accents

Entry:

  • Branded signage
  • Professional check-in setup
  • Wristbands with branding (larger events)

Print

Business Cards:

  • Black card stock
  • Champagne foil logo
  • Minimal info (name, title, contact)

Posters:

  • Event-specific design
  • QR code to tickets
  • Clear date/venue/price
  • Premium paper stock

What To Avoid

Don'tWhy
Bright/neon colorsDoesn't match premium brand
White backgroundsWe're dark-theme only
Generic fontsDamages recognition
Low-res imagesQuality matters
Cluttered designsLess is more
Stock photosWe create our own
Red as accentNot our brand color

Asset Management

Storage: Google Drive / Synology NAS

Folder Structure:

/savage-studio-assets/
├── /logos/
│   ├── /primary/
│   ├── /secondary/
│   └── /variations/
├── /photos/
│   ├── /events/[date-event-name]/
│   ├── /artists/
│   └── /team/
├── /videos/
│   ├── /events/
│   └── /social/
├── /graphics/
│   ├── /flyers/
│   ├── /social/
│   └── /templates/
└── /brand/
    ├── /guidelines/
    └── /press-kit/

Naming Convention: [date]-[project]-[type]-[number].ext

Example: 2024-12-15-savage-sessions-vol1-photo-001.jpg

Interactive Color Palette

Brand Colors

Champagne
#C9A962
RGB: 201, 169, 98
Primary accent, CTAs
Gold
#D4AF37
RGB: 212, 175, 55
Hover states, premium
Brass
#B5956B
RGB: 181, 149, 107
Secondary accent

Background Colors

Obsidian
#0A0A0A
RGB: 10, 10, 10
Primary background
Onyx
#141414
RGB: 20, 20, 20
Cards, elevated
Charcoal
#1C1C1C
RGB: 28, 28, 28
Subtle backgrounds
Graphite
#2A2A2A
RGB: 42, 42, 42
Borders, dividers

Text Colors

Pearl
#F5F5F5
RGB: 245, 245, 245
Primary text
Silver
#A0A0A0
RGB: 160, 160, 160
Secondary text
Smoke
#6B6B6B
RGB: 107, 107, 107
Subtle text

Semantic Colors

Crimson
#DC2626
RGB: 220, 38, 38
Errors, sold out
Emerald
#10B981
RGB: 16, 185, 129
Success, available
Amber
#F59E0B
RGB: 245, 158, 11
Warnings, limited

Primary Gradient

Savage Studio Gradient
linear-gradient(135deg, #C9A962 0%, #D4AF37 50%, #B5956B 100%)