Let's Go Live! Logo

Brand & Technical Style Guide

This style guide ensures consistency across all Let's Go Live! web applications, websites, and digital properties. Our brand identity is built on professionalism, technical excellence, and modern design principles optimized for dark mode interfaces.

Brand Identity

Company Name

Official name: Let's Go Live!

Always include the exclamation mark. The apostrophe in "Let's" is mandatory for proper branding.

Tagline

"Technical Broadcasting Excellence"

Color Palette

Our dark mode color system is designed for professional broadcasting applications with optimal readability and visual hierarchy.

Primary
Primary Accent
#D97732
Primary buttons, links, headings, CTAs
Background
Background Dark
#121212
Main background
Card
Background Medium
#1A1A1A
Cards, panels, elevated surfaces
Border
Background Light
#2A2A2A
Hover states, borders, dividers
Text
Text Primary
#FFFFFF
Headings, important text
Text
Text Secondary
#CCCCCC
Body text, descriptions
Text
Text Muted
#999999
Captions, metadata, disabled states
Success
Success
#4CAF50
Live indicators, success messages
Warning
Warning
#FFC107
Warnings, pending states
Error
Error
#F44336
Errors, critical alerts, offline states

Typography

Primary Font

Font Family: Lato

Lato is a modern, highly readable sans-serif font that works exceptionally well in both UI and body text. It maintains legibility at all sizes and is web-safe with excellent Google Fonts support.

Font Weights

Type Scale

Element Size Weight Color
H1 36px / 2.25rem Bold (700) #D97732
H2 28px / 1.75rem Bold (700) #FFFFFF
H3 24px / 1.5rem Bold (700) #CCCCCC
Body Large 18px / 1.125rem Regular (400) #CCCCCC
Body 16px / 1rem Regular (400) #CCCCCC
Small 14px / 0.875rem Regular (400) #999999
Caption 12px / 0.75rem Regular (400) #999999

UI Components

Buttons

Primary Button

Secondary Button

Ghost Button

Form Inputs

Cards & Panels

Card Title

This is an example card component with proper styling applied according to the Let's Go Live! style guide.

Status Indicators

● LIVE ● PENDING ● OFFLINE

Code Examples

CSS Variables

Use these CSS custom properties for consistent theming:

:root {
  /* Brand Colors */
  --color-primary: #D97732;
  --color-primary-hover: #E88A4A;
  
  /* Backgrounds */
  --bg-dark: #121212;
  --bg-medium: #1A1A1A;
  --bg-light: #2A2A2A;
  
  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted: #999999;
  
  /* Status Colors */
  --color-success: #4CAF50;
  --color-warning: #FFC107;
  --color-error: #F44336;
  
  /* Typography */
  --font-primary: 'Lato', sans-serif;
  --font-mono: 'Courier New', monospace;
}

React Component Example

Primary button component following the style guide:

import React from 'react';

const PrimaryButton = ({ children, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor: '#D97732',
        color: '#FFFFFF',
        fontFamily: 'Lato',
        fontWeight: 700,
        padding: '12px 24px',
        borderRadius: '6px',
        border: 'none',
        cursor: 'pointer',
        transition: 'background-color 0.2s'
      }}
      onMouseEnter={(e) => e.target.style.backgroundColor = '#E88A4A'}
      onMouseLeave={(e) => e.target.style.backgroundColor = '#D97732'}
    >
      {children}
    </button>
  );
};

Spacing & Layout

Spacing Scale

Use consistent spacing values based on an 8px grid system:

Container Widths

Breakpoints

Images

Approved brand imagery and visual assets for Let's Go Live! applications and marketing materials.

Let's Go Live! Logo
Primary Logo
Main brand logo for headers, navigation, and primary branding elements

Icons & Graphics

Icon Style

Logo Usage

Best Practices

Accessibility

Performance

Responsive Design