fat IT SOLUTIONS

Overview

fat IT SOLUTIONS is a B2B IT services provider serving German SMEs with Microsoft Office 365, Azure, and cloud migration expertise. The design system embodies 'Approachable Professionalism'—a philosophy that marries corporate credibility with human warmth. The brand aesthetic rejects cold, austere tech aesthetics in favor of soft geometric forms (3px–10px border-radius), a sophisticated lavender primary (#bab4d9) paired with grounded charcoal (#4b5255), and generous white space that breathes. The UI evokes trust and accessibility simultaneously: a user should feel that complex IT problems are being handled by competent friends, not distant consultants. The emotional response is calm competence—the visual language says 'we understand your pain, and we've solved this before.' Voice is conversational yet precise: direct, jargon-aware but never gatekeeping, and laced with subtle German pragmatism. Example sentence in brand voice: 'Deine IT sollte dir Zeit sparen, nicht kosten—wir machen das möglich.'

Colors

The color palette is anchored by a sophisticated lavender primary (#bab4d9), which appears on all primary CTAs ('Technischer Support'), navigation highlights, and interactive focus states. This is not a bright accent but a muted, trustworthy purple that signals premium service without aggression. The secondary color (#4b5255) is a warm charcoal—used for secondary buttons, body text, and structural elements—providing visual weight and legibility at 16px body size. Tertiary (#40328b) is a deeper indigo reserved for high-emphasis headlines and tertiary CTAs. The surface stack is anchored in clean white (#ffffff) with carefully calibrated grays: surface-container-low (#f0f0f0) for subtle backgrounds, surface-container-high (#dcdcdc) for hover states on cards and list items. Error red (#cf2e2e)

Typography

The type system uses Jost* (a geometric, humanist sans-serif from Google Fonts) across all scales, creating visual cohesion and a distinctly modern-yet-approachable voice. Display (60px, 700 weight, -0.02em letter-spacing) anchors hero sections and major headlines; Headline-lg (40px, 600 weight) is used for section titles and card headers; Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, body copy, and UI text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, badges, and navigation items, providing visual distinction without size inflation. The 24px line-height on body text (1.5× the font size) ensures comfortable reading on screens; form inputs use 11px padding (vertical) to accommodate 16px text with breathing room. On small labe

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The gutter is 24px (md spacing), providing breathing room between columns without excess. Hero sections use a two-column split: left column (60% width) holds headline and body copy; right column (40% width) contains imagery or form elements, creating visual balance. Container padding is 24px on desktop, reducing to 16px on tablets and 12px on mobile. Section separation uses lg spacing (40px) vertically, creating clear rhythm and preventing visual fatigue. Form fields are stacked vertically with 12px (sm spacing) between label and input, and 24px (md spacing) between field groups. Cards use md spacing (24px) for internal padding, with 12px (sm spacing) between card elements. The white-space philosophy pri

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. Level 1 (Base/Surface): white background (#ffffff) with no shadow, establishing the primary plane. Level 2 (Cards, Inputs): box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), a soft, close shadow that lifts elements 2–4px above the base. Level 3 (Hovered Cards, Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a slightly larger spread creating 8–12px perceived elevation. Level 4 (Floating Elements, Dropdowns): box-shadow: 5px 0px 39px 0px rgba(0, 0, 0, 0.05), a wide, diffuse shadow suggesting significant separation.

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting the brand's balance between approachability and professional precision. Buttons use 3px border-radius (sm), a subtle rounding that feels intentional without softness. Cards and larger containers use 6px (md), creating gentle visual separation. Input fields use 3px (sm) to align with buttons and maintain consistency in form layouts. Navigation items and badges use 10px (lg) for slightly more prominence. The full (9999px) radius is reserved for pill-shaped elements like search inputs or status badges.

Components

Action Elements Buttons are the primary interaction mechanism and use three tiers. Primary buttons (Technischer Support) use #bab4d9 background with white text, 14px label-md typography, 3px border-radius, and 14px vertical × 29px horizontal padding, yielding a 44px height. On hover, the background shifts to #a89cc5 with a 200ms transition. Secondary buttons (#4b5255 background, white text) are larger (48px height, 18px vertical × 34px horizontal padding) and used for lower-priority actions like 'Alle Managed Services durchsuchen'. Tertiary buttons (#40328b) are reserved for high-emphasis secondary actions. All buttons include box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) to lift them from the surface.

Containers & Surfaces Cards use #fafafa background with 6px border-radius, 24px pad