Anruf Guru

Overview

Anruf Guru is a German B2B SaaS platform delivering intelligent voicemail transcription and automation for small businesses and professionals. The design system embodies 'Warm Minimalism'—a philosophy that combines the approachability of warm, earthy tones (#f5efe6 paper, #e9500f vibrant orange) with the clarity of bold, geometric typography (Anton display font at 192px) and functional white space. The brand personality is direct, confident, and human-centered: it speaks to busy professionals who need their phone to work smarter, not harder. The UI evokes a sense of calm competence—like a trusted assistant who handles the details so you don't have to. Voice example: 'Er geht ran, wenn du nicht kannst' (He picks up when you can't)—direct, present-tense, action-oriented, never corporate jargon.

Colors

The color palette is anchored in a warm, off-white paper (#f5efe6) that serves as the primary surface, paired with a deep ink (#17120e) for text and a striking orange accent (#e9500f) that commands attention on CTAs and key interactions. Primary (#e9500f) is the brand's signature accent—used exclusively on call-to-action buttons, active states, and brand-critical highlights. It is warm, energetic, and immediately clickable. Secondary (#b53c08) is a deeper, more muted orange used for hover states and secondary emphasis, creating visual hierarchy without introducing new colors. Tertiary (#17120e) is the deep ink, used for body text and structural elements. Surface stack: surface (#f5efe6) is the default page background; surface-dim (#ebe2d4) is used for subtle section breaks and secondary co

Typography

The type system is built on two foundational typefaces: Anton (display) for headlines and Hanken Grotesk Variable (body/UI) for all other text. Anton is a geometric, high-contrast sans-serif that conveys confidence and modernity—used at 192px for hero headlines (display), 80px for section headlines (headline-lg), and 48px for subsections (headline-md). Its 1.06 line-height and 0.005em letter-spacing create a tight, energetic rhythm. Hanken Grotesk Variable is a humanist sans-serif with excellent readability across weights (100–900); body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while body-md (16px, 400 weight, 24px line-height) handles standard body copy. Label-md (14px, 700 weight, 20px line-height, 0.01em tracking) is applied t

Layout

The layout system uses a fluid, mobile-first grid with a maximum container width of 1320px. The gutter is responsive, scaling from clamp(18px, 4.5vw, 56px), ensuring proportional breathing room across all viewports. Section padding follows a semantic scale: --section uses clamp(72px, 10vw, 144px) for major section breaks, creating a rhythm that feels spacious on desktop (144px) but compact on mobile (72px). The grid is 12-column on desktop, collapsing to single-column on screens ≤900px. White space is treated as a design element: the warm paper background (#f5efe6) is never cluttered; cards and content blocks are separated by at least lg spacing (40px) vertically. Horizontal spacing between UI elements (buttons, form fields) uses md spacing (24px) as the default, reducing to sm spacing (12

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic drop shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like small buttons and badges; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated overlays and sticky elements. Cards use a 1px solid border at rgba(23, 18, 14, 0.18) (--rule) to define edges without relying solely on shadow. Hover states lift elements by 2px (transform: translateY(-2px)) with a 0.18s transition, creating tactil

Shapes

The shape philosophy is 'Functional Geometry'—sharp, intentional corners that communicate precision and clarity. Buttons use full pill-shaped corners (border-radius: 999px) to signal interactivity and approachability; this rounded-full treatment is applied consistently to all primary and secondary buttons, creating a cohesive, friendly CTA language. Cards and containers use md (10px) or lg (16px) border-radius, providing subtle softness without sacrificing the modern, structured aesthetic. Form inputs use DEFAULT (6px) border-radius for a clean, utilitarian appearance. Dividers and rules have

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (orange background, pill-shaped, 18px 30px padding, 56px height), secondary (transparent background, 2px border, pill-shaped), and small (12px 20px padding, 44px height, used for secondary actions). All buttons use Hanken Grotesk Variable at 700 weight (label-md). On hover, primary buttons translate up 2px (transform: translateY(-2px)) and secondary buttons shift to a darker background (surface-container, #ebe2d4). Active state removes the transform. Transition timing is 0.18s for all button interactions (transform, background-color, color). Focus state applies a 3px solid outline at {colors.primary} with 3px outline-offset. Disabled buttons reduce opacity to 50% and set cursor: not-allowed.

Do's and Don'ts

**Do**

• Do use the orange primary (#e9500f) exclusively on CTAs, focus states, and brand-critical highlights—it is the signature accent and must remain distinctive.
• Do maintain the warm paper background (#f5efe6) as the default surface; it is the foundation of the brand's approachable, human-centered aesthetic.
• Do apply Anton display font only to headlines (h1, h2, h3) at 48px or larger; never use it for body text or UI labels.
• Do use pill-shaped buttons (border-radius: 999px) for all primary and secondary CTAs to signal interactivity clearly.
• Do respect the gutter and section spacing scales (clamp values) to maintain responsive, proportional white space across all viewports.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create subtle depth without visual clutter.

**Don't**

• Don't use the orange primary (#e9500f) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states.
• Don't mix Anton and Hanken Grotesk in the same headline; use Anton for display/headlines and Hanken Grotesk for all body and UI text.
• Don't apply border-radius to dividers or rules; keep them sharp (0px) to reinforce structural clarity.
• Don't use glassmorphism, blur effects, or semi-transparent overlays; the design system relies on solid surfaces and crisp shadows for depth.
• Don't hardcode colors in components; always reference the color token system ({colors.primary}, {colors.surface}, etc.) to maintain consistency.
• Don't reduce button padding below 12px 20px or height below 44px; maintain minimum touch targets of 44×44px for accessibility.