DAS ASERNUS DESIGN SYSTEM
Ein Auftritt.
Ein System.
So sieht Asernus aus. Und so fühlt es sich an.
Der Leitfaden für alles, was wir gestalten.
01 / DIE IDENTITÄT
Weniger Lärm.
Mehr Asernus.
Technik darf selbstverständlich wirken. Unsere Gestaltung gibt Inhalten Raum, macht Handlungen verständlich und setzt Akzente dort, wo sie etwas bedeuten.
Klar.
Eine erkennbare Hierarchie.
Ein eindeutiger nächster Schritt.
Ruhig.
Großzügige Abstände.
Zurückhaltende Flächen und Farben.
Eigenständig.
Das A als Zeichen.
Limette als wiederkehrende Signatur.
Ein Zeichen. Ein Absender.
Die Wortmarke bleibt kleingeschrieben. Das A steht auch allein, wenn wenig Platz ist.
DIE LOGO-BÜHNE
- Schutzraum
- Mindestens ½ Zeichenhöhe
- Zeichenhöhe
- Mindestens 24 px im Interface
- Wortmarke
- Manrope · 600 · −0,05 em
Unverändert verwenden. Ohne Schatten, Verlauf, Drehung oder Verzerrung. Auf hellem Grund die dunkle Variante einsetzen.
Wortmarke als SVG
Originalfarben, klare Fläche, Luft zum Rand.
Neon-Schatten, gestreckte Logos, dekorative Verläufe.
02 / DIE FARBE
Unsere Basis.
Unser Akzent.
Grünliche Neutraltöne schaffen Ruhe. Warme Kreide trägt die Inhalte. Limette zeigt, was wichtig ist. Ein Klick auf eine Farbe kopiert ihren HEX-Wert.
Viel Ruhe. Wenig Akzent. Neutrale Flächen dominieren. Limette lenkt den Blick auf eine Hauptaktion oder ein bewusst gesetztes Detail.
AUSPROBIEREN / 01
Guter Kontrast
ist kein Gefühl.
Prüfe die Farbkombination, bevor du sie verwendest. Kleine Texte brauchen mindestens 4,5 : 1.
Grundlage: WCAG 2.2Lesbar. Auf den ersten Blick.
Auch dieser kleine Text muss gut zu erkennen sein.Der Rechner bewertet nur Farbkontraste. Für Bedienelemente gilt 3 : 1 zur angrenzenden Fläche; zusätzlich müssen Bedienung, Fokus und Beschriftung stimmen.
03 / DIE TYPOGRAFIE
Charakter im Titel.
Klarheit im Text.
Zwei Familien, eine Sprache: Manrope gibt Überschriften ihre Form. DM Sans macht längere Texte und Oberflächen angenehm lesbar.
Aa Bb Cc123 &
Gute Gestaltung macht
den nächsten Schritt
selbstverständlich.
56–104 px / 1,05 / −0,05 em32–56 px / 1,15 / −0,04 emKurze Absätze. Klare Aussagen. Genug Raum dazwischen.
16–18 px / 1,65 / normalÄnderungen speichern
14–16 px / 1,5 / 500–600Mach es einfach.
Mach es Asernus.
Schriften werden lokal geladen. Für technische Werte und Code verwenden wir die Monospace-Schrift des Systems. Keine langen Texte in Versalien; pro Zeile etwa 55–70 Zeichen.
04 / DIE ORDNUNG
Raum ist Teil
der Gestaltung.
Ein 4-Pixel-Grundraster hält alles zusammen. Nähe zeigt Zusammengehörigkeit. Große Abstände trennen Themen. Linien helfen, wo sie Orientierung geben.
AUSPROBIEREN / 03
Ein Abstand.
Ein anderes Gefühl.
padding: 24px;Platz für das Wesentliche.
Text, Aktion und Rahmen brauchen Abstand. Der Innenabstand bleibt an allen Seiten konsistent.
Mehr erfahrenButtons und Eingabefelder
Produktkarten
Fokussierte Accountflächen
Ruhige Zustandswechsel
Desktop: 12 Spalten, bis 1.248 px Inhaltsbreite. Mobil: eine klare Spalte, mindestens 20 px Außenabstand und 44 × 44 px große Interaktionsflächen. Bewegung respektiert die Systemeinstellung für reduzierte Animation.
05 / DAS INTERFACE
Konsistent.
In jedem Zustand.
Eine primäre Aktion pro Aufgabe. Eingaben mit sichtbarer Beschriftung. Rückmeldungen mit Text und Symbol. Jeder Zustand gehört zum Design.
AUSPROBIEREN / 04
Ein neuer Anfang.
Erstelle einen Bereich für deine nächste Idee.
Design-Demo. Es wird nichts angelegt oder übertragen.
- Beschriften, dann erklären.
Ein Platzhalter ersetzt kein Label.
- Fokus sichtbar machen.
2 px Limette, 4 px Abstand. Auch per Tastatur.
- Fehler konkret benennen.
Was ist passiert? Wie geht es weiter?
- Wartezeit verständlich machen.
Ladestatus und klare Rückmeldung statt Mehrfachklicks.
Code ansehen
06 / DAS GESAMTBILD
Eine Familie.
Viele Möglichkeiten.
Website, Account oder Produkt: Die Aufgabe verändert sich. Die gemeinsame Gestaltung bleibt erkennbar.
Dein Raum.
Deine Ideen.
Asernus.
Eine klare Bühne für das,
was du als Nächstes vorhast.
Willkommen zurück.
Ein Account. Deine Anwendungen.
Gemeinsame Schrift, Farben und Abstände verbinden die Anwendungen.
UNSERE SPRACHE
Direkt. Freundlich.
Verständlich.
Vor dem Veröffentlichen.
Diese sechs Fragen gehören zu jeder Asernus-Oberfläche.
07 / ZUM MITNEHMEN
Von der Regel
ins nächste Projekt.
Die Grundlagen zum direkten Verwenden. Farben als CSS und JSON, originale Zeichen als SVG und ein Design-Briefing für die Umsetzung.
Logos · Schriften & Lizenzen · Tokens · Starter · Design-Briefing
SVG ↓Wort-Bild-Marke · helle FlächeDunkle Variante als Vektorpfade
SVG ↓Design TokensFarben, Abstände und TypografieCSS ↓Tokens als DatenFür Tools und eigene IntegrationenJSON ↓A-Zeichen · dunkle FlächeLimette & Kreide, transparenter Grund
SVG ↓A-Zeichen · helle FlächeDunkle Variante, transparenter Grund
SVG ↓A-Zeichen · einfarbigFür einfarbige Anwendungen
SVG ↓Das Design-BriefingRegeln für die nächste UmsetzungTXT ↓Manrope & DM Sans: lokal eingebunden, unter der SIL Open Font License.
Manrope-Lizenz · DM-Sans-Lizenz
Asernus: Nacht #111513, Wald #191e1b, Moos #202621, Kreide #f0f1e9, Salbei #a2ada3, Limette #b9e47c. Auf Limette dunklen Text #1c2b15 verwenden. Manrope für Überschriften, DM Sans für Text, beide lokal laden. 4-px-Raster, Hauptabstände 8/16/24/32/48/64/96 px. Eine primäre Aktion pro Aufgabe. Originales A-Zeichen und Schutzraum von mindestens halber Zeichenhöhe erhalten. Kleine Texte mindestens 4,5:1 Kontrast. Sichtbare Labels, Fokus und verständliche Zustände. Mobil und per Tastatur prüfen. Keine Neon-Schatten oder dekorativen Verläufe.