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 bring broadcast-grade control to every screen. The rendering scales with the hardware, from HTML5 on a lightweight player to real-time 3D on a dedicated GPU. But the control model is always the same: real-time, live-overridable, reactive. That's what makes it broadcast signage, not the pixel count.
Positioning
Digital signage meets media server. 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, AV integrators, and placemaking partners who run screens at any scale. From retail and corporate environments that have outgrown their CMS, to stadiums, DOOH spectaculars, and property estates where screens are part of the placemaking strategy. 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.
Approved Headlines
Use these as alternatives to the tagline across collateral, presentations, and social. Each suits a different context.
Partner-Facing Line
"You built something amazing in Ventuz. CanvasPro lets your client actually run it."
For Ventuz users, integrators, and content creators. Positions CanvasPro as the operational layer, not a creative competitor.
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.
Beyond the Canvas
NDI, SDI, DMX, sensors. Not just screens. The whole environment, orchestrated from one platform.
Web-Native
Media server power, accessible from any browser on any device. You could control Piccadilly Lights from an iPhone.
Origin
Digital signage software couldn't drive Piccadilly Lights. Off-the-shelf media server projects could, at the cost of a patchwork of tools and a specialist team to hold them up. Digital Media Technologies developed the original Piccadilly Lights system themselves, then saw the same pattern come up across stadium, retail, and experiential projects. CanvasPro is that work, turned into a product.
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, and the One Enterprise product tier. Warmer counterpoint to brand blue. Signals premium/top-tier when used on product cards.
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] · uppercaseVoice & 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."
Evocative.
Generic copy is the enemy. If a headline could describe any platform in the market, rewrite it until it could only describe CanvasPro. Every line should have a point of view.
"Your Screens Aren't Billboards. They're Stages."
"One platform. Every display. Total control."
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.
Competitive Framing
Never name competitors. Instead, name the limitation of the approach they represent. "Store-and-forward" is the phrase that captures what's wrong with traditional signage software. Use it.
"If you're using traditional signage software..."
You're stuck with store-and-forward, limited to playlists, hitting a ceiling the moment a project demands anything more. CanvasPro gives you real-time control from day one.
"If you're building bespoke software for every installation..."
You're reinventing the wheel each time. CanvasPro standardises what used to require custom development, reducing cost and delivery time without sacrificing flexibility.
"If you're using a media server without CMS workflows..."
You've got the creative capability but no operational backbone. CanvasPro gives you scheduling and network-scale control without sacrificing real-time performance.
Voice-of-Buyer Hooks
These phrases reflect how real buyers describe their frustration. Use them as opening hooks in copy, social, and sales materials. They work because they're the buyer's words, not ours.
"Our screens could do so much more but our software limits us."
"We need our screens to run themselves AND respond to live moments."
"We need broadcast-quality content across hundreds of screens without broadcast-level complexity."
Language to Reject
AI tools and marketing brainstorms consistently generate language that sounds impressive but violates the brand voice. Reject these on sight, regardless of source:
If it sounds like a LinkedIn ad or a VC pitch deck, it's wrong for CanvasPro. The brand voice is technical, confident, and restrained. Let proof points do the persuading.
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.
Collateral Integrity Rule
Never feature a product without a real deployment. Never target a vertical without a case study. A brochure with empty tiers and no proof does more damage than having no brochure at all. Build the product, land the first deployments, then update the marketing. In that order.
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
Presentations
The 2026 presentation template extends the brand into an orbital visual system. Where the website uses blurred atmospheric orbs, presentations use sharp-edged circles, gradient spheres, and orbital arcs to create a space-like depth. The metaphor is mission control, not outer space for its own sake.
Visual System Elements
Gradient Spheres
Sharp-edged, not blurred
Circles filled with the brand gradient (blue-to-purple). Appear as luminous planets or orbs. Used behind titles and as framing devices around imagery. Crisp edges, unlike the blurred atmospheric orbs on the website.
Orbital Arcs
Thin stroked partial circles
Thin white or light-opacity arcs that sweep across compositions. They connect elements, create depth, and suggest orbital motion. Always partial (never a full circle). Stroke weight: 1-2px at presentation scale.
Accent Dots
Decorative punctuation
Small solid circles in brand purple, blue, or light violet. Used as visual punctuation scattered through slides. Three sizes: 8px, 12px, 20px at slide scale. Max 2-3 per slide. Place asymmetrically.
Circle Image Masks
Photos inside circles
Photography masked into circles or large rounded rectangles. Creates a viewport/porthole effect that reinforces the orbital theme. Use for hero proof-point imagery (Piccadilly, Ascot, Brighton).
Background Treatment
Slide Types
Title
Logo centred, title below. Large gradient sphere right. Nebula background. Orbital arc framing left side. Accent dots for depth.
Content + Image
Title and body left. Proof-point photography right, masked in circle or rounded rectangle. Dark circle behind text. Orbital arc connecting text to image.
Full-Width Feature
Full-bleed photography across top or right. Gradient sphere overlapping the image boundary. Title centred over the transition. Three-column body text below.
Numbered List
Gradient sphere top-left behind title. Numbered items (01-06) in two columns. Accent dot. Large dark circle arc on right edge.
Two-Image
Text left, two photos stacked right (circle-masked or rounded-rect). Orbital arc connecting images. Small accent dots between them.
Closing
Logo centred, "Thank You" below. Gradient sphere bottom-left, dark circle top-right. Contact details (address, email, phone) across the bottom.
Do
- ✓ Use sharp-edged circles (not blurred) in presentations
- ✓ Keep orbital arcs thin (1-2px stroke)
- ✓ Mask proof-point photography into circles
- ✓ Use the nebula/starfield only on the title slide
- ✓ Let dark circles create depth behind text areas
- ✓ Use gradient-filled numbers for section markers
Don't
- × Mix blurred orbs (website) with sharp circles (presentations)
- × Use nebula textures on every slide (title only)
- × Scatter more than 3 accent dots per slide
- × Use rectangular image crops (always round or rounded-rect)
- × Place text on the right side (always left-aligned)
- × Use light or white backgrounds in dark-theme decks
Website vs. Presentations
The website and presentations share the same palette, typography, and dark background, but use different visual devices. Website: blurred atmospheric orbs (blur-3xl, low opacity, ambient). Presentations: sharp-edged gradient spheres, orbital arcs, and accent dots (crisp, geometric, structural). Both systems are correct in their context. Do not bring blurred orbs into slide decks or sharp circles into the website.
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).
Social & LinkedIn
LinkedIn is our primary social channel. Every post should reinforce the brand position: CanvasPro is broadcast signage, not another CMS. These guidelines ensure consistency whether posts are written by the team or generated with AI.
Words We Use
Category broadcast signage, content orchestration, real-time
Action orchestrate, power, deliver, build, run
Scale mission-critical, 24/7, stadium-scale, broadcast-quality
Product platform, engine, system (never "tool" or "app")
Proof powers, runs, drives (present tense, active voice)
Words We Avoid
Superlatives best, most powerful, world-leading, cutting-edge
Hype revolutionary, game-changing, disruptive, next-gen
Vague innovative, solution, leverage, synergy, ecosystem
Diminishing just, simply, easily, tool, app, dashboard
Filler excited to announce, thrilled to share, we're delighted
Punctuation em dashes, exclamation marks in body copy
Post Formatting
Hashtag Strategy
Always include
#CanvasPro
#BroadcastSignage
Brand + category on every post. This is how we own the category.
Rotate by topic
#ProAV #DOOH #RealTime
#LiveEvents #AVTech
#DigitalSignage #OOH
Pick 2-3 relevant industry tags per post.
Event / partner tags
#ISE2026 #InfoComm
#Ventuz (partner)
Tag events when attending. Tag partners when co-posting. Never tag competitors.
Post Types & Templates
Proof point
Named client + what CanvasPro does there. Highest credibility.
"CanvasPro is back at Royal Ascot.
Powering real-time graphics across every screen on race day. Live data, broadcast quality, one platform."
Product statement
Short, punchy claim about what the product does. Under 30 words.
"Not slides.
Real-time, 3D, fully interactive, surprisingly simple.
CanvasPro."
Challenge post
Name the limitation of the old approach. Never name the competitor.
"When the stakes are high, 'good enough' isn't enough.
Your screens deserve broadcast-quality orchestration."
Event / trade show
Before, during, and after. Include booth number. Tag partners.
"We're at ISE.
Booth 5A900. Come see broadcast signage in action."
Examples
Strong posts
"Not slides.
Real-time, 3D, fully interactive, surprisingly simple.
CanvasPro."
Short. Confident. Challenges the old way without naming it.
"Ever wondered what it takes to run the world's most demanding advertising display?
We can show you. Get in touch."
Proof-led hook. Specific claim (Piccadilly). Clear CTA.
"When the stakes are high, 'good enough' isn't enough."
Challenge framing. No filler. Earns the click.
What to improve
"What an incredible event! We're genuinely overwhelmed (in the best way!) by the level of engagement..."
Reads generic. "Overwhelmed" and "incredible" are filler. Be specific about what happened.
"Exciting times ahead! We can't wait to meet you all next week."
"Exciting times ahead" is the most overused LinkedIn opener. Lead with what makes it exciting.
"We've had some amazing conversations, met incredible people..."
Adjective stacking. "Amazing" and "incredible" say nothing. Name a conversation or outcome instead.
Tone Calibration
The company page voice is confident and specific, never breathless or grateful. We built something exceptional and we know it. That confidence shows through proof, not adjectives. If a sentence works without "amazing," "incredible," or "exciting," cut the adjective. Replace "We're excited to announce" with what you're actually announcing. Replace "incredible event" with what actually happened there. The reader should finish the post knowing something they didn't before.