LOGO
Work in Progress⚠️ Vorläufige Design-Vorschläge
Die hier gezeigten Logos und Schriften sind nur Vorschläge zur Richtung. Endgültige Vorschläge kommen von den Designern.
Logo-Richtlinien
- Mindestabstand einhalten (1x Icon-Höhe)
- Logo nicht verzerren oder in anderen Farben verwenden
- Diese Varianten dienen als Vorschläge zur Diskussion mit dem Design-Team
- Finale Entscheidung erfolgt in Abstimmung mit der Designerin
Icon-Varianten
Verschiedene Logo-Vorschläge für App-Icons, Favicons und Social Media
Variante 1
viamind_logo_2.png
Variante 2
D.png (Philipp)
Variante 3
E.png (Philipp)
Variante 4
H.png (Philipp)
💡 Kombinationsvorschlag
Ggf. Kombination der linken Seite von D) und dem Weg von H) und dem Punkt und der Position des Punktes von G)
Hauptlogo (Aktuell)
Aktuelles Logo für Website, Dokumente und Marketing-Material
Hauptlogo – Weiß
viamind_logo.png (Im Einsatz)
Verwendung: Navigation, Footer (weiß)
Alternative Logo-Variante
viamind_hauptlogo_3.png
Alternative Variante (nicht im aktiven Einsatz)
Bildsprache
Hintergrund-Beispiel
hintergrund.png – Beispiel für visuelle Gestaltung
Verwendung als Referenz für visuelle Gestaltungselemente
FARBPALETTE (5 FARBEN)
Teal
Primär
#4d8081
Apricot
Sekundär
#f5d7b4
Charcoal
Dunkel
#2D2D2D
Mist
Hell
#EEF3F3
White
Neutral
#FFFFFF
TYPOGRAFIE
Sora – Headlines
Heading 1 – Die Zukunft beginnt jetzt
Heading 2 – KI-Transformation
Heading 3 – Unser Ansatz
Montserrat – Body Text
Die viamind GmbH ist Ihr herstellerunabhängiger Partner für KI-Transformation. Wir verbinden langjährige ERP-Expertise mit modernem KI-Wissen und begleiten mittelständische Unternehmen auf ihrem Weg in die digitale Zukunft.
Kleine Texte und Helpertexte erscheinen in dieser Größe.
CARDS
Card-Varianten
Default
Mist mit feiner Border
Standard-Card für Content-Bereiche.
Outlined
Teal-Border, volle Stärke
Hebt sich durch Teal-Rahmen ab.
Elevated
Mit kraftvollem Shadow
Schwebt durch stärkeren Schatten.
Accent
Teal Left-Border Highlight
Für wichtige oder hervorgehobene Inhalte.
Mist als Card-Hintergrund auf weißer Basis – kühler Off-White-Ton mit Teal-Verwandtschaft
BADGES
Varianten
Success, Warning & Danger nutzen dezente viamind-Farben (Teal, Apricot) mit Border
Größen
FORMULAR-ELEMENTE
Standard & Input-Typen
States
Dieses Feld ist erforderlich
Wir werden Ihre E-Mail niemals weitergeben
Bitte gültige E-Mail eingeben
Dieses Feld ist deaktiviert
Textarea
Mindestens 20 Zeichen, maximal 500 Zeichen
Die Nachricht ist zu kurz
Form Best Practices
- Verwende
requiredfür Pflichtfelder - Helper-Text für zusätzliche Erklärungen nutzen
- Error-States für Validierungs-Feedback
- Transitions sorgen für smooth UX
- Focus-Shadow hebt aktives Feld hervor
Props
label– Label-Text über Input (optional)type– Input-Typ: text, email, tel, number, etc. (default: text)placeholder– Platzhalter-Text (optional)helperText– Hilfetext unter Input (optional)error– Fehlermeldung, aktiviert Error-State (optional)required– HTML required-Attribut (optional)disabled– Deaktivierter Zustand (optional)defaultValue– Standard-Wert (optional)
💡 Textarea unterstützt die gleichen Props (außer type)
ALERTS
Information
Erfolg
Warnung
Fehler
SPINNER
Small
Medium
Large
LINKS
Standard Links
Navigation Links (Header)
Animated Underline
Minimalistischer Hover-Effekt für Navigation im Header
Eigenschaften:
- Underline expandiert von Mitte nach außen (500ms, ease-out)
- Farbwechsel zu Teal beim Hover (200ms)
- 2px dicke Linie für bessere Sichtbarkeit
- Minimalistisch und professionell
ICONS – HEROICONS
@heroicons/react v2.x
Konsistentes Icon-System mit Outline (24px) und Solid (24px) Varianten
Outline IconsStandard
Home
User
Phone
Search
Settings
Bell
Arrow
Check
Warning
Info
Error
Chevron
Document
Building
Idea
Solid IconsHervorhebung
Home
User
Check
Icon-Größen
Small (16px)
Medium (20px)
Default (24px)
Large (32px)
Icons in Buttons
Icon-Richtlinien
- Verwende primär Outline-Icons (24px) für UI-Elemente
- Solid-Icons für aktive States, Badges oder besondere Hervorhebungen
- Standard-Farbe: Teal (#4d8081) oder Charcoal (#2D2D2D)
- Icons mit Text: h-5 w-5 (20px) für optimale Lesbarkeit
HERO SECTION
Landing Page Hero
First Screen auf Homepage & Landing Pages
Features:
- 4 Varianten (light, mist, gradient, dark)
- 4 Größen (sm, md, lg, xl)
- Optional mit Bild (links/rechts positionierbar)
- Subline als Badge
- Primary & Secondary CTA Buttons
- Responsive Layout
Variante: Light
KI-Transformation für den Mittelstand
Variante: Gradient
Praxisnahe KI-Lösungen
Variante: Dark
Ihre KI-Journey beginnt hier
Props
variant– light, mist, gradient, darksize– sm, md, lg, xlheadline– Haupt-Überschrift (required)subline– Badge über Headline (optional)description– Beschreibungstext (optional)primaryCta– Haupt-CTA mit label & hrefsecondaryCta– Sekundär-CTA (optional)image– Optional: Bild-ObjektimagePosition– left oder right
FEATURE GRID
3-Column Grid
Schnelle PerformanceNeu
Optimierte Ladezeiten und reibungslose User Experience durch moderne Technologien.
Maximale Sicherheit
Enterprise-Grade Security mit modernsten Verschlüsselungstechnologien.
Flexible Anpassung
Individuell konfigurierbar und skalierbar nach Ihren Anforderungen.
2-Column Grid
Zuverlässiger Support
24/7 Kundensupport mit schnellen Reaktionszeiten.
Faire Preise
Transparente Preismodelle ohne versteckte Kosten.
Props
columns– 2, 3, 4 (default: 3)items– Array von Feature-Objektenitems[].icon– React-Node für Icon (optional)items[].title– Feature-Titelitems[].description– Feature-Beschreibungitems[].badge– Optionales Badge (z.B. "Neu")
STATS GRID
Statistik-Grid für Key Metrics, Zahlen und Highlights. Perfekt für Impact Sections nach Hero.
3-Column Grid (Standard)
4-Column Grid
Ohne Icons
Props
columns– 2, 3, 4 (default: 3)spacing– sm, md, lg (default: md)animated– Boolean für Scale-in Animation (default: true)items– Array von Stat-Objektenitems[].icon– Heroicon Component (optional)items[].number– Große Zahl/Wertitems[].label– Beschreibungstext
PROCESS STEPS
Prozess-Schritte mit Nummerierung und Verbindungslinien. Ideal für „So arbeiten wir" Sections.
3-Schritte-Prozess (Standard)
Verstehen
Wir analysieren Ihre Prozesse und identifizieren KI-Potenziale.
Umsetzen
Schnelle Quick Wins und strategische Lösungen – pragmatisch und zielgerichtet.
Begleiten
Von der ersten Idee bis zur täglichen Nutzung – langfristige Partnerschaft.
4-Schritte-Prozess
Anfrage
Sie kontaktieren uns mit Ihrer Anfrage.
Analyse
Wir analysieren Ihre Anforderungen.
Umsetzung
Entwicklung Ihrer maßgeschneiderten Lösung.
Launch
Erfolgreicher Go-Live und Support.
Ohne Verbindungslinien
Schritt 1
Beschreibung des ersten Schrittes.
Schritt 2
Beschreibung des zweiten Schrittes.
Schritt 3
Beschreibung des dritten Schrittes.
Props
columns– 2, 3, 4 (default: 3)animated– Boolean für Fade-in Animation (default: true)showConnector– Boolean für Verbindungslinien (default: true)items– Array von Step-Objektenitems[].icon– Heroicon Component (required)items[].title– Schritt-Titelitems[].description– Schritt-Beschreibung
CTA SECTION / BANNER
Gradient Variant
Bereit für den nächsten Schritt?
Starten Sie noch heute mit unserer Lösung und erleben Sie den Unterschied.
Light Variant
Kontaktieren Sie uns
Wir freuen uns darauf, von Ihnen zu hören.
Dark Variant
Newsletter abonnieren
Props
variant– gradient, solid, light, dark (default: gradient)size– sm, md, lg (default: md)headline– Hauptüberschrift (required)description– Beschreibungstext (optional)primaryButton– Objekt mit text, onClick, hrefsecondaryButton– Optionaler zweiter Button
MODAL / DIALOG
Modal-Komponente mit Overlay, Focus-Trap und Accessibility-Features. ESC zum Schließen, Click außerhalb zum Schließen (konfigurierbar).
Live-Beispiele
Größen-Varianten
Praxis-Beispiel: Kontaktformular
Props
isOpen– Boolean: Modal-Zustand (required)onClose– Callback zum Schließen (required)title– Modal-Titel (optional)size– sm, md, lg, xl, full (default: md)showCloseButton– X-Button anzeigen (default: true)closeOnOverlayClick– Bei Overlay-Click schließen (default: true)closeOnEscape– Bei ESC schließen (default: true)
ACCORDION
Single Open (Default)
Multiple Open
Props
items– Array von Accordion-Items (required)items[].id– Eindeutige IDitems[].title– Titel des Itemsitems[].content– Inhalt (React-Node)allowMultiple– Mehrere Items gleichzeitig offen (default: false)variant– default, outlined
DROPDOWN / SELECT
Basic Select
Größen-Varianten
Disabled State
Props
options– Array von Optionen (required)options[].value– Eindeutiger Wertoptions[].label– Angezeigter Textoptions[].disabled– Option deaktivieren (optional)value– Aktueller Wert (controlled)onChange– Callback bei Auswahlplaceholder– Platzhalter-Textlabel– Label über Selectsize– sm, md, lg (default: md)disabled– Gesamte Komponente deaktivierenerror– Error-State aktivieren
SCROLL-ANIMATIONEN
Dezente Entrance-Animationen für professionellen Seitenaufbau. Alle Animationen sind opt-in und nutzen Intersection Observer für Performance.
Animation-Typen
Fade In Up
Slide von unten + Fade-in (Standard für Content)
Element erscheint von unten
.animate-fade-in-upFade In Down
Slide von oben + Fade-in (für Headers)
Element erscheint von oben
.animate-fade-in-downSlide In Left
Horizontal von links (für Listen-Items)
.animate-slide-in-leftSlide In Right
Horizontal von rechts (für Bilder)
.animate-slide-in-rightFade In
Simple Opacity-Transition (subtil)
Element blendet ein
.animate-fade-inScale In
Zoom-Effekt (für Cards/Modals)
Element skaliert rein
.animate-scale-inGestaffelte Animationen
Mehrere Elemente nacheinander animieren mit Delay-Klassen
.animate-delay-100 / 200 / 300 / 400 / 500Verwendung mit Intersection Observer
import { useScrollAnimation } from '@/lib/hooks/useScrollAnimation';
function MyComponent() {
const [ref, isVisible] = useScrollAnimation({
threshold: 0.2
});
return (
<div
ref={ref}
className={`animate-on-scroll ${
isVisible ? 'animate-fade-in-up' : ''
}`}
>
Content erscheint beim Scrollen
</div>
);
}Best Practices
- Subtil halten – Max. 600ms Duration, dezente Bewegung
- Nicht übertreiben – Nur für Hero, Features, CTAs
- Performance beachten – Intersection Observer für Scroll-Trigger
- Konsistent bleiben – Pro Seite gleiche Animation-Richtung
- Mobile optimieren – Evtl. reduzierte Animationen auf Touch-Geräten