ADT Business

Overview

ADT Business is a professional security and monitoring platform designed for small-to-medium enterprises seeking enterprise-grade protection without complexity. The design system embodies 'Trust-Driven Clarity'—a modernist aesthetic that prioritizes directness, confidence, and actionability through high-contrast typography, commanding cobalt blue accents (#0061AA), and generous whitespace. The visual language conveys authority and reliability: bold sans-serif headlines (Mulish 800), clean card hierarchies, and prominent call-to-action buttons that demand attention without ambiguity.

The brand voice is consultative and reassuring—never alarmist, always solution-focused. ADT Business speaks to decision-makers with precision: 'Real-time monitoring of your operations' rather than 'advanced surveillance.' Tone is professional but approachable, technical but never jargon-heavy. Example sentence: 'Your monitoring plan starts at $52.99/month—no long-term contracts, cancel anytime.'

Colors

The color system is anchored by a commanding cobalt blue primary (#0061AA) used exclusively for interactive elements, CTAs, and brand-critical accents. This blue appears on all primary buttons, links, and focus states, creating a consistent visual language of trust and action. Secondary colors include a vibrant red (#dd2c2c, #ff0000) for alerts and error states, and a warm golden accent (#f0c36d, #f9edbe) for promotional highlights and special offers. The surface stack is deliberately minimal: pure white (#ffffff) for the main canvas, with subtle grays (#f5f5f5 to #d1d1d1) for container layering and depth. Text hierarchy is maintained through on-surface (#212529, a near-black) for primary content and on-surface-variant (#46494b) for secondary information. All interactive states use the pri

Typography

The type system uses Mulish as the primary typeface across all scales, chosen for its geometric clarity and professional weight range (300–900). Display and headline levels (60px, 40px, 28px) use fontWeight 800 to command attention and establish hierarchy—critical for hero sections and form headers. Body text (18px, 16px) uses fontWeight 400 with 1.5 line-height (28px, 24px) to ensure readability over long-form content and form instructions. Labels and button text use fontWeight 600–800 with letter-spacing 0.01em to 0.05em, creating visual distinction from body copy. On small labels over busy backgrounds (e.g., badges on colored containers), apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) to ensure legibility. The type pairing communicates professionalism through weight contrast: headlines at

Layout

The page layout uses a fluid 12-column grid with a maximum container width of 1200px, centered on the viewport. Responsive breakpoints are 375px (mobile), 768px (tablet), 1030px (desktop), and 1200px (wide). Gutters are set to 10px on mobile, scaling to 10px on desktop—tight enough to maximize content density without sacrificing breathing room. Section separation uses lg spacing (40px) between major content blocks, creating a clear visual rhythm. The hero section spans full-width with a dark overlay background, while form sections (REQUEST A FREE QUOTE) use a light blue container (#e6f2ff) with md padding (24px) to visually separate the conversion funnel. Card-based layouts use md spacing (24px) for internal padding and sm spacing (12px) for gaps between adjacent cards. Container max-width

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow system and color contrast rather than aggressive depth. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the primary canvas. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0,0,0,0.08) applied to card components, creating subtle lift without visual noise. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.2) for form overlays and modal dialogs, creating pronounced separation from the background. Alert badges and error states use

Shapes

The shape philosophy is 'Professional Roundness'—a balance between geometric precision and approachability. Buttons use full border-radius (9999px / 50%) to create pill-shaped CTAs that feel modern and clickable, particularly the primary call-to-action buttons (border-radius: 35px, padding: 12px 20px). Form inputs use a more conservative rounded-full (border-radius: 1000px, padding: 16px 24px) to maintain form-like familiarity while avoiding sharp corners. Cards and containers use rounded-lg (1rem / 16px) for a professional, structured appearance. The form section header uses rounded-lg (16px)

Components

Action Elements Primary buttons use backgroundColor: {colors.primary} (#0061AA), textColor: {colors.on-primary} (#ffffff), with rounded: full (9999px) and padding: 16px 24px. Font weight is 800 at 18px, creating visual dominance. On hover, transition to backgroundColor: {colors.primary-container} (#1161AA) over 200ms. The call-to-action button variant uses border-radius: 35px with a 2px solid border in {colors.on-primary} (#ffffff), creating a distinctive outlined appearance. Secondary buttons use transparent background with a 2px border in {colors.primary}, transitioning to backgroundColor: {colors.surface-container-high} on hover. All buttons include transition: all 200ms ease-in-out for smooth state changes.

Containers & Surfaces Cards use backgroundColor: {colors.surface} (#ff

Do's and Don'ts

**Do**

• Do use Mulish fontWeight 800 for all headlines and primary CTAs—the bold weight creates the visual authority that builds trust with enterprise buyers.
• Do apply the primary blue (#0061AA) exclusively to interactive elements (buttons, links, focus states)—never use it for passive surfaces or text, as it dilutes the action signal.
• Do maintain md spacing (24px) between form sections and lg spacing (40px) between major content blocks to create clear visual rhythm and reduce cognitive load.
• Do use the full border-radius (9999px) on primary buttons and pill-shaped inputs to signal interactivity and modernity without sacrificing professionalism.
• Do transition all interactive states over 200ms ease-in-out—this creates tactile feedback that reassures users their action was registered.

**Don't**

• Don't use the secondary red (#dd2c2c, #ff0000) for anything other than alerts, errors, and critical warnings—overuse dilutes its urgency signal.
• Don't apply shadows heavier than 0 6px 10px rgba(0,0,0,0.14) on standard cards; excessive depth creates visual noise and undermines the clean, trustworthy aesthetic.
• Don't mix typefaces—Mulish is the sole brand typeface. Avoid Open Sans or system fonts in component-level design, even if they appear in legacy code.
• Don't use border-radius values between 16px and 35px on buttons; stick to either lg (16px) for structured containers or full (9999px) for primary CTAs to maintain visual consistency.
• Don't place text directly on colored backgrounds without sufficient contrast or a subtle text-shadow (0 1px 2px rgba(0,0,0,0.1))—readability is non-negotiable for form labels and badge text.