hansenexus

Designsystem

Unser Designsystem.Offen wie unser Stack.

Farben, Schriften und Bausteine dieser Webseite, und die Regeln, nach denen wir sie einsetzen. Wir legen sie offen wie unseren Stack. Wer mit uns baut, sieht vorher, wie wir arbeiten.

01 · Marke

Ein Zeichen, ein Name, klein geschrieben.

  • Das Zeichen steht in Lime #42c501 auf dunklem Grund.
  • Der Name wird immer kleingeschrieben, auch am Satzanfang.
  • Kein Leuchten, keine Verläufe: Das Zeichen bleibt flach.

02 · Farben

Warmes Dunkel, ein Akzent.

Statt reinem Schwarz ein warmer Grund, statt vieler Farben nur das Lime aus dem Logo. Jede Textfarbe erreicht mindestens 4,5:1 nach WCAG 2.2.

  • Kontrast 16,2:1
    Grund#16140fHintergrund jeder Seite
  • Kontrast 15,3:1
    Band#1c1a15Jede zweite Sektion
  • Kontrast 14,8:1
    Fläche#201d18Karten und Panels
  • Kontrast 13,2:1
    Erhöht#2a2620Chips und Icon-Kacheln
  • Kontrast 16,2:1
    Text#f4f0e6Überschriften
  • Kontrast 10,8:1
    Text gedämpft#cdc6b6Fließtext
  • Kontrast 6,7:1
    Text leise#a39c8cLabels und Notizen
  • Kontrast 8,1:1
    Lime#42c501Hauptaktion und Akzent

03 · Schrift

Zwei Schriften, klare Rollen.

Fraunces für Überschriften und Zahlen, Instrument Sans für alles, was man lesen und anklicken will. Beide stehen unter einer offenen Lizenz.

FrauncesÜberschriften und Zahlen

Ihre IT gehört Ihnen. Nicht Ihrem Anbieter.

Instrument SansFließtext, Labels, Buttons

Abläufe, die automatisch laufen, und Programme, die miteinander reden. Zentraler Passwort-Tresor, Zwei-Faktor-Anmeldung, Austritt in Minuten erledigt.

  • Display · 42 mobil, 72 Desktop
  • Überschrift · 34 mobil, 52 Desktop
  • Karte · 20 mobil, 26 Desktop
  • Einleitung · 17 mobil, 20 Desktop
  • Text · 16 mobil, 17 Desktop
  • Tag · 13, Versalien

04 · Bausteine

Bausteine, die sich wiederholen.

Wer eine Seite von uns kennt, findet sich auf allen zurecht.

  • Kostenloses Erstgespräch
    HauptaktionEine pro Bildschirm. Lime-Fläche, dunkle Schrift, 8,1:1.
  • Leistungen ansehenAlle Leistungen im Detail
    Nebenaktion und TextlinkFür alles Weitere: Rahmen oder Link, nie ein zweites Lime.
  • Was es kostetAb 990 € im Monat.
    Eyebrow und ÜberschriftOrdnet jede Sektion ein. Satzschreibung statt Versalien.
  • Souveräner BetriebIhre IT läuft, und Sie wissen, warum.
    LeistungskarteSymbol, Titel, Nutzen in einem Satz. Die ganze Karte ist klickbar.
  • White-LabelAgenturen
    TürJede Zielgruppe bekommt ihre eigene Tür.
  • HeutePasswörter auf Zetteln, Ex-Mitarbeitende mit ZugriffMit hansenexusZentraler Passwort-Tresor, Zwei-Faktor-Anmeldung, Austritt in Minuten erledigt
    Vorher und nachherOben heute, unten mit uns, in einer Karte.
  • Souverän Betriebab990 €/ Monat
    PreiszeilePreis rechts, Ziffern gleich breit. Immer netto.
  • 24/7automatisch überwacht
    KennzahlNur Zahlen, die stimmen.
  • Exit-Garantie
    ZusageAls Abzeichen sichtbar, nicht im Kleingedruckten.

05 · Bewegung

Bewegung, die erklärt.

Illustrationen in Isometrie, leicht bewegt und in Schleife. Ein Schalter hält alles an, und „Bewegung reduzieren“ gilt immer.

  • IllustrationIsometrie, frei stehend mit flachem Schatten. Große Szenen stehen auf einem Sockel.
  • Schalter AnimationenIm Footer jeder Seite. Standard an, aus bei „Bewegung reduzieren“, die Wahl bleibt gespeichert.
  • Sieben StufenVon Hover bis zur Szene mit Drehbuch. Die Säulen zeigen den Aufwand.
Alle sieben Stufen ansehen

06 · Regeln

Regeln, an die wir uns halten.

  • KontrastText erreicht mindestens 4,5:1, große Überschriften mindestens 3:1.
  • BedienbarJede Schaltfläche ist mindestens 44 Pixel groß und per Tastatur erreichbar.
  • RuhigKein Leuchten, keine Verläufe. Bewegung leise und abschaltbar, und gar keine, wenn Sie reduzierte Bewegung eingestellt haben.
  • EhrlichKeine erfundenen Zahlen, keine Stockfotos, keine KI-Gesichter.

Lassen Sie uns über Ihre IT sprechen.

30 Minuten, per Video oder Telefon, kostenlos. Wir schauen, wo Sie stehen, und sagen Ihnen ehrlich, was sich lohnt und was nicht.

Erstgespräch buchenUnser Stack