Statescloud ist mehr als nur ein Name – es ist ein Versprechen für Innovation, Zuverlässigkeit und grenzenlose Möglichkeiten in der Cloud.
Der Name "Statescloud" vereint zwei kraftvolle Konzepte: "States" – die verschiedenen Zustände und Möglichkeiten, die Technologie bietet – und "Cloud" – die grenzenlose, allgegenwärtige Natur moderner Cloud-Dienste.
Unsere farbenfrohe Wolke im Logo symbolisiert die Vielfalt unserer Lösungen und die harmonische Integration verschiedener Technologien. Jede Farbe repräsentiert einen Aspekt unserer Arbeit und unserer Werte.
Die überlappenden Kreise zeigen, wie nahtlos verschiedene Dienste zusammenarbeiten – genau wie unsere Produkte für unsere Kunden.
Die Zukunft der Cloud-Technologie gestalten und Unternehmen ermöglichen, ihr volles digitales Potenzial zu entfalten.
Innovative Cloud-Lösungen entwickeln, die einfach zu nutzen sind und höchste Sicherheitsstandards erfüllen.
Innovation, Transparenz, Zuverlässigkeit und eine tiefe Leidenschaft für exzellente Nutzererfahrungen.
Immer einen Schritt voraus mit modernster Technologie
Zuverlässig und transparent in allem was wir tun
Hochwertige Lösungen mit Liebe zum Detail
Unkonventionelle Lösungen für komplexe Herausforderungen
Die Statescloud Farbpalette ist direkt vom Logo inspiriert – eine harmonische Mischung aus warmen und kühlen Tönen, die Innovation, Kreativität und Professionalität verkörpern.
Unsere Farben wurden sorgfältig ausgewählt, um Emotion und Funktion zu verbinden. Jede Farbe hat eine spezifische Bedeutung und einen festgelegten Verwendungszweck.
Die Kombination aus kühlen Blautönen und warmen Akzentfarben schafft ein dynamisches visuelles Erlebnis, das sowohl professionell als auch einladend wirkt.
HEX
#00D4FF
RGB
0, 212, 255
HSL
190, 100%, 50%
HEX
#FFAA00
RGB
255, 170, 0
HSL
40, 100%, 50%
#FF4488
Kreative Elemente, Features
#8844FF
Premium, Enterprise
#4488FF
Trust, Links, Info
#FF6600
Energie, Aktionen
#050D1A
Haupt-Hintergrund
#0A1628
Sekundärer Hintergrund
#0F1E35
Cards & Panels
linear-gradient(135deg, #00D4FF, #8844FF, #FF4488)
Für Headlines, Hero-Bereiche und besondere Hervorhebungen
linear-gradient(135deg, #FFAA00, #FF6600, #FF4488)
Für CTAs, Buttons und auffällige Elemente
linear-gradient(135deg, #00D4FF, #4488FF)
Für subtile Akzente und Hintergrundelemente
linear-gradient(180deg, #0A1628, #050D1A)
Für Hintergründe mit Tiefe
Unsere Typografie kombiniert moderne Eleganz mit optimaler Lesbarkeit. Die richtige Schriftwahl ist entscheidend für ein professionelles und konsistentes Erscheinungsbild.
Wir verwenden ein Dual-Font-System: Eine geometrische Sans-Serif für Überschriften und eine humanistische Sans-Serif für Fließtext.
Outfit vermittelt Modernität und Kraft in Headlines, während Inter maximale Lesbarkeit in längeren Texten gewährleistet.
Diese Kombination schafft eine klare visuelle Hierarchie und unterstützt die Benutzerführung.
Outfit
Headlines & Überschriften
Inter
Body Text & UI-Elemente
Google Fonts • Variable Font
REGULAR (400)
Statescloud Innovation
MEDIUM (500)
Statescloud Innovation
SEMIBOLD (600)
Statescloud Innovation
BOLD (700)
Statescloud Innovation
EXTRABOLD (800)
Statescloud Innovation
VERWENDUNG
Google Fonts • Variable Font
LIGHT (300)
Die Zukunft der Cloud beginnt hier.
REGULAR (400)
Die Zukunft der Cloud beginnt hier.
MEDIUM (500)
Die Zukunft der Cloud beginnt hier.
SEMIBOLD (600)
Die Zukunft der Cloud beginnt hier.
VERWENDUNG
Headline Eins
Headline Zwei
Headline Drei
Headline Vier
Dies ist größerer Fließtext für Einleitungen und wichtige Absätze.
Dies ist der Standard-Fließtext für längere Textpassagen und Beschreibungen im gesamten Interface.
Kleinerer Text für Hinweise, Labels, Captions und sekundäre Informationen.
Sehr kleiner Text für Meta-Informationen, Timestamps und technische Details.
Das Statescloud Logo ist das Herzstück unserer visuellen Identität. Es repräsentiert unsere Werte und muss konsistent und respektvoll verwendet werden.
Die Wolke symbolisiert Cloud-Technologie, Speicherung und die nahtlose Verfügbarkeit unserer Dienste. Sie schwebt leicht und vermittelt Zugänglichkeit und Freiheit.
Cyan = Technologie & Innovation, Gold = Wert & Premium, Magenta = Kreativität, Violet = Weisheit, Blau = Vertrauen.
Die überlappenden Elemente zeigen Integration und Zusammenarbeit. Sie symbolisieren, wie verschiedene Dienste und Technologien nahtlos ineinandergreifen.
Das tiefe Navy-Blau des Hintergrundes schafft Tiefe und lässt die Farben strahlen. Es steht für Professionalität und Premium-Qualität.
Standardversion für dunkle Hintergründe
Statescloud
Für Navigationselemente und Headers
Für kleine Größen und App-Icons
Die Schutzzone entspricht 25% der Logo-Höhe auf jeder Seite. Kein Element darf in diese Zone eindringen.
32px
Minimum für Digital (Favicon)
48px
Empfohlen für Navigation
64px+
Für große Darstellungen
Farbverläufe sind ein Kernbestandteil unserer visuellen Sprache. Sie verleihen Tiefe, Bewegung und Premium-Charakter.
Hauptgradient für CTAs und primäre Elemente
from-states-cyan to-states-azure
Akzent-Gradient für kreative Elemente
from-states-magenta to-states-violet
Warm-Gradient für Highlights und Badges
from-states-gold to-states-orange
Für Hero-Bereiche und besondere Akzente
from-states-cyan via-states-magenta to-states-gold
Kühle Variante für technische Bereiche
from-states-violet via-states-azure to-states-cyan
Für Hintergrund-Akzente
Für kreative Highlights
Für Header-Bereiche
Langsame, elegante Bewegung für Hero-Bereiche
animate-gradient bg-300%
Subtiles Pulsieren für Call-to-Actions
animate-pulse-glow
class="gradient-text"
from-states-gold via-states-orange to-states-magenta bg-clip-text text-transparent
from-white via-states-cyan to-white
Light Glass
backdrop-blur-sm
Medium Glass
backdrop-blur-md
Heavy Glass
backdrop-blur-xl
Cyan Shadow
shadow-states-cyan/30
Magenta Shadow
shadow-states-magenta/30
Gold Shadow
shadow-states-gold/30
Violet Shadow
shadow-states-violet/30
Ein konsistentes Spacing-System sorgt für visuelle Harmonie und professionelles Erscheinungsbild auf allen Plattformen.
Alle Abstände basieren auf Vielfachen von 4px. Dies sorgt für pixelgenaue Layouts und harmonische Proportionen auf allen Bildschirmgrößen.
Wir nutzen ein 12-Spalten-Grid für flexible Layouts:
12 Columns
6 + 6 (Half)
4 + 4 + 4 (Thirds)
3 + 9 (Sidebar + Content)
2 + 8 + 2 (Centered Content)
< 640px
Stack, full-width
640px - 1024px
md: 2 columns
1024px - 1280px
lg: 3-4 columns
> 1280px
xl: Full layout
Icons sind ein wichtiger Bestandteil unserer visuellen Sprache. Sie unterstützen die Kommunikation und verbessern die Benutzerfreundlichkeit.
Standard für UI-Elemente
stroke-width: 1.5-2
Für aktive Zustände
fill: currentColor
Für spezielle Akzente
SVG linearGradient
16px
Inline
20px
Buttons
24px
Standard
32px
Medium
40px
Large
48px
Feature
Menu
Close
Search
User
Settings
Notif.
Heart
Bilder erzählen Geschichten. Unsere Bildsprache ist modern, technisch und inspirierend.
Tech Abstract
Geometrische Formen, Datenvisualisierungen, Cloud-Strukturen
Person / Team
Diverse Teams, echte Arbeitsplätze, natürliche Ausdrücke
Product UI
Klare UI-Darstellungen auf dunklem Hintergrund mit Schatten
Für Hero-Bereiche mit Text-Overlay. Verwendet bg-states-darker/60.
Für Karten mit Text am unteren Rand. Gradient von unten nach transparent.
Square
Avatars, Icons
Widescreen
Hero, Videos
Standard
Thumbnails
Portrait
Team Photos
4px
rounded
8px
rounded-lg
12px
rounded-xl
16px
rounded-2xl
24px
rounded-3xl
50%
rounded-full
Verschiedene Navigationsstile für unterschiedliche Anwendungsfälle. Alle Beispiele zeigen die korrekte Platzierung des Logos und die Verwendung der Brand-Farben.
Das Logo wird immer am linken Rand platziert, gefolgt vom Markennamen.
Transparenter Hintergrund mit Blur für moderne Ästhetik.
Farbige Unterstriche oder Hintergründe bei Hover.
Die klassische horizontale Navigation – ideal für Websites und Web-Apps mit wenigen Hauptseiten.
Für umfangreiche Websites mit vielen Unterseiten. Das Dropdown zeigt Kategorien auf einen Blick.
Symmetrischer Look für Brand-fokussierte Websites. Links und Aktionen sind gleichmäßig verteilt.
Für Hero-Bereiche mit Hintergrundbildern. Die Navigation schwebt über dem Content.
Statescloud
Hero Image Background
Für Plattformen mit viel Content. Die Suche ist prominent in der Mitte platziert.
Statescloud
Reduziert auf das Wesentliche. Nur Logo und Hamburger-Menü sichtbar – perfekt für mobile-first Designs.
Statescloud
/* Navbar Container */
.navbar {
@apply fixed top-0 left-0 right-0 z-50;
@apply bg-states-darker/80 backdrop-blur-xl;
@apply border-b border-white/5;
}
/* Logo Area */
.navbar-brand {
@apply flex items-center gap-3;
}
.navbar-brand img {
@apply w-10 h-10 rounded-xl;
}
.navbar-brand span {
@apply font-heading font-bold text-xl;
}
/* Nav Links */
.nav-link {
@apply text-white/70 hover:text-white;
@apply transition-colors duration-300;
}
/* CTA Button */
.nav-cta {
@apply px-5 py-2 rounded-full font-semibold;
@apply bg-gradient-to-r from-states-cyan to-states-azure;
@apply hover:shadow-lg hover:shadow-states-cyan/30;
@apply transition-all duration-300;
}Für komplexe Websites mit vielen Kategorien bieten sich erweiterte Navigationskonzepte an. Diese Big Navbars kombinieren Mega-Menüs mit visuellen Elementen.
Für E-Commerce, SaaS Plattformen oder umfangreiche Dokumentationen.
Statescloud
Integrieren Sie Machine Learning in Ihre Anwendungen mit nur wenigen Zeilen Code.
Mehr erfahrenFür komplexe Dashboards mit mehreren Navigationsebenen.
Statescloud
Zeigt den aktuellen Kontext und ermöglicht schnelle Navigation.
Für einfache Websites mit wenigen Seiten (5-7 Links)
Für umfangreiche Websites mit vielen Kategorien
Für komplexe Dashboards mit Kontextwechsel
Verschiedene Sidebar-Layouts für Dashboards, Admin-Panels und komplexe Anwendungen. Das Logo kann oben oder als kompaktes Icon dargestellt werden.
Das Logo ist immer das erste Element.
Hauptmenü, Untermenüs, Aktionen.
Cyan-Highlight für aktive Items.
Unterstützung für Mini-Modus.
Die klassische vollständige Sidebar mit Logo, Navigation und User-Bereich am Ende.
Statescloud
John Doe
john@statescloud.com
Kompakte Variante – nur Icons sichtbar. Ideal für maximalen Content-Bereich. Tooltips zeigen Labels bei Hover.
Kombination aus Sidebar und Header. Das Logo ist in der Sidebar, der Header enthält Suche und User-Aktionen.
Statescloud
Gruppierte Navigation mit Überschriften. Perfekt für komplexe Apps mit vielen Funktionen.
Statescloud
Statescloud
Navbar Links
Standard für Websites
Navbar Zentrum
Brand-fokussiert
States
Sidebar Oben
Dashboards & Apps
Mini Sidebar
Nur Icon
Der Footer schließt jede Seite ab und bietet wichtige Navigation, rechtliche Infos und Kontaktmöglichkeiten.
Für Landing Pages und einfache Anwendungen.
Für die meisten Websites und Dashboards.
Statescloud
Innovative Cloud-Lösungen für moderne Unternehmen.
Für umfangreiche Websites mit vielen Inhalten und Features.
Erhalte Updates zu neuen Features und Ankündigungen.
Statescloud
Cloud Management Platform
Die führende Plattform für Cloud-Infrastruktur und DevOps-Automatisierung.
Minimalistisch für Applikationen und Dashboards.
Konsistente Seitenlayouts sorgen für ein vertrautes Nutzererlebnis. Hier sind die Standard-Templates für verschiedene Seitentypen.
Für Produktseiten, Features und Conversion-optimierte Inhalte.
Hero → Features → Social Proof → CTA → Footer
Für Applikationen mit Sidebar-Navigation und Content-Bereich.
Sidebar → Header → Stats → Charts → Data Tables
Für technische Dokumentationen mit Inhaltsverzeichnis.
Left Nav → Content → On-Page TOC
Max-Width für Content-Container
Standard Gap bei Grid-Layouts
Breakpoint für Mobile/Tablet
Spalten im Grid-System
Der Hero ist das erste, was Besucher sehen. Hier sind verschiedene Variationen für unterschiedliche Zwecke.
Klassisch und fokussiert. Ideal für klare Botschaften.
Entwickeln, deployen und skalieren Sie Ihre Anwendungen in Minuten. Mit Statescloud wird Cloud-Management zum Kinderspiel.
Keine Kreditkarte erforderlich • 14 Tage kostenlos testen
Text links, Visual rechts. Perfekt für Produkt-Präsentationen.
SOC 2 zertifiziert, GDPR-konform und ISO 27001. Ihre Daten sind bei uns in sicheren Händen.
Dashboard Preview
Reduziert auf das Wesentliche. Für starke Marken mit klarer Message.
Deploy in seconds. Scale infinitely.
Social Proof direkt im Hero. Baut sofort Vertrauen auf.
Join the community of developers who ship faster with Statescloud.
Formulare sind essentiell für Benutzerinteraktionen. Konsistente Patterns sorgen für intuitive Bedienung und reduzieren Fehler.
Für reguläre Texteingaben
Für Suche und spezielle Felder
Für E-Mail und validierte Felder
border-white/10
border-states-cyan
border-green-500/50
Bitte gültigen Wert eingeben
Labels immer sichtbar über dem Input. Platzhalter nur als Beispielwert, nicht als Ersatz für Labels.
Inline-Validierung bei Blur. Fehlermeldungen direkt unter dem Feld in Rot anzeigen.
Erstes Feld automatisch fokussieren. Logische Tab-Reihenfolge von oben nach unten.
Cards gruppieren zusammengehörige Inhalte und bieten klare visuelle Abgrenzung. Hier sind verschiedene Card-Variationen für unterschiedliche Anwendungsfälle.
Standard Card mit Titel und Text für einfache Inhalte.
glass-card p-6
Inhalt der Card mit separatem Header-Bereich.
Inhalt der Card über dem Footer.
Optimierte Performance für maximale Geschwindigkeit.
Enterprise-Grade Sicherheit für Ihre Daten.
Kollaboration in Echtzeit mit Ihrem Team.
Starter
pro Monat
Professional
pro Monat
Enterprise
individuelle Preise
Product Designer
Lead Developer
UX Researcher
Project Manager
Benutzer
Umsatz
Konversionsrate
Aktive Sessions
Tabellen präsentieren strukturierte Daten übersichtlich. Diese Patterns sorgen für Konsistenz und gute Lesbarkeit.
| Name | Rolle | Status | Aktionen | |
|---|---|---|---|---|
|
JD
John Doe
|
john@example.com | Admin | Aktiv | |
|
AS
Anna Schmidt
|
anna@example.com | Editor | Aktiv | |
|
MB
Max Braun
|
max@example.com | Viewer | Pending |
|
Projekt
|
Team | Progress | Deadline | |
|---|---|---|---|---|
| Website Redesign |
+3
|
|
15. Feb 2026 | |
| Mobile App v2 |
|
|
28. Feb 2026 |
Zeige 1-10 von 48 Einträgen
Dokument-Titel.pdf
Zuletzt bearbeitet vor 2 Stunden
Bild-Asset.png
Gestern hochgeladen
<span class="px-3 py-1 bg-[color]/20 text-[color] rounded-lg">Badge</span>
Richtlinien für die Darstellung von Daten in Charts, Graphen und Dashboards.
Die Reihenfolge der Farben für mehrteilige Visualisierungen:
Primär
#00D4FF
Sekundär
#FF4488
Tertiär
#FFB300
Quartär
#A855F7
Quintär
#0066FF
Für mehr als 5 Datenpunkte: Opacity-Varianten verwenden (80%, 60%, 40%)
Für Vergleiche zwischen Kategorien
Für Trends über Zeit
Für Proportionen und Anteile
Für Fortschritt und Zielerreichung
2,847
Aktive Nutzer
€42,580
Monatlicher Umsatz
1,234
Offene Tickets
99.98%
Uptime
Benachrichtigungen informieren Benutzer über wichtige Ereignisse und Systemzustände.
Erfolgreich gespeichert
Die Änderungen wurden übernommen.
Fehler aufgetreten
Bitte versuchen Sie es erneut.
Warnung
Ungespeicherte Änderungen vorhanden.
Information
Neues Update verfügbar.
★ Standard-Position für Toasts
Verifizierung erfolgreich
Ihre E-Mail wurde erfolgreich bestätigt. Sie können jetzt alle Features nutzen.
Zahlung fehlgeschlagen
Die Transaktion konnte nicht abgeschlossen werden. Bitte überprüfen Sie Ihre Zahlungsdaten.
Tipp
Sie können Tastenkürzel verwenden um schneller zu navigieren. Drücken Sie ? für eine Übersicht.
Sind Sie sicher, dass Sie dieses Element löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.
Modals werden zentriert mit dunklem Overlay angezeigt
Spinner
Dots
Progress Bar
Skeleton
Sie haben noch keine Dokumente erstellt.
Für Ihre Suche wurden keine Treffer gefunden.
Animationen verleihen unseren Interfaces Leben und kommunizieren Zustandsänderungen. Hier sind die Regeln für konsistente und performante Animationen.
Animationen sollten schnell und reaktionsfreudig sein. Max. 300ms für UI-Feedback.
Bewegungen folgen natürlichen Kurven mit Easing. Keine linearen Animationen.
Jede Animation hat einen Zweck: Feedback, Navigation oder Aufmerksamkeit.
Nur transform und opacity animieren. Keine Layout-Eigenschaften für 60fps.
| Token | Dauer | Verwendung | Beispiel |
|---|---|---|---|
duration-75 |
75ms | Micro-Interactions, Icon-Wechsel | |
duration-150 |
150ms | Button Hover, Farb-Wechsel | |
duration-300 |
300ms | Standard UI-Transitions, Dropdown öffnen |
Item 1 |
duration-500 |
500ms | Seitenübergänge, Modal öffnen | Siehe Modal-Beispiel oben |
duration-1000 |
1000ms+ | Hintergrund-Animationen, Parallax |
Schneller Start, langsames Ende. Standard für Einblendungen.
transition-timing-function: ease-out;
Sanfter Start und Ende. Ideal für kontinuierliche Loops.
transition-timing-function: ease-in-out;
Benutzerdefiniert für spezielle Effekte wie "Bounce".
cubic-bezier(0.68, -0.55, 0.265, 1.55)
Für Elemente die erscheinen (Modals, Toasts, Dropdowns)
fade-in
slide-up
Für Elemente die verschwinden - schneller als Entrance!
fade-out (150ms)
slide-down (150ms)
Für Benutzer-Interaktionen (Klicks, Hover)
Für kontinuierliche Hintergrund-Effekte
/* Standard Transitions */
.btn {
@apply transition-all duration-300 ease-out;
}
/* Hover States */
.card:hover {
@apply scale-[1.02] shadow-xl shadow-states-cyan/20;
}
/* Custom Keyframe Animation */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
/* Gradient Animation */
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}transform und opacity animieren
will-change für performante Animationen nutzen
prefers-reduced-motion respektieren
width, height, margin animieren (Layout Thrashing)
Diese Grundsätze leiten alle Designentscheidungen bei Statescloud und gewährleisten ein konsistentes, hochwertiges Markenerlebnis über alle Touchpoints hinweg.
Jedes Designelement hat einen klaren Zweck. Wir eliminieren Unnötiges für maximale Verständlichkeit und intuitive Nutzung.
Hochwertige Materialien, subtile Animationen und raffinierte Details schaffen ein Premium-Erlebnis auf jedem Screen.
Einheitliche Patterns, Komponenten und Interaktionen sorgen für Wiedererkennung und Vertrauen beim Nutzer.
Barrierefreies Design für alle Nutzer mit ausreichenden Kontrasten, klarer Struktur und Keyboard-Navigation.
Wir nutzen Größe, Farbe und Position, um die Wichtigkeit von Elementen zu kommunizieren.
Konsistente Abstände schaffen visuellen Rhythmus und verbessern die Lesbarkeit.
Subtile Animationen verbessern die UX, ohne abzulenken.
Hover Effects
200-300ms, ease-out
Page Transitions
400-600ms, cubic-bezier
Micro-interactions
150-250ms, spring-like
Wir designen primär für Dark Mode – modern, augenfreundlich und premium.
Wir nutzen Glassmorphism-Effekte, um Tiefe und Layering zu erzeugen. Transparente Hintergründe mit Blur-Effekten schaffen einen modernen, eleganten Look.
Level 0
Solider Hintergrund
backdrop-blur: 0
Level 1
Subtiler Glass-Effect
backdrop-blur: 12px
Level 2
Starker Glass-Effect
backdrop-blur: 24px
Eine umfassende Bibliothek von UI-Komponenten, die dem Statescloud Corporate Design entsprechen. Fertig zur Verwendung in allen Projekten.
Primary Buttons
Secondary Buttons
Button Sizes
Button Shapes
Dieses Feld ist erforderlich
Status Badges
Feature Tags
Kleine Badges
Standard Card mit Hover-Effekt. Nutzt Glassmorphism-Design.
Mit Icon für Feature-Darstellungen.
Mit Bild-Header für Previews.
Information
Dies ist eine informative Benachrichtigung für den Benutzer.
Erfolg
Die Aktion wurde erfolgreich ausgeführt.
Warnung
Bitte beachten Sie diese wichtige Information.
Fehler
Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.
Avatar Sizes
User Chips
Motion ist kein Dekor, sondern ein Kernbestandteil der User Experience. Richtig eingesetzt, führt, erklärt und begeistert Bewegung.
Animationen zeigen Zusammenhänge. Wenn sich ein Menü von links öffnet, weiß der Nutzer, dass es dort "versteckt" war. Übergänge helfen, den mentalen Kontext zu wahren.
Jede Aktion braucht eine Reaktion. Ein Button-Press, ein Ladebalken oder ein Error-Shake geben sofortiges visuelles Feedback und Bestätigung.
Motion definiert das "Gefühl" der Marke. Unsere Animationen sind smooth, premium und "fluid". Keine abrupten Schnitte, sondern elegantes Gleiten.
Instant (100ms)
Für einfache Farbwechsel & Hover
Fast (200ms)
Für kleine UI-Elemente & Icons
Normal (300ms)
Standard für die meisten Interaktionen
Slow (500ms)
Für große Bereiche & Modals
Elegant (800ms+)
Für Hero-Entrances & Hintergründe
class="transition-opacity"
class="hover:scale-105"
class="-translate-y-..."
Lade-Animationen überbrücken Wartezeiten und signalisieren Aktivität.
Kleine Details machen das Interface lebendig.
Füge diese Animationen zur tailwind.config.js hinzu:
extend: {
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-glow': 'pulse-glow 2s ease-in-out infinite',
'shimmer': 'shimmer 2s linear infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
},
shimmer: {
'100%': { transform: 'translateX(100%)' },
}
}
}Gutes Design ist für alle zugänglich. Wir folgen WCAG 2.1 AA Standards, um sicherzustellen, dass jeder unsere Produkte nutzen kann.
Hinweis: Solche Kombinationen nur für dekorative Elemente verwenden, nicht für wichtigen Text oder Interaktionen.
Alle interaktiven Elemente müssen einen sichtbaren Focus-State haben. Wir nutzen einen Cyan-Ring als Standard-Indikator.
focus:ring-2 focus:ring-states-cyan focus:ring-offset-2 focus:ring-offset-states-darker
Zu klein (10px)
✗ Nicht verwenden
Grenzwertig (12px)
⚠ Nur für Labels
Standard Minimum (14px)
✓ Body Text
Nutzer können Animationen über ihre Systemeinstellungen reduzieren. Wir respektieren diese Präferenz mit CSS Media Queries.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}