Cookie-Einstellungen

Hier legst du fest, welche Dienste wir einsetzen dürfen. Deine Wahl gilt für diesen Browser, gespeichert wird sie 12 Monate. Ändern oder widerrufen kannst du sie jederzeit über „Cookie-Einstellungen“ unten auf jeder Seite.

Notwendig

Immer aktiv

Für Anmeldung und Sicherheit und um deine Wahl hier zu speichern. Ohne sie funktioniert die Website nicht. Dafür braucht es keine Einwilligung (§ 25 Abs. 2 Nr. 2 TDDDG).

Was gespeichert wird (1)
NameZweckArtSpeicherdauer
flamox365-einwilligungDeine Wahl in diesem HinweisBrowser-Speicher12 Monate

Dienste, die eine Einwilligung brauchen, setzen wir nicht ein. Kommt einer dazu, fragt dich dieser Hinweis vorher.

DatenschutzerklärungImpressum
Kontakt

Mosaik · Komponentenbibliothek

Mosaik. Die Bausteine hinter FLAMOX365.

Navigation, Suchfeld, Karten, Formularfelder, Schalter und Schaltflächen: Jede Ansicht von FLAMOX365 setzt sich aus Mosaik zusammen, der eigenen Komponentenbibliothek. Einmal gebaut, überall gleich, in Hell und in Dunkel.

Video ansehenVideo · 6:36 · mit Untertiteln Zur Mosaik-Website
  • 160+ Mosaik-Elemente im Quellcode
  • 8.400+ Stellen, an denen sie stecken
  • 5 Ziele aus einer Quelle
Startseite von FLAMOX365 mit Navigation, Suchfeld, Neuigkeiten und Wetter. Navigation, Suchfeld, Karten und Symbole sind Bausteine aus Mosaik.

01Web-Komponenten

Eine Quelle. Jedes Framework.

Mosaik besteht aus Web-Komponenten. Jede Komponente wird genau einmal geschrieben, mit der Bibliothek Lit. Das Markup ändert sich je nach Framework, das Aussehen nicht.

  • Pakete für jedes FrameworkAus der einen Quelle entstehen automatisch Pakete für Angular, React, Vue und Svelte, mit denselben Eigenschaften, denselben Ereignissen und demselben Aussehen.
  • Direkt im BrowserJede Komponente ist ein Standard-Element des Browsers. Damit läuft sie auch ganz ohne Framework, direkt in HTML.
  • FLAMOX365 nutzt AngularDie Oberfläche von FLAMOX365 verwendet die Pakete für Angular. Dasselbe Element sähe in jedem anderen Ziel genauso aus.
Startseite der Mosaik-Website: „One component model. Every framework.“ Native Web-Komponenten mit erzeugten Paketen für Angular, React, Vue und Svelte, gestaltet über Tokens. Dahinter schweben echte Komponenten wie ein Kalender, eine Aufgabenkarte und Schaltflächen.
Ein Live-Element aus echten Mosaik-Komponenten im Thema von FLAMOX365: Ein Schalter „E-Mail-Benachrichtigungen“ und eine Schaltfläche „Benachrichtigungen an“. Linien führen zu HTML, Angular, React, Vue und Svelte, Angular ist gewählt. Daneben derselbe Baustein im Angular-Code.
Echte Mosaik-Komponenten im Thema von FLAMOX365: Dasselbe Element in allen fünf Zielen, hier mit dem Code für Angular.

Im Video erklärt

Mosaik, in sieben Minuten erklärt.

Bausteine, Web-Komponenten, Design-Tokens und Themen, Hell und Dunkel, die Regeln für die Entwicklung und KI Assistenten: Das Video zeigt, wie Mosaik die Oberfläche von FLAMOX365 trägt. Übrigens folgen auch die Erklärvideos selbst Mosaik. Farben, Schrift und Bewegungsdauern kommen aus demselben Designvertrag wie die Oberfläche.

  • Bausteine aus einer Quelle
  • Pakete für jedes Framework
  • Design-Tokens und Themen
  • Hell und Dunkel
  • Für KI Assistenten gebaut

Kapitel16

02Umfang

Der Umfang ist sehr groß.

Von der PIN-Eingabe bis zum Terminplaner: Mosaik deckt ab, was eine moderne Oberfläche braucht. Auf der Mosaik-Website lässt sich jede Komponente live ausprobieren.

201
Komponentenin 16 Kategorien
10.000+
Design-Tokensjeder eine CSS-Variable
138.000+
Symboleaus 42 freien Bibliotheken
5
ZieleHTML, Angular, React, Vue und Svelte
4
ThemenJoy, Memphis, Cosmopolitan und Soho
9
Farbrampenje elf Stufen, hell und dunkel
16
Diagrammartenvon Linie und Ring bis Heatmap
23
Werkzeugeim MCP-Server für KI Assistenten

Zahlen der Mosaik-Website, Stand Oktober 2026.

Sechs Mosaik-Komponenten in den Farben von FLAMOX365: Ein Diagramm mit zwei Linien, eine Bewertung mit Sternen und Herzen, Chips, ein Kalender für Oktober 2026, drei Schieberegler und eine Karte „Beratungstermin“.
Einige Komponenten in den Farben von FLAMOX365: Diagramm, Bewertung, Chips, Kalender, Schieberegler und Karte.

Im Quellcode von FLAMOX365

160+
verschiedene Mosaik-Elemente
8.400+
Stellen, an denen sie eingesetzt sind

Gezählt in der Oberfläche von FLAMOX365, ohne Tests. Jede neue Ansicht greift auf dieselben Elemente zurück.

Am häufigsten

  1. Texte<mosaik-text>
  2. Formularfelder<mosaik-form-field>
  3. Schaltflächen<mosaik-button>

03Design-Tokens und Themen

Benannte Werte. Statt fester Farben.

Gestaltet wird Mosaik über Design-Tokens: Benannte Werte für Farben, Schrift, Abstände, Rundungen, Schatten und Bewegung. Jeder dieser Werte ist eine CSS-Variable, und ein Thema legt sie alle fest.

  • Farben
  • Schrift
  • Abstände
  • Rundungen
  • Schatten
  • Bewegung

Vier Themen. Drei Grundfarben.

Mosaik bringt vier Themen mit: Joy, Memphis, Cosmopolitan und Soho. Ein Farbschema entsteht aus nur drei Grundfarben. Daraus berechnet Mosaik Farbrampen mit je elf Abstufungen, für hell und für dunkel.

FLAMOX365 nutzt das Thema Joy und überschreibt nur ausgewählte Werte. Alles andere übernimmt es unverändert.

Token-Ansicht im Thema von FLAMOX365: Links eine Karte mit Fortschritt, Schaltern, Kontrollkästchen, Chips und Bewertung, rechts die Auswahl der Themen Joy, Memphis, Cosmopolitan und Soho, die Grundfarben #bf1818, #e3a11c und #353535 und die Variablen für Primär, Sekundär und Tertiär.
Dieselben Tokens, wie FLAMOX365 sie nutzt, zum Beispiel --mosaik-color-primary-500 für das Rot.

04Farbschema

Hell oder Dunkel. Ohne Neuladen.

Weil die Ansichten nur Tokens verwenden, schaltet Mosaik das Farbschema zur Laufzeit um. Unter Zugang & Präferenzen › Anwendung › Darstellung wählst du Hell oder Dunkel. Nach dem Speichern wechselt die ganze Anwendung sofort.

  • Jede Person wählt ihr eigenes Farbschema
  • Alle Ansichten wechseln gemeinsam
  • Sofort nach dem Speichern, ohne Neuladen
Einstellungen › Darstellung im hellen Farbschema
Dieselbe Ansicht im dunklen Farbschema

05Regeln für die Entwicklung

Damit es so bleibt. Feste Regeln.

Beim Entwickeln gilt eine feste Reihenfolge. Bedienelemente, die es schon gibt, werden nicht nachgebaut.

  1. 1zuerstMosaik-Komponente
  2. 2dannGemeinsame Komposition aus FLAMOX365
  3. 3erst danachEtwas Eigenes

Nur Mosaik-Tokens

Farben, Schriften, Rundungen, Rahmen und Schatten kommen immer aus den Mosaik-Tokens, nie als fester Wert.

Tailwind nur für das Layout

Tailwind-Klassen ordnen Flächen an. Gestaltet wird mit den Tokens.

Automatische Prüfung

Eine Prüfung schlägt fehl, sobald der Designvertrag nicht mehr zu Mosaik passt.

06Fundament

Mehr als eine Sammlung von Bedienelementen.

Im selben Fundament stecken die Dinge, die jede Anwendung braucht. Sie werden einmal gelöst und nicht in jeder Ansicht neu.

  • Routing
  • Dienste
  • Portale für Überlagerungen
  • Ziehen und Ablegen
  • Übersetzungen
  • Layouts für jede Bildschirmgröße
  • Animationen
  • Formulare

Bedienbarkeit in der Komponente

Tastatur, Fokus und reduzierte Bewegung regelt Mosaik in den Komponenten selbst. Jede Ansicht, die sie verwendet, bekommt das mit.

  • TabFokus
  • ↵Auswählen
  • EscSchließen

Symbole aus einer Registrierung

Für Symbole gibt es eine zentrale Registrierung mit 42 freien Bibliotheken. FLAMOX365 meldet seine Symbole dort einmal an, zum Beispiel die Wettersymbole auf der Startseite. Auch diese Website nutzt dasselbe Iconset wie das Portal.

Wetter auf der Startseite von FLAMOX365 mit Sonne und Wolke für die nächsten sechs Tage

07KI Assistenten

Nachschlagen. Statt raten.

Mosaik ist auch für KI Assistenten gebaut. Jede Komponente beschreibt sich in einer eigenen Datei, und ein öffentlicher MCP-Server beantwortet Fragen zur echten Programmierschnittstelle, mit 23 Werkzeugen und ohne Schlüssel.

FLAMOX365 erzeugt daraus seinen eigenen Designvertrag, die DESIGN.md: Das wirksame Thema, die Regeln, die Komponenten und ihre Tokens. So schlagen Assistenten nach, statt zu raten.

Mosaik-Website, Abschnitt AI-native: „Your assistant already knows Mosaik.“ mit der Adresse des MCP-Servers, MCP über Streamable HTTP, ohne API-Schlüssel, 23 Werkzeuge

08Auf den Punkt

Was Mosaik FLAMOX365 bringt. Und wo es aufhört.

Eine Oberfläche aus einem Guss

  • Einheitlich, wartbar und wiederverwendbar
  • Wiederkehrende Probleme einmal gelöst, wirksam überall
  • Neue Ansichten aus fertigen Bausteinen statt aus Einzelanfertigungen

Keine Entscheidung über Datensicherheit

Mosaik sorgt für Darstellung und Bedienung. Über Datensicherheit entscheidet es nicht.

Darstellung und Bedienung
Mosaik
Berechtigungen, Mandantentrennung, Datenzugriff
Server, Schnittstellen und Datenmodell
So schützt FLAMOX365 deine Daten

Alle Komponenten. Live auf der Mosaik-Website.

Jede Komponente lässt sich auf mosaik.breadstone.de ausprobieren. Fragen zu FLAMOX365 und seiner Oberfläche beantworten wir dir gern direkt.

FLAMOX365 ist noch nicht erhältlich, bis zum Start dauert es noch etwas.

Kontakt aufnehmen mail@flamox365.com Zur Mosaik-Website