System 1: Vertrauensvoll

Conservative, trustworthy, German banking tradition meets digital clarity. Soft corners, subtle animations, professional blue.

Font Pairing

Headings: Georgia (Serif)
Body: System-ui (Sans-serif)
Style: Classic, trustworthy
Alternative: Use sans for all if modernizing

Typography - Headlines

Ihre Zukunft
Sicher investieren
Warum mit uns?
Unsere Vorteile
Mehr erfahren
Hinweis
H1: 48px, Bold, -0.02em
H2: 32px, Semibold
H3: 24px, Semibold
H4: 20px, Medium
H5: 16px, Medium
H6: 14px, Medium, Uppercase
Font: System UI

Typography - Body Text

Investieren muss nicht kompliziert sein. Wir zeigen Ihnen den Weg.
Wir begleiten Sie bei Ihren ersten Schritten in die Welt der Geldanlage. Mit Sicherheit, Transparenz und Vertrauen.
* Es gelten die allgemeinen Geschäftsbedingungen. Kapitalanlagen sind mit Risiken verbunden.
Stand: Dezember 2024
Lead: 22px, Line 1.6, lighter color
Body: 18px, Line 1.7
Small: 14px, Line 1.5
Caption: 12px, uppercase, muted

Typography - Blockquotes

"Die Beratung war klar und verständlich. Endlich fühle ich mich sicher bei meinen ersten Investitionen."
— Maria S., Kundin seit 2023
Font: Georgia (serif), italic
Size: 20px, Line 1.7
Border: 4px left, primary color
Use: Testimonials, expert quotes

Typography - Lists

Ungeordnete Liste:

  • Kostenlose Kontoführung
  • Keine Mindestanlage
  • Jederzeit kündbar
  • Deutsche Einlagensicherung

Geordnete Liste:

  1. Registrieren Sie sich kostenlos
  2. Verifizieren Sie Ihre Identität
  3. Wählen Sie Ihre Anlagestrategie
  4. Tätigen Sie Ihre erste Einzahlung
UL Marker: Bullet (•), primary color
OL Marker: Numbers, primary, semibold
Spacing: 10px between items
Size: 17px, Line 1.8

Typography - Links

Lesen Sie mehr in unseren Allgemeinen Geschäftsbedingungen oder kontaktieren Sie unseren Kundensupport. Weitere Informationen finden Sie in unserem Ratgeber-Bereich.

Color: Primary blue
Decoration: Underline on hover
Transition: 0.25s ease
Hover: Darker shade + underline

Buttons - Types

Primary: Solid fill, main actions
Secondary: Outlined, secondary actions
Ghost: Text only, tertiary actions

Buttons - Sizes & States



Small: 10px 20px, 14px font
Default: 14px 32px, 16px font
Large: 18px 40px, 18px font
Radius: 8px (soft)
Animation: 0.25s ease

Form Elements

Wir senden Ihnen eine Bestätigung.
Bitte geben Sie einen gültigen Betrag ein.

Form Elements - Extended

E-Mail-Benachrichtigungen aktivieren
Newsletter abonnieren
EUR

Ein ETF bildet einen Index ab und streut Ihr Geld automatisch über viele Wertpapiere.

Cards - Basic

ETF-Sparpläne

Monatlich ab 25€ in Ihre finanzielle Zukunft investieren.

Cards - Feature

✓

Sicher anlegen

Deutsche Einlagensicherung bis 100.000€

Cards - Alerts

ℹ Ihre Verifizierung wird geprüft.
⚠ Bitte vervollständigen Sie Ihr Profil.
✓ Ihre Überweisung war erfolgreich.

Cards - Stats

+12,4%
Rendite seit Jahresbeginn
847€
Ihr aktuelles Guthaben

Badges & Progress

Neu ETF Aktiv Ausstehend

Ihr Sparziel: 75% erreicht

Cards - Testimonials

"Die Plattform ist sehr übersichtlich und hat mir geholfen, meine ersten Schritte an der Börse zu machen. Ich fühle mich gut beraten und sicher."
MS
Maria Schmidt
Kundin seit 2023

Cards - Pricing

Beliebt
Basis Sparplan
0€ / Monat
Perfekt für Einsteiger - ohne Mindestanlage
  • Kostenlose Kontoführung
  • Ab 25€ monatlich sparen
  • Über 1.000 ETFs verfügbar
  • Automatische Ausführung
  • Jederzeit kündbar

Cards - Comparison

Basis
Für Einsteiger
Gebühren 0€
ETF-Auswahl 1.000+
Beratung ✓
Steueroptimierung ✗
Premium
Für Fortgeschrittene
Gebühren 4,90€
ETF-Auswahl 2.500+
Beratung ✓
Steueroptimierung ✓

Layout - Containers

Container Narrow (max-width: 800px)

Container Default (max-width: 1200px)

Container Wide (max-width: 1400px)

Containers automatically center content and add horizontal padding

Layout - Grid System

Col 1

Col 2

Col 3

3-column grid with medium gap (24px)

Main Content (8 columns)

Sidebar (4 columns)

12-column grid with spanning (8/4 split for content/sidebar)

Layout - Spacing Utilities

Element with mb-3 (24px bottom margin)

Element with mb-2 (16px bottom margin)

Element with mb-1 (8px bottom margin)

Last element (no margin)

Spacing: m-0, mt/mb-1 (8px), mt/mb-2 (16px), mt/mb-3 (24px), mt/mb-4 (32px)
Padding: p-0, p-1 (8px), p-2 (16px), p-3 (24px), p-4 (32px)

Layout - Responsive Breakpoints

Mobile: < 768px (1 column)
Tablet: 769px - 1024px (2 columns for 4-col grids)
Desktop: > 1024px (full grid)

Grids automatically stack on mobile. Navigation switches to hamburger menu.

Navigation - Header

Navigation - Mobile Menu

Slide-out menu (normally hidden, opened via hamburger icon)

Navigation - Breadcrumbs

Navigation - Tabs

Tab-Inhalt wird hier angezeigt

Navigation - Footer

Colors

Primary
Secondary
Accent
Text

Solar Investing

Page-specific orange highlight for solar products

Spacing & Layout

Base unit: 8px
Section padding: 24-32px
Card spacing: 16px between
Max width: 1200px
Grid gap: 24-32px

Dividers: 1px solid, subtle

Animation Philosophy

Duration: 0.25s (fast)
Easing: ease
Allowed:
• Subtle hover lifts (2-4px)
• Fade ins on load
• Scale on buttons (1.02)
• Shadow transitions
Forbidden:
• Aggressive movements
• Rotation effects
• Anything "flashy"

Image Treatment

Professional, slightly desaturated. Blue overlay for brand consistency.

Filter: saturate(0.75) contrast(0.95)
Overlay: Blue gradient from bottom
Corners: 8px radius
Style: Professional, muted tones

System 2: Modern Klar

Bold typography, strong borders, confident spacing. For the digitally native beginner who values clarity and modern aesthetics.

Font Pairing

All text: System-ui (Sans-serif)
Style: Bold, geometric, modern
Alternative: Georgia serif for special sections
Weights: 400 (body), 700-900 (headings)

Typography - Headlines

Ihr Vermögen
Intelligent wachsen
Unsere Strategie
Für Einsteiger
Details ansehen
Kategorie
H1: 56px, ExtraBold, -0.03em
H2: 36px, Bold, -0.02em
H3: 28px, Bold
H4: 22px, Semibold
H5: 18px, Semibold
H6: 14px, Bold, Uppercase

Typography - Body Text

Klare Strukturen. Transparente Prozesse. Sichere Ergebnisse.
Moderne Anlagestrategien für Einsteiger. Klar strukturiert, transparent erklärt, sicher umgesetzt.
* Wertentwicklungen der Vergangenheit sind kein Indikator für zukünftige Erträge.
Letzte Aktualisierung: 17.12.2024
Lead: 24px, Line 1.5
Body: 17px, Line 1.8
Small: 14px, Line 1.6
Caption: 12px, uppercase, bold

Typography - Blockquotes

"Modern, transparent und schnell. Genau das, was ich von einer digitalen Finanzplattform erwarte."
— THOMAS M., DIGITAL INVESTOR
Font: System-ui, semibold
Size: 24px, Line 1.5
Border: 6px left, bold
Style: Strong, confident

Typography - Lists

Vorteile:

  • Keine versteckten Gebühren
  • Echtzeit-Portfolio-Tracking
  • Automatische Steueroptimierung
  • Modernste Sicherheitsstandards

In 4 Schritten starten:

  1. Account erstellen
  2. Identität bestätigen
  3. Strategie auswählen
  4. Investieren
UL Marker: Arrow (▸), green
OL Marker: Bold numbers
Spacing: 12px between
Style: Clean, geometric

Typography - Links

Mehr erfahren in unserer Wissensdatenbank oder direkt zum Produkt-Vergleich. Fragen? Besuchen Sie unser Help Center.

Color: Primary dark
Weight: 600 (semibold)
Decoration: Bold underline
Hover: Changes to green

Buttons - Types

Primary: Bold solid fill
Secondary: Strong border
Ghost: Minimal, text-style

Buttons - Sizes & States



Small: 12px 24px, 14px font
Default: 16px 36px, 16px font
Large: 20px 48px, 18px font
Radius: 16px (generous)
Animation: 0.3s cubic-bezier

Form Elements

Ihre Daten sind bei uns sicher.
Bitte nur Zahlen eingeben.

Form Elements - Extended

Push-Benachrichtigungen
Automatisches Rebalancing
€

Die TER gibt an, welche Kosten jährlich für die Verwaltung eines Fonds anfallen.

Cards - Basic

Nachhaltige Fonds

Investieren Sie in Unternehmen mit positiver Umweltbilanz.

Cards - Feature

◈

Transparent

Alle Kosten auf einen Blick

Cards - Alerts

● Neues Update verfügbar.
! Verifizierung erforderlich.
✓ Konto erfolgreich erstellt.

Cards - Stats

2.847
Aktive Nutzer
98,7%
Kundenzufriedenheit

Badges & Progress

Premium Fonds Verifiziert Beta

Onboarding: 60% abgeschlossen

Cards - Testimonials

"Klare Strukturen, transparente Preise, moderne Oberfläche. Genau so sollte Banking heute sein."
TK
Thomas Klein
DIGITAL INVESTOR

Cards - Pricing

EMPFOHLEN
Pro Account
9€ / Monat
Für aktive Trader mit erweiterten Features
  • Unbegrenzte Trades
  • Echtzeit-Marktdaten
  • Premium-Support 24/7
  • Steueroptimierung
  • API-Zugang

Cards - Comparison

Starter
FÜR ANFÄNGER
Kosten Kostenlos
Assets 500+
Support ✓
API ✗
Pro
FÜR PROFIS
Kosten 9€/Monat
Assets 3.000+
Support ✓
API ✓

Layout - Containers

CONTAINER NARROW (MAX-WIDTH: 800PX)

CONTAINER DEFAULT (MAX-WIDTH: 1200PX)

CONTAINER WIDE (MAX-WIDTH: 1440PX)

CONTAINERS CENTER CONTENT WITH HORIZONTAL PADDING

Layout - Grid System

COL 1

COL 2

COL 3

3-COLUMN GRID WITH MEDIUM GAP (32PX)

MAIN CONTENT (8 COLUMNS)

SIDEBAR (4 COLUMNS)

12-COLUMN GRID WITH SPANNING (8/4 CONTENT/SIDEBAR)

Layout - Spacing Utilities

ELEMENT WITH MB-3 (24PX BOTTOM MARGIN)

ELEMENT WITH MB-2 (16PX BOTTOM MARGIN)

ELEMENT WITH MB-1 (8PX BOTTOM MARGIN)

LAST ELEMENT (NO MARGIN)

SPACING: M-0, MT/MB-1 (8PX), MT/MB-2 (16PX), MT/MB-3 (24PX), MT/MB-4 (40PX)
PADDING: P-0, P-1 (8PX), P-2 (16PX), P-3 (24PX), P-4 (40PX)

Layout - Responsive Breakpoints

MOBILE: < 768PX (1 COLUMN)
TABLET: 769PX - 1024PX (2 COLUMNS FOR 4-COL GRIDS)
DESKTOP: > 1024PX (FULL GRID)

GRIDS STACK ON MOBILE. NAVIGATION SWITCHES TO HAMBURGER.

Navigation - Header

Navigation - Mobile Menu

SLIDE-OUT PANEL (DEMO STATE: OPEN)

Navigation - Breadcrumbs

Navigation - Tabs

TAB CONTENT AREA

Navigation - Footer

Colors

Primary
Secondary
Accent
Text

Solar Investing

Bold orange accent for solar product pages

Spacing & Layout

Base unit: 8px
Section padding: 28-36px
Card spacing: 20px between
Max width: 1280px
Grid gap: 32px
Generous whitespace

Dividers: 2px gradient fade

Animation Philosophy

Duration: 0.3s
Easing: cubic-bezier(0.4,0,0.2,1)
Allowed:
• Scale transforms (1.05)
• Border color transitions
• Smooth fades
• Confident movements
Forbidden:
• Bouncing effects
• Excessive rotation
• Parallax scrolling

Image Treatment

High contrast, bold. Duotone option for strong brand presence.

Filter: contrast(1.1) saturate(1.1)
Overlay: Dark to green gradient
Duotone: Grayscale + color blend
Style: Bold, high-impact

System 3: Warm Zugänglich

Approachable, friendly, confidence-building. Balanced between professional and welcoming. Perfect for risk-averse beginners.

Font Pairing

All text: System-ui (Sans-serif)
Style: Warm, friendly, approachable
Alternative: Georgia for elegant headlines
Weights: 400-600 (balanced, not too heavy)

Typography - Headlines

Gemeinsam investieren
Schritt für Schritt
Ihre Vorteile
So funktioniert es
Wichtige Hinweise
Themenbereich
H1: 52px, Bold, -0.025em
H2: 34px, Semibold
H3: 26px, Semibold
H4: 21px, Medium
H5: 17px, Medium
H6: 14px, Semibold, Uppercase

Typography - Body Text

Gemeinsam finden wir die richtige Lösung für Ihre Ziele.
Wir nehmen uns Zeit für Ihre Fragen. Investieren lernen in Ihrem Tempo, mit der Sicherheit, die Sie brauchen.
* Bitte beachten Sie unsere Risikohinweise. Ihr Kapital ist Risiken ausgesetzt.
Zuletzt aktualisiert: Dezember 2024
Lead: 23px, Line 1.55
Body: 18px, Line 1.75
Small: 14px, Line 1.6
Caption: 12px, uppercase

Typography - Blockquotes

"Endlich eine Bank, die meine Sprache spricht. Die Beratung war freundlich und ich fühlte mich gut aufgehoben."
— Sandra K., zufriedene Kundin
Font: System-ui, italic
Size: 21px, Line 1.65
Background: Soft gray
Style: Warm, approachable

Typography - Lists

Was Sie erhalten:

  • Persönliche Beratung per Telefon
  • Flexible Sparpläne ab 25€
  • Verständliche Erklärungen
  • Sicherheit durch Regulierung

So einfach geht's:

  1. Kostenlos anmelden
  2. Identität per Video-Chat bestätigen
  3. Gemeinsam Ihre Ziele definieren
  4. Mit gutem Gefühl investieren
UL Marker: Checkmark (✓), green
OL Marker: Friendly numbers
Spacing: 11px between
Style: Approachable, clear

Typography - Links

Entdecken Sie unsere Ratgeber-Artikel oder sprechen Sie mit unserem Kundenservice. Haben Sie Fragen? Schauen Sie in unsere FAQ.

Color: Primary blue
Decoration: Subtle underline
Transition: 0.35s ease
Hover: Green with slight padding

Buttons - Types

Primary: Warm solid fill
Secondary: Soft border
Ghost: Friendly, text-only

Buttons - Sizes & States



Small: 11px 22px, 15px font
Default: 15px 34px, 17px font
Large: 19px 44px, 18px font
Radius: 12px (friendly)
Animation: 0.35s ease

Form Elements

Für Ihren persönlichen Zugang.
Bitte einen Betrag zwischen 25€ und 10.000€ eingeben.

Form Elements - Extended

Monatliche Zusammenfassung per E-Mail
Spar-Erinnerungen aktivieren
EUR

Die Rendite zeigt, wie viel Gewinn Ihre Anlage in einem bestimmten Zeitraum erwirtschaftet hat.

Cards - Basic

Tagesgeld Plus

Flexibel und sicher. Ihr Einstieg in die Welt der Geldanlage.

Cards - Feature

♥

Persönliche Beratung

Wir sind für Sie da - telefonisch und per Chat

Cards - Alerts

ℹ Tipp: Aktivieren Sie die 2-Faktor-Authentifizierung.
⚠ Ihre Sitzung läuft in 5 Minuten ab.
✓ Ihre Einzahlung wurde verbucht.

Cards - Stats

3,2%
Aktueller Zinssatz p.a.
1.250€
Ihr monatlicher Ertrag

Badges & Progress

Empfohlen Sparplan Sicher Limitiert

Ihr Fortschritt: 45% des Ziels

Cards - Testimonials

"Endlich habe ich eine Bank gefunden, bei der ich mich verstanden fühle. Die Beratung war persönlich und geduldig."
SK
Sandra Keller
Zufriedene Sparerin

Cards - Pricing

Beliebt
Komfort-Sparplan
2,99€ / Monat
Ideal für regelmäßiges Sparen mit persönlicher Betreuung
  • Persönliche Beratung per Telefon
  • Flexible Sparraten anpassen
  • Breite ETF-Auswahl
  • Sparplan-Optimierung
  • Kostenlose Auszahlung

Cards - Comparison

Einstieg
Für Sparer
Monatlich 0€
Min. Sparrate 25€
Beratung ✓
Telefon-Support ✗
Komfort
Für Anleger
Monatlich 2,99€
Min. Sparrate 10€
Beratung ✓
Telefon-Support ✓

Layout - Containers

Container Narrow (max-width: 800px)

Container Default (max-width: 1200px)

Container Wide (max-width: 1400px)

Container zentrieren Inhalt automatisch und fügen horizontale Abstände hinzu

Layout - Grid System

Spalte 1

Spalte 2

Spalte 3

3-Spalten-Grid mit mittlerem Abstand (28px)

Hauptinhalt (8 Spalten)

Seitenleiste (4 Spalten)

12-Spalten-Grid mit Spanning (8/4 Aufteilung für Inhalt/Sidebar)

Layout - Spacing Utilities

Element mit mb-3 (24px unten Abstand)

Element mit mb-2 (16px unten Abstand)

Element mit mb-1 (8px unten Abstand)

Letztes Element (kein Abstand)

Abstände: m-0, mt/mb-1 (8px), mt/mb-2 (16px), mt/mb-3 (24px), mt/mb-4 (36px)
Padding: p-0, p-1 (8px), p-2 (16px), p-3 (24px), p-4 (36px)

Layout - Responsive Breakpoints

Mobil: < 768px (1 Spalte)
Tablet: 769px - 1024px (2 Spalten für 4-Spalten-Grids)
Desktop: > 1024px (vollständiges Grid)

Grids stapeln sich automatisch auf Mobilgeräten. Navigation wechselt zu Hamburger-Menü.

Navigation - Header

Navigation - Mobile Menu

Slide-out Menü (Normalerweise verborgen, öffnet via Hamburger-Icon)

Navigation - Breadcrumbs

Navigation - Tabs

Hier wird der Tab-Inhalt angezeigt

Navigation - Footer

Colors

Primary
Secondary
Accent
Text

Solar Investing

Warm orange highlights for sustainable products

Spacing & Layout

Base unit: 8px
Section padding: 26-32px
Card spacing: 18px between
Max width: 1240px
Grid gap: 28px
Comfortable breathing room

Dividers: 1px, slightly transparent

Animation Philosophy

Duration: 0.35s
Easing: ease (natural)
Allowed:
• Friendly lift animations
• Smooth color transitions
• Fade-ins on scroll
• Gentle scale effects
Forbidden:
• Jarring movements
• Fast, aggressive timing
• Complex 3D transforms

Image Treatment

Warm, natural tones. Soft gradients that feel approachable.

Filter: saturate(0.9) brightness(1.05)
Overlay: Soft blue gradient
Warm: sepia(0.15) for friendly feel
Style: Natural, inviting