einfach-gesagt.de

Overview

einfach-gesagt.de is a professional portfolio and service site for Karen Hüning, a freelance copywriter and marketing communications specialist based in Hamburg, Germany. The brand serves entrepreneurs, agencies, and companies seeking clear, direct, and strategically crafted messaging for both digital and print media. The design aesthetic is rooted in **Architectural Minimalism** — a discipline-driven approach that prioritizes legibility, hierarchy, and purposeful whitespace over decoration. Every visual element serves a communicative function. The color palette combines a neutral, light foundation (white and grays) with a teal accent (#147fa9) that signals trust, professionalism, and clarity. The emotional response is one of calm competence: users immediately sense that this is a writer who understands precision and gets to the point.

The brand voice is direct, confident, and unpretentious. Karen's copy avoids jargon and flowery language; instead, it cuts through noise with clarity and specificity. The vocabulary is concrete and action-oriented. Example sentence in brand voice: "Auf den Punkt gebracht. Verständlich gemacht. Sichtbarkeit geschafft." (To the point. Made clear. Visibility achieved.) This mirrors the site's own design philosophy: no wasted pixels, no decorative flourishes, just the essential message delivered with professional polish.

Colors

The color system is built on a principle of **clarity through constraint**. The primary surface is pure white (#ffffff) or near-white (#fafafa, #f5f5f5), creating an uncluttered canvas that lets content breathe. The neutral hierarchy uses grays (#dddddd, #cccccc, #999999, #696c76, #333333) to establish visual rhythm and guide the eye through information architecture. The primary accent color is teal (#147fa9), used exclusively on interactive elements (buttons, links, focus states) and key brand moments. This color is derived from the focus-visible outline rule (outline: 3px solid #147fa9) found in the live computed styles, signaling that teal is the system's primary interactive signal. Secondary accent is a vibrant green (#5cd435), used sparingly for status indicators, success states, and

Typography

The type system uses a single, utilitarian font family stack — Arial, Helvetica, and system sans-serif — reflecting the brand's no-nonsense aesthetic. This choice prioritizes legibility and universal rendering over typographic personality. The hierarchy is built on weight and size: display (56px, 700 weight) anchors hero sections; headline-lg (36px, 700) and headline-md (28px, 700) structure page sections; body-lg (18px, 400) and body-md (16px, 400) carry primary content; label-md (14px, 700) and label-sm (12px, 600) handle UI labels and metadata. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain tight, professional spacing. Line-height is generous (1.5x to 1.75x) to ensure readability on screen. For small labels over busy backgrounds or interactive elements, apply te

Layout

The page layout follows a **fixed-width, centered container model** with a maximum width of 1280px. This constraint ensures that long lines of text never exceed optimal reading length (approximately 70–80 characters). The grid is 12 columns, with a gutter of 24px between columns, providing flexible subdivision for responsive layouts. Whitespace is semantic: use lg spacing (40px) to separate major sections (hero, services, portfolio, footer); use md spacing (24px) for subsection breaks and card groupings; use sm spacing (12px) for related elements within a card or list. The container-max of 1280px is enforced via CSS max-width, with padding of 24px on either side on smaller viewports. Margins are reset to 0 on body and html to prevent browser defaults. The spacing scale (unit: 8px, xs: 4px,

Elevation & Depth

Depth in this system is achieved through **subtle shadow and surface-container layering**, not through dramatic drop shadows or glassmorphism. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states and micro-interactions; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating elements. Shadows are always soft and diffuse, never hard-edged. The blur radius increases with elevation (1px blur for sm, 8px for md, 24px for lg) to create atmospheric perspective. Avoid stacking m

Shapes

The shape philosophy is **Geometric Precision** — a grid-aligned, right-angled approach that mirrors the brand's architectural minimalism. Border-radius values are small and intentional: sm (2px) for subtle softening on inputs and small UI elements; DEFAULT (4px) for standard buttons and cards; md (6px) for slightly more prominent containers; lg (8px) for larger cards and modals; xl (12px) for hero sections and full-width containers; full (9999px) for toggle switches and circular badges. The reasoning is functional: small radii (2–4px) maintain the geometric, professional feel without introduc

Components

Action Elements Buttons are the primary interactive component. The button-primary uses background: {colors.primary} (#147fa9), text-color: {colors.on-primary} (white), rounded: {rounded.lg} (8px), padding: 12px 24px, and height: 48px. The typography is label-md (14px, 700 weight). On hover, transition the background-color to {colors.primary-container} (#3689b2) over 200ms ease-out, creating a subtle darkening effect. On active/pressed state, use {colors.primary-fixed-dim} (#1e4d64) for maximum contrast. The button-secondary uses a transparent background with a 1px border in {colors.outline-variant} (#999999), text-color: {colors.on-surface} (black), and the same padding and height. On hover, fill the background with {colors.surface-container-high} (#d0d0d0) and maintain the border. Lin

Do's and Don'ts

**Do**

• Do use the teal primary (#147fa9) exclusively on interactive elements (buttons, links, focus states) to create a consistent call-to-action language.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to prevent cognitive overload and reinforce the minimalist aesthetic.
• Do apply the focus-visible outline (3px solid #147fa9, 2px offset) to all interactive elements for keyboard accessibility and visual clarity.
• Do use the Arial/Helvetica font stack consistently across all text; never introduce decorative or script typefaces.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms ease-out to create smooth, professional micro-interactions.
• Do constrain the container to max-width: 1280px and center it with margin: 0 auto to ensure optimal line length and reading comfort.

**Don't**

• Don't use shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)); avoid dramatic drop shadows that conflict with the minimalist aesthetic.
• Don't apply border-radius greater than 12px (xl) to standard UI elements; excessive rounding introduces visual softness that contradicts the architectural precision.
• Don't use colors outside the defined palette (primary, secondary, tertiary, error, surface stack); avoid ad-hoc hex values that break the system.
• Don't center-align body text or paragraph content; left-align all prose for maximum legibility and professional appearance.
• Don't introduce new font families or weights; the system uses only Arial/Helvetica at weights 400, 600, and 700.
• Don't animate elements for more than 300ms or use easing functions other than ease-out; keep motion subtle and purposeful.