Designsystem
Ein durchsuchbarer Katalog der wiederverwendbaren Präsentations-Tokens und Komponenten des Portfolios.
Die gezeigten Steuerelemente sind isolierte Beispiele: Sie senden keine Daten und führen keine administrativen Aktionen aus.
Farbtokens
Schriftstapel
Tatsächlich von Website und erzeugten Dokumenten verwendete Stapel. PDF- und E-Mail-Schriften werden nicht als Webfonts geladen.
System-Sans-Serif
Haupttext der Oberfläche ohne erforderlichen Download.
Aa — Barrierefreies Portfolio 0123456789
System-Monospace
Code, Befehle und technische Werte.
Aa — Barrierefreies Portfolio 0123456789
Font Awesome
Schrift ausschließlich für Piktogramme der Oberfläche.
Aa — Barrierefreies Portfolio 0123456789
Mit E-Mail-Programmen kompatible Ersatzschrift.
Aa — Barrierefreies Portfolio 0123456789
Von Dompdf für den Lebenslauf verwendete einbettbare Schrift.
Aa — Barrierefreies Portfolio 0123456789
Typografie
Heading 1
Heading 2
Heading 3
Primärtext bewahrt auf dunklen Oberflächen eine gut lesbare Hierarchie.
Sekundärtext reduziert die Betonung, ohne den Kontrast zu beeinträchtigen.
Aktionen und Zustände
Nur Text
Text und Symbol
Nur Symbol
Rendering-Verträge
Navigationslink
<x-molecules.method-action method="DELETE" ...>
HTTP-Aktion mit CSRF
Varianten im Hover-Zustand
Zustände der Steuerelemente
Tastaturpfad
Die Schaltflächen zeigen bereits den Tastaturfokus. Verwenden Sie Tab und Umschalt+Tab, um auch den tatsächlichen Pfad auszuprobieren.
Formularelemente
Bewegen Sie den Mauszeiger darüber oder verwenden Sie Tab, um die Zustände ohne Layoutverschiebung zu vergleichen.
Überprüfen Sie den eingegebenen Wert.
Zustände der Auswahlliste
Ungültig und deaktiviert haben Vorrang vor Hover und Fokus.
Überprüfen Sie den eingegebenen Wert.
Karten und Kennzeichnungen
Standardkarte
Statischer Informationsinhalt ohne Ziel oder zugeordnete Aktion.
Interaktive Karte
Sie ist ein echter Link: Probieren Sie Hover, Tab und die Tastaturaktivierung aus.
- Standardkarte
- Sie ist nicht fokussierbar, reagiert nicht auf Hover und verspricht keine Aktion.
- Interaktive Karte
- Sie bietet Linksemantik, Richtungshinweis, Hover, sichtbaren Fokus und akustisches Feedback.
Checkbox-Zustände
Hover und Fokus verstärken das Steuerelement, ohne Auswahl, Fehler oder den deaktivierten Zustand zu verdecken.
Pills und kompakte Steuerelemente
composer test
Kontaktlink im Footer: Probieren Sie Maus-Hover und Tastaturfokus aus
Navigation
Tab betritt die Gruppe; Pfeil links/rechts, Pos1 und Ende verschieben den Fokus; Eingabe oder Leertaste aktiviert.
Tabs teilen Auswahl, sichtbaren Fokus und akustisches Feedback.
Tabs teilen Auswahl, sichtbaren Fokus und akustisches Feedback.
Tabs teilen Auswahl, sichtbaren Fokus und akustisches Feedback.
Brotkrümelnavigation
Eine kompakte Hierarchie mit interaktiven Links und einer nicht aktivierbaren aktuellen Seite.
Seitennavigation
Die tatsächlich in Listen verwendete gemeinsame Seitennavigation zeigt Ergebnisanzahl, aktuelle Seite sowie Zurück- und Weiter-Steuerung.
Mit Tab erreichen Sie die Links; der aktuelle Zustand und nicht verfügbare Steuerelemente sind aus der Fokusreihenfolge ausgeschlossen.
Responsive Tabellen
Listen werden zu beschrifteten Karten; Matrizen behalten Zeilen und Spalten in einem lokalen Scrollbereich.
Kartenliste
Unter 768 px behält jeder Wert seine Beschriftung und lange Inhalte werden umgebrochen.
| Element | Status | Wert |
|---|---|---|
| Demoelement mit langem Namen | Aktiv | 24,50 € |
Scrollbare Matrix
Horizontal scrollen, um alle Spalten anzuzeigen.
Der Bereich ist benannt, per Tastatur erreichbar und begrenzt horizontales Scrollen.
| Metrik | Aktuell | Vorher | Limit |
|---|---|---|---|
| CSS-Bundle | 84 KB | 88 KB | 100 KB |
Gemeinsame Detailseiten
Echte Varianten der Vorlage für Projekte, Interessen und Kompetenzen.
Variante mit Bild
Variante mit Symbol und Niveau
Kompetenz
Demonstrationskompetenz
80%Die Variante ohne Bild verwendet ein grafisches Zeichen und behält dieselbe Vorlage bei.
Beziehungen
Zugeordnetes Projekt
Chronologischer Werdegang
Dokumentierter Anwendungsfall
Werdegang öffnen
Anatomie, responsive Zustände und Leistungsgrenzen der Zeitleiste, die Projekte und Kompetenzen chronologisch verbindet.
Atomic-Design-Anatomie
Zustände und Anpassung
- Desktop: eine anpassungsfähige Serpentine mit zwei bis vier Projekten pro Zeile, durchgehenden Kurven und Zweigen ober- oder unterhalb des Stamms.
- Mobil und dichte Inhalte: eine vertikale Achse, Früchte rechts und kein horizontaler Überlauf; ein optionaler Schalter öffnet die um 90 Grad gedrehte Serpentine mit einem Projekt pro Zeile.
- Ohne JavaScript oder bei reduzierter Bewegung, Transparenz oder erzwungenen Farben bleiben alle Inhalte lesbar und navigierbar.
Leistungsvertrag
- Sass und JavaScript sind ausschließlich Entrypoints der Werdegang-Seite und belasten das globale Bundle nicht.
- SVG-Messungen werden zwischen gleichwertigen Ebenen wiederverwendet und nur bei Layoutänderungen neu berechnet.
- Eine einzelne Uhr steuert Enthüllung und Impulse; kleine oder Touch-Geräte nutzen Impulse im Zwei-Sekunden-Takt und Rendering mit etwa 30 fps, das außerhalb des Viewports pausiert.
Rückmeldungen
Vorgang abgeschlossen
Der positive Zustand bleibt auch ohne Ton sichtbar.
Information
Ein nützliches Detail, das den Ablauf nicht unterbricht.
Warnung
Die Aktion muss vor dem Fortfahren geprüft werden.
Fehler
Das Problem wird sowohl durch Text als auch durch Farbe vermittelt.
Kompakte Rückmeldung
Sie reduziert die visuelle Dichte, ohne Informationen auszublenden.
- Erstes kontextbezogenes Detail.
- Zweites kontextbezogenes Detail.
Schließbare Rückmeldung
Der Platz zum Schließen erscheint nur zusammen mit dem zugehörigen Steuerelement.
Priorität und barrierefreie Ankündigungen
- Statischer Inhalt
- Keine Live-Region: Screenreader erfassen ihn in der normalen Seitenreihenfolge.
- Nicht dringende Aktualisierung
- announce verwendet status und aria-live polite, um eine Änderung ohne Unterbrechung mitzuteilen.
- Dringender Fehler
- Eine angekündigte danger-Variante verwendet alert und aria-live assertive. Feldfehler bleiben ihrem Steuerelement zugeordnet.
Symbolinventar
178 statisch im Quellcode erkannte Familie-Symbol-Paare.
Symbolgalerie öffnen
Keine Symbole entsprechen dem Filter.
58 dynamische Referenzen zu prüfen
Komponentenübersicht
29 registrierte Blade-Komponenten. Die Beispiele oben zeigen visuelle Grundelemente; die Übersicht enthält zusätzlich kontextbezogene Kompositionen und Vorlagen.
Atome
14-
<x-atoms.brand-logo>1 -
<x-atoms.button>143 -
<x-atoms.copy-button>3 -
<x-atoms.icon-text>2 -
<x-atoms.inputs.checkbox-input>4 -
<x-atoms.inputs.email-input>1 -
<x-atoms.inputs.file-input>3 -
<x-atoms.inputs.number-input>1 -
<x-atoms.inputs.select>4 -
<x-atoms.inputs.text-input>4 -
<x-atoms.inputs.textarea>3 -
<x-atoms.password-visibility-toggle>10 -
<x-atoms.pill>3 -
<x-atoms.responsive-image>3
Moleküle
10-
<x-molecules.audio-controls>2 -
<x-molecules.breadcrumb>3 -
<x-molecules.dropdown>2 -
<x-molecules.feedback-alert>18 -
<x-molecules.footer-socials>1 -
<x-molecules.inputs.password-control>2 -
<x-molecules.pill-item>1 -
<x-molecules.relation-badge>5 -
<x-molecules.tab-item>1 -
<x-molecules.tabs-navigation>3
Organismen
4-
<x-organisms.content-card>3 -
<x-organisms.hero-character>3 -
<x-organisms.pill-list>3 -
<x-organisms.skill-credential-card>2
Vorlagen
1-
<x-templates.show-page>5