Tweer & Lösenbeck

Overview

Tweer & Lösenbeck is a professional German architectural and design consultancy whose digital presence embodies **Corporate Minimalism with Technical Precision**—a design philosophy that prioritizes clarity, legibility, and institutional trust through restrained color palettes and rigorous typographic hierarchy. The brand serves architects, developers, and corporate clients seeking sophisticated design solutions; the UI evokes competence and stability through deep navy anchors (#1d3a8f primary, #0b186d container), neutral grays (rgb(68, 68, 68) body text), and surgical white space. The emotional response is one of professional confidence: the interface recedes to let content and expertise speak, never competing for attention.

The voice is formal yet approachable, precise without coldness. Vocabulary patterns include technical German terms (Datenschutzeinstellungen, Neuigkeiten), measured pacing in body copy (13–16px Open Sans at 400 weight), and a consistent use of action-oriented button labels in sentence case. Example sentence in brand voice: "Werfen Sie einen Blick in das aktuelle Geschehen oder stöbern Sie in unserem Newsarchiv." (Invite users to explore, but with measured, professional tone.)

Colors

The color system is anchored in **Institutional Navy** (#1d3a8f primary, #0b186d primary-container) used exclusively for interactive elements—buttons, links, focus states—establishing a single, trustworthy accent that signals authority without aggression. Secondary blue (#0063e3) provides a brighter accent for secondary CTAs and highlights, while tertiary orange (#ff6900) reserves energy for rare emphasis or alerts. The surface stack is deliberately neutral: pure white (#ffffff surface) paired with a tight range of grays (#eeeeee surface-container-lowest through #c5c5c5 surface-container-highest) creates visual separation without distraction. Body text is rgb(68, 68, 68) on-surface, a warm mid-gray that reduces eye strain on long-form content. Error states use #cf2e2e (vivid-red) for warni

Typography

The type system uses **Open Sans exclusively** across all scales, a humanist sans-serif that balances corporate formality with approachability. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major headings; headline-lg (40px, 600 weight) structures page sections; body-md (14px, 400 weight, 20px line-height) carries the bulk of content with generous leading to support scanning. The rationale is legibility-first: Open Sans's generous x-height (particularly at small sizes like 13px body text) ensures readability on screens and in print, while the consistent 600-weight headlines create clear visual hierarchy without resorting to color or size alone. Label-md (13px, 600 weight, 0.02em tracking) is applied to button text and form labels, with letter-spacing increased slig

Layout

The page uses a **fixed-width, center-aligned container model** with a max-width of 1024px, reflecting the Enfold theme's conservative approach to responsive design. The grid is 12-column, with gutter spacing of 24px (md spacing token) between columns. Section separation uses lg spacing (40px) for major content breaks, creating a rhythm that feels neither cramped nor wasteful. White space is semantic: the header occupies approximately 131px (--enfold-header-height), leaving breathing room above the hero; content sections are padded with md (24px) on mobile, scaling to lg (40px) on desktop. The modal in the screenshot demonstrates the layout philosophy: a centered overlay with 24px padding inside the modal-content component, text set to 14–16px with 20–24px line-height, and buttons full-wid

Elevation & Depth

Depth is conveyed through **subtle, layered shadows and minimal border definition** rather than dramatic depth cues. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for subtle separation of interactive elements like form inputs; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and standard containers; lg (0 3px 10px rgba(0, 0, 0, 0.2)) for modals and elevated surfaces. Borders are 1px solid at surface-container or surface-container-high (#dddddd or #d0d0d0), providing visual containment without visual weight. The modal overlay uses a semi-transparent dark background (rgb

Shapes

The shape philosophy is **Architectural Sharpness with Minimal Rounding**—a design language that respects the grid and avoids organic curves. Border-radius follows a tight scale: buttons and form inputs use 0.375rem (3px, rounded.DEFAULT), creating a subtle softness that prevents harsh corners without appearing playful. Cards and larger containers use 0.75rem (6px, rounded.md), providing visual distinction from inputs while maintaining geometric precision. Modals and elevated surfaces use 1rem (8px, rounded.lg) for a slightly more refined appearance. The reasoning is functional: minimal roundi

Components

Action Elements Buttons are the primary interactive surface. The button-primary component uses {colors.primary} (#1d3a8f) background with {colors.on-primary} (white) text, 13px Open Sans 600 weight, 12px vertical and 24px horizontal padding, 44px height, and 3px border-radius. On hover, the button-primary-hover state shifts to {colors.primary-container} (#0b186d) with a 200ms ease-in-out transition, creating a subtle darkening effect that signals interactivity without jarring the user. Button-secondary uses a transparent background with a 1px solid border in {colors.primary}, allowing secondary actions to coexist without visual dominance. The modal in the screenshot shows four button variants stacked vertically: "Speichern" (Save), "Alle akzeptieren" (Accept All), "Nur essenzielle Cook

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1d3a8f) exclusively for primary CTAs, links, and focus states—never dilute the primary accent with secondary uses.
• Do maintain 24px gutter spacing between grid columns and 40px section separation (lg spacing) to preserve the institutional, breathing aesthetic.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to signal interactivity without jarring the user.
• Do use Open Sans 600 weight for all headlines and labels; 400 weight for body text and inputs to maintain clear hierarchy.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and lg elevation (0 3px 10px rgba(0, 0, 0, 0.2)) to modals; never exceed 10px blur radius.
• Do use 3px border-radius for buttons and inputs, 6px for cards, 8px for modals—never use zero-radius or excessive rounding.

**Don't**

• Don't use secondary or tertiary colors for primary CTAs; reserve #0063e3 and #ff6900 for secondary actions and rare emphasis only.
• Don't apply shadows larger than 10px blur radius or use multiple layered shadows; the aesthetic is restrained and institutional.
• Don't use color alone to convey state; always pair color changes with border, shadow, or typography adjustments for accessibility.
• Don't exceed 1024px container width; the fixed-width model is intentional and supports the professional, controlled aesthetic.
• Don't use fonts other than Open Sans; the consistent typeface reinforces institutional authority and legibility.
• Don't apply opacity transitions to interactive elements; use solid color shifts with explicit state variants (hover, focus, active) instead.