The visual and typographic language of LEDVIS. These guidelines define how the brand looks and feels across every surface — from the landing page to on-site PDFs.
01 — Colours
COLOUR PALETTE
Ten brand colours. Use only these. No gradients on interactive elements.
Background
#060606
Page background
Surface
rgba(255,255,255,0.03)
Cards & panels
Accent Blue
#3b82f6
Primary action, logo mark
Accent Hover
#2563eb
Button hover state
Accent Subtle
rgba(59,130,246,0.15)
Badge backgrounds
Text Primary
#f0f0f0
Headings, key values
Text Secondary
#888888
Body copy, nav links
Text Muted
#444444
Labels, captions
Success Green
#22c55e
Confirmed states
Error Red
#ef4444
Errors, destructive
02 — Typography
TYPE SYSTEM
Three fonts. Each has a defined role. Never mix roles.
01 — Bebas Neue — Display / Headings
CALCULATE. CONFIGURE. DEPLOY.
H1 headingsSection titlesLogo wordmarkPrice figuresLetter-spacing: 0.04em on UIAlways uppercase
02 — Outfit — Body / UI
The professional LED wall planner built for AV integrators and field technicians. Every calculation, every spec, one tool.
Body copy: weight 300Labels: weight 600–700Buttons: weight 600Nav links: weight 400–500Default UI font
03 — DM Mono — Monospace / Section Labels
PIXEL PITCH · PORT CAPACITY · POWER CHAIN
01 — SELECT PANEL · 02 — CONFIGURE WALL
The logo is a 32px mark (4-quadrant LED grid) plus the LEDVIS wordmark in Bebas Neue.
On dark (primary)
LEDVIS
Mark: 32×32px, 8px radius, #3b82f6
Wordmark: Bebas Neue, 22px, #f0f0f0
Letter-spacing: 0.06em
Gap between mark and name: 10px
On light
LEDVIS
→Wordmark colour: #060606
→Mark fill unchanged: #3b82f6
→Minimum size: 20px mark + 18px type
Mark only (favicon / icon)
Use mark only when wordmark won't fit
Radius scales proportionally
Never invert the quadrant opacity pattern
Never change the mark colour
04 — Navigation
NAV STATES
Three nav variants. Each has a defined context. Use the correct one every time.
Marketing — landing page / pricing
LEDVIS
CapabilitiesPricingGlossary
Sign inGet Started — Free
Logo left · Nav links centre · Sign in ghost + Get Started primary CTA right · Height 64px · Background rgba(6,6,6,0.85) blur(20px)
Auth — login / register / welcome
LEDVIS
Logo centred only · No nav links · No CTAs · Used on all authentication flows
Account — dashboard
LEDVIS
JD
Sign out
Logo left · Avatar (initials) + Sign out right · No nav links · Used on account dashboard
05 — Buttons
BUTTON SYSTEM
Three button styles. Use primary for the single most important action per screen.
Primary
Subscribe — £3.99/mo
bg: #3b82f6
hover bg: #2563eb
height: 40px (default)
height: 54px (xl)
padding: 0 20px (default)
border-radius: 8px
font: Outfit 600 14px
transition: all 200ms ease
Ghost
View Pro plans
bg: transparent
border: 1px solid rgba(255,255,255,0.14)
hover border: rgba(255,255,255,0.22)
hover bg: rgba(255,255,255,0.07)
color: #888 → #f0f0f0 on hover
Same height/radius as primary
XL (hero / CTA)
Start Planning — It's Free
height: 54px
padding: 0 32px
font-size: 16px
border-radius: 12px
Arrow icon: 15×15px stroke
Used in hero and CTA sections only
06 — Spacing & Radius
SPACING SCALE
Base unit: 4px. All spacing is a multiple of 4.
Spacing tokens
4pxMicro gap (icon + label)
8pxTight spacing, pill padding
12pxButton gap, form row gap
20pxButton padding
24pxCard padding (compact)
32pxCard padding
48pxPage horizontal padding
64pxSection gap, nav height
Border radius tokens
5pxBadges, micro pills
7pxSmall buttons, stat cards
8pxButtons, inputs, form fields
10pxCards, panels
14pxFeature cards, pricing cards
16pxAuth cards, modals
999pxPills, status badges
07 — Global Rules
THE NON-NEGOTIABLES
These rules apply everywhere, always.
01
Background is always #060606. Never #000000, never #111111. Never use white or light backgrounds for main content areas.
02
Accent blue is #3b82f6. Never #4f46e5, never #6366f1. No gradient fills on interactive elements.
03
Bebas Neue is used only for display text: headings, the wordmark, price figures, step numbers. Never use it for body copy or UI labels.
04
Outfit is the default UI font. Font weight 300 for body copy, 500 for nav links, 600 for buttons and labels, 700 for emphasis.
05
DM Mono is used only for eyebrows, section labels, step indicators, and technical values. Always uppercase with letter-spacing 0.12–0.14em.
06
Cards use background rgba(255,255,255,0.03) with border rgba(255,255,255,0.07). Never use solid background colours for cards.
07
Nav is always position:fixed, height 64px, background rgba(6,6,6,0.85), backdrop-filter blur(20px), border-bottom rgba(255,255,255,0.08).
08
Every interactive element must have a hover state. No static buttons. Transitions are always 200ms ease or 300ms ease — never instant, never slow.
09
The LEDVIS wordmark is always all-caps. Never "Ledvis", never "ledvis", never mixed case. The logo mark and wordmark are always shown together at 10px+ gap.
10
All currency figures use £ prefix (GBP). Prices are displayed in Bebas Neue at large sizes. Sub-copy is Outfit weight 300 in text-muted colour.