Product Design
Patterns, components & craft. The living pattern library and research foundations. Interactive examples that match production.
We build interfaces that feel like a sharp colleague who knows your data inside out — not another generic admin tool. Work Sans. Tight tracking. Spectrum used literally with frequency field. (Full content migrated from n2-ux pattern library.)
UX Patterns
Input Types & Form Fields
We use a small, consistent set of input primitives across flows, record editing, lists, and filters. Goal: speed and familiarity — not "yet another control". Prefer the real shared components (EditableParameter for attributes, the exact filter bar pattern) when possible.
When to use: Free-form data → text / multiline. Constrained choices → Select. Multiple flags → Checkbox group. Temporal → date. Discovery → icon-prefixed search InputBase + chips. Attributes in drawers → inline EditableParameter (click/pencil to edit, Enter/Esc to commit).
Screenshot from source + full live examples available in original n2-ux (using our tokens + patterns). See "FILTER / SEARCH", "TEXT", "SELECT" demos in source.
Form Builders
The form builder is the core of n2flow: define reusable forms by selecting fields from a table schema. Supports sections, role-based access, custom field types (range, tabular), and one-time use for schema fields.
When to use: For data collection flows where structure comes from existing tables. Use "click to add" from palette, drag to sections, set required/readOnly. Preview mode for validation. Publish to use in flows.
Permissions / Access matrix: /settings/users provides a dashboard with role assignment + domain/table access matrix (compact grid overview + per-user expandable inline selects for Owner/Editor/Read/None). Edits are immediate (demo persisted to localStorage). Follows raw MUI + T tokens; supports n2Demo tints.
Screenshot from source of the working replica (interactive — click fields to add). Production note: In real flows and drawers we import the shared EditableParameter and use the exact filter bar implementation shown in the Table Patterns section above. These examples are faithful recreations using the same tokens and sizing.
n2flow Patterns
n2flow uses a consistent list + focused detail pattern for import and collection jobs. Emphasis on current step ownership, progress visibility, and review actions.
When to use: For any multi-step data collection. List for overview + actions; detail for step execution with data review + comments.
Screenshots from source: "Interactive Example — Flows List" (rows + Remind updates live), and detail view with current step, owner, actions. See source for the full replica.
Status Chips & Tags
Color-coded status indicators, priority tags, and filterable labels used throughout dashboards and tables. (Source has detailed examples with live updates.)
Screenshot from source of the chips & tags demo (with interactive states).
Dashboard & Activity
Activity feeds, KPI cards, recent items, and notification patterns with consistent interaction models. (Source shows live activity log patterns.)
See source "Activity Log" page and dashboard demos for full interactive versions.
Table & Datagrid Patterns
Sortable, filterable, paginated tables with row actions, bulk selection, and inline editing. (Source has full "EditableParameter" and filter bar demos.)
Screenshot from source of the table patterns with production notes on shared components.
Navigation, Overlays & Feedback
Side nav, breadcrumbs, modals, drawers, toasts, and saving states. Theming and responsive behavior. (Source details progressive disclosure, drawers, etc.)
Screenshots from source for the navigation and overlay patterns.
States & Theming
Loading skeletons, empty states, error handling, and the platform-wide theme system (light/dark, brand tokens). (Source emphasizes "Revealing complexity only when needed".)
See source for the full theming and states demos.
Information Architecture
The structure and organization of content, data, and navigation across the platform. Defines how Schemas, Domains, Tables, Views, and Projects relate to each other and how users discover and navigate information.
- Hierarchical navigation (Schema → Domain → Table → Record)
- Cross-domain relationships and Projects as ad-hoc collections
- Taxonomy, labels, and search discoverability
- Consistent mental models for data and workflows
Inspired by IA principles: clear hierarchy for findability + polyhierarchy for real user collections + facets/wayfinding for discovery and orientation. (From source IA diagram and data model visual - described in text.)
UX Research Methodologies
Card sorting, tree tests, mental model interviews, and more. Inspired by the same IA principles that shaped our data model.
Details coming soon (from source).
Live Clickable Pattern Examples
Full source screenshot of the Product Design interactive demos (LIVE EXAMPLES and WORKING REPLICA):
LIVE EXAMPLES from source (matching studio / flow / drawer implementations using our tokens + patterns). The demos below are interactive and clickable — they recreate real core app (localhost:5173) behavior using the documented patterns.
FILTER / SEARCH (LISTS & TABLES) — Interactive
Real behavior: typing or clicking a chip instantly filters the list. Matches core filter bar + status chips.
TEXT / SELECT / DATE / INLINE EDITABLE (from Input Types)
Matches Select + MenuItem in FlowDetail.
Directly mirrors form step controls.
This is the EditableParameter pattern. Click or pencil → InputBase focused, Enter to save, Esc to cancel. Hover affordance on T.bgSoft. Production note: In real flows and drawers we import the shared EditableParameter and use the exact filter bar implementation shown in the Table Patterns section above. These examples are faithful recreations using the same tokens and sizing.
Form Builders - WORKING REPLICA (from source)
The form builder is the core of n2flow: define reusable forms by selecting fields from a table schema. Supports sections, role-based access, custom field types (range, tabular), and one-time use for schema fields.
When to use: For data collection flows where structure comes from existing tables. Use "click to add" from palette, drag to sections, set required/readOnly. Preview mode for validation. Publish to use in flows.
Permissions / Access matrix: /settings/users provides a dashboard with role assignment + domain/table access matrix (compact grid overview + per-user expandable inline selects for Owner/Editor/Read/None). Edits are immediate (demo persisted to localStorage). Follows raw MUI + T tokens; supports n2Demo tints.
FORM BUILDER — Interactive (click fields in palette to add)
Production note: one-time use, role matrix, custom field types.
n2flow Patterns (from source)
n2flow uses a consistent list + focused detail pattern for import and collection jobs. Emphasis on current step ownership, progress visibility, and review actions.
When to use: For any multi-step data collection. List for overview + actions; detail for step execution with data review + comments.
Matches core /flows behavior (selection, Remind action, step state).
Status Chips & Tags (from source)
Chips and small tags are used heavily in the flows list and My flows for status, filters, "Stalled" indicators, and lightweight metadata. They must be scannable at a glance, use consistent sizing, and avoid error-like colors for non-error states (e.g. stalled).
When to use: Status filter bar (interactive), row-level status, temporary "Stalled" / "Reminder sent" callouts, domain/duration badges.
N2 DEMO THEME REPLICAS (using redStatus + status tokens). (Source screenshot for the full demo.)
Table & Datagrid Pattern (from source)
We deliberately avoid heavy generic DataGrids. Our tables + filter bars + drawers keep the experience feeling like a material data tool.
When to use: Click row → rich record drawer. Checkboxes/Cmd+click → selection state + Secondary Action Bar. Search/filter cluster always shown for discovery. Secondary bar (soft bg + bottom border) only for batch/contextual actions.
| ID | Name | Status |
|---|
Selection → action bar. Click name cell to inline-edit. Matches core datagrid rules.
Navigation (from source)
The deliberate hierarchy: Left nav → In-page tabs → Breadcrumbs → Drawers. Each has live examples in source.
Source: "The deliberate hierarchy we reach for when building new features."
Overlays: Modals & Drawers / Saving, Drafts & Feedback (from source)
Every meaningful save must produce visible, immediate feedback. Drawers for focused editing (same patterns as record details: 3-col extended, sort, visuals, inline EditableParameter everywhere).
States (from source)
Revealing complexity only when needed (progressive disclosure).
Theming — n2 Branding & Marketing Theme (from source)
Work Sans. Tight tracking. Spectrum + Frequency Field used literally. Reds that pop for marketing interactions (focus rings, CTAs). Import N2_MARKETING theme for external-facing work.
See source for full n2Demo theme replicas and CSS var application.
Navigation + Buttons Demo (interactive)
Real nav updates content. Buttons trigger feedback. Drawer slides in.
Buttons, Actions & Feedback — Interactive
UI Component Library
The shared component system (buttons, inputs, cards, data displays, feedback, navigation primitives) with usage guidelines, variants, and code examples.