Designer Internal
public

Dashboard

Component Atlas

Live previews of cvxn-ui primitives and heavy surfaces under the selected global theme.

Auth + Core UI

AuthLayout + FormField + FormMessage

Designer

Sign in preview

Preview-only auth shell surface.

Interactive auth is disabled in this demo shell.

Use this block to prototype sign-in variants.

KPI + Info + Status + Progress

Pipeline

4,320

+13% week over week

Activation rate

Target: 58%
62%
On track

62%

Activation coverage

Cards, Lists, and Tables

DataTableCard

Team performance

Canonical table + export actions.

1-4 of 4

Team
Region
Score
AcquisitionNorth America88
LifecycleEMEA79
RetentionAPAC91
Creative OpsLATAM73

1-4 of 4

CardList + DetailPanel + AddStepPanel

Campaign ops board

Dense table + status pillar stack.

Growth cockpit

Metric-first dashboard with chart rail.

Proposal workspace

Coverage matrix + funnel narrative.

Design notes

Use one dominant chart + one list in the hero to avoid cognitive spread.

SimpleTable

StepOwnerETA
Layout draftDesign2d
Theme QAFrontend1d
Gate policyInfra1d

CompactKpiGrid + HorizontalBarList + SimpleAreaChart

Routes 2
Themes 7
Components 32+
UI primitives 32
Data context 3
Flow/shareout 12

Daily usage

MonWedFri

Flow Components

FlowchartCanvas

validatedapprovedIngestSource syncQualifyRule scoringActivateCampaign launch

FlowToolMiniPanel + FlowViewMiniPanel

Standalone NodeDirect renderer handoff

Shareout + Studio Surfaces

ShareoutDeck + Slide primitives

Designer Internal

Q2 Narrative

Theme-aware executive snapshot

Owner

Design Ops

Updated

Today

Signal

Top movement

Leads

4,320

MQL

2,510

Win

355

ShareoutSlide + ShareoutKpiGrid + D3BarChart

ShareoutSlideCanvas + ShareoutSlideElement + ShareoutStudio

Canvas headline

Positioned by grid coordinates.

ShareoutSlideElement can carry inline content blocks.

1/3 · Title

Title

Program context

Charts, Map, and Proposal Surfaces

D3MetricChart + MetricChartCarousel + CanonicalFunnelChart

Velocity

Accepted opportunities

Line mode for momentum.

ChartStudio + InitiativeCoverageMap + FeatureCoverageTable

Canvas

1 objects
CapabilityStarterProDesigner Internal

Theme switching

 No Yes Yes
↳ Local storage persistence Yes Yes Yes

Component gallery

 Yes Yes Yes

Shell, Canvas, and Docs

CanvasLayoutMock + WorkspaceShell

From words to insights in seconds

Canvas mock preview

Question section
Artifacts sidebar
Main stage
Properties panel
Question section Artifacts sidebar Main stage Properties panel
WorkspaceShell Preview
preview-user

Dashboard

Preview Surface

Nested shell sample for export coverage

WorkspaceShell preview content slot.

DocsLayout + DocRenderer

Designer Component Atlas

Canonical references for shared @cvxn/ui surfaces.

Usage

Use this page to compare behavior across themes before shipping.

stable core primitives
beta advanced analytics
GET /api/atlas/components

Demo endpoint block in DocRenderer.

Parameters

NameTypeRequiredDescription
themestringnoTheme key

Response

{ "count": 76 }

Extended Analytics Coverage

Legend + KPI + Gauge + Bullet + Sparkline

North South West

StudioDataTable + MetricScorecard + Slicer + VizSettingsMenu

OwnerInitiativeHealth
DesignAtlas QAGood
EngTheme standardizationWatch
OpsRollout hygieneGood
82% Quality ▲ 7%
3.4d Cycle Time ▼ 4%
91% Coverage ▲ 5%

Pie + Donut + Sunburst + Treemap

Stacked Bar + Stacked Area + Combo + Waterfall

Scatter + Histogram + Box + Violin + Parallel

Heatmap + Radar + Chord + Sankey + Network + Decomp

Gantt + Candlestick + Small Multiples + Word Cloud + Map

Data Context Surfaces

Captured Data Context

76 facts · 43 components · 12 sections

Page: designer:components

Route: /components

Title: Components Atlas

Updated: 2026-04-14T19:38:42.667Z

LabelValueComponentSection
Data context provider route{"pageId":"designer:components","route":"/components","title":"Components Atlas"}TotalDataContextProviderprovider
CVXN UI Component Atlas{"label":"Coverage","title":"CVXN UI Component Atlas","subtitle":"Examples for each canonical component surface."}ContentCard-
Theme-aware{"tone":"success","fill":"soft","size":"sm","dot":true}StatusPill-
Link pill{"href":"/splash","tone":"neutral"}LinkPilllink-pill
Link pill{"href":"/components","tone":"brand"}LinkPilllink-pill
Link pill{"href":"https://designer.internal.ontologer.com","tone":"info"}LinkPilllink-pill
Sign in preview{"eyebrow":"Designer","subtitle":"Preview-only auth shell surface."}AuthLayout-
Emaillead@ontologer.comFormField-
Password••••••••FormField-
Form messageInteractive auth is disabled in this demo shell.FormMessage-
Pipeline4,320KpiCard-
Activation rate62%InfoMetric-
On track{"tone":"success","fill":"soft","size":"sm","dot":true}StatusPill-
62%62%LinearProgress-
Team performance{"label":"DataTableCard","title":"Team performance","subtitle":"Canonical table + export actions."}DataTableCard-
Table export formats{"formats":["csv","xlsx"],"disabled":false}TableExportActions-
Rows per page selection10PageSizePills-
Table summary4DataTable-
Card list status{"rowCount":3}CardListcard-list
Design notes{"hasIcon":true}DetailPanel-
Add-step panel · Add showcase block{"label":"Add showcase block"}AddStepPanelworkflow
Routes2CompactKpiGrid-
Themes7CompactKpiGrid-
Components32+CompactKpiGrid-
Horizontal bars count3HorizontalBarList-
UI primitives32HorizontalBarList-
Data context3HorizontalBarList-
Flow/shareout12HorizontalBarList-
Flowchart canvas summary{"nodes":3,"edges":2,"toolMode":"pan","backgroundMode":"dots","zoom":"100%"}FlowchartCanvas-
validated{"id":"e1","from":"ingest","to":"qualify","connector":"bezier","highlighted":false,"faded":false,"dashed":false,"animated":false}FlowchartEdge-
approved{"id":"e2","from":"qualify","to":"activate","connector":"bezier","highlighted":false,"faded":false,"dashed":false,"animated":false}FlowchartEdge-
Ingest{"id":"ingest","theme":"cyan","highlighted":false,"faded":false,"dragging":false}FlowchartNode-
Qualify{"id":"qualify","theme":"orange","highlighted":false,"faded":false,"dragging":false}FlowchartNode-
Activate{"id":"activate","theme":"neutral","highlighted":false,"faded":false,"dragging":false}FlowchartNode-
Flow tool modeselectFlowToolMiniPanel-
Flow view state{"backgroundMode":"dots","zoomLabel":"100%"}FlowViewMiniPanel-
Standalone Node{"id":"node-1","theme":"orange","highlighted":false,"faded":false,"dragging":false}FlowchartNode-
handoff{"id":"edge-1","from":"A","to":"B","connector":"bezier","highlighted":false,"faded":false,"dashed":false,"animated":false}FlowchartEdge-
Shareout deck mountedtrueShareoutDeck-
Q2 Narrative{"brand":"Designer Internal","subtitle":"Theme-aware executive snapshot","metaCount":2}ShareoutTitleSlide-
Top movement{"accent":true,"caption":"ShareoutSlide + ShareoutKpiGrid + D3BarChart"}ShareoutSlide-
Leads4,320ShareoutKpiGrid-
MQL2,510ShareoutKpiGrid-
Win355ShareoutKpiGrid-
Stage volume{"points":4,"orientation":"vertical","domainMax":240,"hoveredLabel":null,"hoveredValue":null}D3BarChart-
Visualization settings menu{"open":false,"optionCount":6}VizSettingsMenu-
Shareout slide canvas{"columns":18,"rows":10,"padding":20,"showGrid":true}ShareoutSlideCanvas-
Shareout slide element{"colStart":1,"colSpan":10,"rowStart":1,"rowSpan":3,"align":"start","justify":"start"}ShareoutSlideElement-
Shareout slide element{"colStart":1,"colSpan":8,"rowStart":4,"rowSpan":3,"align":"start","justify":"start"}ShareoutSlideElement-
Shareout studio summary{"slideCount":3,"activeSlideId":"s1","activeIndex":0,"showNavigator":true,"allowReorder":true,"allowDuplicate":true}ShareoutStudio-
Daily active users[22,28,25,33,37]D3MetricChart-
Daily active users · Mon22D3MetricChart-
Daily active users · Tue28D3MetricChart-
Daily active users · Wed25D3MetricChart-
Daily active users · Thu33D3MetricChart-
Daily active users · Fri37D3MetricChart-
Trend slides2MetricChartCarousel-
Velocity[22,28,25,33,37]D3MetricChart-
Velocity · Mon22D3MetricChart-
Velocity · Tue28D3MetricChart-

Showing first 60 facts. 16 additional facts are captured.