Pulse UI Studio

Govern the package first, then migrate the apps.

This workspace is the authority for tokens, primitives, tables, filters, overlays, and chart wrappers. We do not fix the product repos until this package feels stable, opinionated, and hard to drift from.

Tokens

One semantic layer

Color, spacing, radius, and chart scales all come from shared tokens instead of app-local naming.

OKLCH Tokens
No repo should redefine the primary palette or semantic states.
Themes

One preset system

Theme presets belong to the package, not the app layer. Products choose presets. They do not invent new theme models.

Ocean
Emerald
Sunset
Typography

One content rhythm

Headings, body text, meta text, and prose content all use one governed scale and article treatment.

H1, H2, H3, H4, body, and meta are package decisions.
Release notes, docs, and glossary pages should read like the same product.
Layout Guides

Theme styles and padding rules

Colors, spacing, and component padding should be legible, documented, and consistent across every repo.

Theme color roles
Primary
Secondary
Accent
Muted
Card
Destructive
Theme presets control these roles globally. Product repos should not re-interpret them or create new semantic colors without a package change.
Padding scale
xsp-2 (8px)
smp-3 (12px)
mdp-4 (16px)
lgp-6 (24px)
xlp-8 (32px)
Tabs padding guide
Content System

Typography and prose belong in foundations

These are package-level text rules, not section-specific quirks.

H1 Heading
H2 Heading
H3 Heading
H4 Heading
Body copy uses the same governed text rhythm.
Meta text uses one shared token scale.

Governed prose content

Release notes, changelogs, glossary pages, and internal docs should all reuse this prose layer.

  • Consistent headings
  • Consistent paragraph rhythm
  • Consistent inline code
Primitives

Core controls the product repos should not re-invent

These are the package-level defaults for action states, selector families, date filters, overlays, and feedback patterns.

Primitive families are now always visible. No hidden tabs. This makes audits and duplicate detection much faster.
Actions
Button standards
SizeHeightHorizontal PaddingText
sm32px12px12px / medium
md40px16px14px / medium
lg44px20px16px / medium
Width rules
Default is auto. Use min for consistent CTA rows andfull only for container-width actions.
Healthy
Watch
Risk
Info
Outline
Selectors
Single select, searchable select, multi-select, and searchable multi-select are one governed selector family.
Controls can vary by data, but they should not vary by styling system.
Multi Select
Searchable Multi Select
Date Filters
Single-date pickers, range pickers, and time presets are one governed date-filter family.
Overlays
Feedback
Empty State

No records yet

Use this as the shared empty-state pattern.

Error State

Request failed

Use this as the shared error-state pattern.

Filter System

Filters differ by data, not by structure

This is the pattern for table-specific variation: controlled filter definitions inside one shared bar.

Workspace Filter Composition
Date range belongs here as part of the governed filter row, not as a standalone showcase.
Table System

Preset summary belongs with tables

Presets are table governance, not filter behavior. Apps choose from sanctioned table modes instead of inventing new shells.

dataset
preset
Search: true
Export: true
Columns: true
Pagination: true
audit
preset
Search: true
Export: true
Columns: true
Pagination: true
embedded
preset
Search: false
Export: false
Columns: false
Pagination: false
PulseDataTable

Dataset preset

Full dataset view with search, export, column visibility, pagination, single-line dense cells, and optional inline row detail.

Revenue Accounts

Primary dataset view. This is the table most Pulse apps should map to.

Nerv Clinical SEO
US West
Chester
$126,340
+12.6%
Healthy
Crux Performance
US Central
Alex
$98,750
+3.2%
Watch
Pulse Email Ops
US East
Mia
$71,420
-1.8%
Risk
Technical SEO Frontend
US West
Jordan
$85,210
+6.4%
Healthy
Showing 1 to 4 of 4
1 / 1
PulseDataTable

Audit preset

Logs and activity streams get the same primitive, but with a leaner expectation around detail treatment.

Recent Audit Events

Audit preset keeps the shared toolbar and density, but not every audit view needs expansion.

Exported domain exclusions
mike@pulse.so
communications/domains
2026-03-31 09:12
Info
Deleted saved filter preset
ana@pulse.so
trends/glossary
2026-03-31 08:27
Warning
Bulk resend job failed
ops-bot
email/pipeline
2026-03-31 07:48
Critical
Showing 1 to 3 of 3
1 / 1
PulseDataTable

Dataset with sparkline cells

Same table preset, with sanctioned sparkline and delta columns for trend context.

Technical SEO Domain Health

Sparkline-as-cell pattern is sanctioned as a dataset variant, not a separate table system.

Trend
drgregpark.com
0
F
0
468
2,390
6,834
1,941
North Coast Plastic Surgery
urogynkc.com
0
F
↓ 15
18
284
667
181
Urogynecology of Kansas
stl-psc.com
0
F
0
131
821
2,448
692
Cabbabe Plastic Surgery
4everyoungantiaging.com
0
F
0
1,338
4,771
17,274
5,120
4Ever Young Anti-Aging
drdavidhecht.com
0
F
0
350
408
2,835
822
David A. Hecht, M.D.
Showing 1 to 5 of 5
1 / 1
PulseDataTable

Keyword table

Keyword datasets use the same table preset with intent badges, column sorting, and export.

Unique Search Terms

Standard keyword table with search, filters, and single-line rows.

artistry of face
Navigational
Branded
—
12,103
1,534
botox albany ny
Transactional
Non-Branded
albany ny
1,515
212
botox loudonville
Commercial
Non-Branded
loudonville
831
96
lip filler albany ny
Transactional
Non-Branded
albany ny
757
84
artistry of face glens falls
Navigational
Branded
glens falls
1,462
174
Showing 1 to 5 of 5
1 / 1
Card System

Governed card templates

One card language across products: KPI metric cards, content cards, action cards, and state cards.

Card templates are package-level primitives. Product repos can change data only, not card spacing, radius, or typography behavior.
Metric Card
KPI value + trend + optional sparkline
Content Card
Title + description + structured body content
Action Card
Header + actions + footer CTA pattern
State Card
Loading, empty, and error card states
Metric Card Grid

Tier metrics with sparkline support

Use this for KPI summaries. Sparkline is optional and governed by the same card primitive.

XXXL

51
avg performance score
7 sites
-4.2%vs prior

XXL

52
avg performance score
8 sites
+1.4%vs prior

XL

61
avg performance score
43 sites
+3.8%vs prior

L

61
avg performance score
66 sites
0.0%flat
Status Cards

Status color samples

Use these status-card treatments for overview panels, queue summaries, and audit buckets.

Healthy
Healthy
214
No blocking issues
Watch
Watch
87
Needs review this sprint
Risk
Risk
34
High-priority intervention
Info
Info
129
Pending verification
Neutral
Neutral
56
Informational only
Card Primitive

Content + actions template

Card title

Structured content card. Reuse this across docs, glossary, and feature views.

Body content uses the same spacing and text rhythm. No local card CSS forks.

Action card

Active

Inline action pattern for card-level controls.

Chart System
Wrapped charts only

Product pages should compose package chart wrappers. They should not define raw chart shells, colors, legends, and tooltip styling on their own.

View package adoption over time.
Current2026
Previous2025
Healthy
Watch
Risk
Chart Style Rules
  • Chart layouts use two columns to keep each visualization readable.
  • Tooltips use rounded cards, subtle shadow, and clear metric labels.
  • Tooltips must escape chart bounds and never clip at container edges.
  • Tooltip values use readable contrast and locale number formatting.
  • Bar hover cursor overlays are disabled to prevent heavy gray highlight blocks.
  • Bars use rounded top corners; stacked bars use the shared status palette.
  • KPI selector charts place the metric tabs in the header.
  • Legend ordering and color roles are governed by the package tokens.
Chart Wrapper

Search Performance

Google Search Console

Chart Wrapper

Adoption Trend

Default trend wrapper for dashboard stories.

Chart Wrapper

Module Coverage

Standard bar wrapper for comparing modules and queues.

Chart Wrapper

Branded vs Non-Branded

Monthly impression split

Chart Wrapper

Conversions Over Time

Bookings, calls, and form submits

Chart Wrapper

Sessions Mix

Organic, paid, and referral sessions

Chart Wrapper

Account Health Mix

Use this for status breakdowns, not one-off chart shells.

Chart Wrapper

Quarterly Comparison

Grouped bars for current vs previous series.

Chart Wrapper

Status Stack

Stacked bars for composition by status.

Sparkline

Mini trend wrapper

compact metric trend
Chart Wrapper

Governance Score

Gauge for completion or quality metrics.

Distribution Chart

Grade distribution

B
C
D
A: 25
B: 48
C: 178
D: 304
F: 2
Chart States

Loading and empty

Empty State

No chart data

Use the same empty pattern when a chart has no series to render.

Workflow Systems

Governed templates for image and audit workflows

These templates absorb the strongest NKP Imager and SuperAudit patterns so every product ships the same workflow shells.

Image Workflow Template
Assimilates NKP Imager patterns into one governed studio shell.
  • Workspace shell: filmstrip, preview, controls, and sidebar
  • Upload zone with empty and drag-over states
  • Validation panel: score ring, category cards, issue list
  • AI preset actions with model selector cards
  • Resizable preview/control split layout
Audit Results Template
Assimilates SuperAudit audit/result patterns into one governed report shell.
  • View header with actions and context bar
  • Score ring and score gauge overview stack
  • Evidence tables for images, links, and headings
  • Details drawer for deep inspection flows
  • Floating action bar for export + actions
Evidence + Review Template
Shared evidence layouts for technical, content, and compliance checks.
  • Status and priority pills mapped to scores
  • Category and keyword bars for coverage + progress
  • Trend chart wrapper with governed tooltip/legend
  • Exportable evidence table structure
Component Templates
Filmstrip + Multi-select
Workflow
nkpimager
Scrollable filmstrip with select all/none, bulk actions, and progress states.
Upload Zone
Workflow
nkpimager
Drag + drop upload shell with empty state, drag-over feedback, and error handling.
Validation Panel
Workflow
nkpimager
Score ring, category cards, and issue list with severity states.
AI Action Presets
Workflow
nkpimager
Quick action chips and model selector cards with tooltips and disabled states.
Resizable Preview Split
Workflow
nkpimager
Drag handle to resize preview vs controls without layout shift.
Stat Cards
Component
superaudit
KPI cards with deltas, trend direction, and semantic colors.
Score Ring
Component
superaudit
Lighthouse-style circular score with label and status mapping.
Score Gauge
Component
superaudit
Four-score overview with consistent color/threshold mapping.
Status + Priority Pills
Component
superaudit
Pass/fail/warn/skip plus priority mapping for issue urgency.
Evidence Table
System
superaudit
Structured evidence tables for images, links, headings, and raw data.
Audit Header + Context Bar
System
superaudit
View header with title, subtitle, actions, and context controls.
Audit Picker
Component
superaudit
Selector for audits with history and comparison support.
Floating Action Bar
Component
superaudit
Sticky action surface for export, apply, and result controls.
Details Drawer
Component
superaudit
Drill-in drawer for check details and evidence review.
Keyword + Category Bars
Component
superaudit
Progress bars for coverage and category breakdowns.
Output Mode Bar + Type Cards
System
superaudit
Primary navigation across audit modes and report types.
Trend Chart Wrapper
System
superaudit
Standard line chart wrapper with tooltip/legend styling.
Governed Component Set
Filmstrip + Multi-select
Upload Zone
Stat Cards
Score Ring
Score Gauge
Evidence Table
Audit Header + Context Bar
Audit Picker
Floating Action Bar
Detail Drawer
Status + Priority Pills
Keyword + Category Bars
Output Mode Bar + Type Cards
Trend Chart

These are the sanctioned building blocks. Product repos can vary the data, not the structural UI pattern.

Section Masters

Release notes, glossary, features, and admin

These are the reusable section masters the other repos should conform to once the governed specs are approved.

Release Template

Release Notes

One governed release-notes pattern for changelogs, releases, and feature updates.

2026-03-31
feature

Governed selectors and multi-selects

Replaced browser-default select paths with governed popover selectors and searchable multi-select.

  • Single selector now uses package styling and content structure
  • Multi-select supports search without inventing a new overlay system
  • Filter bars can vary by data through sanctioned filter types
2026-03-31
improvement

Sidebar and release notes

Added a collapsible sidebar stack and one governed release-notes pattern.

  • Sidebar collapse/expand is now a standard shell pattern
  • Feature and changelog pages can use one consistent release-note structure
Glossary Master
Glossary Master

This is the governed glossary format now: one clean header and one list surface, not a wall of cards.

Governed Variant
A shared package-level variation that multiple apps are allowed to use.
Governance
Preset
A sanctioned combination of component behaviors, such as dataset or audit table defaults.
System
Drift
When a repo recreates a pattern instead of consuming the governed package.
Quality
Features Master
Features Master

This is the master feature/reference section for product capabilities, rollout status, and migration scope.

Workspace filters and tabs
Date range, owners, statuses, and tab counts all live in one governed filter composition instead of page-local wrappers.
Merged from v2/v3 patterns
live
Section metrics and score distributions
Dashboard sections use one metric-card grid and one distribution-bar pattern instead of bespoke KPI rows.
Inspired by PageSpeed dashboards
live
Admin settings layout
Config-heavy screens follow one primary-plus-sidebar master, modeled after the stronger email-dashboard admin flows.
Based on pulse-email-dashboard
beta
Glossary and documentation sections
Glossary, guide, and feature-reference pages should use list rhythm and prose, not stacks of decorative cards.
Assimilating technical-seo and guide pages
planned
Admin Master
Admin Master

This follows the stronger email-dashboard config pattern: primary editing area, operator sidebar, and one lower support surface.

Primary Controls
Operator Sidebar
Pipeline configuration
Schedule and automation windows
Prompt and rules review
API health and audit actions

Admin rules

  • Settings pages should reuse this split layout instead of inventing bespoke config shells.
  • Primary forms stay in the main column; operational helpers and summaries stay in the sidebar.
  • One support surface can sit below for audit, docs, or preview content.
Governance

Strict rules over endless exceptions

If a feature needs a custom table, the default answer is no. It must fit a sanctioned preset or become a deliberate package-level variant.

Keep
  • `dataset`, `audit`, and `embedded` table presets
  • Search, select, and segmented filters through one shared filter bar
  • Inline detail expansion only if the preset allows it
  • Wrapped charts instead of raw chart code in product pages
Kill
  • Ad hoc page-local table implementations
  • Second button systems inside app repos
  • One-off destructive states and menu spacings
  • Custom filter rows with inconsistent heights and wrappers
Migration

Adoption path for the Pulse repos

This documents what is already governed here and what still needs extraction from the product repos.

Core Consolidation Rule

Use one governed component with sanctioned variants. We do not fork new themes for the same component. Example: one PulseDataTable with presets and feature flags, not three separate table systems.

Clone Next
  • pulse-ui-v3: ActivityTimeline + ModuleWorkspaceLayout + ModuleHeader shell rules
  • pulse-ui-v3-site-perf-ui: sticky-column behavior and 25-row default from DataTable variant
  • pulse-insights-app: quick-select date-range composition (7D/14D/30D/90D + month windows + all-time)
  • superaudit: evidence table pattern + check-details drawer + score ring/gauge set
  • pulse-email-dashboard: history timeline table as a sanctioned PulseDataTable audit preset example
  • nkpimager: filmstrip/upload/validation workflow as an optional workspace template family
Stop Using
  • Browser-native select in governed data controls (replaced by package Select family).
  • Repo-local select/dropdown implementations (`select-dropdown`, `StyledSelect`, `MultiSelectPopover`).
  • Date inputs as primary date-range UX (`<input type="date">`) for workspace filters.
  • Duplicate table primitives (`StandardDataTable`, page-local table wrappers, ad hoc CSV/export logic).
  • Multiple changelog/release page shells that differ only by card density.
Repo Assimilation Matrix
RepoDecisionStatusNotes
pulse-ui-v3
Apply
Primary behavior sourceKeep as behavioral reference; package remains source of truth after assimilation.
pulse-ui-v3-site-perf-ui
Apply
Near-cloneMerge sticky first-column and 25-row table defaults, then deprecate duplicate template copy.
pulse-technical-seo-frontend
Deprecate local UI
Direct cloneUse package imports only; remove local `pulse-templates` copy.
pulse-insights-app
Apply selective
High-value patternsAdopt date-range quick-select + workspace shell; retire local duplicate module stack.
pulse-email-dashboard
Apply selective
Useful workflow patternsMigrate history/explorer tables onto PulseDataTable presets; keep workflow semantics only.
pulse-annotations-api
Apply selective
Legacy control layerKeep activity-table behaviors (inline edit/export) as optional table capabilities, not a separate primitive set.
pulse-organic-insights
Partial apply
Domain-specific data appKeep sparkline-as-cell and freshness/status badge semantics; retire local select/table primitives.
pulse-website-search
Skip for now
Low UI valueNot a priority UI source; only keep tooltip/sort affordances if needed.
nkpimager.nkpapps.com
Apply optional
Workflow template sourceKeep filmstrip/upload/validation patterns as optional workspace template family.
superaudit.nkpapps.com
Apply selective
Audit UI sourceAssimilate evidence table, score ring/gauge, details drawer, floating action bar, and output mode bar patterns.