Design System v1.0
Consoro GmbH · 2025

Design System
Styleguide

Die zentrale Referenz für alle Consoro-Produkte. Konsistente Komponenten, klare Regeln, professionelles Erscheinungsbild.

WCAG AA Mobile-First Dark Mode 14 Komponenten
01 · Foundation

Farbpalette

Die Consoro Farbpalette basiert auf dem Corporate Blue #3d72fc, kombiniert mit einem professionellen Navy-Blau und neutralen Graustufen. Auf Hexwert klicken zum Kopieren.

Brand & Primary
Kopiert ✓
Primary
#3d72fc
Kopiert ✓
Primary Dark
#2b5fd9
Kopiert ✓
Primary Darker
#1a4ab5
Kopiert ✓
Primary Light
#e8f0fe
Kopiert ✓
Deep Navy
#1a2f5a
Kopiert ✓
Navy Light
#253f6e
Neutral Scale
50
100
200
300
400
500
600
700
800
900
Semantische Farben
Kopiert ✓
Success
#22c55e
Kopiert ✓
Warning
#f59e0b
Kopiert ✓
Danger
#ef4444
Kopiert ✓
Info
#3b82f6
02 · Foundation

Typografie

Poppins für Headlines (Professionalität, Stärke), DM Sans für Fließtext (Lesbarkeit, modern). Beide von Google Fonts.

Schriftfamilien
Headings — Poppins

IT-Infrastruktur aus Deutschland

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9

Body — DM Sans

Consoro bietet maßgeschneiderte IT-Lösungen für kleine und mittlere Unternehmen. Wir sind Ihr Partner für Hosting, Cloud und IT-Infrastruktur.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Größenskala
5XL
48px / 700
Consoro
4XL
36px / 700
IT-Infrastruktur
3XL
30px / 600
Hosting & Cloud
2XL
24px / 600
Managed Services
XL
20px / 600
Server & Netzwerk
LG
18px / 500
Backup & Security
BASE
16px / 400
Wir bieten professionelle IT-Lösungen für KMU in Deutschland. Zuverlässig, sicher, skalierbar.
SM
14px / 400
Metadaten, Beschriftungen und Hilfstexte werden in dieser Größe dargestellt.
XS
12px / 500
LABELS, TAGS, CAPTIONS — UPPERCASE MIT LETTER-SPACING
Fließtext & Links

Consoro GmbH ist Ihr zuverlässiger IT-Partner für mittelständische Unternehmen. Unsere Managed Services umfassen alles von Hosting über Cloud bis zu vollständiger IT-Infrastruktur.

Fettschrift für Hervorhebungen, Kursiv für besondere Betonung. Textlinks in Primary Blue.

Mikrotext / Caption: Erstellt am 01.01.2025 · Version 1.0.0 · Mehr erfahren

03 · Foundation

Grid-System

12-spaltiges Grid mit flexiblen Gaps. Mobile-First mit definierten Breakpoints. Basiert auf CSS Flexbox/Grid.

12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
8
4
3
6
3
1
1
1
1
1
1
1
1
1
1
1
1
04 · Komponenten

Buttons

Alle Button-Varianten, Größen und Zustände. Verwende Primary für die Hauptaktion, Secondary für alternative Aktionen.

Varianten
Größen
Zustände
Mit Icons & Icon-Buttons
05 · Komponenten

Formularelemente

Konsistente Formulareingaben mit klaren Zustandsindikatoren. Alle Elemente sind barrierefrei und mit focus-visible gestylt.

Ihr Vorname wie im Ausweis.

Ungültige E-Mail-Adresse.

✓ E-Mail validiert

Speicher: 65 GB von 100 GB

📎
Dateien auswählen oder hier ablegen
PDF, DOC, DOCX — max. 20 MB
06 · Komponenten

Cards

Vielseitige Card-Komponenten für Inhalte, Features und Pricing. Hover-Zustand mit subtiler Elevation.

Basis-Cards
🖥️
Managed Hosting

Professionelles Hosting mit 99.9% Uptime-Garantie und deutschem Rechenzentrum.

SLA DE
ab 29 €/Monat
☁️
Cloud Server

Skalierbare Cloud-Infrastruktur, die mit Ihrem Unternehmen wächst.

Flexibel Hot
ab 15 €/Monat
🔒
IT-Security

Umfassender Schutz für Ihre IT-Infrastruktur — Firewall, VPN, Monitoring.

Wichtig
Auf Anfrage
Pricing Cards
Starter
€29
pro Monat, zzgl. MwSt.
  • 1 vServer (2 CPU, 4 GB RAM)
  • 50 GB SSD Speicher
  • E-Mail Support
  • 99.9% Uptime SLA
Beliebt
Professional
€79
pro Monat, zzgl. MwSt.
  • 3 vServer (4 CPU, 8 GB RAM)
  • 200 GB SSD Speicher
  • 24/7 Telefon-Support
  • 99.99% Uptime SLA
  • Backup inklusive
Enterprise
Individuell
Maßgeschneidert für Sie
  • Dedizierte Server
  • Unbegrenzter Speicher
  • Dedicated Account Manager
  • Custom SLA
  • On-Premise Option
08 · Komponenten

Alerts & Notifications

Kontextuelles Feedback für den Nutzer. Klar unterscheidbar durch Farbe und Icon. Dismissible über X-Button.

✅
Erfolgreich gespeichert
Ihre Einstellungen wurden erfolgreich aktualisiert und werden sofort wirksam.
⚠️
Wartungsarbeiten geplant
Am 15. Januar von 02:00–04:00 Uhr finden Wartungsarbeiten statt. Bitte planen Sie entsprechend.
🚨
Kritischer Fehler
Server web-01 ist nicht erreichbar. Bitte prüfen Sie Ihre Konfiguration sofort.
ℹ️
Neues Feature verfügbar
Das neue Backup-Dashboard steht ab sofort für alle Professional-Kunden bereit.
✓
Einfache Bestätigung ohne Titel
09 · Komponenten

Badges & Tags

Kleine Labels für Status, Kategorien und Metainformationen. Tags sind interaktiv und removable.

Badges
Primary Navy Success Warning Danger Info Neutral
Online Offline Wartung Unbekannt
Klein Standard Groß
Tags (mit Close)
Hosting Cloud Security Backup Monitoring DNS
10 · Komponenten

Tabellen

Daten übersichtlich strukturieren. Striped für lange Listen, Hover für interaktive Tabellen, sortierbare Spalten.

Server ▲ IP-Adresse ↕ Status ↕ CPU ↕ RAM ↕ Aktionen
web-server-01 91.99.222.198 Online
23%
4.2 / 8 GB
db-server-01 10.0.0.15 Wartung
78%
14.1 / 16 GB
backup-01 10.0.0.22 Offline
5%
0.8 / 4 GB
mail-server-01 91.99.222.55 Online
41%
3.3 / 8 GB
11 · Interaktion

Animationen & Loading States

Subtile, professionelle Animationen. Kein Overengineering — jede Animation hat einen klaren Zweck.

Loading Spinners
Daten werden geladen...
Skeleton Loader
Fade-In Stagger Animation
⚡
Schnell

Performance optimiert für beste Ladezeiten.

🛡️
Sicher

Enterprise-Grade Security für Ihre Daten.

📈
Skalierbar

Wächst mit Ihrem Unternehmen mit.

13 · Interaktion

Tooltips

Kontexthilfe bei Hover. Pure CSS, keine JavaScript-Abhängigkeit. Vier Richtungen: top (Standard), bottom, left, right.

Dieser Tooltip erscheint oben
Rechts daneben
Hilfe & Infos zum Thema
Eintrag löschen
99.9% SLA
Service Level Agreement: 99.9% Verfügbarkeit garantiert
14 · Interaktion

Progress Bars & Stepper

Fortschrittsanzeigen für Prozesse, Ressourcenverbrauch und mehrstufige Workflows.

Progress Bars
CPU-Auslastung23%
RAM-Verbrauch78%
Festplatte fast voll94%
Backup abgeschlossen100%
Stepper
✓
Paket wählen
✓
Konfiguration
3
Zahlungsdaten
4
Bestätigung
5
Fertig
15 · Referenz

Breakpoints & Responsive

Mobile-First Ansatz. Designs beginnen für kleinste Bildschirme und werden progressiv erweitert.

< 640
XS / Mobile
Smartphones, 1 Spalte
640px
SM
Große Phones, 2 Spalten
768px
MD
Tablets, Sidebar sichtbar
1024px
LG
Laptops, volle Sidebar
1280px
XL
Desktops, max-width
1536px
2XL
Große Monitore
Aktueller Viewport:
— px
Breakpoint wird berechnet...
CSS Custom Properties (Auszug)
:root { --color-primary: #3d72fc; --color-primary-dark: #2b5fd9; --color-navy: #1a2f5a; --font-heading: 'Poppins', sans-serif; --font-body: 'DM Sans', sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --transition-fast: 0.15s ease; --transition-base: 0.25s ease; }
Consoro Design System
Version 1.0.0 · April 2025 · consoro.eu
WCAG AA Mobile-First Poppins + DM Sans Dark Mode consoro.eu