Livestream Graphics System

H&C Brand Book

Reverse-engineered livestream graphics system for Horse & Country

Format: 1920 x 1080 (16:9) Frame Rate: 30fps broadcast Color Space: Rec. 709 Export: ProRes 4444 / WebM alpha

01 Brand Overview

▼

Horse & Country (H&C) is the leading international equestrian sports network, streaming live sport, masterclasses, and entertainment to 40M+ households worldwide.

Content Pillars

Community — Celebrating the equestrian world
Transformation — Rider growth and training
Inspiration — Elite sport and storytelling

Brand Tone

Premium but accessible. Expert but welcoming. The broadcast graphics should feel like a top-tier sports network while remaining warm to the equestrian community.

Key Facts

Est. 2007 • London HQ • ~49 employees
120+ live events/yr • 1,000+ hrs on-demand
CEO: Heather Killen • H&C TV Ltd

02 Color Palette

▼

Primary

H&C Orange
#FF6B35
Orange Light
#FF8C5A
Orange Dark
#E55A28

Neutrals

Black
#0A0A0A
Charcoal
#1A1A2E
Dark Gray
#2D2D44
Mid Gray
#4A4A6A
Light Gray
#8E8EA0
Off White
#E8E8F0
White
#FFFFFF

Semantic & Discipline

Live Red
#FF3B3B
Success/XC
#2ECC71
Warning
#F1C40F
Dressage
#9B59B6
Show Jumping
#3498DB

03 Typography

▼

H&C uses a clean, modern sans-serif across all platforms. Inter is the closest open-source match to their web typeface. JetBrains Mono for scores and data.

Display 900
Heading 800
Title 700
Subtitle 600
Large Body 500
Body text — regular weight for descriptions and narrative content.
Small text for secondary info, captions, and metadata.
OVERLINE — LABELS & CATEGORIES

Mono (Scores & Data)

28.4 • 04:32 • #1
0 faults • 67.23% • +2.1s

04 Logo System

▼
H&C+
H&C+
Logo Source
Current logo in use since July 13, 2014. PNG available at media.info archive. For the broadcast overlay, the logo sits in the top-left corner at approximately 5% from edges.
PropertyValue
Minimum size (broadcast)120px width at 1080p
Clear space0.5x logo height on all sides
Position (overlay)top: 6%; left: 5%
Opacity on live feed85-90%

05 Lower Thirds

▼
Laura Collett
London 52
🇬🇧 CCI5*-L • Current: 21.1
PropertyVar AVar BVar C
Positionbottom:12%; left:5%bottom:12%; left:5%bottom:12%; left:5%
EntranceSlide left 500msClip-path reveal 800msScale+Fade 500ms
ExitSlide left 300msClip-path close 300msDrop+Fade 300ms
Easing Incubic-bezier(0.16,1,0.3,1)cubic-bezier(0.16,1,0.3,1)cubic-bezier(0.34,1.56,0.64,1)
Easing Outcubic-bezier(0.7,0,0.84,0)cubic-bezier(0.7,0,0.84,0)cubic-bezier(0.7,0,0.84,0)
Backgroundrgba(10,10,10,0.85) blur(20px)Orange gradientrgba(255,255,255,0.08) blur(30px)
Name font18px / 70020px / 80017px / 700
After Effects Note
For Var A, use Position keyframes with overshoot expression (freq=3, decay=5). The 5px orange accent bar is a separate shape layer parented to the main group. Apply CC Composite for the backdrop blur look.

06 Scoreboards

▼
Dressage Live
1🇬🇧
L. Collett
London 52
21.1
2🇬🇧
O. Townend
Ballaghmor Class
23.4
3🇩🇪
M. Jung
FischerChipmunk
24.8
4🇺🇸
B. Halliday-Sharp
Donatello
26.2
PropertyVar AVar BVar C
Positiontop:8%; right:4%top:8%; right:4%bottom:4%; full-width
EntranceSlide right 500msScale+Fade 800msSlide up 500ms
Score updateFlash row 300msRow shift animValue counter
Min width320px360pxFull width

07 Live Indicators

▼
Live
Cross-Country • CCI5*-L
Animation Detail
The LIVE dot pulses with 1.5s ease-in-out infinite — scaling from 1.0 to 1.3 and opacity from 1.0 to 0.5. The red glow uses box-shadow: 0 0 8px #FF3B3B. Badge entrance uses overshoot (ease-out-back) for a satisfying pop.

08 Event Title Cards

▼
Horse & Country Presents
2026 USEA
American Eventing
Championships
August 25 – 30 • Kentucky Horse Park • Lexington, KY
Presented by Nutrena Feeds
ElementTimingEasing
Backdrop fade0ms delay, 400ms durationease-out
Overline200ms delay, 800ms durationease-out-expo
Title400ms delay, 800ms durationease-out-expo
Divider line600ms delay, 600ms width revealease-out-expo
Meta700ms delay, 800ms durationease-out-expo
Sponsor900ms delay, 800ms durationease-out-expo

09 Transitions & Wipes

▼
PropertyVar A: DiagonalVar B: Triple BarVar C: Radial
Total duration1200ms1500ms
Easingease-in-out-smoothease-in-out-smooth
Skew-15degNone (horizontal)
Hold time~240ms center hold~450ms center hold
Logo revealScale 0.8→1→1.1 with fadeNone
AE equivalentLinear Wipe + CC Jaws3x Slide layers, staggered 2f

10 Results & Standings

▼
2026 AEC • Kentucky Horse Park
Dressage Results — CCI5*-L
1🇬🇧
Laura Collett
London 52
21.1
2🇬🇧
Oliver Townend
Ballaghmor Class
23.4
3🇩🇪
Michael Jung
FischerChipmunk FRH
24.8
4🇺🇸
Boyd Martin
On Cue
26.2
5🇺🇸
Buck Davidson
Carlevo
27.5
Row-by-row Reveal
Each result row animates in with a staggered delay: 150ms base + 70ms per row. This creates a cascading reveal from 1st to 5th place. Gold/Silver/Bronze ranks use distinct colors (#FFD700, #C0C0C0, #CD7F32).

11 Up Next

▼
Up Next
Tom McEwen
Toledo de Kerser
🇬🇧 #247 • Current: 24.3

12 Rider Profiles

▼
🏇
🇬🇧 Laura Collett
London 52
14yo Bay Gelding • 5th CCI5* together • World #3
21.1
Dressage
0.0
XC Pen.
0
SJ Faults
21.1
Total
1st
Rank

13 Sponsor Integration

▼
Integration TypeDurationPosition
Lower-third tagPersistent during segmentbottom:3%; right:4%
Pre-roll title card5-10 secondsFull-screen overlay
In-stream billboard15 secondsLower 20% of frame
Branded lower-thirdSame as rider lower-thirdSponsor logo appended right

14 Social Media Graphics

▼

15 Motion Language

▼

Entrances

EasingCSS ValueUse
Expo Outcubic-bezier(0.16,1,0.3,1)Most entrances
Back Outcubic-bezier(0.34,1.56,0.64,1)Badges, pops
Smoothcubic-bezier(0.4,0,0.2,1)Wipes, full-screen

Exits

EasingCSS ValueUse
Expo Incubic-bezier(0.7,0,0.84,0)Most exits
LinearlinearFades only

Duration Guidelines

ElementInOutHold (min)
Lower third500ms300ms4s
Scoreboard500–800ms300msPersistent
Live badge300ms200msPersistent
Title card1200ms800ms3s
Transition wipe1200–1500ms totalN/A
Results panel800ms + stagger300ms6s
Up Next500ms300ms5s
Rider card800ms300ms8s
Sponsor tag500ms300msSegment length
AE Overshoot Expression
freq = 3; decay = 5; n = 0; if (numKeys > 0) { n = nearestKey(time).index; if (key(n).time > time) n--; } if (n > 0) { t = time - key(n).time; amp = velocityAtTime(key(n).time - .001); w = freq * Math.PI * 2; value + amp * (Math.sin(t*w) / Math.exp(decay*t) / w); } else { value; }
Export Settings
Broadcast: ProRes 4444, 1920x1080, 30fps, premultiplied alpha
Web overlay: WebM VP9, transparent, 30fps, CRF 20
Social: H.264, platform-specific dimensions, no alpha
PNG sequence: For complex composites requiring frame-perfect sync

16 Source Reference

▼
#SourceExtracted
1horseandcountry.tvColors, typography, nav, layout, CTAs
2Platform TourDevice mockups, UI patterns, feature presentation
3Pricing PageTier design, badges, CTA patterns
4Advertising PageAd formats, audience data, media pack
5Company InfoEntity, board, corporate tone
6LogopediaLogo history 2007–present
7media.info ArchiveCurrent logo PNG since 2014
8iOS App StoreApp icon, screenshots, UI patterns
9Google PlayAndroid interface, ratings
10Amazon Fire TVTV interface adaptation
11InstagramPost templates, story graphics, 80K followers
12Facebook USCover photos, event graphics, 319K likes
13Facebook SwedenRegional brand adaptation
14PinterestVisual content strategy, boards
15LinkedInCorporate brand, banner
16X/TwitterProfile, header graphics
17SVG EuropeAmagi Cloudport, dynamic graphics, production
18WikipediaHistory, format (1080i), distribution
19USEA 2026 AECPartnership terms, camera specs, pricing
20Eventing NationContent pillars, brand storytelling
Reverse-engineered from public sources — not an official H&C document.
Built for RNS Videomedia competitive analysis. All trademarks belong to H&C TV Ltd.