Brand Guidelines
Identity, voice, and visual standards
The design language, tone, and rules that keep the Heckler brand consistent for partners, integrators, and collaborators.
Brand Strategy
Mission
To create products that fit — the space, the devices, and the people using them.
The Three Fits
It fits together.
Products work in concert, not competition. Integration is seamless from the first interaction.
It fits your devices.
Heckler works across screens and form factors without compromise, responsive and purposeful.
It fits your workspace.
We respect your environment—visual, spatial, and operational. Nothing intrusive or overdone.
Brand Personality
Precise
Understated
Design-forward
Professional
Brand Positioning
| Category | Workspace management software |
| Markets | Higher education, corporate offices, hospitality |
| Channel | Direct sales, integration partners, system integrators |
| Differentiator | Invisible design that prioritizes the space over technology |
Wordmark
The wordmark is always lowercase. Always tracked tight. Always monochrome.
Standard Usage
On Warm White
Inverted on Black
Construction Rules
| Form | Lowercase, single line, tight tracking |
| Color | Black on light or white on dark. Always monochrome. |
| Sizing | Minimum 120px wide; scale proportionally up from there |
| Clear Space | Minimum 12px padding on all sides; more on sides if text follows |
Never Do This
Color Wordmark
Stretched
Low Contrast
Rotated
Color Palette
Core Colors
#2F3234
#FDFCF8
#0EBBFF
Status Colors
#73D277
#FDFC61
#F66F51
Color Usage Rules
- Use black text on warm white for primary content
- CTA blue for interactive elements and hyperlinks only
- Status colors signal outcomes; never use for decoration
- Maintain minimum 4.5:1 contrast ratio for accessibility
Typography
Primary Typeface
MediumLL (LL Type) with system-UI fallback
Type Scale
| H1 (Display) | 48–72px | Page titles, hero statements |
| H2 (Section) | 36–48px | Section headings |
| H3 (Subsection) | 24–32px | Subsections, card titles |
| H4 (Label) | 16–20px | Field labels, callout headers |
| Body | 14–18px | Paragraph text, list items |
| Eyebrow | 12px, uppercase | Category labels, section tags |
Typography Rules
- Use font weights 400 (regular), 600 (semibold), and 700 (bold) only
- Never use italic; use roman (regular) weight and color for emphasis
- Line-height: 1.6 for body, 1.2–1.3 for headings, 1.5 for large text blocks
- Always reset margin to 0 on headings before applying intentional spacing
Spacing System
Base unit: 24px
Spacing Tokens
| 0.5u | 12px | |
| 1u | 24px | |
| 1.5u | 36px | |
| 2u | 48px | |
| 3u | 72px | |
| 4u | 96px | |
| 6u | 144px |
Layout Defaults
| Page Margin (inline) | clamp(20px, 4vw, 64px) |
| Max Container Width | 1600px |
| Column Gutter | clamp(24px, 4vw, 48px) |
| Section Spacing | clamp(48px, 8vw, 96px) top & bottom |
Voice & Tone
Core Principles
Be specific, not buzzwordy
Name the actual benefit. Avoid jargon, platitudes, and hype words.
Address the user, not the tech
Write “you” and “your.” Explain what they’ll accomplish, not how the system works.
Confidence without arrogance
Stand behind the product. Acknowledge trade-offs. Never oversell.
Assume the reader is busy
Say the most important thing first. Cut unnecessary words. Be scannable.
Precision over poetry
Clarity always wins. A plain sentence beats a clever one.
Professional, not stuffy
Competent and respectful. Avoid corporate voice. Use active verbs.
Examples
Avoid
Leverage our cutting-edge technology to unlock your workspace’s full potential through seamless integration.
Use This
See exactly which rooms are booked and available, anywhere, anytime.
Avoid
Synergize your organizational ecosystem with our best-in-class solutions.
Use This
Teams coordinate faster with fewer emails and calendar conflicts.
Never Use These Words
Revolutionary
Cutting-edge
Synergy
Seamless
Disruptive
Ecosystem
Leverage
Holistic
Best-in-class
Flexible
Scalable
These words are overused in tech and corporate marketing. Be specific instead.
Photography
Style Direction
Environment
Real workspaces. Actual furniture, light, and conditions. No sterile studio sets.
Light
Natural daylight preferred. Even, soft, no dramatic shadows. Emphasize the space itself.
Camera
Eye-level perspectives. Show how people interact with rooms. Avoid wide architectural angles.
Surface Palette
#E8DCC8
#A89968
#1A1A1A
#D4CCC4
Include & Avoid
Include
- Real people in actual workspaces
- Detail shots of materials and finishes
- Warm, neutral color palettes
- Multiple perspectives of the same space
Avoid
- Stock photos or generic office clichés
- Heavy filters or color grading
- Overly styled, designer-perfect spaces
- Tight crops that isolate from context
Do’s & Don’ts
Quick reference guide for consistent brand application.
Wordmark
Do
- Use monochrome (black or white)
- Maintain minimum clear space
- Preserve aspect ratio
- Place on solid, high-contrast backgrounds
Don’t
- Add color, gradients, or effects
- Stretch, compress, or rotate
- Place on busy or patterned backgrounds
- Use the logo smaller than 120px wide
Color
Do
- Use colors from the palette
- Test contrast ratios (WCAG AA minimum)
- Reserve blue for CTAs and links
- Use status colors for semantic meaning
Don’t
- Create new color variations
- Use light text on light or dark on dark
- Use status colors for decoration
- Mix multiple primary brand colors in one space
Typography
Do
- Reset margins (margin: 0) on headings first
- Use weights 400, 600, and 700 only
- Match font sizes to the type scale
- Use system fonts as fallback
Don’t
- Use italic for emphasis; use bold or color instead
- Mix typefaces
- Set body text smaller than 14px
- Use all caps for body text
Voice & Tone
Do
- Be specific about benefits
- Address the user directly
- Use active voice
- Lead with the most important idea
Don’t
- Use hype words or jargon
- Focus on features over outcomes
- Use passive voice or corporate-speak
- Overcomplicate the message
Photography
Do
- Show real workspaces and real people
- Use natural or soft light
- Include context and environment
- Feature materials and finishes
Don’t
- Use generic stock photos
- Over-edit or apply heavy filters
- Feature overly styled or sterile spaces
- Use photos that obscure context
Spacing & Layout
Do
- Use spacing tokens (0.5u, 1u, 1.5u, etc.)
- Use clamp() for responsive sizing
- Reset margins to 0 before custom spacing
- Maintain consistent gutters and section gaps
Don’t
- Use arbitrary pixel values
- Mix different spacing systems
- Rely on margins without resets
- Create cluttered, tightly packed layouts
Icons & Symbols
HecklerIcons 1.7 — a custom OpenType icon font with 111 mapped codepoints. Includes named icons, directional arrows, symbols, and a full alphanumeric set. Stylistic alternates (ss01) provide variant forms for key icons.
Named Icons
Default glyph shown left, ss01 alternate shown right.
Arrows
Directional glyphs with ss01 alternate pairs.
Symbols
Reserved PUA
Codepoints E019 – E01F are mapped but currently unassigned. Available for future icon additions.
Alphanumeric
Full A – Z, a – z, and 0 – 9 at standard ASCII codepoints, rendered in the HecklerIcons typeface.