Brand Guidelines
CanvasPro
Visual identity system and usage reference for the CanvasPro brand.
Foundation
Why CanvasPro exists, who it serves, and how it speaks.
Mission
To eliminate the forced choice between digital signage and media servers. Every screen, from a single retail panel to a stadium-scale canvas, gets broadcast-grade visual power and enterprise-grade operational control in one platform.
Positioning
CanvasPro brings the visual power of media servers into digital signage, and the workflow intelligence of digital signage into media servers - all through the browser. Operators never have to choose between what looks incredible and what runs reliably, and they don't need a dedicated workstation to control it.
Audience
Technical directors, venue operators, and AV integrators who run screens at any scale - from retail and corporate environments that have outgrown their CMS, to stadiums and broadcast facilities that need operational structure around their visual firepower. The common thread: they refuse to compromise between visual quality and operational control.
Tagline
Your Screens Aren't Billboards. They're Stages.
Reframes the digital signage buyer's mindset. For audiences already in the media server space, lead with the positioning statement instead.
Mission-Critical
Engineered for environments where failure isn't an option. Automatic failover, watchdog monitoring, zero-downtime architecture.
Broadcast-Grade
GPU-accelerated, real-time rendered. The same visual standard expected in live broadcast, delivered to every screen.
Real-Time
Content reacts to live data, triggers, and overrides in milliseconds. Not batch. Not scheduled. Now.
Web-Native
Media server power, accessible from any browser on any device. You could control Piccadilly Lights from an iPhone.
Origin
When Piccadilly Lights needed to go beyond what any digital signage platform could deliver, the answer wasn't another CMS. It wasn't a media server either. It was something new - a platform built from the ground up to bring both worlds together. CanvasPro was born from that challenge.
Five Pillars
Real-time control
Change it, see it. Instantly.
Mission-critical reliability
Failover, watchdog, zero-downtime.
Broadcast-quality rendering
GPU-accelerated, engine-agnostic.
Beyond the canvas
NDI, SDI, DMX, sensors. The whole environment.
Web-native control
Media server power from any browser, any device.
Engine Agnostic
Supports HTML5, Ventuz, Unreal Engine, and Notch. One platform, multiple rendering engines, matched to the demands of each project.
Logo
The CanvasPro wordmark is always displayed in white on dark backgrounds. Minimum clear space equals the height of the mark.
Do
- ✓ Use the provided logo files only
- ✓ Maintain clear space equal to the mark height
- ✓ White mark on dark, inverted on light
- ✓ Use WebP for web, PNG for documents, SVG when available
Don't
- × Stretch, rotate, or distort the mark
- × Apply gradients, shadows, or effects to the logo
- × Place on busy or low-contrast backgrounds
- × Recreate or retype the wordmark
- × Use below 80px width on digital
Co-branding
When appearing alongside partner logos (Ventuz, venue brands), the CanvasPro mark should have equal or greater visual weight. Separate partner logos with a thin vertical rule (1px, white/20). Never merge, overlap, or lock up logos without approval.
Colour Palette
The core palette is built around a dominant brand blue with a warm purple accent for interaction and a deep background for contrast.
Primary
Brand Blue
#5865F2
Primary brand colour. Headlines, links, progress indicators, focus states.
Action Purple
#B44AFF
CTA buttons, interactive glow accents. Warmer counterpoint to brand blue.
Warm Violet
#8B6EF5
Gradient midpoint. Bridges brand blue and action purple in text gradients.
Atmospheric
Orb Primary
#6F5CF5
Purple-shifted blue. Primary atmospheric orb colour at 8-18% opacity.
Orb Secondary
#8B6EF5
Warm violet. Shared with gradient midpoint. Secondary orb at 7-12% opacity.
Backgrounds & Surfaces
Deep Black
#0A0A0C
Surface
#111113
Card Fill
white / 5%
Border
white / 10%
Text
Primary
#FFFFFF
Heading
#F5F5F5
Body
#D4D4D4
Muted
#737373
Semantic / State
Success
#42AB49
Warning
#F29A4E
Error
#F24C43
Destructive
#DB655C
Product UI
UI Primary
#5D6AE3
Product interface primary. Slightly warmer than brand blue. Buttons, active states, links within the app.
UI Background
#1A1A1F
Product interface dark background. Page base and overlay surfaces.
Gradient
The brand gradient uses a 105-degree angle with brand blue bookending both sides and warm violet as a midpoint inflection. This three-stop approach avoids the generic two-colour ramp.
They're Stages.
105deg
#5865F2 at 20%
#8B6EF5 at 55%
#5865F2 at 90%
CSS
background: linear-gradient(105deg, #5865F2 20%, #8B6EF5 55%, #5865F2 90%);Progress bar variant (horizontal, 90deg)
Typography
Montserrat is the primary typeface for all display and body text. Inter is available as a fallback for UI contexts. Hierarchy is built through weight, size, tracking, and opacity.
Aa
text-6xl/8xl · font-bold · tracking-tightAa
text-6xl/8xl · font-extralight · tracking-[-0.06em]Aa
text-4xl/5xl · font-light · tracking-tightThe real-time content orchestration platform.
text-lg · text-neutral-300Section Label
text-[10px] · tracking-[0.25em] · uppercaseFamily
Montserrat
Weights
100, 200, 300, 400, 700, 800
Source
Google Fonts
Voice & Tone
The voice is constant. The tone adapts to context. We write for people who build broadcast systems and run 24/7 operations - they can smell marketing filler, so we don't use any.
Clear.
Say it simply. If a sentence needs re-reading, rewrite it. Complexity in the product, clarity in the language.
"Real-time content orchestration."
"An innovative next-generation digital signage content management and orchestration solution."
Confident.
We know what we build. No hedging. No "might" or "could potentially help." State what it does.
"CanvasPro powers Piccadilly Lights."
"CanvasPro could help improve your digital signage experience."
Technical.
Our audience builds broadcast systems and runs stadiums. Respect their expertise. Never patronise, never simplify what they already understand.
"NDI, SDI, and RTSP input with sub-frame latency."
"Supports all major video formats."
Ambitious.
We work with the world's greatest stages. The language should match the scale. Think stadiums, not meeting rooms.
"Content orchestration for Piccadilly Lights, Formula 1 pit walls, and Disney guest experiences."
"A platform for managing your screens."
Do
Headline
"Real-time content orchestration for mission-critical screens."
Feature
"Reactive scheduling that responds to live data in milliseconds."
CTA
"Book a Discovery" / "See it in action"
Don't
Superlative
"The most powerful digital signage platform on the market."
Forgettable
"An intelligent content management solution for modern displays."
Weak CTA
"Learn More" / "Click Here" / "Get Started"
Audience Tone Shift
Signage buyers
Lead with the tagline. Name the pain: limited CMS, static scheduling, no real-time capability. Show what becomes possible when their screens become stages.
Media server buyers
Lead with the positioning statement. Name the pain: no scheduling, no fleet management, manual operation. Show how CanvasPro adds the operational layer their visual power has been missing.
AV integrators
Lead with their business model. Name what matters: recurring revenue, reduced truck rolls, remote monitoring, hardware flexibility, API readiness. CanvasPro is the platform they can build a managed service on.
Category Creation
We are defining a new category: Broadcast Signage. Signage that performs at broadcast standards. This is the phrase to use externally. Buyers don't search for "bridge between signage and media servers" - they search for outcomes: real-time content, broadcast-quality signage, data-driven visual experiences. "Broadcast Signage" gives them a name for what they've been looking for.
UK & European Tone
Our primary market values evidence and restraint over hype. UK buyers are culturally skeptical of superlatives ("world's best," "revolutionary," "game-changing"). Credibility comes from earned authority - naming real clients, citing specific results, and demonstrating deep domain expertise. We don't disrupt through noise. We disrupt through quality.
Approved Proof Points
Always use named clients with specific outcomes. "A major stadium" is less credible than "Brighton & Hove Albion." Get permission before naming new clients.
Atmospheric Glow
Large, blurred orbs create a subtle atmospheric depth behind content. They give dark sections a sense of space and warmth without competing with the foreground. This page uses the same technique - look behind this text.
Hero orbs
Do
- ✓ Use #6F5CF5 and #8B6EF5 only
- ✓ Static position, no animation
- ✓ Place behind content with pointer-events-none
- ✓ Use blur-3xl - smaller blurs look cheap
- ✓ Offset orbs from centre for natural feel
Don't
- × Use animate-pulse or any pulsing effect
- × Use more than 2 orbs per section
- × Use Tailwind default purple/indigo/fuchsia
- × Centre orbs symmetrically - looks artificial
Motion
Every animation must serve a purpose: confirm an action, guide attention, or communicate state. If it's decorative, remove it.
Do
- ✓ Use CSS transitions for simple state changes
- ✓ Respect prefers-reduced-motion
- ✓ Trigger scroll animations via IntersectionObserver
- ✓ Maintain 60fps - never block the main thread
Don't
- × Use animate-pulse on any visible element
- × Animate for decoration - every motion needs purpose
- × Use parallax scrolling effects
- × Auto-play video with sound
Cards & Surfaces
Cards use a semi-transparent white fill with a 10% white border. Corner radius is consistently 2xl (1rem).
bg-white/5 · border-white/10 · rounded-2xl
Standard Card
Used for content sections, feature cards, and form containers.
bg-neutral-900/60 · backdrop-blur-md
Glass Card
Used sparingly for overlays and elevated surfaces.
Spacing
Section spacing follows a consistent vertical rhythm.
Accessibility
WCAG AA compliance is the minimum. Every colour pairing, interactive element, and content structure must meet these standards.
Do
- ✓ Test all colour pairings against WCAG AA
- ✓ Use semantic HTML headings (h1 → h6)
- ✓ Provide alt text for all meaningful images
- ✓ Ensure keyboard navigation works fully
Don't
- × Rely on colour alone to convey meaning
- × Remove focus outlines without replacement
- × Use text smaller than 10px (labels may use 10px, body minimum 16px)
- × Skip heading levels (h1 → h3)
Off-White Context
Digital & UI
How the brand adapts for light UI, dashboards, and digital collateral. A cool violet-tinted off-white (#F7F7FC) avoids the harshness of pure white on screen while echoing the brand palette.
Gradient Text
They're Stages.
The gradient maintains full vibrancy on light surfaces. No adjustment needed.
Text Colours
Heading
neutral-900
Body
neutral-600
Muted
neutral-400
Accent
#5865F2
Cards & Surfaces
bg-white · border-neutral-200 · shadow-sm
Elevated Card
Primary card style on light backgrounds. Subtle shadow provides depth.
bg-neutral-100/50 · border-neutral-100
Recessed Card
For secondary content areas. Sits below the surface plane.
Buttons
Primary CTA
Ghost / Light variant
Print Context
Print & Collateral
Pure white (#FFFFFF) for printed materials, proposals, brochures, and partner documents where paper stock is the surface.
Gradient Text on White
They're Stages.
Maximum contrast on pure white. Ideal for print and high-fidelity collateral.
Sample Layout
Case Study
Piccadilly Lights
Real-time content orchestration powering one of the world's most iconic digital canvases.
783m²
Display area
24/7
Uptime
100M+
Annual impressions
Logo on Print
Left: inverted mark for white stock. Right: white mark on dark panel (preferred for print headers).