Fraindly AG — Mood & Design-System

Prinzipien

Spielregeln. Wer UI oder Content erzeugt, hält sie ein, bevor er etwas Eigenes erfindet.

RegelVerbotenRichtig

Keine CardsBoxen mit Rahmen, Schatten oder Füllung um InhalteGesetz der Nähe, Abstand, Haarlinien, Typografie

Typografie trägt die HierarchieFarbflächen oder Icons, um Wichtigkeit zu zeigen. Eyebrows und Mini-Texte über Titeln (Versalien, «01», Kategorie-Label)Grösse und Gewicht (300 / 400 / 500). Ein Titel steht allein

Sans überall, Mono für ZahlenSerifen, Mono für Fliesstext oder LabelsPlus Jakarta Sans. Zahlen, Zeiten, Code in JetBrains Mono, tabellarisch

Crimson ist AkzentCrimson als Fehlerfarbe oder grosse FlächePrimäraktion, Fokus, aktiver Zustand. Ein Primärbutton pro Ansicht

Warme NeutralsReines Weiss, Schwarz, Tailwind-Grau oder -EmeraldNur Tokens aus tokens.css

Ein Radius, kaum SchattenMix aus Radien, shadow-2xl2 px. Schatten nur bei Overlays

Tabellen sind sortierbarStatische Tabellen, linksbündige ZahlenJede Spalte sortierbar, Zahlen rechtsbündig in Mono

Auswahl mit ComboboxNatives Select ab 7 Optionen, Mehrfachauswahl per Strg-KlickCombobox mit Suche, Mehrfachauswahl als Text-Token

Zustand nie nur FarbeRoter Text als einziger FehlerhinweisFarbe plus Icon oder Wort

Löschen bestätigenBrowser-Dialoge: confirm(), alert(), prompt()Slide-Button (auch in Tabellenzeilen) oder ein gethemter Modal-Dialog (siehe Feedback)

Schweizer Schreibweise«ß», englische Buzzwords«ss», klare deutsche Begriffe, Du-Form

Typografie

Zwei Familien, selbst gehostet (variable Gewichte). Keine Serifen.

Überschriften, Text, UI

Plus Jakarta Sans

Gewichte 300, 400, 500, 600. Überschriften leicht, Labels mittel. Text bleibt auf 65 Zeichen Breite begrenzt.

Aa Bb Cc Gg Qq

Zahlen und Code

JetBrains Mono

Ausschliesslich für Zahlenwerte, Zeiten, Kennungen und Quellcode. Immer mit tabellarischen Ziffern.

1’024 · 99.98 % · 12 ms

Skala und Rollen

Rolle	Token	Grösse	Gewicht	Verwendung
Display	--fs-display	44–68 px	300	Nur Hero, einmal pro Seite
H1	--fs-h1	36–48 px	300	Seitentitel
H2	--fs-h2	28 px	500	Abschnitte
H3	--fs-h3	20 px	500	Unterabschnitte
Text	--fs-body	16 px	400	Fliesstext, Eingaben
Klein	--fs-small	14 px	400 / 500	Tabellen, Buttons, Hilfetext
Label	--fs-label	12 px	500	Fussnoten, Hilfetext

Farben

Token anklicken kopiert ihn. Kontrast gemessen gegen den jeweiligen Hintergrund.

Palette

Hell	Dunkel	Kontrast hell	Einsatz
#F6F4ED	#141210	–	Seitenhintergrund (Parchment)
#EFEBE0	#1E1B18	–	Hover, Auswahl, Fokusfläche
#1A1816	#ECE8E1	16.1	Text (Warm Charcoal)
#66625B	#A29C92	5.5	Sekundärtext, Labels
#D52B1E	#C9291C	4.6	Swiss Crimson: Primärbutton, Fokus, aktiv
#B8221A	#DA3426	5.8	Hover, Crimson als Text
#9A1C15	#E6392B	7.5	Gedrückt
#255930	#4E9A5E	7.5	Erfolg, aktiv, gesund (Grün)
#8A5A00	#D9A441	5.4	Warnung, Aufmerksamkeit (Ocker)
#A31F15	#FF8577	6.9	Fehler, immer mit Icon oder Text

Crimson darf

Primärbutton, Fokusring, aktive Sortierung oder aktiven Tab markieren, Auswahlbalken in Tabellen, Hover-Farbe von Links. Höchstens ein Akzent-Schwerpunkt pro Ansicht.

Crimson darf nicht

Fehler anzeigen (dafür --error), Flächen grösser als ein Button füllen, Fliesstext einfärben, mit Grün oder Ocker im selben Element kombiniert werden.

Layout und Abstand

Gruppierung entsteht durch Nähe, nicht durch Rahmen.

Nicht: Cards

Integration
Läuft stabil

Datenbank
Läuft stabil

Sondern: Nähe und Haarlinie

IntegrationLäuft stabil

DatenbankLäuft stabil

Abstandsskala

Token	Wert	Einsatz
--s-1	4 px	Label zu Feld, Icon zu Text
--s-2	8 px	Innerhalb einer Zeile
--s-3	16 px	Zusammengehörige Elemente
--s-4	24 px	Gruppen untereinander
--s-5	48 px	Blöcke
--s-6	96 px	Abschnitte

Nähe-Regel

Abstand zwischen Gruppen ist mindestens doppelt so gross wie innerhalb einer Gruppe.

Raster

12 Spalten, 1280 px maximal. Abschnittstitel links (3 Spalten), Inhalt rechts (9). Linksbündig, asymmetrisch.

Breakpoints

Unter 900 px ein Spaltenlayout, unter 700 px alle Spalten gestapelt. Mindestgrösse Touch-Ziel 40 px.

App-Layout (Standard für Anwendungen)

Module

Hermes Agent
Alpha
Beta

Hermes AgentStatus: Läuft stabilLetzte Meldung 14:30 Uhr

Navigation

Links, Benutzer oben ohne Linie. Aufgeklappt 240 px, eingeklappt Icon-Leiste mit 56 px. Icons mit Tooltip und Namen.

Master/Detail

Liste links, Detail des gewählten Eintrags rechts. Status und Verlauf ins Detail. Eine dritte Spalte nur für Nebeninfos, ab 1280 px. Jeder Trenner ist horizontal verziehbar, Mindestbreite 280 px.

Gemerkt

Spaltenbreiten pro Seite und Navigationszustand im Browser (localStorage). Nichts wird auf dem Server gespeichert.

UI-Controls

Alle Controls sind per Tastatur bedienbar und haben einen sichtbaren Fokus.

Buttons

Ein Primärbutton pro Ansicht. Beim Laden bleibt die Beschriftung, der Button wird gesperrt.

Icon-Buttons

Ghost, klein: für Zeilenaktionen in Tabellen und Listen.

Icon-Buttons ohne Text brauchen immer aria-label und Tooltip. Icon links vom Text, nur Pfeile für «Weiter» rechts. Ein Icon pro Button, immer 16 px mit Text, 20 px allein. Umschalter nutzen aria-pressed. Im Header erscheint der Tooltip unten (data-tip-pos).

Eingabefelder

FirmaOffizieller Name laut Handelsregister.

E-MailBitte eine vollständige Adresse angeben.

Nachricht

VorgehenNatives Select nur bis 6 Optionen ohne Suche.

Von

Bis

Auswahl: Combobox mit Suche

Standort · Einzelauswahl

Tippen filtert, ↑ ↓ wählen, Enter übernimmt, Esc schliesst oder leert.

Module · Mehrfachauswahl

Auswahl erscheint als Text-Token. Rücktaste entfernt den letzten.

Kunde · Server-Suche (1’200 Einträge)

Ab 2 Zeichen, 250 ms Verzögerung, alte Anfragen werden abgebrochen. «Neu anlegen», wenn nichts passt.

Wann was

Radio / Segmented: 2–4 Optionen, alle sichtbar.
Select: 5–6 Optionen, ohne Suche.
Combobox: ab 7 Optionen oder wenn gesucht wird.
Multi-Combobox: mehrere Werte, Filter, Tags.
Server-Suche: ab etwa 500 Einträgen.

Auswahlfelder, Schalter, Slider

Newsletter Nur aktive Gesperrt

Produktion Staging Entwicklung

Autonome Ausführung Sandbox-Modus

Schwellenwert75%

Fortschritt60%

Agent verarbeitet Daten …

Navigation: Tabs und Segmented

Tabs: Textreiter mit Crimson-Unterstreichung, Pfeiltasten wechseln.

Tabellen

Tabellen sind sortierbar. Klick: aufsteigend, absteigend, ursprünglich. Aktive Spalte zeigt einen Crimson-Pfeil.

Suche

Status

Module mit Status, Latenz und Verfügbarkeit
	Modul	Kunde	Status	Latenz	Verfügbarkeit	Letzter Lauf

0 von 0 Zeilen · 0 ausgewählt

Regeln

Sortierung pro Spalte mit aria-sort. Kopfzeile bleibt beim Scrollen stehen. Zeile wird nur bei Auswahl markiert, mit Crimson-Balken links.

Inhalt

Zahlen rechtsbündig, Mono, tabellarisch, Einheit im Wert. Datum TT.MM.JJJJ. Status als Punkt plus Wort. Filter über Combobox, Zeilenzähler immer sichtbar. Leerzustand mit Ausweg.

Feedback und Overlays

Rückmeldung ist ruhig, kurz und nie nur farblich.

Status und Hinweise

Optimal Verzögert Ausgefallen Geplant Inaktiv

GespeichertDie Änderungen sind aktiv.

Zertifikat läuft abNoch 14 Tage gültig.

Verbindung fehlgeschlagenPrüfe den API-Schlüssel und versuche es erneut.

WartungSonntag, 02:00–04:00 Uhr.

Toast, Drawer, Befehlspalette

Toast: Erfolg und Info verschwinden nach 4 s, Fehler bleiben bis zum Schliessen. Bearbeiten und Details gehören in einen Drawer von rechts. Bestätigungen gehören in einen Slide-Button oder in einen zentrierten Modal-Dialog.

Löschen bestätigen: Slide-Button

Spezialität: Die Bestätigung passiert im Rechteck des Buttons: «Sicher?» schiebt sich von unten herein, nach 650 ms folgen Abbrechen und Löschen als Icon-Buttons, ebenfalls von unten, links und rechts ausgerichtet. Abbrechen schickt sie nach unten weg, der Button kommt wieder von unten zurück. Der Button behält seine Grösse, nichts im Layout springt.

Angebot «Muster Logistik AG»

In Tabellenzeilen dasselbe mit fester Breite der Aktionsspalte (fr-slide--fixed): Die Spaltenbreiten bleiben konstant, in jedem Zustand.

API-Schlüssel
API-Schlüssel	Zuletzt genutzt	Aktion

Löschen bestätigen: Modal-Dialog

Für folgenreiche oder unwiderrufliche Aktionen: Projekte, Sammellöschungen, Kaskaden. Der Dialog nennt das Objekt und die Folge in einem Satz. Bei Unwiderruflichem muss der Name eingetippt werden. Der Bestätigen-Button benennt die Aktion, nie «OK» oder «Ja».

Leer, lädt, Fehler

Noch keine IntegrationenVerbinde das erste System.

Daten nicht verfügbarDer Dienst antwortet nicht. Deine Daten sind sicher.

Icons und Daten

Linienicons auf 24 px Raster, Strichstärke 1.5, runde Enden, currentColor. Grössen 16 / 20 / 24. Nie gefüllt, nie farbig.

Dynamics 36545 ms

WMS Gateway12 ms

Shopify30 ms

Diagramme: Beschriftung direkt am Datenpunkt, Werte in Mono, Grau als Standard, Crimson nur für das Hervorgehobene. Serienfolge: --text, --accent, --success, --warning, --text-muted.

Content und Tonalität

Gilt für Website, Benutzeroberflächen, Offerten und alles, was Agenten schreiben.

Haltung

Beratend, direkt, ruhig. Wir erklären, was wir tun und warum. Kein Hype, keine Superlative.

Sprache

Deutsch (Schweiz), Du-Form, aktive Sätze, 1 Gedanke pro Satz. Schweizer Schreibweise: «ss» statt «ß», Anführungszeichen «…».

Länge

Headline höchstens 8 Wörter. Button 1–3 Wörter, Verb zuerst. Absatz höchstens 65 Zeichen breit.

Beispiele

KontextVermeidenBesser

HeadlineRevolutionäre KI-Lösungen für deine digitale ZukunftDeine IT, bereit für KI-Agenten

ButtonJetzt hier klicken und loslegen!Beratung anfragen

FehlermeldungOops! Etwas ist schiefgelaufen :(Die Verbindung ist fehlgeschlagen. Prüfe den Schlüssel und versuche es erneut.

LeerzustandNichts da!Noch keine Daten. Verbinde das erste System.

Zahlen und Formate

Art	Format	Hinweis
Datum	05.11.2026	TT.MM.JJJJ, im Text «5. November 2026»
Uhrzeit	14:30	24 Stunden, mit «Uhr» im Fliesstext
Tausender	1’024	Apostroph als Trenner, Punkt als Dezimalzeichen
Währung	CHF 12’500.00	Code vor dem Betrag
Prozent	99.98 %	Schmales Leerzeichen vor dem Zeichen
Einheit	12 ms	Einheit gehört zum Wert, nie in der Spalte allein

Agent-Brief

Diesen Block in jeden Prompt oder Skill einfügen, der UI oder Content erzeugt.

System-Prompt-Auszug

Du erzeugst UI und Content für Fraindly AG (Software-Beratung und Umsetzung, Schweiz).
Quelle der Wahrheit: design/tokens.css, design/components.css, design/DESIGN.md.

Stil: minimalistisch, modern, warme Töne, Swiss Crimson (#D52B1E) als einziger Akzent.
1. Keine Cards. Gruppiere über Nähe, Abstand, Haarlinien und Typografie.
2. Schrift: Plus Jakarta Sans. Zahlen, Zeiten, Code: JetBrains Mono (tabular-nums). Keine Serifen.
3. Nur Tokens aus tokens.css. Keine Hex-Werte, keine Tailwind-Standardfarben, Radius 2px.
4. Crimson nur für Primäraktion, Fokus, aktiven Zustand. Erfolg = --success (Grün), Fehler = --error, jeweils mit Icon oder Text.
5. Tabellen: immer sortierbar (aria-sort), Zahlen rechtsbündig in Mono, Zeilenzähler, Leerzustand.
6. Auswahl ab 7 Optionen oder mit Suche: Combobox (Single/Multi/Async). Multi als Text-Token.
7. Jede Komponente hat Hover-, Fokus-, Disabled-, Lade- und Fehlerzustand, per Tastatur bedienbar.
8. Text: Deutsch (Schweiz), Du-Form, «ss» statt «ß», Datum 05.11.2026, Tausender 1’024, kein Hype.
9. Löschen: nie confirm()/alert()/prompt(). Bestätigung per Slide-Button (fr-slide, in Tabellenzeilen fr-slide--fixed) oder gethemter Modal-Dialog (fr-modal). Button nennt die Aktion, Fokus auf Abbrechen. Spaltenbreiten bleiben konstant.
10. Anwendungen: App-Layout. Navigation links, Benutzer oben ohne Trennlinie, einklappbar auf Icon-Leiste (56 px, aria-label und Tooltip). Aktiver Eintrag mit Crimson-Balken. Inhalt als Master/Detail: Liste links, Detail des gewählten Eintrags rechts, Status und Verlauf ins Detail. Dritte Spalte nur für Nebeninfos ab 1280 px. Jeder Trenner horizontal verziehbar, keine Spalte unter 280 px, Tastatur mit Pfeiltasten. Breiten pro Seite und Navigationszustand in localStorage (fr-app-cols, fr-app-nav). Keine Eyebrows in der Navigation.
Verwende bestehende fr-Komponenten, bevor du neue baust.

Klar, warm, präzise.

Prinzipien

Typografie

Überschriften, Text, UI

Zahlen und Code

Skala und Rollen

Farben

Palette

Crimson darf

Crimson darf nicht

Layout und Abstand

Nicht: Cards

Sondern: Nähe und Haarlinie

Abstandsskala

Nähe-Regel

Raster

Breakpoints

App-Layout (Standard für Anwendungen)

Navigation

Master/Detail

Gemerkt

UI-Controls

Buttons

Icon-Buttons

Eingabefelder

Auswahl: Combobox mit Suche

Wann was

Auswahlfelder, Schalter, Slider

Navigation: Tabs und Segmented

Tabellen

Regeln

Inhalt

Feedback und Overlays

Status und Hinweise

Toast, Drawer, Befehlspalette

Löschen bestätigen: Slide-Button

Löschen bestätigen: Modal-Dialog

Leer, lädt, Fehler

Icons und Daten

Content und Tonalität

Haltung

Sprache

Länge

Beispiele

Zahlen und Formate

Agent-Brief

System-Prompt-Auszug

Tokens

Komponenten

Regeln