Kanbien Design System

Governed Pattern Families

These are the recurring UX contracts people rely on across the app, including shell families, secondary chrome, and reusable list-detail reading patterns.

Pattern

Navigation Shell

The shared application-shell rule for top navigation, overflow handling, mobile collapse, and account affordances.

Pattern

Sub-Nav Row

The shared secondary row contract that balances page wayfinding and search without letting either take over the chrome.

Demo

Floating Tab Header

Review material for a floating secondary tab header with counter cards for status, board, or list views.

Pattern

Breadcrumb

The local wayfinding rule for full trails, collapsed middle steps, and compact signpost recovery under width pressure.

Pattern

Search Shell

Gives people a clear, consistent place to search within the current workspace without the shell feeling crowded.

Pattern

Context Nav

Helps people move around the current section, keeping the most important destinations and tools close at hand on both desktop and mobile.

Pattern

Hierarchy Tree

A governed content tree for browsing, selecting, renaming, nesting, and restructuring pages across sidebar, management, and drawer host postures.

Demo

Kanban Column

A Trello-like board review surface that reuses drawer-select for column management and preserves drag plus non-drag card movement.

Demo

List Page Pattern

Provisional composition of list-page structure, page-header placement, dropdowns, filter-panel structure, container-section surfaces, count cards, and list cards.

Pattern

Drawer

The shell-attached side-panel and bottom-sheet grammar used for context-nav drawers and future governed transient workflows.

Demo

Build Work Panel

Review material for the root-admin Build chat panel before behavior lock, canonical proof, verification, and app adoption.

Demo

Chat Workspace

Expanded chat variant with the conversation on the left and a layer/entity workspace with row lists on the right.

Pattern

Display Settings

The grouped theme, magnification, accent, and direction payload pattern hosted inside the signed-off drawer shell.

Pattern

Brochure Page

A public-page composition pattern for hero imagery, value strips, hover mosaics, logo bars, and rich footers.

Pattern

List Record Card

The repeated record-summary and selection pattern extracted from the `List Page` parent template.

Pattern

List Detail Panel

The open-detail reading pattern for one selected record, including header zoning, local errors, and footer traversal.

Pattern

List Detail Split Layout

The master-detail lane relationship that keeps list browsing and open-record reading in one governed page rhythm.