PodStyle Video Brand Guide

Official brand guide for PodStyle Video marketing funnel

A video production service creating podcast-style marketing videos

Brand Overview

Company Details

Company Name: PodStyle Video
Legal Entity: JD Key, LLC (PodStyle is a DBA)
Service: Half-day studio sessions producing 20 ready-to-launch podcast-style marketing videos

Brand Personality

• Professional yet approachable
• Efficient and results-driven
• Technology-forward
• Trust-building

Value Proposition

Professional coaching + studio production = 20 videos ready for ads, email, and social media

Color Palette

Primary Colors

Coral (Brand Primary)

#FF6B6B

Main

#E85555

Dark/Hover

#D94545

Accessible (AA compliant)

Teal (Secondary)

#4ECDC4

Main

#3BA99F

Dark

#2B9B95

Accessible (AA compliant)

Supporting Colors

Ink (Primary Text)

#0A0E27

Dark

#1A1F3A

Light

#FFD93D

Gold (Accent)

#FAFBFC

Off-White/Background

#64748B

Slate (Secondary text)

CSS Variables

:root {
  --ink: #0A0E27;
  --ink-light: #1A1F3A;
  --white: #FFFFFF;
  --off-white: #FAFBFC;
  --coral: #FF6B6B;
  --coral-dark: #E85555;
  --coral-accessible: #D94545;
  --teal: #4ECDC4;
  --teal-dark: #3BA99F;
  --teal-accessible: #2B9B95;
  --gold: #FFD93D;
  --slate: #64748B;
  --slate-light: #94A3B8;
}

Typography

Font Stack

Primary Font: Geist Sans

Google Fonts (next/font/google)

The quick brown fox jumps over the lazy dog

Usage: All body text, UI elements, general content

Logo Font: Inter

Inter, sans-serif

Usage: Logo text only (800 weight for "PodStyle", 500 for "Video")

Typography Hierarchy

H1 Heading

text-4xl lg:text-5xl font-bold

H2 Heading

text-2xl font-bold

H3 Heading

text-xl font-semibold

Large body text (Hero descriptions)

text-xl

Regular body text

text-base

Small text (Captions, disclaimers)

text-sm

Logo System

Logo Components

The PodStyle Video logo consists of three elements:

1. "PodStyle" text (Extra Bold, Ink color)
2. Sound wave visualization (4 coral bars)
3. "Video" text (Medium weight, Ink color)

Logo Variants

Dark variant (for light backgrounds)

White variant (for dark backgrounds)

Usage Guidelines

• Minimum width: 120px
• Standard width: 240px
• Aspect ratio: 6:1 (240x40)
• Clear space: Minimum 20px around logo
• Sound bars: Always remain coral (#FF6B6B)

Logo SVG Code

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="40" viewBox="0 0 240 40">
  <!-- PodStyle Text -->
  <text x="5" y="30" fill="#0A0E27"
        fontFamily="Inter, sans-serif"
        fontWeight="800" fontSize="28">
    PodStyle
  </text>

  <!-- Sound Wave Bars -->
  <g transform="translate(128,0)" fill="#FF6B6B">
    <rect x="0"  y="9"  rx="2" ry="2" width="3" height="24"/>
    <rect x="5"  y="11" rx="2" ry="2" width="3" height="20"/>
    <rect x="10" y="13" rx="2" ry="2" width="3" height="16"/>
    <rect x="15" y="15" rx="2" ry="2" width="3" height="12"/>
  </g>

  <!-- Video Text -->
  <text x="146" y="30" fill="#0A0E27"
        fontFamily="Inter, sans-serif"
        fontWeight="500" fontSize="28">
    Video
  </text>
</svg>

Gradients

Warm Gradient

linear-gradient(135deg, #FF6B6B 0%, #FFD93D 100%)

Usage: Hero elements, premium CTAs, major highlights

Cool Gradient

linear-gradient(135deg, #4ECDC4 0%, #3BA99F 100%)

Usage: Process indicators, success states, secondary elements

Dark Gradient

linear-gradient(135deg, #0A0E27 0%, #1A1F3A 100%)

Usage: Dark themes, contrast sections

Accessibility

WCAG 2.1 AA Compliance

All brand colors meet or exceed the 4.5:1 contrast ratio requirement for text accessibility.

Accessible Color Combinations

Coral Accessible on White✅ AA Compliant

Teal Accessible on White✅ AA Compliant

Ink on White✅ AA Compliant

Implementation Notes

• Always use accessible color variants for text
• Test color combinations before implementation
• Provide alternative text for color-coded information
• Ensure sufficient contrast for all interactive elements
• Consider colorblind accessibility in design decisions

Usage Guidelines

Do's ✅

• Use coral for primary CTAs and key actions
• Use teal for success states and process indicators
• Maintain consistent spacing around logo
• Use accessible color variants for text
• Apply gradients to highlight premium features
• Use Geist Sans for all UI text
• Keep sound wave bars coral in all logo variants

Don'ts ❌

• Don't use coral and teal at equal visual weight
• Don't place logo on busy backgrounds
• Don't modify logo proportions or spacing
• Don't use non-accessible color combinations
• Don't mix other fonts with brand typography
• Don't change sound wave bar colors
• Don't use more than two colors in a single gradient

Brand Voice in Design

• Clean and uncluttered: Plenty of white space
• Professional confidence: Bold typography, clear hierarchy

• Approachable: Rounded corners, friendly coral accent
• Results-oriented: Clear CTAs, process visualization