App-Shell & Layout

PRD 5.1

App-Shell `.nk-app`

Produkt-Roadmap

Ein kurzer Lead-Absatz führt in die Seite ein – ruhiger und etwas größer gesetzt als der Fließtext, der darunter beginnt.

Workspace-Umschalter `.nk-workspace`

A

Acme GmbH⌄

Topbar `.nk-topbar`

Abschnitts-Label `.nk-section-label`

Favoriten＋

📊Projektübersicht

Navigation / Seitenbaum

PRD 5.2

Baum-Eintrag `.nk-tree-item`

📊Projektübersicht＋⋯

📚Wissensdatenbank＋⋯

🎨Design-System＋⋯

Unterbaum & Toggle-Pfeil `.nk-tree-children`

▶📚Wissensdatenbank

📄Meeting-Notizen

🎨Design-System

▶🗂️Seiten

—

Tastatur-Hinweis `.nk-kbd`

🔍Suche⌘K

Seiten-Shell & Dokument

PRD 5.3

Seitenspalte `.nk-page`

🚀

Produkt-Roadmap

👤 Ada Lovelace📅 Erstellt am 12. Mai 2026

Ein kurzer Lead-Absatz führt in die Seite ein – ruhiger und etwas größer gesetzt als der Fließtext, der darunter beginnt.

Cover `.nk-cover`

Überschriften & Lead `.nk-heading`

✅ So funktioniert das

Ein kurzer Lead-Absatz führt in die Seite ein – ruhiger und etwas größer gesetzt als der Fließtext, der darunter beginnt.

Inhalts-Elemente

PRD 5.4

Callout `.nk-callout`

💡

Leitidee: Ein Callout trägt genau einen Gedanken, der nicht übersehen werden darf. Ein bis zwei Sätze reichen.

To-do `.nk-todo`

Komponenten-Umfang skizzieren Preview bauen MVP-Umfang priorisieren

Toggle `.nk-toggle`

Was ist nicht enthalten?

Der Text-Editor selbst. NotionKit liefert die optische Hülle; TipTap, BlockNote oder Novel hängst du hinein.

Zitat & Trenner `.nk-quote`

Design ist nicht, wie etwas aussieht. Design ist, wie es funktioniert.— Steve Jobs

Inline-Erwähnungen `.nk-mention`

SLSara Lindt 📄 Wissensdatenbank 📅 20. Mai

Code `.nk-code`

html<div class="nk-callout"> <span class="c-icon">💡</span> </div>

Inline: --nk-accent

Datenbank-Views

PRD 5.5

View-Reiter `.nk-db-tabs`

▦ Tabelle4

▤ Board

🖼 Galerie

Tabellen-Ansicht `.nk-table`

📄Name	◉Status	👤Verantwortlich	📅Fällig	📊Fortschritt
🚀 Roadmap	Fertig	SLSara	12.05.2026	100 %
🎨 Design-System	In Arbeit	TWTom	20.05.2026	65 %

＋＋ Neue Seite

Tags `.nk-tag`

In Arbeit Fertig Geplant Design-System

Fortschrittsbalken `.nk-progress`

65 %

20 %

Board-Ansicht `.nk-board`

Geplant1

🖥 Board-Ansicht

TW28.05.

In Arbeit1

🎨 Design-System

Fertig1

🚀 Roadmap

12.05.

Formulare & Einstellungen

PRD 5.6

Inputs, Textarea, Select `.nk-input`

Buttons `.nk-btn`

Switch `.nk-switch`

Kompakte Ansicht

Reduziert Abstände in Sidebar und Listen.

Animationen reduzieren

Checkbox & Radio `.nk-check`

Hell Dunkel

Hell System

Slider `.nk-slider`

Textgröße: 100 %

Feld-Zeile `.nk-field`

Anzeigename

So wirst du im Workspace angezeigt.

E-Mail

Profil-Zeile `.nk-profile-row`

AL

Modell-Karte `.nk-model-card`

Mona StandardEmpfohlen

Ausgewogenes Modell für den Arbeitsalltag. Schnell, ruhig, zuverlässig.

Mona Deep

Ausgewogenes Modell für den Arbeitsalltag. Schnell, ruhig, zuverlässig.

Gefahrenbereich `.nk-danger-zone`

⚠️ Gefahrenbereich

Löschen

Entfernt alle Seiten, Datenbanken und Mitglieder unwiderruflich.

Mitglieder-Zeilen `.nk-member-row`

AL

Ada Lovelace

ada@acme.com

TW

Tom Weber

tom@acme.com

Einstellungs-Modal

PRD 5.7

Overlays & Menüs

PRD 5.8

Popover-Basis `.nk-pop`

Emoji-Picker `.nk-emoji-grid`

🚀📊💡✅🎨📚🗂️🔍📥⚙️🧩🌙☀️📅👤💬

🕐😀🐶🍎⚽🚗💡

Befehlspalette `.nk-cmdk`

🔍

Seiten

📊Projektübersicht

📚Wissensdatenbank

Aktionen

＋Neue Seite⌘N

⚙️Einstellungen öffnen⌘,

Palette: keine Treffer `.nk-cmdk-empty`

🔍

Keine Ergebnisse für “xyzzy”

Toast `.nk-toast`

✓ Einstellungen gespeichert

Galerie & Produktivität

PRD 5.9

Galerie-Raster `.nk-gallery-grid`

Aktive Seiten

diese Woche

128

Offene Aufgaben

diese Woche

17

Reiter `.nk-tabs`

📝 Notizen

✅ Aufgaben

📎 Dateien

Der Panel-Inhalt folgt der Reiterleiste und erbt die ruhige Fließtext-Typografie.

Template-Button `.nk-template-btn`

Statistik-Karten `.nk-stats`

Aktive Seiten

128

▲ 12 diese Woche

KI-Anfragen

1 204

▲ 8 %

Offene Aufgaben

17

▼ 5 seit gestern

Synced-Block `.nk-synced`

⟳ 3 Orte Dieser Text erscheint identisch auf drei Seiten und wird zentral gepflegt.

Segment-Auswahl `.nk-segmented`

Banner `.nk-banner`

Avatar-Gruppe `.nk-avatar-group`

AL TW SL +2

5 Personen haben Zugriff

Skelett `.nk-skeleton`

Leerzustand `.nk-empty`

🗂️

Noch keine Einträge

Lege den ersten Eintrag an oder importiere vorhandene Daten.

Kollaboration & KI

PRD 5.10

Kommentar-Faden `.nk-comments`

SL

Sara Lindt · vor 1 Std.

Die Board-Ansicht fühlt sich schon sehr nah am Original an. 👍

KI-Faden `.nk-ai-thread`

AL

Du

Fasse die offenen Aufgaben dieses Projekts zusammen.

🤖

Mona · KI

Zwei Aufgaben sind offen: Die Tabellen-Ansicht steht bei 65 %, das Board mit Drag-and-Drop ist geplant.

Editor-Adapter

PRD 5.11

Block-Host `.nk-block-host`

Leitidee: Ein Callout trägt genau einen Gedanken, der nicht übersehen werden darf. Ein bis zwei Sätze reichen.

⠿

Tippe „/“ für Befehle …

Diese Vorschau ist nur die statische Hülle – die ＋ / ⠿-Leiste hier tut nichts. Die funktionierende Fassung mit Slash-Menü, Drag & Drop und Blockmenü ist der Live-Editor in der Doku.

App-Shell & Layout

App-Shell .nk-app

Produkt-Roadmap

Workspace-Umschalter .nk-workspace

Topbar .nk-topbar

Breadcrumb .nk-breadcrumb

Abschnitts-Label .nk-section-label

Navigation / Seitenbaum

Baum-Eintrag .nk-tree-item

Unterbaum & Toggle-Pfeil .nk-tree-children

Tastatur-Hinweis .nk-kbd

Seiten-Shell & Dokument

Seitenspalte .nk-page

Produkt-Roadmap

Cover .nk-cover

Überschriften & Lead .nk-heading

✅ So funktioniert das

Inhalts-Elemente

Callout .nk-callout

To-do .nk-todo

Toggle .nk-toggle

Zitat & Trenner .nk-quote

Inline-Erwähnungen .nk-mention

Code .nk-code

Datenbank-Views

View-Reiter .nk-db-tabs

Tabellen-Ansicht .nk-table

Tags .nk-tag

Fortschrittsbalken .nk-progress

Board-Ansicht .nk-board

Formulare & Einstellungen

Inputs, Textarea, Select .nk-input

Buttons .nk-btn

Switch .nk-switch

Checkbox & Radio .nk-check

Slider .nk-slider

Feld-Zeile .nk-field

Profil-Zeile .nk-profile-row

Modell-Karte .nk-model-card

Gefahrenbereich .nk-danger-zone

Mitglieder-Zeilen .nk-member-row

Einstellungs-Modal

Einstellungs-Modal .nk-modal

Anzeigename

Overlays & Menüs

Popover-Basis .nk-pop

Emoji-Picker .nk-emoji-grid

Kontextmenü .nk-menu

Befehlspalette .nk-cmdk

Palette: keine Treffer .nk-cmdk-empty

Toast .nk-toast

Galerie & Produktivität

Galerie-Raster .nk-gallery-grid

Aktive Seiten

Offene Aufgaben

Reiter .nk-tabs

Template-Button .nk-template-btn

Statistik-Karten .nk-stats

Synced-Block .nk-synced

Segment-Auswahl .nk-segmented

Banner .nk-banner

Avatar-Gruppe .nk-avatar-group

Skelett .nk-skeleton

Leerzustand .nk-empty

Kollaboration & KI

Kommentar-Faden .nk-comments

KI-Faden .nk-ai-thread

Editor-Adapter

Block-Host .nk-block-host

Slash-Menü & Bubble-Toolbar .nk-slash-menu

App-Shell `.nk-app`

Workspace-Umschalter `.nk-workspace`

Topbar `.nk-topbar`

Breadcrumb `.nk-breadcrumb`

Abschnitts-Label `.nk-section-label`

Baum-Eintrag `.nk-tree-item`

Unterbaum & Toggle-Pfeil `.nk-tree-children`

Tastatur-Hinweis `.nk-kbd`

Seitenspalte `.nk-page`

Cover `.nk-cover`

Überschriften & Lead `.nk-heading`

Callout `.nk-callout`

To-do `.nk-todo`

Toggle `.nk-toggle`

Zitat & Trenner `.nk-quote`

Inline-Erwähnungen `.nk-mention`

Code `.nk-code`

View-Reiter `.nk-db-tabs`

Tabellen-Ansicht `.nk-table`

Tags `.nk-tag`

Fortschrittsbalken `.nk-progress`

Board-Ansicht `.nk-board`

Inputs, Textarea, Select `.nk-input`

Buttons `.nk-btn`

Switch `.nk-switch`

Checkbox & Radio `.nk-check`

Slider `.nk-slider`

Feld-Zeile `.nk-field`

Profil-Zeile `.nk-profile-row`

Modell-Karte `.nk-model-card`

Gefahrenbereich `.nk-danger-zone`

Mitglieder-Zeilen `.nk-member-row`

Einstellungs-Modal `.nk-modal`

Popover-Basis `.nk-pop`

Emoji-Picker `.nk-emoji-grid`

Kontextmenü `.nk-menu`

Befehlspalette `.nk-cmdk`

Palette: keine Treffer `.nk-cmdk-empty`

Toast `.nk-toast`

Galerie-Raster `.nk-gallery-grid`

Reiter `.nk-tabs`

Template-Button `.nk-template-btn`

Statistik-Karten `.nk-stats`

Synced-Block `.nk-synced`

Segment-Auswahl `.nk-segmented`

Banner `.nk-banner`

Avatar-Gruppe `.nk-avatar-group`

Skelett `.nk-skeleton`

Leerzustand `.nk-empty`

Kommentar-Faden `.nk-comments`

KI-Faden `.nk-ai-thread`

Block-Host `.nk-block-host`

Slash-Menü & Bubble-Toolbar `.nk-slash-menu`