App shell .nk-app

nk-app is a full-height flex row: sidebar left, main column right. It is the outermost element of a workspace app and the only place a fixed height belongs. Inside the sidebar, nk-sidebar-scroll is the scrolling tree area and nk-sidebar-footer the pinned bottom (Settings, Trash). On the desktop the sidebar collapses as in Notion: .nk-sidebar-head holds the workspace row and the « .nk-sidebar-collapse, which shows while the pointer is over the sidebar; .collapsed on the sidebar slides it out to the left – the main column takes the width, the hidden sidebar takes no focus – and .collapsed on the topbar's .nk-sidebar-toggle shows the ☰ that brings it back. Notion's shortcut is ⌘\.

html<div class="nk-sidebar-backdrop open"></div>   <!-- phones: the drawer's scrim -->
<aside class="nk-sidebar open">…</aside>         <!-- slides in over the page -->
<button class="nk-topbar-btn nk-sidebar-toggle" aria-label="Menu">☰</button>

jscollapseBtn.addEventListener('click', () => {            // the « in .nk-sidebar-head
  sidebar.classList.add('collapsed');                      // slides out on the desktop
  sidebarToggle.classList.add('collapsed');                // the ☰ in the topbar brings it back
});

Workspace switcher .nk-workspace

Sits at the very top of the sidebar. The avatar gradient is mixed from --nk-decor-purple and --nk-decor-blue, so it survives a re-brand untouched.

Topbar .nk-topbar

A 44px-high row holding the breadcrumb on the left and actions on the right. nk-topbar-actions pushes itself right with margin-left:auto, so you never need a spacer. Passive text among the actions – "Edited 2 min ago" – is nk-topbar-meta. nk-theme-glyph wraps the appearance glyph of a theme button: one emoji for a fixed theme, with auto sun and moon diagonally for the mode that follows the system.

Tab bar (mobile) .nk-tab-bar

The thumb-reachable twin of the sidebar for phones and installed PWAs: up to five destinations in a row, each an icon over a short label, the current one in --nk-accent. Put it last inside nk-main – it sits below the scrolling page and never moves. In a document that scrolls itself it sticks to the viewport bottom. floating makes it a capsule; fixed pins it to the viewport bottom for standalone PWAs, with a .nk-tab-bar-spacer right after it keeping its height (--nk-tab-bar-height plus the safe area) in the flow. The fifth item usually opens the sidebar as a drawer.

html<nav class="nk-tab-bar fixed">…</nav><div class="nk-tab-bar-spacer"></div>

Breadcrumb .nk-breadcrumb

Each step is a .crumb; the last one carries .current and turns from secondary to primary text. Separators are .sep.

Section label .nk-section-label

The small uppercase caption between sidebar groups. Its .plus affordance only appears on hover — a quiet way to keep an add action reachable without decorating the rail.

Tree item .nk-tree-item

The workhorse of the sidebar. Minimum height is 28px, the label truncates with an ellipsis, and the .actions block stays hidden until hover. Add .active for the current page.

Nested tree & toggle arrow .nk-tree-children

Children indent under a guide line. Add .collapsed to fold them away and .open to the arrow to rotate it 90°. Both are plain state classes — the toggling is yours.

Keyboard hint .nk-kbd

nk-kbd-hint pushes a shortcut to the right edge of a row; nk-kbd is the key cap itself. Prefixed on purpose — a bare kbd rule would leak into the host page.

Page column & page options .nk-page

The document column: max-width: 760px with auto margins, never a fixed width. After a cover (.nk-cover + .nk-page, or .nk-page.covered) the icon pulls itself up over it with a negative margin and the page has no top padding; without one the page keeps 24px top padding and the icon sits inside it, fully visible. The title is contenteditable-ready. Notion's two page options are classes on the page: full lifts the 760px cap so the column fills the window, small sets the document text from 16px to 14px, and headings, lead, prose and editor follow because they are sized in em. Title, properties, tables and controls keep their size. In Notion these are options of the single page, in its ⋯ menu, not app settings. The token --nk-page-full-max caps full – none by default; 1080px on :root gives a dashboard of tables room without 1600px lines.

Page properties .nk-props

The properties under the title of a database page – the pattern Notion is known for. One .nk-prop per row: the name with its type icon in a 160px column, the value beside it, both 34px tall with the hover wash, as each half opens its own editor in Notion. Values are ordinary markup: tags, an avatar with a name, a date, a .nk-progress.wide. It replaces .nk-page-meta on a page that is a row. Written as <dl>, <dt> and <dd> it is a description list for assistive technology as well; plain <div>s work the same. A value that is text – a sentence, an address, a model name with a tag – takes .text and flows as text instead of setting its parts one under the other. The value keeps at least 220px: in a column narrower than 380px, a side panel say, it moves under its name. .flush drops the outer margin, for a list inside a panel or a flex column with a gap of its own.

Cover .nk-cover

A decorative band above the page, 200px tall – the token --nk-cover-height, on :root or on one cover; Notion's own takes about 30vh, clamp(200px, 30vh, 300px) comes close. Three radial gradients mixed from the --nk-decor-* tokens over --nk-bg-callout. For a picture put an <img> inside: it fills the band and is cropped, never stretched, and object-position moves the crop, as Notion's “Reposition” does. The gradient stays underneath while it loads.

Headings & lead .nk-heading

nk-heading is the in-document section heading — a flex row, so an emoji sits on the baseline without extra markup. p.lead is the larger intro paragraph inside nk-page.

Callout .nk-callout

A tinted block for the one thought that must not be missed. The icon is a .c-icon child and has a ::slotted() twin, so <nk-callout> can accept it through a slot.

Bookmark .nk-bookmark

Notion's link block: .bm-title, two lines of .bm-desc and the .bm-url with its .bm-favicon on the left, the preview image in .bm-cover on the right – a third of the box, 240px at most, so a 1200×630 og:image fits nearly whole. The whole box is the link, an <a>; fill it from the page's og:title, og:description and og:image. Without an image the text takes the width, without a description the box gets lower. Also the way to show how a shared link will look.

NotionKit – the calm workspace look as CSS NotionKit is a pure CSS component library in the Notion idiom: sidebar, page tree, document shell, database views, settings and AI surfaces. https://notionkit.jungherz.com

To-do .nk-todo

A checkbox with a custom checkmark. The sibling selector input:checked + span strikes the label through — both halves live inside one component, so it survives the move into a shadow root.

Toggle .nk-toggle

Built on native <details>/<summary>, so it opens and closes without a line of JavaScript. The marker is a ::before that rotates on [open].

Quote & divider .nk-quote

A block quote with a solid left rule, plus the horizontal divider. nk-divider is meant for an <hr> and resets the element’s own border.

Inline mentions .nk-mention

Three variants inside running text: .person with a mini avatar, .page underlined in a hairline, .date in the orange tag colour. All are inline-flex and never break mid-mention.

Code .nk-code

A block with a language badge in the corner and two colour hooks — .tag takes the accent, .attr the orange tag colour. nk-inline-code is the in-sentence variant.

Prose .nk-prose

Text the app did not write tag by tag – rendered Markdown, help pages, the HTML an editor saved – takes the document look from one class on its container: headings, paragraphs, lists, task lists, links, inline code, code blocks, quotes, rules, pictures and tables. It reads the very same rules as the editor adapter, so a page shown for reading and the same page in TipTap match to the pixel. Sizes are in em and follow what the text sits in: 16px on a page, 14px with small or in the app chrome. No outer margin on the first and last block, so it sits flush in a panel. An empty paragraph keeps its line, as it had it in the editor.

Class only, on purpose: ::slotted() reaches the slotted node and never a paragraph inside it, so a <nk-prose> element could not style its content. Put the class on a light-DOM container, also inside NotionKit Elements.

View tabs .nk-db-tabs

The strip above a database. The active view sits on the active wash as a pill, the others are plain words — no underline, no rule, as in Notion since 2025. The .badge child carries the row count.

Toolbar & filter pills .nk-db-toolbar

The database header as Notion lays it out: view tabs on the left, the view's tools on the right – .nk-db-tool buttons for Filter, Sort and search, then “New”. A tool in effect takes .active, the accent. Under it, .nk-filter-row holds the filters in effect as .nk-filter-pills – .active with an accent tint – and a quiet .add pill at the end. A pill is one button, or a box with the label button and a .fp-remove × when a filter can be removed in place.

Table view .nk-table

36px rows at 14px, hairlines between rows and columns, header cells quiet and clickable — measured on a live Notion table. A selection column has th.select-all for a header: a checkbox instead of a name – empty, a dash for some rows, a check for all – that sorts nothing; the dash is indeterminate, set by script. Every cell is white-space: nowrap so columns keep their shape; .wrap on the table or on a cell lets text break, like Notion's “wrap column”. .num on a cell sets a number right-aligned in figures of equal width, as Notion does with a number property; the header stays left. .row-actions in a cell sets buttons for the row at its right edge – “Retry”, “Discard” – and th.actions is a header that sorts nothing. .td-text gives a value one of Notion's nine text colours – .orange for an error – and .td-desc a quiet second line under it; the row grows with it. .nk-new-row is the add affordance at the bottom (inside .nk-table the short form .new-row still works).

Tags .nk-tag

The select option as Notion draws it: 20px tall, 3px corners, the cell's 14px, near-black text on a saturated fill (≥ 10:1 in light mode). Nine colours, each a background/text pair per theme; without a colour class it is the grey tag. For coloured text use the --nk-color-* mid-tones, for a soft surface the --nk-tint-* backgrounds.

Progress bar .nk-progress

A 6px rail whose fill is an <i> with a percentage width. Track and fill use Notion's blue tint and mid-tone, so a re-theme carries them along. 110px wide in a cell; wide fills its row – a property value, a panel, a course overview – and in a flex row the label keeps its place beside it; in a flex column it stays a 6px bar. .nk-progress-row holds a bar and its label as one row – in a flex column, a panel, the two would otherwise stand one under the other: the label sits beside the bar, on its middle, and a wide bar fills the rest.

Board view .nk-board

Fixed 220px columns in a horizontally scrolling row. nk-board is display:none by default so it can sit next to a table view; add .active to show it.

List view .nk-list

The third database view: one line per row – icon, title and a few properties on the right – as Notion shows a database under “List”. Hairlines between rows and the hover wash across the whole row, like a table without columns; the last row drops its line. As an <a> each row is a real link. Put it in .nk-database under the view tabs, or use it on its own for any list of pages. A row that is no target itself – a file with its own Remove button – takes .static: no hand, no hover wash.

Calendar view .nk-calendar-view

The database as Notion's month, a view tab like table, board and list: a head with the month and the date picker's .cal-nav buttons, the weekdays, and a .cv-day per day with its .cv-num top right – today's on a red pill – and the rows due that day as .cv-item cards. Days of the month before and after (.out) and days not worked (.off) are washed. weeks adds a column of ISO calendar weeks. The columns share the width, so seven always fit; an item's title ends in an ellipsis.

Gallery view .nk-gallery

The fifth database view: the rows as cards with a picture on top, in a grid that fills the row – Notion's gallery, for a course catalog or a reading list. A card is the board's .nk-card with .card-title and .card-meta; a .nk-cover as its first child runs to the card's edges in 2:1, a picture inside cropped to fill – without one the cover gradient shows. .small and .large set the card size, columns from 180px and 340px instead of 260px; .fit shows a picture whole, for logos. A .nk-new-row at the end becomes the add card. Clicking a card is your script, as with a row of the table. A card to open in a new tab or to copy the address of is a link, <a class="nk-card" href>, in a .card-item that carries role="listitem" – the link keeps its own role – and the card fills it.

🚀 Roadmap

Done📅 12.05.2026

🎨 Design system

In progress📅 20.05.2026

📣 Launch

Planned📅 02.06.2026

＋ New page

Inputs, textarea, select .nk-input

One shared shape for all three: filled with --nk-bg-input inside a hairline, 32px tall at 14px — Notion's input, not an outlined white box. The focus ring is mixed from the accent, so it re-brands with it. .wide makes an input fill its row. Each keeps at least 210px, except inside a panel, where it never runs past the edge of a narrow tile; a field row keeps the 210px there too.

Copy field .nk-copy-field

A value to take along – a link to share, an address, a key – in a field of its own, as tall as an input, with its actions inside on the right. .cf-value holds the text on one line with an ellipsis, and a click selects it whole; .cf-btns are the quiet actions – Copy and, for a secret, Show. .copied on a button is the moment after, in green; the copying is your script. mono for addresses, keys and code, wrap lets a long value break with the actions on its first line, wide fills the row. Like an input it keeps at least 210px, except inside a panel. A button may carry an <svg> beside its word in a <span> – two overlapping squares for Copy, an eye for Show, a check for the moment after – and the word as aria-label: on a phone, and anywhere with icons, the icon stands in for the word, as in Notion, and a masked key keeps a dozen characters more.

jsbtn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(field.querySelector('.cf-value').textContent);
  btn.classList.add('copied');   // green for a moment
  setTimeout(() => btn.classList.remove('copied'), 1500);
});

Date picker .nk-calendar

Notion's month sheet for a date: a title with Today and ‹ ›, the weekdays, six rows of .cal-day buttons. The chosen day is .selected in the accent, today is red; a range runs from .start to .end over .in-range days in the accent's tint. .off greys a day that is not worked – a weekend, a holiday, with its name as title – and .out a day of the month before or after; aria-disabled="true" marks one outside the bounds. .cal-marks holds up to three dots in the nine colours (i.blue, i.red …), for deadlines or milestones. weeks adds the ISO calendar week in front of each row, .cal-foot a time field or actions under the sheet. Cells are 36px, so seven and the week column fill a .nk-pop; put it in .nk-pop.floating.sheet and it is a popover on the desktop and a sheet with 44px cells on a phone. The month, the keys and the value are your script – or <nk-calendar>.

Buttons .nk-btn

Five variants, 28px tall at 14px. .secondary and .danger are Notion's white button: the outline is --nk-shadow-btn, a 1px inset ring plus a 1px drop, not a border. Hover is an opacity shift on the filled ones and a wash on the white ones — never a hue change. .small (24px) combines with any variant. Stretched across a column – a full-width button on a sign-in page – it keeps its label centred.

Switch .nk-switch

Works two ways: as an <input type="checkbox"> via :checked, or as a <button role="switch"> via aria-checked="true". The button form is the accessible default. In a settings row the nk-field label names it; for several switches side by side wrap each in label.nk-switch-label with visible text – the text is part of the hit area.

Checkbox & radio .nk-check

The same 16px box for both; the radio variant is detected by [type="radio"] and becomes a circle with a dot. Marks are ::after content, not images; a checkbox that is indeterminate – a property only, set by script – shows a dash, for a group partly chosen. A label that wraps keeps the box beside its first line, as Notion does.

Slider .nk-slider

A native range input tinted with accent-color: var(--nk-accent) — no custom track markup, so it keeps native keyboard and screen-reader behaviour. nk-slider-value is the readout.

Field row .nk-field

The settings-row primitive: label and description on the left, control on the right, pushed apart by justify-content: space-between. Stack these to build a whole settings pane. stacked puts the label above a full-width control – for textareas and long descriptions; compact shrinks the label to 12px tertiary text and drops the row padding. For several short fields side by side use .nk-fields.

Field grid .nk-fields

Several short fields in one row: a grid of minmax(150px, 1fr) columns that wraps as the width allows. Every direct .nk-field child becomes stacked and compact by itself – a 12px label above a full-width control – so nothing collides. .fit lets the fields share the row instead – two fields in a 560px dialog are two halves, not two thirds and a gap.

Profile row & picture .nk-profile-row

A 56px avatar with its actions beside it, in .pr-actions – upload, change, and the quiet .pr-remove. The gradient matches every other avatar in the system because they all read the same two decor tokens; an <img> inside .big-avatar is a chosen picture, cropped to the circle. square makes it the rounded square of a workspace icon. Choosing the file – a hidden <input type="file"> opened from the button, EXIF rotation, scaling – is your script, or <nk-image-picker>.

AL

Upload image

Change image Remove

Model card .nk-model-card

A radio group rendered as cards. The selected card mixes 6 % of the accent into its background and gets an accent border — both derived, so a re-brand carries them.

Danger zone .nk-danger-zone

Border and title read --nk-danger; the border is 40 % of it via color-mix(), so there is no second red to keep in sync.

Member rows .nk-member-row

Rows separated by a hairline. The “no border on the last row” rule is scoped to the nk-member-list container and has a ::slotted() twin, so it keeps working when a future element projects the rows.

Settings modal .nk-modal

A two-column overlay: nav left, panes right. The backdrop starts at opacity: 0; pointer-events: none; adding .open fades it in and scales the modal from 0.98 to 1. Panes switch with .active. The modal sizes itself – min(960px, 92vw) by min(640px, 86vh) – so it needs no inline dimensions.

Popover base .nk-pop

The shared surface under every floating panel: page background, 10px radius, the three-layer menu shadow. Positioning is the consumer’s job — the class only supplies the surface.

Emoji picker .nk-emoji-grid

An eight-column grid inside nk-pop, with a filter field above and a greyed-out category strip below. Categories light up on hover or with .active.

Context menu .nk-menu

Combine nk-pop with nk-menu. Items take an .m-icon on the left and an .m-shortcut pushed right; .danger turns an item red. A .nk-switch as the last child of an item sits on the right, like “Small text” and “Full width” in Notion's page menu. A menu that floats over the page takes floating and opens and closes with .open, the way the palette does: it fades in and settles from 4px higher and 98 %; closed it takes no clicks and no focus, and where it sits is yours. sheet makes it a bottom sheet on a phone, as Notion's mobile app opens every menu – the same markup, two presentations. A floating menu never grows past the window: a longer one scrolls inside, and --_nk-float-max caps it to the room a script found below or above its anchor. It lies above the modal, the sheet and the dialog, so a menu or a date picker opened from one of them shows over it.

html<div class="nk-pop nk-menu floating sheet open" style="position:fixed; top:48px; right:12px">…</div>

Command palette .nk-cmdk

A ⌘K palette: input row, grouped list, footer with key hints. The keyboard-highlighted row carries .selected — that is the class your arrow-key handler moves around.

Palette: no results .nk-cmdk-empty

What the list shows when the filter matches nothing. Quote the query back so the person can see what was searched for.

Sheet .nk-sheet

Notion's mobile surface for menus, properties and more: the phone's twin of the modal. The backdrop fades, the panel rises from the bottom edge with its top corners rounded and a .sh-grabber on top, and the home indicator keeps its distance. It lies above the tab bar. Like the modal it starts invisible and .open shows it; closed, the backdrop leaves the layout once it has faded. Up to 640px wide, centred on larger screens. Rows inside get 40px, a thumb's height. For a menu that is a popover on the desktop and a sheet on the phone, use .nk-pop.sheet instead.