The Engage365 Visual System
Engage365 is a done-for-you marketing partner for small businesses. Our brand is built on confidence, clarity, and action. The visual system is intentionally bold and minimal — black and white with a single warm accent that signals energy and momentum.
Primary
Burnt orange is the only accent color. It signals CTAs, highlights, and energy. Use it sparingly — never as a background fill at large scale.
Neutrals & Overlays
Warm cream (#FAF8F5) is used for section backgrounds and the ticker bar. Overlays are applied as solid black with varying opacity — never gray hex codes.
Font Family
Engage365 uses the system sans-serif stack. No custom web fonts are loaded — this keeps pages fast and ensures crisp rendering across all devices.
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;Headlines use font-black (900 weight). Body copy uses normal weight. Labels and buttons use font-bold (700) with wide letter-spacing.
Type Scale
Wordmark Specs
The Engage365 logo is a wordmark. When creating a new version:
- Use a bold, condensed sans-serif typeface
- "Engage" and "365" should feel like one connected unit
- The "365" can receive the burnt orange accent as a color treatment
- Maintain strong contrast — never place the dark logo on dark backgrounds
Clearspace & Minimum
Maintain at least the height of the "E" in "Engage" as clearspace on all sides. Minimum display width: 100px.
Primary Button
Background: #E8591A
Text: White, uppercase, 0.3em tracking
Padding: px-8 py-3.5
Hover: opacity 85%
Secondary Button
Border: 1px solid rgba(0,0,0,0.5)
Text: Black, uppercase, 0.3em tracking
Hover: border solid black
Background: transparent
Borders
1px solid black borders are a core visual element. Used to separate sections, divide grids, and frame content.
Section Padding
Horizontal padding: px-8 on mobile, px-14 on desktop. Vertical: py-16 to py-24 for major sections.
Grid System
12-column grid on desktop. Two-column splits for editorial layouts. Three-column for feature cards and process steps.
How We Sound
What We Avoid
Style Direction
Full-color lifestyle photography with warm natural lighting. Real people in authentic small business settings. Avoid overly staged corporate stock. Golden afternoon tones preferred.
- Warm color grading, rich tones
- Natural window light or golden hour
- Genuine expressions, not posed smiles
- Small business environments — shops, offices, streets
Overlays
Hero images and background photos always receive a dark gradient overlay to ensure white text readability.
bg-gradient-to-r from-black/75 via-black/45 to-black/20Or solid overlay: bg-black/60
To save as PDF: press Ctrl+P (or Cmd+P on Mac), set Destination to "Save as PDF," and print.
This guide is a living document. Update as the brand evolves.