Gestalte für Asernus. Die Marke steht für ruhige, klare und verlässliche digitale Produkte. Die Oberfläche soll verständlich, präzise und hochwertig wirken. Verwende das folgende Designsystem als verbindliche Grundlage.

FARBEN
Canvas #111513, Surface #191E1B, Field #202621.
Haupttext #F0F1E9, sekundärer Text #A2ADA3.
Akzent #B9E47C, Akzent bei Hover #CBEF9A, Text auf Akzent #1C2B15.
Dekorative Trennlinien #354039. Erkennbare Eingaberänder #64786A.
Fehler #EE9694, Information #9AB9DF, Warnung #DDCD83.
Verwende die CSS-Token mit dem Präfix --as- aus asernus-tokens.css.
Lime sparsam einsetzen: wichtigste Aktion, aktive Auswahl und Fokus. Große Flächen bleiben neutral. Pro zusammengehöriger Aktionengruppe höchstens eine primäre Aktion. Andere Aktionen visuell zurücknehmen. Keine leuchtenden Schatten, Glow-Effekte, Regenbogen-Verläufe oder dekorativen Neonflächen.

TYPOGRAFIE
Überschriften: Manrope, knappe Laufweite, klare Hierarchie. Hero: 72 px / 600 / 1,05 Zeilenhöhe / −0,05 em Laufweite. Abschnitt: 48 px / 600 / 1,15 / −0,04 em. Fließtext: DM Sans, 18 px / 400 / 1,65 / 0 em. Interface: DM Sans, 16 px / 600 / 1,5 / 0 em. Die lokal gelieferten DM-Sans-Dateien enthalten 400–700; keine 800 daraus künstlich erzeugen. Größen responsiv anpassen. Schriften lokal mitliefern und über @font-face einbinden; keine externen Fontdienste voraussetzen. Systemschriften als Fallback setzen. Lesetext mindestens 16 px. Textspalten so schmal halten, dass längere Absätze angenehm lesbar sind. Keine langen Texte in Versalien.

LAYOUT
Abstände basieren auf 4 px. Bevorzugte Werte: 4, 8, 12, 16, 24, 32, 48, 64, 96 px. Verwandte Inhalte enger gruppieren, Abschnitte klar trennen. Maximale Inhaltsbreite 1248 px. Bedienelemente etwa 48 px hoch. Ecken: 8 px für Buttons, 9 px für Eingabefelder, 13 px für Karten, 18 px für größere Account-Flächen. Ruhige Flächen und Typografie strukturieren die Seite; nicht jede Information braucht eine eigene Karte. Desktop, Tablet und schmale Ansichten sorgfältig ausarbeiten. Keine horizontale Seitenscrollleiste durch Inhalte.

BEDIENUNG UND ZUGÄNGLICHKEIT
Echte HTML-Buttons und Links mit verständlichen Beschriftungen verwenden. Formulare erhalten dauerhafte, zugeordnete Labels; Platzhalter ersetzen keine Labels. Alle Aktionen müssen mit der Tastatur erreichbar sein. Sichtbarer Fokus: 2 px Akzent mit 4 px Abstand. Zustände wie aktiv, Fehler, Laden und deaktiviert deutlich darstellen und nicht nur über Farbe vermitteln. Fehler direkt erklären und mit dem Feld verbinden. Ladezustände gegen doppelte Ausführung sichern und verständlich ansagen. Bewegungen kurz und zurückhaltend; prefers-reduced-motion respektieren.
Für WCAG-AA-Textkontrast mindestens 4,5:1 bei normalem Text und 3:1 bei großem Text prüfen; groß bedeutet mindestens 24 px regulär oder etwa 18,67 px fett. Erforderliche Begrenzungen von Bedienelementen und bedeutungstragende grafische Elemente mit mindestens 3:1 zu angrenzenden Farben prüfen. Das allein ist kein Nachweis vollständiger Barrierefreiheit. Die dekorative Border-Farbe darf keine notwendige Feldbegrenzung ersetzen.

SPRACHE UND INHALT
Schreibe verständliches, direktes Deutsch. Benenne Aktionen konkret, etwa „Server erstellen“ oder „Änderungen speichern“. Zeige echte Daten oder kennzeichne Beispiele sichtbar als Demo. Keine erfundenen Nutzerzahlen, Verfügbarkeitsversprechen, Kundenlogos oder Funktionszusagen. Eine Demo sendet keine Daten und erklärt das ausdrücklich. Rückmeldungen müssen dem tatsächlichen Ergebnis entsprechen.

WORTMARKE
Die Asernus-Wortmarke und ihre gelieferten SVG-Varianten verwenden. Proportionen und Freiraum erhalten. Passende dunkle, helle oder Lime-Variante wählen. Nicht verzerren, drehen, mit Konturen ergänzen oder mit Glow-Effekten verändern. In echten Produkten „Asernus“ konsistent schreiben.

ABNAHME
Vor Fertigstellung alle Aktionen, Tastaturbedienung, Fokus, Kontraste, Fehlermeldungen und responsive Ansichten prüfen. Kopier- und Downloadaktionen müssen die tatsächlich angebotenen Inhalte liefern. Keine Erfolgsmeldung ohne Erfolg. Implementierung ohne unnötige Bibliotheken, Tracker oder externe Skripte.