It fits together.
Components compose as a system. Similar materials, careful construction, and recognizable details help one Heckler product live naturally beside another.
Brand guidelines
Hardware that fits.
A public reference for the essential Heckler brand system: marks, color, typography, voice, photography, and the restraint that keeps every touchpoint precise.
Strategy
A product design company for commercial AV environments.
Heckler designs hardware that fits: the space, the devices, and the people using them. The brand is confident, precise, understated, and built for professionals who value quality over flash.
It fits your devices.
Heckler hardware connects with the devices organizations already use, including displays, computers, video bars, schedulers, and room systems.
It fits your workspace.
The range is built for real meeting rooms, classrooms, conference rooms, hotels, retail floors, restaurants, and specialized commercial spaces.
Marks
Lead with the wordmark. Use the pictogram when space calls for it.
The lowercase Heckler wordmark is the default mark for headers, lockups, and editorial use. The pictogram is an equal-weight brand mark intended for favicons, app icons, social avatars, dense product labels, and other small-format contexts.
- Always set the wordmark as lowercase heckler.
- Use black on warm white or warm white on black.
- Do not add color, shadows, outlines, distortion, rotation, or effects.
- Do not place marks over busy backgrounds.
- Use the favicon-optimized pictogram only at small sizes where the standard mark loses clarity.
Color
Monochrome first. Color only when it does work.
Most Heckler layouts use warm white and near black. CTA Blue is reserved for links, buttons, and interactive highlights. Status colors exist for product and interface feedback.
Pantone values are not specified in design.md. The approved public values here are hex and RGB; print-specific Pantone matching should be confirmed separately before production.
Black
- Token
- colors.black
- Hex
- #2F3234
- RGB
- 47, 50, 52
Primary text, inverted surfaces, structural lines.
Warm White
- Token
- colors.white
- Hex
- #FDFCF8
- RGB
- 253, 252, 248
Page surfaces. Pure #FFFFFF is off-brand.
Band
- Token
- colors.band
- Hex
- #F4F1EA
- RGB
- 244, 241, 234
Subtle section emphasis on warm-white pages.
CTA Blue
- Token
- colors.cta
- Hex
- #0EBBFF
- RGB
- 14, 187, 255
Links, primary CTAs, and interactive highlights only.
Success
- Token
- colors.success
- Hex
- #73D277
- RGB
- 115, 210, 119
Confirmations and positive states.
Warning
- Token
- colors.warning
- Hex
- #EFC761
- RGB
- 239, 199, 97
Cautionary states.
Error
- Token
- colors.error
- Hex
- #F66F51
- RGB
- 246, 111, 81
Errors and destructive actions.
Typography
LL Medium carries the brand voice.
The primary typeface is LL Medium, with a clean system stack as fallback. Display type is large and confident, body copy is compact and readable, and uppercase labels are the only place positive tracking appears.
600 weight, 1.05-1.1 line height, tight tracking
Hero headlines and high-emphasis page moments.
400 weight, 1.3 line height
Product, editorial, and guideline copy with a 72-character max line length.
600 weight, uppercase, positive tracking
Section meta, interface labels, and concise navigational cues.
Voice
Direct. Minimal. Let the product speak.
Heckler copy trusts a professional audience. It is plainspoken, active, and precise. It avoids inflated claims and explains only what matters.
- Use short sentences and active voice.
- Avoid exclamation points and decorative language.
- Choose clarity over cleverness.
- Use bold sparingly; solve hierarchy structurally first.
- Keep the canonical tagline exactly as: Hardware that fits.
Layout
Space and structure create confidence.
All spacing resolves to a 24px unit. Layouts are left-aligned, generous, and structurally clear. Sections separate through whitespace or subtle banded fills, not decorative rules.
Use a 12-column grid on desktop and single-column flow on mobile.
Keep cards square or near-square, with 2px radius reserved for buttons, inputs, and badges.
Avoid gradients, color washes, drop shadows, and decorative surface effects.
Iconography
A small, curated icon vocabulary.
Heckler uses the LL Medium stylistic set for editorial inline symbols and Heckler Icons for branded UI, process diagrams, social rows, and dense product interfaces.
Do not introduce off-brand icon libraries into Heckler surfaces.
Use editorial symbols inline when they can share the typeface metrics.
Extend Heckler Icons through the brand process when a new branded glyph is needed.
Photography
Restrained, realistic, and architecturally calm.
Photography carries much of the brand expression. It should show product quality, real-world use, spatial integration, and a calm professional tone without needing explanatory text.
Use 35-50mm full-frame equivalent lenses, with 40-45mm preferred.
Favor soft natural window light, warm-neutral color, low-to-moderate contrast, and lifted blacks.
Use film simulation only for hero, editorial, and brand-narrative imagery; keep catalog and technical imagery clean and literal.