Zürcher Rechtsanwälte AG

Overview

Zürcher Rechtsanwälte AG embodies 'Institutional Minimalism'—a design philosophy that prioritizes clarity, precision, and understated authority. The brand serves Swiss enterprises and private clients seeking sophisticated legal counsel, and the visual system reflects this through a restrained palette anchored by deep teal (#2b4c65), warm gold accents (#e2aa50), and generous whitespace. The aesthetic evokes the precision of Swiss architecture and the trustworthiness of established institutions, creating an interface that feels both contemporary and timeless. Every element—from typography to spacing—communicates competence without ostentation.

The brand voice is direct, measured, and intellectually rigorous. Sentences are concise and avoid jargon; when technical terms appear, they are explained with clarity. The tone never condescends; it assumes the reader is intelligent and values efficiency. Example: 'Wir vertreten Ihre Interessen vor Gericht und in der Öffentlichkeit—mit Präzision und Strategie.' The personality is authoritative yet approachable, reflecting a law firm that is both established and genuinely engaged with its clients.

Colors

The color system is built on a foundation of institutional trust. Primary (#2b4c65) is a deep, sophisticated teal used for CTAs, navigation highlights, and key interactive elements—it commands attention without aggression. Secondary (#e2aa50) is a warm, refined gold that appears on accent buttons, badges, and highlights, evoking both Swiss precision and subtle luxury. Tertiary (#f93262) is reserved for alerts, error states, and high-priority notifications, providing visual contrast when restraint is inappropriate. The surface stack progresses from bright white (#ffffff) for primary content areas through cool grays (#dde5eb, #a4b9c9) for layered containers, creating visual hierarchy through subtle tonal shifts rather than dramatic contrast. On-surface text (#11212e) is a near-black that mai

Typography

The type system centers on tt-commons-pro, a geometric sans-serif that conveys both modernity and institutional stability. Display (60px, weight 400, line-height 68px) is reserved for hero headlines and major page titles, setting the tone with restrained elegance. Headline-lg (40px, weight 400) and headline-md (28px, weight 400) establish section hierarchy with consistent letter-spacing (-0.01em to 0em) that prevents the typeface from feeling loose. Body text uses weight 300 (18px for body-lg, 16px for body-md) to maintain readability while preserving the brand's refined, unhurried character. Labels (14px, weight 400, letter-spacing 0.02em) are used for buttons, badges, and form fields, with increased letter-spacing to enhance legibility at smaller sizes. When displaying body text over col

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing content to breathe on larger screens while maintaining focus. The gutter spacing is 24px (md spacing unit), creating consistent horizontal rhythm. Vertical spacing follows the semantic scale: lg spacing (40px) separates major sections (hero from expertise, expertise from team), md spacing (24px) divides subsections and card groups, and sm spacing (12px) creates breathing room between related elements. The page rhythm emphasizes whitespace as a design tool—sections are never crowded, and the eye is guided through generous margins and padding. Container max-widths prevent text lines from exceeding 75–80 characters, supporting readability. The hero section uses an asymmetrical layout with text on the le

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness. Level 1 (Base): no shadow; elements sit flush on the surface (#f6f8fa). Level 2 (Cards, inputs): box-shadow: 0 4px 6px rgba(0,0,0,0.05), a soft, diffuse shadow that suggests elevation without drama. Level 3 (Modals, dropdowns, hover states): box-shadow: 0 8px 16px rgba(0,0,0,0.08), providing clear visual separation. Interactive elements (buttons, links) use a 0.3s ease transition to shadow on hover, creating a subtle lift effect. Borders (1px solid in outline-variant #c4cfd8) define container edges and work in c

Shapes

The shape philosophy is 'Precision with Softness'—sharp enough to convey institutional authority, soft enough to feel contemporary and approachable. Buttons use full border-radius (50%), creating pill-shaped elements that feel modern and inviting while maintaining professional polish. Cards and containers use md radius (7px), a subtle rounding that softens edges without compromising the geometric clarity of the layout. Input fields use DEFAULT radius (6px), slightly less rounded than cards to suggest functional simplicity. Modals and elevated surfaces use lg radius (10px), creating a gentle fr

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing (48px height) across all variants. Primary buttons (background: #2b4c65, text: white, padding: 16px 32px, border-radius: 50%) are used for main CTAs like 'Kontakt' or 'Mehr erfahren'; on hover, the background darkens to #1f3a4d and the shadow elevates to 0 8px 16px rgba(0,0,0,0.08). Secondary buttons (transparent background, 2px border in #2b4c65, text: #2b4c65) are used for alternative actions; on hover, the background fills with surface-container-high (#c8d4e0). Accent buttons (background: #e2aa50, text: #11212e) highlight special actions like 'Jetzt anfragen'; on hover, the background shifts to #d4963a. All buttons use transition: all 0.3s ease to create smooth state changes. Focus states apply a

Do's and Don'ts

**Do**

• Do use primary (#2b4c65) for all main CTAs and interactive highlights—it is the brand's signature accent and commands attention appropriately.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to support visual clarity and reading comprehension.
• Do apply the full border-radius (50%) to buttons and interactive elements to create a modern, inviting feel that contrasts with the institutional color palette.
• Do use weight 300 for body text (18px, 16px) to preserve the brand's refined, unhurried character and support readability.
• Do elevate cards and containers on hover with shadow transitions (0.3s ease) and subtle upward translation (2px) to provide tactile feedback.
• Do use secondary (#e2aa50) sparingly for accent actions and badges—it is a warm, luxury accent that should not compete with primary.

**Don't**

• Don't use near-black or pure black for text; always use on-surface (#11212e) to maintain the brand's refined, slightly warm tone.
• Don't apply heavy shadows (box-shadow > 0 16px 40px) to standard cards or containers—reserve lg elevation for modals and overlays only.
• Don't mix border-radius values inconsistently; use the graduated scale (6px for inputs, 7px for cards, 10px for modals, 50% for buttons) to reinforce hierarchy.
• Don't use tertiary (#f93262) for non-critical UI; it is reserved for alerts, errors, and high-priority notifications to maintain visual restraint.
• Don't reduce padding below sm (12px) on interactive elements or cards; the brand relies on generous spacing to feel premium and uncluttered.
• Don't apply text-shadow to body text on light backgrounds; use it only when text appears over images or dark overlays (0 2px 4px rgba(0,0,0,0.15)).