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
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Champagne | #C9A962 | 201, 169, 98 | Primary accent, CTAs, highlights |
| Gold | #D4AF37 | 212, 175, 55 | Hover states, premium indicators |
| Brass | #B5956B | 181, 149, 107 | Secondary accent, muted gold |
Background Colors
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Obsidian | #0A0A0A | 10, 10, 10 | Primary background |
| Onyx | #141414 | 20, 20, 20 | Cards, elevated surfaces |
| Charcoal | #1C1C1C | 28, 28, 28 | Subtle backgrounds |
| Graphite | #2A2A2A | 42, 42, 42 | Borders, dividers |
Text Colors
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Pearl | #F5F5F5 | 245, 245, 245 | Primary text on dark |
| Silver | #A0A0A0 | 160, 160, 160 | Secondary text, labels |
| Smoke | #6B6B6B | 107, 107, 107 | Tertiary text, placeholders |
Semantic Colors
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Crimson | #DC2626 | 220, 38, 38 | Errors, sold out, urgent |
| Emerald | #10B981 | 16, 185, 129 | Success, available, confirmed |
| Amber | #F59E0B | 245, 158, 11 | Warnings, 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
| Purpose | Font | Fallback |
|---|---|---|
| Display/Headlines | Inter Bold | system-ui, sans-serif |
| Body | Inter Regular | system-ui, sans-serif |
| Code/Technical | JetBrains Mono | monospace |
Type Scale
| Element | Size | Weight | Line Height |
|---|---|---|---|
| H1 | clamp(1.875rem, 5vw, 3.75rem) | 700 | 1.1 |
| H2 | clamp(1.5rem, 3vw, 2.25rem) | 700 | 1.2 |
| H3 | clamp(1.25rem, 2vw, 1.5rem) | 600 | 1.3 |
| H4 | clamp(1.125rem, 1.5vw, 1.25rem) | 600 | 1.4 |
| Body | 1rem (16px) | 400 | 1.6 |
| Small | 0.875rem (14px) | 400 | 1.5 |
| Caption | 0.75rem (12px) | 400 | 1.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
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)
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't | Why |
|---|---|
| Bright/neon colors | Doesn't match premium brand |
| White backgrounds | We're dark-theme only |
| Generic fonts | Damages recognition |
| Low-res images | Quality matters |
| Cluttered designs | Less is more |
| Stock photos | We create our own |
| Red as accent | Not 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
#C9A962RGB: 201, 169, 98
Primary accent, CTAs
Gold
#D4AF37RGB: 212, 175, 55
Hover states, premium
Brass
#B5956BRGB: 181, 149, 107
Secondary accent
Background Colors
Obsidian
#0A0A0ARGB: 10, 10, 10
Primary background
Onyx
#141414RGB: 20, 20, 20
Cards, elevated
Charcoal
#1C1C1CRGB: 28, 28, 28
Subtle backgrounds
Graphite
#2A2A2ARGB: 42, 42, 42
Borders, dividers
Text Colors
Pearl
#F5F5F5RGB: 245, 245, 245
Primary text
Silver
#A0A0A0RGB: 160, 160, 160
Secondary text
Smoke
#6B6B6BRGB: 107, 107, 107
Subtle text
Semantic Colors
Crimson
#DC2626RGB: 220, 38, 38
Errors, sold out
Emerald
#10B981RGB: 16, 185, 129
Success, available
Amber
#F59E0BRGB: 245, 158, 11
Warnings, limited
Primary Gradient
Savage Studio Gradient
linear-gradient(135deg, #C9A962 0%, #D4AF37 50%, #B5956B 100%)