Deka Investments

Overview

Deka Investments is a professional asset management and retirement solutions provider serving private clients through a digital-first platform. The design system embodies 'Institutional Minimalism'—a refined aesthetic that prioritizes clarity, trustworthiness, and financial confidence through restrained use of color and typography. The brand voice is precise, reassuring, and professional: never breathless or overly casual. The UI evokes the stability of a traditional financial institution while maintaining modern accessibility and responsiveness. Example sentence: 'Your retirement plan adapts to your life—review and adjust anytime.'

Colors

The color palette is anchored by a deep teal secondary (#003745) that dominates the header and structural elements, conveying institutional trust and stability. The primary accent is a bold red (#ee0000) reserved exclusively for high-priority CTAs ('Persönliche Beratung', 'Mein Depot') and error states, ensuring immediate visual hierarchy and user focus. A supporting teal (#1a6b80) is used for secondary information, links, and metadata (timestamps, abbreviations). The surface stack uses near-white (#fcfcfc, #f5f5f5) for cards and containers, with subtle borders at #cddbdf (1px solid) to define spatial separation without visual noise. The error color (#ad1111) is reserved for validation and destructive actions. All interactive states use rgba overlays: hover states apply rgba(37, 105, 122,

Typography

The type system uses DekaFrutiger as the primary font family, a geometric sans-serif that balances institutional authority with modern clarity. Display and headline levels (60px–48px) are reserved for hero sections and major page titles, using 700 weight for maximum impact. Body text (16px–18px) is set at 400 weight with 24–28px line-height and 0.015625rem letter-spacing, ensuring comfortable reading of financial disclosures and terms. Labels and metadata (12px–14px) use 500–600 weight with increased letter-spacing (0.01em–0.05em) to distinguish UI controls from body content. All typography applies consistent line-height ratios (1.5 for body, 1.33 for headlines) to maintain vertical rhythm. On small labels over busy backgrounds or data tables, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.0

Layout

The layout uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport. Sections are separated using the lg spacing token (40px) for breathing room, while internal card padding uses md (24px). The gutter between grid items is consistently 24px. Container queries are employed for responsive card layouts: at 768px and above, focus-topic cards (fokus-thema) shift from column to row layout, optimizing space for larger screens. The page rhythm alternates between full-width hero sections (with overlaid content boxes positioned absolutely) and contained grid sections. White-space is treated as a first-class design element: cards maintain 1px borders at #cddbdf rather than relying on shadows, and section backgrounds use subtle off-white (#f5f9fa for teal-accented sections, #f5

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic drop shadows. Level 1 (Base): flat white surface (#ffffff) with 1px border at #cddbdf. Level 2 (Standard Card): box-shadow: 0 0 2px rgba(37, 105, 122, 0.05), 0 4px 10px rgba(37, 105, 122, 0.12), background-color: #ffffff. Level 3 (Elevated/Modals): box-shadow: 0 4px 12px rgba(37, 105, 122, 0.15), background-color: #f5f5f5. The teal-tinted shadows (using rgba(37, 105, 122, ...)) create visual cohesion with the brand's secondary color while maintaining subtlety. Hover states elevate cards

Shapes

The shape philosophy is 'Architectural Precision'—sharp, geometric, and uncompromising. All border-radius values are minimal: buttons and inputs use 0.5rem (8px), cards use 0.5rem, and badges use 9999px (full circle). The design explicitly avoids rounded corners on hero images, section backgrounds, and structural elements (border-radius: 0), reinforcing the institutional, grid-based aesthetic. The single exception is circular profile images and avatars, which use border-radius: 624.9375rem (effectively 100%) to humanize the interface. This sharp-edged approach signals precision and financial r

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use #ee0000 background with white text, 8px 16px padding, and 40px height. Hover state transitions to #cc0000 over 200ms (ease-out). Active state uses #990000. Secondary buttons use #003745 background with white text and identical sizing. Ghost buttons are transparent with a 1px border at the primary color; on hover, the background fills with #ffcccc (primary-container) and text shifts to #660000. All buttons have cursor: pointer and no border-radius (DEFAULT: 0.5rem).

Containers & Surfaces Cards are the primary container component: white background (#ffffff), 1px border at #cddbdf, 24px padding, and the Level 2 shadow (0 0 2px rgba(37, 105, 122, 0.05), 0 4px 10px rgba(37, 105, 122, 0.12)). On hover, the shadow ele

Do's and Don'ts

**Do**

• Do use the red primary (#ee0000) exclusively for high-priority CTAs and error states—never for decorative elements or secondary information.
• Do maintain 1px borders at #cddbdf on cards and containers instead of relying on shadows; this preserves the minimal, institutional aesthetic.
• Do apply the teal-tinted shadow system (rgba(37, 105, 122, ...)) consistently across all elevated surfaces to reinforce brand cohesion.
• Do use DekaFrutiger at 16px/24px line-height for body text; this ensures legibility for financial disclosures and terms.
• Do keep border-radius at 0.5rem (8px) for buttons and inputs; avoid rounded corners on structural elements to maintain precision.
• Do use container queries for responsive card layouts; avoid media queries when possible to enable flexible, component-level adaptation.

**Don't**

• Don't use shadows as the primary depth cue; the brand relies on color shifts and borders to define spatial hierarchy.
• Don't apply the primary red (#ee0000) to non-interactive elements or background fills—it must remain reserved for user-actionable CTAs.
• Don't exceed 40px section spacing (lg token) or the visual rhythm will feel disjointed; use md (24px) for internal card spacing.
• Don't use system fonts or generic sans-serifs; DekaFrutiger is the only approved typeface family for all UI text.
• Don't add rounded corners (border-radius > 0) to hero images, section backgrounds, or structural containers; this breaks the architectural precision aesthetic.
• Don't use opacity-based overlays for hover states on buttons; use explicit color shifts (e.g., #ee0000 → #cc0000) for clarity and accessibility.