SAVAGE STUDIO EVENTS — BRAND KIT

Brand Identity

Brand Name: Savage Studio Events (operating under Savage Studio Holdings)
Tagline: "Elevated Experiences"
Positioning: Luxury nightlife events with an edge. Premium without pretension. Sophisticated but not sterile.

Brand Personality:

• Confident, not arrogant
• Exclusive, not exclusionary
• Bold, not loud
• Refined, not boring
• Edgy, not try-hard

---

Color Palette

Primary Colors

Accent Colors

Text Colors

Semantic Colors

Gradients

/* Luxury Gold Gradient - Use sparingly on premium elements */
--gradient-gold: linear-gradient(135deg, #C9A962 0%, #D4AF37 50%, #B5956B 100%);

/* Dark Fade - For overlays on images */
--gradient-dark-fade: linear-gradient(180deg, transparent 0%, #0A0A0A 100%);

/* Subtle Glow - For card hovers */
--gradient-glow: radial-gradient(ellipse at center, rgba(201,169,98,0.15) 0%, transparent 70%);

---

Typography

Font Stack

Display / Headlines: Royal (Custom)

• Used for: Hero text, event names, major headings
• Characteristics: Bold, distinctive, luxurious
• Fallback: 'Playfair Display', Georgia, serif

Body / UI: Inter

• Used for: Body text, UI elements, descriptions
• Weight range: 400 (regular), 500 (medium), 600 (semibold)
• Fallback: system-ui, -apple-system, sans-serif

Accent / Numbers: JetBrains Mono

• Used for: Prices, ticket codes, countdowns, data
• Characteristics: Clean monospace, technical feel
• Fallback: 'SF Mono', Consolas, monospace

Type Scale

--text-xs: 0.75rem;      /* 12px - Fine print, labels */
--text-sm: 0.875rem;     /* 14px - Secondary text */
--text-base: 1rem;       /* 16px - Body text */
--text-lg: 1.125rem;     /* 18px - Large body */
--text-xl: 1.25rem;      /* 20px - Subheadings */
--text-2xl: 1.5rem;      /* 24px - Section titles */
--text-3xl: 1.875rem;    /* 30px - Page titles */
--text-4xl: 2.25rem;     /* 36px - Hero subtext */
--text-5xl: 3rem;        /* 48px - Hero headlines */
--text-6xl: 3.75rem;     /* 60px - Display text */
--text-7xl: 4.5rem;      /* 72px - Major display */

Typography Rules

1. Headlines (Royal font)

   • Always uppercase for event names
   • Letter-spacing: 0.05em to 0.1em
   • Line-height: 1.1 to 1.2

2. Body Text (Inter)

   • Sentence case
   • Line-height: 1.5 to 1.7
   • Max-width: 65ch for readability

3. Numbers/Data (JetBrains Mono)

   • Prices always include currency symbol
   • Use tabular figures for alignment
   • Countdown timers use this font

---

Spacing System

Based on 4px grid:

--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
--space-20: 5rem;     /* 80px */
--space-24: 6rem;     /* 96px */

---

Component Styles

Buttons

Primary (Gold)

.btn-primary {
  background: linear-gradient(135deg, #C9A962 0%, #D4AF37 100%);
  color: #0A0A0A;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 169, 98, 0.3);
}

Secondary (Outline)

.btn-secondary {
  background: transparent;
  color: #F5F5F5;
  border: 1px solid #C9A962;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background: rgba(201, 169, 98, 0.1);
  border-color: #D4AF37;
}

Ghost (Text only)

.btn-ghost {
  background: transparent;
  color: #C9A962;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.btn-ghost:hover {
  color: #D4AF37;
}

Cards

Event Card

.event-card {
  background: #141414;
  border: 1px solid #2A2A2A;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}
.event-card:hover {
  border-color: #C9A962;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

Inputs

.input {
  background: #1C1C1C;
  border: 1px solid #2A2A2A;
  color: #F5F5F5;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  transition: border-color 0.2s ease;
}
.input:focus {
  border-color: #C9A962;
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.1);
}
.input::placeholder {
  color: #6B6B6B;
}

Badges

.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-gold {
  background: rgba(201, 169, 98, 0.2);
  color: #C9A962;
  border: 1px solid rgba(201, 169, 98, 0.3);
}
.badge-sold-out {
  background: rgba(220, 38, 38, 0.2);
  color: #DC2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.badge-available {
  background: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

---

Iconography

Style: Line icons, 1.5px stroke weight Recommended: Lucide React (already in your stack) Size Scale: 16px, 20px, 24px, 32px

Icon Colors:

• Default: #A0A0A0 (Silver)
• Interactive: #C9A962 (Champagne)
• Active: #F5F5F5 (Pearl)

---

Photography & Imagery

Style Guidelines

1. Event Photography

   • High contrast, dramatic lighting
   • Emphasize atmosphere (lights, crowd energy)
   • Slightly desaturated with warm highlights
   • Grain/noise overlay acceptable (adds texture)

2. Venue Photography

   • Architectural focus, clean lines
   • Golden hour or blue hour lighting preferred
   • Show scale and grandeur

3. Promotional Graphics

   • Dark backgrounds with gold typography
   • Minimal text on images
   • Strong focal point

Image Treatment

/* Standard event image overlay */
.event-image {
  filter: contrast(1.1) brightness(0.9);
}
.event-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 10, 10, 0.3) 60%,
    rgba(10, 10, 10, 0.9) 100%
  );
}

---

Motion & Animation

Timing Functions

--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

Standard Durations

--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--duration-slower: 500ms;

Animation Patterns

Fade In Up (Page load elements)

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
}

Shimmer (Loading states)

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    #1C1C1C 0%,
    #2A2A2A 50%,
    #1C1C1C 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

Gold Pulse (Attention)

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 98, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(201, 169, 98, 0); }
}
.pulse-gold {
  animation: goldPulse 2s infinite;
}

---

Brand Applications

Logo Usage

Primary Logo: "SAVAGE STUDIO" wordmark in Royal font

• Gold (#C9A962) on dark backgrounds
• Black (#0A0A0A) on light backgrounds (rare)
• Minimum clear space: Height of "S" on all sides

Icon/Favicon: Stylized "SS" monogram

• Use when full wordmark doesn't fit

Sub-Brands

---

Do's and Don'ts

DO:

✓ Use generous whitespace
✓ Let the gold accents breathe—less is more
✓ Maintain high contrast for readability
✓ Use Royal font for impact moments only
✓ Add subtle texture/grain to images
✓ Keep UI interactions smooth and premium

DON'T:

✗ Overuse gold—it loses impact
✗ Use bright/neon colors
✗ Clutter layouts with too many elements
✗ Use cheap stock photography
✗ Add unnecessary animations
✗ Mix too many fonts in one view

---

File Naming Conventions

savage-events-logo-gold.svg
savage-events-logo-white.svg
savage-icon-gold.svg
event-[name]-hero.jpg
event-[name]-thumb.jpg
venue-[name]-[number].jpg

---

Contact for Brand Questions

Brand Owner: Niko / Savage Studio Holdings
Brand applications, partnerships, and usage requests should maintain these standards.

---

Version 1.0 — December 2024