Serviceplan Agents

Overview

Serviceplan Agents is an enterprise AI marketing platform that embodies 'Architectural Minimalism'—a design philosophy that prioritizes clarity, precision, and functional elegance over ornamentation. The interface serves as a professional command center for AI-driven market research, competitive analysis, and strategic planning, designed for marketing teams and business strategists who demand both power and visual clarity. The aesthetic combines a clean white canvas with strategic use of vibrant accent colors (coral-red #ff4b4f for primary CTAs, deep purple #6400ff for secondary actions, and magenta #dd23bb for tertiary highlights), creating a visual hierarchy that guides users through complex workflows without cognitive overload. The emotional response is one of confidence and control: users feel empowered by the interface's transparency and the precision of its typography and spacing.

The brand voice is direct, professional, and data-driven—never breathless or casual. Serviceplan Agents speaks to enterprise clients with the authority of 50+ years of marketing expertise. Vocabulary emphasizes capability ('AI-Coworker,' 'Agents,' 'Expertise') and outcomes ('Market Research,' 'Competitive Analysis,' 'Strategic Planning'). Example sentence in brand voice: 'Your AI-Coworker delivers competitive intelligence in real time, powered by Serviceplan's decades of market insight.'

Colors

The color system is anchored by a sophisticated neutral foundation (white #ffffff for surfaces, charcoal #171717 for primary text, mid-gray #737373 for secondary content) that establishes trust and readability. The primary accent is a vibrant coral-red (#ff4b4f), used exclusively on high-priority CTAs ('Kostenlose Analyse') and interactive states to command attention without aggression. Secondary accent is a deep purple (#6400ff), deployed on secondary buttons and interactive elements that require distinction but lower visual weight than primary. Tertiary accent is a magenta (#dd23bb), reserved for status indicators, badges, and specialized UI elements. The surface stack progresses from #ffffff (base) through #f5f5f5 (dim), #fafafa (bright), #efefef (container-lowest), and #c6c6c6 (contain

Typography

The type system pairs AvenirLTProHeavy (display/headline weights) with Inter (body/label weights), creating a deliberate contrast between authoritative headlines and accessible body copy. Display (56px, 700 weight, -0.02em tracking) commands attention on hero sections and major section breaks; Headline-lg (40px, 700 weight) anchors subsections; Headline-md (28px, 600 weight) introduces feature blocks. Body-lg (18px, 400 weight, 28px line-height) ensures readability in long-form content; Body-md (16px, 400 weight, 24px line-height) is the default for UI copy and descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, with Label-sm (12px, 500 weight, 0.02em tracking) for secondary UI text. The pairing communicates 'established expertise meets mod

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, enabling responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). Container padding is 24px on desktop, reducing to 20px on tablet and 16px on mobile. Section separation follows the spacing scale: lg (40px) between major sections (hero to features, features to testimonials), md (24px) between subsections, and sm (12px) between related elements. The gutter between grid columns is 24px, maintaining consistent breathing room. White-space is treated as a design element, not a void—generous margins around cards (12px padding minimum) and sections (40px vertical separation) reduce cognitive load and emphasize content hierarchy. The container-max-width of 1280px ensures that on ultr

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, diffuse shadows of skeuomorphism. Level 1 (Base/Cards): 0 3px 8px rgba(0, 0, 0, 0.15)—a tight, close shadow that suggests the card is 4px above the surface. Level 2 (Hover/Elevated Cards): 0 6px 16px rgba(0, 0, 0, 0.15)—a slightly larger blur radius and offset, indicating 8px elevation and inviting interaction. Level 3 (Modals/Overlays): 0 8px 32px rgba(0, 0, 0, 0.15)—the maximum shadow, used sparingly for modals and floating panels that demand focus. Glass-effect surfaces (hero overlays, form containers) use a combina

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the precision of the grid while maintaining a professional, engineered aesthetic. Buttons and form inputs use rounded: DEFAULT (0.5rem / 8px), a subtle radius that feels modern without appearing playful. Cards use rounded: lg (1rem / 16px), providing enough curvature to distinguish them from the background while respecting the minimalist aesthetic. Modals and overlays use rounded: xl (1.5rem / 24px), the maximum radius, to create a sense of containment and importance. Badges and small UI elements use roun

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (background: #ff4b4f, color: #ffffff, padding: 12px 32px, height: 48px, rounded: 8px, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) is reserved for high-priority CTAs like 'Kostenlose Analyse.' On hover, the background shifts to #ff6b68 and the shadow expands to 0 6px 16px rgba(255, 75, 79, 0.25), creating a lifting effect over 200ms (transition: all 0.2s ease-out). The secondary button (background: #ffffff, color: #171717, border: 1px solid #e5e5e5, padding: 12px 32px, height: 48px) is used for lower-priority actions like 'Demo anfragen.' On hover, the background becomes #f5f5f5 and the border darkens to #171717, with the same 200ms transition. Both button variants use typography: label-md (14px, 600 weight

Do's and Don'ts

**Do**

• Do use the primary red (#ff4b4f) exclusively on high-priority CTAs and focus states—it commands attention and must never be diluted by overuse.
• Do maintain the 24px gutter between grid columns and 40px section separation to preserve the minimalist aesthetic and reduce cognitive load.
• Do apply the full shadow stack (0 3px 8px for base, 0 6px 16px for hover, 0 8px 32px for modals) to create consistent depth without visual chaos.
• Do use AvenirLTProHeavy for headlines (56px–28px) and Inter for body copy (18px–12px) to maintain the contrast between authority and accessibility.
• Do apply 200ms transitions (transition: all 0.2s ease-out) on all interactive elements to signal interactivity without feeling sluggish.

**Don't**

• Don't use rounded corners larger than 16px on cards or standard containers—it conflicts with the 'Soft-Technical' aesthetic and reads as playful rather than professional.
• Don't apply multiple accent colors to a single element; use primary red for CTAs, purple for secondary actions, and magenta only for badges or status indicators.
• Don't exceed 1280px container max-width on desktop, as content becomes difficult to scan and the minimalist aesthetic is lost.
• Don't use shadows larger than 0 8px 32px or blur radii greater than 32px—the system relies on subtle elevation, not dramatic depth.
• Don't mix font families within a single headline or body paragraph; maintain AvenirLTProHeavy for headlines and Inter for body to preserve visual hierarchy.