Card · Design · Stand 2026-10-10

Design-Inventur & Vorschläge

Wie sieht Mneo heute aus — auf jeder Oberfläche, in jedem Stil? Und wohin könnte es gehen? Teil 1 ist eine nüchterne Bestandsaufnahme mit Bildern, Teil 2 zeigt drei Richtungen als lebende Muster (zum Anklicken, hell und dunkel). Entschieden ist nichts.

26Bildschirmfotos aus einer Testwerkbank (Kopie dieses Stands) und dem Installer der Vorlage v1.87
5Stimmen statt einer: Werkstatt-Kopf, ⚙ neu, „Papier“ (Inhalte, Einrichtung, Installer, Außenansicht), Koppeln, Showroom-Bühne
9Schriftfamilien im Einsatz (Barlow, Barlow Condensed, Saira Stencil, Source Serif 4, IBM Plex Sans/Mono, Inter, Segoe UI, Georgia)
3Vorschläge: A Präzision · B Freundlich-weich · C Labor-Technisch

Teil 1 · Inventur

Aufgenommen am 2026-10-10 mit Edge headless (1400 × 900, schmal 700 breit) in einer Testwerkbank: Kopie von tools/, apps/, docs/ und cards/ dieses Stands (inkl. noch nicht committeter Änderungen), eigenes Heim, freier Port; Stil und Modus über localStorage (mneo.stil, mneo.modus) vorbelegt. Installer: Klon %TEMP%\mneo-v187, Browser-Aufruf durch eine Attrappe ersetzt. Klick aufs Bild öffnet es groß.

Nicht fotografiert: Mneo-Showroom-Server (http://localhost:8800/) — am 2026-10-10 keine Verbindung (Server lief nicht). Das sagt nur etwas über diesen einen Aufruf, nicht darüber, wie der Server aussieht. Card-Außenansicht /c/<id> stammt aus der Testwerkbank (Card „Startartikel“, im Showroom).

Befunde je Oberfläche

Gelb hinterlegt: weicht von den anderen ab. Werte aus style.css, design.css, stile.css, neu.css, koppeln.html und den Bildern.

OberflächeSchriftenFarbenRadienSchattenIcons / EmojisDichteTon
Kopf + Spalte · WerkstattSaira Stencil (Wortmarke), Barlow Condensed 600–800 (Nav, Kacheln), Barlow Stahl #1b1e20, Orange, Kreide-Kacheln, Lochwand-Muster4 px, Kacheln mit Nietenharte Blech-Schatten (0 2px 0 #0b0c0d …) Emojis 📥 📤, ⌂, ↻, ⋯, Hammermittel–dichtWerkstatt, laut, eigen
Kopf + Spalte · ScienceSource Serif 4 (Marke kursiv, Kachel-Text), IBM Plex Sans, Plex Mono (Zähler) Papier #f5f6f4 / Schiefer, Karminrot2–3 pxkaum (0 1px 0)Emojis 📥 📤, ⌂mittelFachzeitschrift
Kopf + Spalte · StandardSegoe UI Variable (nur Windows; sonst System)Grau-Blau #f2f5f9, Blau #1f5fbf 3–4 pxleichtEmojis 📥 📤, ⌂mittelBüro-Software
⚙ Einstellungen (neu)Inter variabelZinc-Grau, Akzent aus dem Stil (Werkstatt: Orange #c24e0a) 7–8 pxkeine, LinienLinien-Icons (Lucide-Art, 1.75)dicht, ZeilenLinear/Vercel, ruhig
Inhalte: Wissensbasis, „Jeden Tag schlauer“, Eingang, Ausgang, TeilenWerkstatt: Georgia (Fallback von „Iowan Old Style“) + Segoe UI; Science: Source Serif + Plex Werkstatt hell: Beige #f6f4ef + Grün #2f6f5e — nicht Orange12 px Karten, Pillen 999weich (0 4px 16px) Emoji 📥 als Seitensymbol, ✎, ×locker, FließtextPapier, „claude.ai-nah“
Einrichten, Installer, Card-Außenansicht /c/Georgia-Überschriften + Segoe UI, folgt keinem Stil Beige + Grün, immer12 px, Pillen-Schritteweich✓ als TextlockerPapier, freundlich
Koppeln (/koppeln)system-uieigene Palette, folgt dem Betriebssystem (hier dunkel), Mint-Knopf 10 pxkeinekeinegroß, Tabletneutral-App
Showroom-SeiteWerkstatt: Barlow Condensed Riesen-Titel; Science: Source SerifWerkstatt auch im Modus „hell“ dunkel 4 pxBühnen-Schein, Stempel „Werkstatt geprüft“Funken ✦luftigBühne, verspielt

Die fünf größten Auffälligkeiten

  1. Zwei Akzente im selben Stil. „Werkstatt hell“ ist im Kopf Orange, im Inhalt Grün (--akzent: #2f6f5e in style.css): Knopf „Merken“ im Eingang grün, „+ Neue Quelle“ im ⚙ orange — auf derselben Seite.
  2. Der „Papier“-Look ist der eigentliche Standard. Beige, Serif-Überschriften (unter Windows Georgia), Grün, runde Karten — auf Einrichten, Installer, Außenansicht, Wissensbasis und „Jeden Tag schlauer“. Genau das wirkt wie claude.ai und folgt keinem gewählten Stil.
  3. Ein Kopf, drei Schriftwelten. Der Kopf wechselt je Stil zwischen Schablone/Condensed, Serif kursiv und Segoe — der Inhalt daneben bleibt meist Papier-Serif. Insgesamt 9 Familien; ⚙ (Inter) ist die einzige Fläche mit einer einzigen Schrift.
  4. Symbole gemischt. Emojis 📥 📤 im Kopf (farbig, je System anders), Linien-Icons im ⚙, Unicode-Zeichen (⌂ ↻ ⋯ ✎ ×) in Spalte und Listen.
  5. Ausreißer ohne Stil: /koppeln hat eine eigene Palette und folgt dem Betriebssystem; die Showroom-Bühne ist in Werkstatt immer dunkel; in Werkstatt dunkel liegen hinter den Zeilen der Card-Kacheln dunkle Balken (Kachel-Text wirkt „hinterlegt“).

Was gut ist: Werkstatt hat eine echte eigene Stimme (Lochwand, Nieten, Schablone) — das ist nicht „Claude-Standard“. Und ⚙ zeigt, dass ein dichter, ruhiger Stil mit Linien-Icons in Mneo funktioniert. Altbacken wirkt vor allem die Papier-Serif-Schicht.

Teil 2 · Drei Vorschläge

Alle drei zeigen dieselbe Musterseite: Kopf mit Wortmarke (Platzhalter „Mneo“), Eingang/Ausgang/KI, Spalte mit Haus-Umschalter, Raum-Chips und vier Card-Kacheln, rechts Überschrift, Absatz, Einstellungszeile mit Schalter, Knöpfe, Eingabefeld, Marke, KI-Feld und eine Benachrichtigung. Alles anklickbar (Kacheln, Chips, Schalter, Knöpfe) — so sieht man auch Bewegung und Haptik. Bewusst ohne Beige und ohne Serif.

MneoDunkle Materie
M
App · Labor · geändert vor 4 min

Dunkle Bahn

Ein kleines Spiel als Muster-App: Ein Impuls läuft durch ein Feld aus Halos und wird abgelenkt. Die Card bleibt im Labor, bis du sie in einen Showroom stellst.

Im Showroom zeigenSichtbar für alle, die den Showroom öffnen — nicht bearbeitbar.
geprüft
KIclaude · user1
› Arbeite an der Dunklen Bahn weiter: Halos größer.
✓ NOTIZEN.md gelesen · index.html geändert (+14 −3)
  Werkbank lädt die Card neu …
Abgleich fertig — 2 Cards im Space aktualisiert.

Nebeneinander

A · PräzisionB · Freundlich-weichC · Labor-Technisch
SchriftInter (eine Familie)Plus Jakarta SansSpace Grotesk + JetBrains Mono
Radius6 px16 px, Knöpfe Pille2 px
TiefeHaarlinien, keine Schattenweiche Ebenen-SchattenLinien + Raster, harte 2-px-Kante beim Knopf
Dichtehoch (Basis 13,5 px)niedrig (Basis 15 px, viel Luft)mittel (Basis 14 px, tabellarisch)
AkzentPetrol / CyanIndigo-Violett + PastellflächenSignal-Orange, Grün nur für „ok“
Bewegung120 ms, ease-out, kaum sichtbar260 ms Feder, leichtes Anheben80 ms, stufig; Knopf „rastet ein“
Nähe zu heute= ⚙ v2.02, nur konsequentneuWerkstatt, erwachsen
Aufwandklein — neu.css ausrollenmittelmittel–groß (Labels, Raster, Wortmarke)

Empfehlung

C · Labor-Technisch als Gesicht, gebaut auf dem Gerüst von A. A ist das sichere Fundament (Inter-Logik, Haarlinien, Dichte, Zeilen mit Schaltern — das gibt es mit neu.css schon und es trägt im ⚙). Allein wirkt A aber austauschbar wie jedes zweite Entwickler-Werkzeug. C gibt Mneo eine eigene Stimme, die an die Werkstatt anknüpft (Orange, Werkzeug, Messen) und gut zum Kern passt: Ledger, Abzüge, Stand, Herkunft — Mneo ist ein Messinstrument für Wissen. Es ist KI-neutral und ganz weit weg von Beige und Serif.

Konkret: Komponenten, Abstände und Zeilen aus A; Schrift Space Grotesk für Überschriften und Wortmarke, Mono-Labels (Großbuchstaben) nur für Metadaten, Zähler, Stände und das KI-Feld; Fließtext in Inter statt Space Grotesk (besser lesbar in langen Absätzen der Wissensbasis); Radius 4 statt 2 als Kompromiss; Signal-Orange als einziger Akzent; Raster nur im Hintergrund von Kopf und Spalte.

Aus B übernehmen: die Pastell-Flächen als sanfte Zustände (Benachrichtigung, „im Showroom“, leere Listen) und die freundliche Tonlage der Texte für Einrichtung und Installer — dort sitzen die Nicht-Techniker. Aus heute übernehmen: Lochwand und Nieten als Easter Egg im Showroom, nicht als Alltag.

Reihenfolge, falls entschieden: 1) ein gemeinsamer Token-Satz für alle Seiten (auch Einrichten, Installer, /c/, /koppeln), 2) Emojis im Kopf durch Linien-Icons ersetzen, 3) die drei Stile werden zu Themen (nur Farben/Akzent), nicht mehr zu Schriftwelten.

Offene Fragen an dich

  1. Name und Wortmarke: „Mneo“ ist noch offen (Tresou?). Die Wortmarke in den Mustern ist Platzhalter — soll die Schrift der Wortmarke schon jetzt festgelegt werden oder erst mit dem Namen?
  2. Stile künftig nur als Themen? Heute tauscht ein Stil Schriften, Radien und Muster. Vorschlag: eine Gestalt, Themen ändern nur Farbe und Akzent (z. B. Werkstatt-Orange, Science-Karmin, Standard-Blau). Einverstanden — oder soll Werkstatt als „Spaß-Stil“ mit Lochwand bleiben?
  3. Wer ist die Hauptperson? Forschende, die täglich drin arbeiten (→ A/C dicht), oder Einsteiger, die eine Card ansehen (→ B weicher)?
  4. Einrichtung und Installer im selben Stil wie die Werkbank — oder bewusst „Empfang“ mit eigener, freundlicherer Note?
  5. Mono-Labels in Großbuchstaben (C) auch in Französisch/Spanisch/Italienisch, wo Wörter länger sind — oder nur für Zahlen und Stände?