👤 Marcel Karas📅 Erstellt am 12. Mai 2026🏷️ Design-System
Ein ruhiges UI-Framework im Notion-Look – als Web Components, ohne Build-Step. Diese Seite ist die lebende Preview: Sidebar, Seitenbaum, Callouts, Todos, Toggles und Datenbank-Views in einem Gerüst.
💡
Leitidee: Optik & Gerüst liefert NotionKit, den Editor hängt man über <nk-block-host> ein (z. B. BlockNote), die Daten kommen aus der eigenen API. Drei Ebenen, sauber getrennt.
✅ Nächste Schritte
Komponenten-Umfang skizzieren
Preview mit Light/Dark bauen
MVP-Umfang priorisieren
Datenmodell für Tree & Database definieren
🗃️ Projekt-Datenbank
▦ Tabelle 4▤ Board＋
📄Name
◉Status
👤Verantwortlich
📅Fällig
▰Fortschritt
＋ Neue Seite
🧩 Weitere Bausteine
Alles, was ein Notion-artiges System sonst noch braucht – als ruhige, drop-in-fähige Elemente. Interaktiv ausprobierbar.
ℹ️ Diese Seite ist eine Komponenten-Preview – alle Elemente folgen denselben Design-Tokens.Palette öffnen
⚠️ Die Datenbank „Projektübersicht“ hat 2 überfällige Einträge.Ansehen
✓ Alle Änderungen wurden synchronisiert.
Inline-Elemente
Im Fließtext lassen sich SL Sara Lindt,
Seiten wie 📄 Wissensdatenbank und Daten wie
📅 20. Mai verlinken – ebenso nk-database als Code.
Emoji-Picker
😀🌿🍕🚀💡❤️🎲
Kontextmenü (⋯)
Seite
✏️Umbenennen⌘⇧R
📋Duplizieren⌘D
🔗Link kopieren⌘L
📁Verschieben nach …
🗑️In den Papierkorb⌫
Seiten-Reiter
📝 Notizen✅ Aufgaben📎 Dateien
Freie Notizen zum Projekt – Meeting-Mitschriften, Ideen, Rohfassungen.
Aufgaben dieses Projekts, verknüpft mit der Datenbank unten.
Angehängte Dateien und Exporte.
Template-Buttons
Statistik-Karten
Aktive Seiten
128
▲ 12 diese Woche
KI-Anfragen
847
▲ 23 %
Offene Aufgaben
14
▼ 5 seit gestern
Synced-Block
⟳ 3 Orte
Unsere Mission: Arbeitsalltag spürbar entlasten – ruhig, klar, wirksam. Dieser Text erscheint identisch auf drei Seiten und wird zentral gepflegt.
Segment-Auswahl
Für Zeiträume, Sichtweisen oder Dichtestufen.
Avatar-Gruppe & Anwesenheit
MKSLTW+2
5 Personen haben Zugriff
Lade-Skelett
Leerzustand
🗂️
Noch keine Einträge
Lege den ersten Eintrag an oder importiere vorhandene Daten.
Kommentar-Faden
SL
Sara Lindt · vor 1 Std.
Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍
✨
MonaKI · vor 20 Min.
Ich habe die überfälligen Einträge markiert und eine Zusammenfassung vorbereitet.
KI-Assistenten-Einbettung
MK
Du
Fasse die offenen Aufgaben dieses Projekts zusammen.
✨
Mona · KI
Zwei Aufgaben sind offen: Der Table-View steht bei 65 % (Fälligkeit: 20. Mai), das Board mit Drag-and-Drop ist geplant. Ich empfehle, den MVP-Umfang zuerst festzuziehen.
✨
Wie sieht die Einbindung aus?
Ein Script-Tag genügt – kein Bundler, kein Framework-Zwang:
Der eigentliche Text-Editor. NotionKit stellt mit <nk-block-host> nur die optische Hülle – als Editor wird BlockNote oder Novel eingehängt. So bleibt das Kit schlank und der Editor austauschbar.
✍️ Editor-Fläche
Ab hier tippst du in echtem TipTap, eingehängt in einen nk-block-host – ohne editor-eigenes CSS. Fahre über einen Block für ＋ / ⠿, zieh ihn, markiere Text, oder tippe /.
Das ist keine Vorschau mehr: Dieser Absatz ist editierbar. Die Überschrift oben, das Callout, die Todos und die Datenbank sind NotionKit-Markup – und dieser Block ist derselbe Look, nur lebendig.
Editor in einen Block-Host hängen
Einen Block mit ⠿ verschieben
Mit / einen neuen Block wählen
Optik und Gerüst liefert NotionKit, das Verhalten der Editor. Drei Ebenen, sauber getrennt.
Mein Profil
MK
Angaben
Anzeigename
So wirst du im Workspace angezeigt.
E-Mail
Wird für Einladungen und Benachrichtigungen genutzt.
Über mich
Kurze Beschreibung für dein Team.
Darstellung
Erscheinungsbild
Hell, dunkel oder der Systemeinstellung folgen.
Farbschema
Die Beispiel-Paletten aus theme-override.css – eine Zeile --nk-accent genügt.
Sprache
Komfort
Kompakte Ansicht
Reduziert Abstände in Sidebar und Listen.
Animationen reduzieren
Weniger Bewegung für ruhigeres Arbeiten.
Textgröße
100 %
Benachrichtigungen
Per E-Mail
Push
Push-Benachrichtigungen
Direkt im Browser bei Aktivität in geteilten Seiten.
Nur bei Erwähnungen
Alles andere landet still im Posteingang.
KI-Assistent
KI-Antworten aktiviert
Mona darf Seiteninhalte lesen und Antworten vorschlagen.
Modell
Mona Standard Empfohlen
Ausgewogenes Modell für den Arbeitsalltag. Schnell, ruhig, zuverlässig.
Mona Tief
Mehr Denktiefe für komplexe Analysen und lange Dokumente. Antwortet langsamer.
Eigenes Modell API
Verbinde deinen eigenen API-Schlüssel (OpenAI, Anthropic, Azure).
Antwortstil
API-Schlüssel
Nur nötig bei eigenem Modell. Bleibt lokal gespeichert.
Workspace-Einstellungen
Workspace-Name
Domain
Öffentliche Seiten erscheinen unter dieser Adresse.
Öffentliche Startseite
Besucher dürfen freigegebene Seiten ohne Login sehen.
⚠️ Gefahrenbereich
Workspace löschen
Entfernt alle Seiten, Datenbanken und Mitglieder unwiderruflich.