Marke · Screen Line
Screen Line.
Das Design-System von LumeSec.
Monochrom in Zink, Haarlinien bis an den Bildschirmrand, Instrument Serif für Überschriften, Geist und Geist Mono für Text und Daten. Ein einziger Akzent in Electric. Nach diesen Regeln ist lumesec.ai gebaut.
01Logo
Drei Formen. Eine Marke.
Das Firmenlogo mit „Technologies“ steht für das Unternehmen, die Wortmarke führt durch die Website, das Zeichen steht allein, wo wenig Platz ist. Immer in der aktuellen Textfarbe, Schwarz oder Weiß.
Firmenlogo
Footer, Verträge, Präsentationen, Presse
Wortmarke
Navigation, Kopfzeilen, Signaturen
Zeichen
App-Icon, Favicon, Ladebildschirm
- 01Freiraum rundum gleich der Höhe der Balken
- 02Mindesthöhe: Zeichen 24 px, Wortmarke 16 px, Firmenlogo 32 px
- 03Nur auf ruhigem Grund mit klarem Kontrast
Das Zeichen in Bewegung
Auf der Startseite erscheint das Zeichen als geditherte Pixelfläche, die sich langsam dreht. Es ist die einzige Stelle, an der das Logo eine Textur trägt.
02Farbe
Zink trägt. Electric zeigt.
Die Seite lebt von elf Stufen Zink. Electric ist der einzige Farbton und hat genau eine Aufgabe. Grün und Bernstein melden nur Zustände.
Zink
50#fafafa
100#f4f4f5
200#e4e4e7
300#d4d4d8
400#9f9fa9
500#71717b
600#52525c
700#3f3f46
800#27272a
900#18181b
950#09090b
Electric
Hell · #6219f3
Dunkel · #8654fb
Nur für die Demo-Buchung.
Tokens
--background#ffffff · #09090b--foreground#09090b · #fafafa--muted-foreground#71717b · #9f9fa9--surface#fafafa · #111113--border#e4e4e7 · #27272a--line#eeeef0 · #1c1c1e--success#00a14b · #00c758--warning#b45309 · #f5a524
Das Feld links zeigt den Wert im aktuellen Modus. Dunkel ist der Standard.
03Typografie
Drei Schriften. Jede mit einer Aufgabe.
Instrument Serif setzt die Überschriften, aufrecht und kursiv. Geist trägt den Text. Geist Mono beschriftet: Indizes, Fakten, Daten. Zahlen immer tabellarisch.
Instrument SerifÜberschriften · Display
Aaa
Die Entscheidung bleibt bei Ihnen.
GeistText · Oberfläche
Aa
Die KI liest. Die Software rechnet. Ihr Team entscheidet.
Geist MonoBeschriftung · Daten
Aa
01 · FN 679364s · 11.05.2026
Kursiv für den zweiten Gedanken
Die kursive Serife setzt die zweite Hälfte einer Überschrift ab, in der gedämpften Textfarbe. Nie mehr als ein kursiver Teil pro Überschrift.
Spezialisierte KI-Agenten für Banken.
DisplayInstrument Serif · 112 / 0,96 · −0,02 em
Ihr Back-Office, automatisiert.
ÜberschriftInstrument Serif · 56 / 1,02 · −0,015 em
Für Banken, Kanzleien und Industrie.
KartentitelInstrument Serif · 30–36 / 1,02
Financial Services Agent
LeadGeist · 18 / 29 · Regular
Kurze Sätze, aktiv, eine Aussage je Satz.
TextGeist · 15 / 24 · Regular
Jede Zahl mit Fundstelle. Nichts ohne Freigabe.
LabelGeist Mono · 12 · Regular
02 · Back-Office · Vorgänge vorbereitet
04Ein Electric-Moment
Höchstens einmal pro Ansicht.
Electric gehört der Demo-Buchung. Alle anderen Schaltflächen sind Tinte, Kontur oder Text. So weiß jede Person, wo der nächste Schritt liegt.
- ● Electric · Nur für die Demo-Buchung.
- ○ Tinte · Standard
- ○ Kontur · Nebenweg
- ○ Text · Rest
05Linien & Streifen
Die Struktur ist sichtbar.
Eine Seite ist eine Spalte aus Paneelen. Haarlinien laufen über den Bildschirmrand hinaus. Paneele werden durch Schraffur getrennt, nie durch Abstand.
Haarlinie
1 px in line oder border. Raster entstehen aus gap-px auf line, Zellen in background.
Streifen
32 px diagonale Schraffur im 10-px-Raster zwischen zwei Paneelen.
Punktraster
1-px-Punkte im 8-px-Raster als Grund für Abbildungen.
Passermarken
Kreuze an den Ecken einer Abbildung, wie auf einer technischen Zeichnung.
06Bewegung
Ruhig, und nur mit Grund.
Bewegung erklärt, sie schmückt nicht. Pro Ansicht läuft höchstens eine Animation, und wer „Bewegung reduzieren“ eingestellt hat, sieht ein stilles Bild.
Pixel Reveal
Das Logo baut sich aus Pixeln auf: im Ladebildschirm und in der Navigation. Klicken zum Wiederholen.
Dither
Das Zeichen als 1-Bit-Fläche im Hero. Langsam, ohne Reaktion auf die Maus.
Themewechsel
Hell und Dunkel wechseln als Kreis, der aus dem Schalter wächst. Sonne und Mond drehen ineinander.
07Icons
Linie statt Fläche.
Kontur mit 1,8 px auf 24 px, runde Enden und Ecken, immer in der Textfarbe. Icons beschriften, sie schmücken nicht.
- Hell
- Dunkel
- Sprache
- Termin
- Teams
- Freigabe
08Stimme
Vier Regeln für jedes Wort.
Deutsch zuerst, immer in der Sie-Form. Kurze Sätze, aktiv, eine Aussage je Satz.
V1Belege statt Behauptungen.
- ✓ So
- Jeder Wert mit Fundstelle.
- × Nicht so
- Null Halluzinationen, garantiert.
V2Kürze statt Betonung.
- ✓ So
- Ihr Team gibt frei.
- × Nicht so
- Ihr Team behält jederzeit die volle Kontrolle über sämtliche Prozesse.
V3Ruhe statt Lautstärke.
- ✓ So
- Ihren Agenten live sehen
- × Nicht so
- Jetzt durchstarten!
V4Rahmen statt Magie.
- ✓ So
- Die Software rechnet nach festen Formeln.
- × Nicht so
- Magische KI, die einfach alles kann.
09Nicht zulässig
Was wir nicht tun.
- Logo umfärben, strecken, drehen oder neu setzen
- Schatten, Glow, Verläufe oder Kontur auf Logo und Flächen
- Electric als Dekoration oder mehr als einmal pro Ansicht
- Eine vierte Schrift, Emojis, Icons als Schmuck
- Mehr als eine Animation pro Ansicht oder Effekte auf Fließtext
- Abstand statt Streifen zwischen Paneelen
- „nahtlos“, „revolutionär“, „KI-gestützt“, „Lösung“
- Preise, Zertifizierungen oder Kundennamen ohne Freigabe
10Downloads
Logo-Dateien.
Alle Formen als SVG, schwarz für helle Flächen, weiß für dunkle.
11 · Verwendung
Die Marke LumeSec verwenden.
Sie dürfen den Namen LumeSec verwenden, um unsere Produkte wahrheitsgemäß zu beschreiben. Für alles andere, etwa in Produktnamen, Domains oder gemeinsamen Logos, brauchen Sie unsere schriftliche Zustimmung. Fragen: brand@lumesec.ai.