AK Design System
Ein leichtgewichtiges, modernes CSS-Framework für schnelle Prototypen und produktionsreife Anwendungen.
Übersicht
Erstelle schöne, responsive Benutzeroberflächen mit unserer umfassenden Komponentenbibliothek.
Hafif
Minimaler Fußabdruck mit maximaler Wirkung. Nur 14KB (minified und gzipped).
Temalanabilir
Erstellt mit CSS-Variablen für einfache Anpassung. Hell- und Dunkelmodi enthalten.
Responsive
Mobile-first Ansatz sorgt dafür, dass deine UI auf allen Geräten großartig aussieht.
Erste Schritte
Typografie
Alle VariantenÜberschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
Dies ist ein Standardabsatz mit einem Link und etwas Text.
Dies ist ein größerer Absatz, der mehr auffällt.
Dies ist ein kleinerer Absatz für weniger wichtige Informationen.
Design ist nicht nur, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.
Dies ist inline Code
Farben
hsl(217, 91%, 60%)
hsl(217, 19%, 27%)
hsl(142, 76%, 36%)
hsl(0, 84%, 60%)
Hintergründe
Alle VariantenMuster (Dots, Grid, Stripes, Waves) und dekorative Hintergründe. Nutzt die Systemfarben über CSS-Variablen.
Ladeindikatoren
Alle VariantenEin umfassendes Framework für Ladeindikatoren inklusive Spinner, Punkten, Fortschrittsbalken und fortgeschrittenen Animationen.
Spinner
Punkte
Welle
Formulare
Alle VariantenAuswahl-Elemente
Alle VariantenModerne Auswahl-Steuerelemente einschließlich Karten, segmentierte Steuerungen und erweiterte Schalter.
Selection Cards
Segmented Controls
Schalter
Upload
Alle VariantenDrag-and-Drop Datei-Upload-Bereiche mit verschiedenen Stilen und Zuständen.
Dateien hier ablegen oder klicken
SVG, PNG, JPG oder GIF (max. 800x400px)
Karten
Alle VariantenCard Titel
Eine Beschreibung der Card.
Der Hauptinhalt der Card mit allen wichtigen Informationen.
Erweiterte Card
Benutzer Name
user@example.com
Zusätzliche Informationen und Details über den Benutzer.
Alerts
Alle VariantenInformation
Dies ist eine Informationsmeldung.
Erfolg
Ihre Aktion wurde erfolgreich abgeschlossen.
Warnung
Bitte seien Sie bei dieser Aktion vorsichtig.
Fehler
Etwas ist schief gelaufen. Bitte versuchen Sie es erneut.
Modals
Alle VariantenErfolg
Ihre Aktion wurde erfolgreich abgeschlossen.
Layout-Komponenten
Alle VariantenHero-Section
Perfekt für Landing Pages und prominente Call-to-Action-Bereiche.
Willkommen bei AK Systems
Wir bauen die Zukunft der digitalen Infrastruktur mit modernen Designprinzipien.
Bild-Utilities
Responsive Bilder und Object-Fit-Utilities für flexible Bildbehandlung.
Responsives Bild (ak-img-fluid)
Skaliert automatisch zur Containerbreite
Vorschaubild (ak-img-thumbnail)
Galerie-Stil mit Rahmen und Padding
Object Cover (ak-object-cover)
Füllt Container, behält Seitenverhältnis bei
Object Contain (ak-object-contain)
Passt in Container, zeigt vollständiges Bild
Tabellen
Alle Varianten| Name | Rolle | Status | Aktionen | |
|---|---|---|---|---|
| Max Mustermann | max@beispiel.de | Admin | Aktiv |
|
| Erika Musterfrau | erika@beispiel.de | Benutzer | Ausstehend |
|
| Johannes Schmidt | johannes@beispiel.de | Benutzer | Inaktiv |
|
Erweiterte Komponenten
Alle VariantenAvatare
Chatbot UI
Demo oeffnenNeue Layouts fuer eingebettete Assistenten, Sales-Widgets und Produkt-Copilots.
Hinweise & Akkordeon
Tooltip-SeiteTooltips und Popover haben jetzt eine eigene Demoseite mit Positionen, Groessen und reichhaltigeren Beispielen.
Akkordeon Element 1
Akkordeon Element 2
Verschiedene Komponenten
Badges
Fortschritt
Schalter
Dropdown
Utility Klassen
Abstände
Flex
Grid
Textausrichtung
Links ausgerichteter Text
Zentrierter Text
Rechts ausgerichteter Text
Neue Utility-Helfer
kundenservice-mit-einer-sehr-langen-adresse@beispiel-anwendung.test