Grünberger & Partner

Overview

Grünberger & Partner is a premium institutional communications agency serving corporate, public, and legal sectors across German-speaking markets. The design system embodies 'Institutional Minimalism'—a refined aesthetic that prioritizes clarity, authority, and discretion over visual spectacle. The brand personality is confident yet understated: every visual decision serves the content, never distracts from it. The color palette centers on a deep navy primary (#2b3b7d) paired with crisp whites and strategic accent colors (orange #ff6900, cyan #0693e3), creating a visual language that feels both contemporary and timeless.

The tone is precise, measured, and solution-focused. Grünberger & Partner speaks in declarative sentences with active verbs; there is no breathlessness, no hyperbole. Example: 'Wir garantieren leidenschaftlichen Einsatz und absolute Diskretion'—passion and discretion are not contradictions here, they are the twin pillars of the brand promise. The vocabulary avoids jargon while maintaining professional gravitas; the agency addresses decision-makers who value substance over style.

Colors

The color system is built on a foundation of institutional trust. Primary (#2b3b7d) is the deep navy that anchors all interactive elements—buttons, links, focus states, and brand-critical UI. It appears frequently but never dominates; it is the color users click on, the color that signals agency and control. Secondary (#ff6900, a warm orange) is reserved for highlights, alerts, and secondary CTAs; it provides energy without undermining the primary's authority. Tertiary (#0693e3, a bright cyan) supports data visualization, status indicators, and tertiary interactions.

The surface stack is deliberately neutral: white (#ffffff) for primary surfaces, light grays (#eaedf3, #f0f0f0) for containers and subtle depth. On-surface text is a practical charcoal (#444444), not pure black, reducing eye

Typography

The type system uses Titillium Web exclusively, a geometric sans-serif that balances warmth with precision—ideal for institutional contexts. Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines; Headline-lg (40px, 700 weight) for section titles; Headline-md (32px, 700 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and callouts; Body-md (16px, 400 weight, 24px line-height) for standard body copy. Label-md (14px, 600 weight, 0.02em tracking) is applied to buttons, form labels, and UI chrome; Label-sm (13px, 500 weight) for metadata and secondary information. All headlines use -0.01em to -0.02em negative letter-spacing to tighten the visual weight; body copy uses 0em tracking for neutral readability. Apply text-

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy. Desktop layouts use full-width containers with 24px gutters; tablet and mobile scale down to 12px gutters and 100% width. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for component-level gaps. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. White-space is generous but purposeful: never cramped, never wasteful. Padding inside cards and containers is consistently md (24px) on desktop, sm (12px) on mobile. The rhythm is 8px-based throughout, creating a predictable, scalable system.

Elevation & Depth

Depth is conveyed through a three-tier shadow system that creates clear visual hierarchy without relying on color or transparency shifts. Level 1 (Base/Cards): box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)—subtle, almost imperceptible, used for standard cards and list items. Level 2 (Elevated/Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—the primary shadow for buttons, inputs, and interactive surfaces; this is the 'default' elevation. Level 3 (Floating/Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—reserved for modals, dropdowns, and floating panels that must visually separate from the

Shapes

The shape philosophy is 'Architectural Precision'—minimal rounding that respects the grid and maintains visual clarity. Buttons use rounded.sm (4px / 0.25rem), a subtle curve that softens hard edges without appearing playful. Cards and containers use rounded.md (12px / 0.75rem), creating a slightly more approachable feel while remaining professional. Modals and floating panels use rounded.lg (16px / 1rem), the most generous radius, reserved for elements that must feel distinct and elevated. Input fields use rounded.DEFAULT (8px / 0.5rem), a middle ground that balances form-field convention wit

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} background (#2b3b7d) with white text, 12px 24px padding, 44px height, and rounded.sm (4px). On hover, the background darkens to #1f2d66 and shadow increases to {elevation.lg}. On active/pressed, background becomes #1a2550. Button-secondary uses a transparent background with a 2px border in {colors.primary}, same padding and height. On hover, the background fills with {colors.primary-container} (#d4dff5) while the border remains primary. All buttons use Label-md typography (14px, 600 weight) and transition all properties over 150ms cubic-bezier(0.2, 0, 0.38, 0.9).

Containers & Surfaces Cards are the primary content container. Standard card uses {colors.surface-container} (#eaedf3) ba

Do's and Don'ts

**Do**

• Do use {colors.primary} (#2b3b7d) for all primary CTAs, focus states, and brand-critical interactive elements—it is the visual anchor of institutional authority.
• Do maintain 24px gutters on desktop and 12px on mobile; never compress spacing below sm (12px) in component padding or section gaps.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) as the default shadow for interactive surfaces; reserve {elevation.lg} for modals and floating panels only.
• Do use Titillium Web exclusively for all typography; the geometric warmth of this typeface is essential to the brand's institutional-yet-approachable voice.
• Do ensure all interactive elements (buttons, inputs, links) have a visible focus state with a 3px ring in rgba(43, 59, 125, 0.1) for accessibility compliance.

**Don't**

• Don't use {colors.secondary} (#ff6900) or {colors.tertiary} (#0693e3) as primary button backgrounds; reserve these for highlights, alerts, and secondary interactions only.
• Don't apply border-radius greater than rounded.lg (16px) to buttons or form inputs; the system's precision depends on restrained, architectural curves.
• Don't use pure black (#000000) or pure white (#ffffff) for text; always use {colors.on-surface} (#444444) for body text and {colors.on-primary} (#ffffff) only on primary backgrounds.
• Don't stack shadows—never combine multiple box-shadow values; use only one shadow from the elevation scale per element.
• Don't use system fonts or fallback sans-serifs; Titillium Web must load and render; if unavailable, the fallback chain is Helvetica, Arial, sans-serif, but this is a failure state.