Serviceplan Agents

Overview

Serviceplan Agents is a B2B SaaS platform delivering AI-powered marketing intelligence through a human-centered, email-first interface. Built by Plan.Net Studios (Serviceplan Group), the brand embodies 'Pragmatic Professionalism'—a design philosophy that prioritizes clarity, speed, and trustworthiness over decorative flourish. The aesthetic is deliberately austere: a clean white canvas with strategic red accents (#ff4b4f) that signal action and urgency, paired with a sophisticated dark-gray hero section (#363636) that conveys authority and European design sensibility. The UI evokes the feeling of working with a knowledgeable colleague—direct, efficient, and never condescending.

The brand voice is precise, confident, and slightly irreverent. Serviceplan Agents speak in active voice, avoid marketing clichés, and ground every claim in concrete deliverables. Example: 'Hannah won't sugarcoat weak data, and Elena won't let unrealistic timelines slide.' The vocabulary favors specificity (e.g., 'Statista' and 'GWI' instead of 'premium data sources') and domain expertise (e.g., 'competitive analysis,' 'audience insights,' 'EU AI Act-compliant'). The tone is conversational but authoritative—a senior strategist explaining a complex process to a peer, not a salesperson pitching a solution.

Colors

The color system operates on a principle of 'Minimal Accent'—a predominantly neutral palette (white, light gray, dark gray) punctuated by a single, unmistakable brand red. Primary (#ff4b4f) is the signature call-to-action color, applied to buttons ('Free Analysis,' 'Accept all'), form accents, and interactive states. It is never used for body text or backgrounds, preserving its psychological weight as a signal of commitment. Secondary (#8fc49f), a muted sage green, appears in supporting UI elements (badges, secondary containers) and reinforces the brand's European, sustainable positioning without competing for attention. Tertiary (#363636) is the dark anchor used in the hero section, navigation, and high-contrast text overlays, establishing gravitas and visual hierarchy.

The surface stack

Typography

The type system pairs AvenirLTProHeavy (700 weight) for headlines and AvenirLTProMedium (600 weight) for subheadings, creating a clear hierarchy rooted in weight rather than size alone. Body copy uses Avenir normal (400 weight) at 16px / 24px line-height for optimal readability on screen. Display (56px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (40px, 700 weight) for subsection titles; headline-md (28px, 600 weight) for card titles and form labels. Label-md (16px, 500 weight, 0.01em letter-spacing) is applied to button text and interactive labels to ensure legibility at small sizes. All type sizes are locked to the 8px unit grid (8, 12, 16, 20, 28, 40, 56px). When displaying small labels over busy backgrounds (e.g., badges on c

Layout

The page uses a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with a dark background (#363636) and white text, establishing immediate visual contrast. Content sections below use a gutter of 24px (md spacing) between columns and 40px (lg spacing) for vertical section separation. The white-space philosophy is 'generous but purposeful': avoid cramping; use lg spacing (40px) between major sections (hero, use cases, how-it-works, FAQ) and md spacing (24px) between cards within a section. Container padding is consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. The grid is fluid up to 1280px, then fixed. All spacing increments follow the 8px unit scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) to maintain vi

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening or blur effects. The elevation system uses three levels: Level 1 (Base) has no shadow; Level 2 (Cards, Input Fields) uses {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)), creating a gentle lift from the surface; Level 3 (Modals, Elevated Containers) uses {elevation.lg} (0 12px 40px rgba(0, 0, 0, 0.16)), signaling prominence and focus. On hover, cards transition from Level 2 to Level 3 over 200ms, providing tactile feedback. The cookie banner at the bottom of the page uses {elevation.lg} and a 1px border at rgba

Shapes

The shape philosophy is 'Architectural Minimalism'—sharp, geometric, and purposeful. Buttons use {rounded.DEFAULT} (0.5rem / 8px) for a subtle softness that prevents harshness without appearing playful. Cards and modals use {rounded.lg} (1rem / 16px) to create a slightly more generous corner radius, signaling containment and focus. Input fields use {rounded.DEFAULT} (8px) to align with buttons and maintain visual consistency. The cookie banner and dropdowns use {rounded.lg} (14px in the live CSS, approximated to 1rem here) to feel slightly more approachable. Avoid full-radius (9999px) except f

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses {colors.primary} (#ff4b4f) background, {colors.on-primary} (white) text, {typography.label-md} (16px, 500 weight), {rounded.DEFAULT} (8px), and padding of 12px 32px for a 44px total height. On hover, apply button-primary-hover: reduce opacity to 0.88 and transition over 200ms ease-in-out. Never change the background color on hover; the red is too distinctive to dilute. The button-secondary component uses a transparent background with a 1px border at {colors.outline} (#8e8e8e), white text, and the same padding and height. On hover, apply button-secondary-hover: set background to {colors.surface-container-high} (#e0e0e0) and transition over 200ms. Buttons should never have a box-shadow; they ar

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff4b4f) exclusively for CTAs, focus states, and error indicators—never for body text or backgrounds.
• Do maintain 40px (lg spacing) between major sections and 24px (md spacing) between cards to preserve visual breathing room.
• Do apply 200ms ease-in-out transitions to all hover states (buttons, cards, list items) for smooth, predictable interactions.
• Do use {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and {elevation.lg} (0 12px 40px rgba(0, 0, 0, 0.16)) for modals; never stack multiple shadows.
• Do pair AvenirLTProHeavy (700 weight) with AvenirLTProMedium (600 weight) for headlines to create clear hierarchy through weight, not size alone.
• Do use {rounded.DEFAULT} (8px) for buttons and inputs, {rounded.lg} (16px) for cards, and {rounded.full} (9999px) only for badges and micro-interactions.

**Don't**

• Don't apply {colors.primary} to backgrounds or body text; it is reserved for interactive elements and signals urgency.
• Don't use full-radius (9999px) on buttons or cards—it contradicts the Architectural Minimalism aesthetic and feels too playful.
• Don't add shadows to buttons or inline elements; the system is flat and direct, with shadows reserved for containers and elevated surfaces.
• Don't mix font families within a single component; use AvenirLTProHeavy for headlines, AvenirLTProMedium for labels, and Avenir normal for body text.
• Don't reduce spacing below 12px (sm) between elements or below 24px (md) between sections; the brand values clarity and breathing room.
• Don't apply opacity changes on hover for buttons; instead, use the button-primary-hover state (opacity 0.88) or change the background color for secondary buttons.