FreeVoice Antwoordservice

Overview

FreeVoice Antwoordservice embodies a "Professional Warmth" aesthetic—a design language that balances corporate authority with human accessibility. Established in 2006, the brand serves Dutch businesses seeking reliable telephone answering and remote secretarial support. The visual identity pairs a vibrant teal primary (#4bbbba) with a deep navy secondary (#1d1d3d), creating a confident yet approachable presence. The UI evokes trust, efficiency, and personal connection: users encounter a clean, grid-based layout punctuated by teal accent elements and photography-driven hero sections featuring the FreeVoice team. The emotional response is one of reassurance—this is a service that answers when you cannot.

The brand voice is direct, professional, and conversational in Dutch. Vocabulary leans toward service-oriented clarity: "antwoordservice," "secretaresse op afstand," "bereikbaarheid." Tone avoids corporate jargon; instead, it speaks to real business needs with practical confidence. Example: "Sinds 2006 dé antwoordservice voor jouw bedrijf—wij bestaan dit jaar 20 jaar!" The exclamation conveys pride in longevity without hyperbole.

Colors

The FreeVoice color system operates on a dual-tone principle: teal (#4bbbba) as the primary brand accent and navy (#1d1d3d) as the secondary anchor. Primary teal is deployed on all interactive CTAs (buttons, links, hover states), feature icons, and accent elements—it signals actionability and brand presence. The hover state darkens to #438f8e, maintaining legibility and providing tactile feedback. Secondary navy (#1d1d3d) anchors the navigation bar, footer, and large content blocks; it conveys stability and professionalism. The tertiary blue (#2871b0) and its lighter variant (#63a3db) support data visualization, secondary buttons, and informational callouts. Surfaces are predominantly white (#ffffff) with a subtle gray scale for depth: surface-container-low (#e7e7e7) for input backgrounds,

Typography

The type system employs a two-family strategy: Ubuntu (sans-serif, 600–700 weight) for headlines, navigation, and labels, paired with Open Sans (400 weight) for body copy and descriptive text. This pairing communicates precision (Ubuntu's geometric structure) balanced with readability (Open Sans's generous spacing). Display text (56px, 700 weight, -0.03em tracking) anchors hero sections; headline-lg (40px, 600 weight) titles major sections; body-md (14px, 400 weight, 22px line-height) ensures comfortable reading at standard viewport sizes. Label-md (14px, 600 weight, 0.02em tracking) is applied to buttons and form labels, providing visual hierarchy without size inflation. On small labels overlaid on photography or busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure

Layout

The layout employs a 12-column responsive grid with a fixed container max-width of 1200px, centered with auto margins. Gutter width is 15px (padding-left/right on columns), providing breathing room without excessive whitespace. The page rhythm follows a "section-based" model: hero (full-width, 100px top padding), feature cards (3-column grid on desktop, 1-column on mobile), and footer (full-width navy background). Spacing between major sections uses lg spacing (40px) for visual separation; internal card padding uses md spacing (24px). The grid collapses to single-column on screens below 768px, with gutter reduced to 12px (sm spacing) for mobile efficiency. Container max-width prevents text lines from exceeding ~80 characters, maintaining readability. White-space is intentional: the hero se

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. The base elevation (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields) applies a soft shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a gentle lift. Level 3 (modals, dropdowns, hover states on cards) uses a more pronounced shadow: 0 4px 12px rgba(0, 0, 0, 0.08), signaling prominence. The legacy shadow from the codebase (0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15)) is retained for consistency with existing components but is reserved for special emphasis (e.g.

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied judiciously to soften corporate rigidity without sacrificing professionalism. Buttons and input fields use a 0.5rem (8px) border-radius (DEFAULT), providing a modern, approachable feel while remaining distinctly digital. Feature icons and larger containers (cards, modals) use 1rem (16px) border-radius (lg), creating visual hierarchy and breathing room. The navigation bar and hero section remain sharp (0px radius) to anchor the layout and convey stability. Full-radius (9999px) is applied only to badges and small accent element

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses teal (#4bbbba) background with white text, 10px vertical and 25px horizontal padding, and 44px minimum height for touch targets. The label-md typography (14px, 600 weight) ensures legibility. On hover, the background transitions to #438f8e (primary-container) over 0.2s, providing immediate visual feedback. The button-secondary component mirrors the primary but uses navy (#1d1d3d) background, anchoring secondary actions (e.g., "Cancel", "Learn More"). Both buttons have border-radius: 4px (DEFAULT), maintaining consistency with the existing codebase while signaling modernity.

Navigation & Links The navigation bar spans full-width with navy background (#1d1d3d) and white text. Nav links u

Do's and Don'ts

**Do**

• Do use teal (#4bbbba) for all primary CTAs—buttons, links, and interactive elements—to maintain brand consistency and signal actionability.
• Do apply the Ubuntu typeface (600+ weight) to all headlines, navigation, and labels; reserve Open Sans (400 weight) for body copy to create clear visual hierarchy.
• Do maintain a minimum 44px height on all touch targets (buttons, input fields) to ensure mobile accessibility and usability.
• Do use the full-width navy (#1d1d3d) navigation bar as the primary wayfinding element; keep it sticky on scroll for persistent access.
• Do apply soft shadows (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers to create subtle depth without visual noise.
• Do respect the 1200px container max-width and 12-column grid for responsive consistency across all screen sizes.

**Don't**

• Don't use navy (#1d1d3d) for primary CTAs; it reads as secondary and diminishes call-to-action urgency.
• Don't apply border-radius greater than 1rem (16px) to buttons or input fields; it dilutes the professional aesthetic.
• Don't mix Ubuntu and Open Sans weights arbitrarily; maintain the 600+ for UI elements and 400 for body text.
• Don't apply gradients or blur effects; the FreeVoice aesthetic is flat, clean, and print-ready.
• Don't use the error red (#cf2e2e) for non-error states; reserve it strictly for validation messages and alerts.
• Don't exceed 80 characters per line in body text; use the 1200px container max-width and appropriate font sizes to maintain readability.