Core UI System (CUIS) — Design System & Visualization Suite

Architecture & Packaging

The CUIS Framework

CUIS is architected as an integrated suite of three autonomous, zero-dependency design kits linked by a clean CSS Custom Property bridge. Each kit works standalone in any web stack, but together they deliver an enterprise-ready design system and data visualization suite.

packages/core <25KB CSS / ~3KB JS

Core UI System

The interface foundation. Semantic design tokens, typography roles, layout primitives, and 13 native HTML5 components with 3-tier density and multi-theme support.

Deterministic compact, standard, comfortable density
Instant light and dark appearance switching
Zero node_modules, pure CSS + vanilla JS controller
WCAG 2.2 AA accessible out of the box

View Components →

packages/viz 19 SVG Charts

Core Data Visualization Kit

Quantitative chart suite. 19 declarative SVG chart types with automatic accessible tabular companions, native tooltips, and zero runtime dependencies.

Declarative JSON spec rendering via CDViz.render()
Automatic paired HTML data table for screen readers
Bars, Donuts, Gauges, Lines, Areas, Bullets, Scatter
Strictly refuses foreign tokens; completely self-contained

View 19 Charts →

packages/diag 11 Diagrams

Core Diagramming Kit

Structural and relational visualization diagrams suite. 11 declarative SVG diagram renderers with clean orthogonal routing and accessible nested outline navigation.

Declarative JSON spec rendering via CDDiag.render()
Accessible nested <details> outline navigator
Mind maps, Flowcharts, Trees, ERDs, Sequences, States
Zero dependencies; zero framework lock-in

View 11 Diagrams →

The Unifying Bridge

Token bridging layer (`packages/bridge`)

How do zero-dependency engines stay visually cohesive without coupling their codebases? The token bridge (bridges/kits.css) translates host theme variables into kit custom properties purely in CSS.

Bridge Spec →

Host App (CUIS)

Declares --cuis-series-1..5, surfaces, and active data-cuis-appearance.

bridges/kits.css

Pure CSS custom property mapping. Zero JS overhead, zero foreign token leakage.

CDViz & CDDiag

Read their native --cdviz-* and --cdiag-* tokens. Never touch CUIS code.

Invariants

Core Principles

Six architectural invariants that govern every layout and component in the suite.

01 / STACK

Stack Owns Vertical Rhythm

Headings, paragraphs, and cards have no margins. The layout container (.cuis-stack or .cuis-stack-tight) owns all spacing.

02 / ROLE

Role: One Role, One Job

Typography has exactly six role sizes. A page uses these strict roles and never introduces arbitrary pixel sizes.

03 / DENSITY

Density Changes Space, Not Type

Density alters padding and gaps (stack, inset, header), leaving typographic scale and readability unchanged.

04 / NATIVE

Native Elements First

Always use the semantic element matching the task: <button> commits, <a> navigates, <table> compares rows, and <dialog> asks for decisions.

05 / INTENT

Intent is Not a Color

Submit is not a color fill. Status is not an action. Color is reserved for semantic state and categorical series tokens.

06 / BOUNDARY

Strict Token Boundaries

Components read only semantic --cuis-* tokens. Foreign framework prefixes are forbidden, keeping the design system completely portable.

Deployment

Quickstart & Installation

Deploy the CUIS suite with zero dependencies in any HTML document or modern web project.

Link the files

Recommended

Include the theme, component stylesheet, and micro-controller directly in your document head:

HTML

<!DOCTYPE html>
<html lang="en" data-cuis-theme="core" data-cuis-appearance="light" data-cuis-density="standard">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Application</title>
  <!-- Theme Primitives & Fallbacks -->
  <link rel="stylesheet" href="packages/core/themes/core.css">
  <!-- Core Component System -->
  <link rel="stylesheet" href="packages/core/cuis.css">
  <!-- Companion Kits (Optional) -->
  <link rel="stylesheet" href="packages/viz/cdviz.css">
  <link rel="stylesheet" href="packages/diag/cdiag.css">
  <link rel="stylesheet" href="packages/bridge/kits.css">
  <!-- Controllers -->
  <script src="packages/core/cuis.js" defer></script>
  <script src="packages/viz/cdviz.js" defer></script>
  <script src="packages/diag/cdiag.js" defer></script>
</head>
<body>
  <div class="cuis-app cuis-stack">
    <header class="cuis-app-header">
      <span class="cuis-page-title">My Application</span>
      <div class="cuis-tools">
        <button type="button" class="cuis-button cuis-button-quiet cuis-button-icon" data-cuis-toggle-appearance aria-label="Toggle appearance">
          <svg class="cuis-icon-dark" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/></svg>
          <svg class="cuis-icon-light" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M6.34 17.66l-1.41 1.41"/><path d="M19.07 4.93l-1.41 1.41"/></svg>
        </button>
      </div>
    </header>
    <main class="cuis-main cuis-stack">
      <article class="cuis-card cuis-stack-tight">
        <h2 class="cuis-card-title">Welcome to CUIS</h2>
        <p class="cuis-body">High-craft UI built entirely on native Web Standards.</p>
        <button type="button" class="cuis-button">Get Started</button>
      </article>
    </main>
  </div>
</body>
</html>

Foundations

Tokens & Theming Architecture

CUIS strictly separates Primitives (raw colors, fonts) from Semantic Tokens (surfaces, actions, text, focus rings, borders). Components consume semantic tokens only, allowing seamless theme switching with zero runtime overhead.

Default System

Core Theme

Balanced, neutral foundation using Source Sans 3 typography and sapphire action styling (#1b4f9c).

Architectural Minimal

Mono Theme

Minimalist black-and-white aesthetic. Features Geist & Geist Mono typography, bone/obsidian surfaces, and crisp hairlines.

Vibrant & Open

Red theme

Inspired by Red Hat. Uses the open-source Red Hat Display and Red Hat Text fonts and a crimson action color (#ee0000). This theme is not a Red Hat product.

Authoring Custom Themes

To author any brand theme, map your typography and surface primitives to the semantic contract in pure CSS. Here is the implementation of the Mono theme:

CSS

/* Mono Theme (Architectural Minimal) */
html[data-cuis-theme="mono"] {
  /* Geist Sans & Geist Mono Typography */
  --cuis-font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cuis-font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cuis-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --cuis-display-tracking: -0.04em;

  /* Monochromatic Actions & Hairlines */
  --cuis-action-primary-background: #111111;
  --cuis-action-primary-text: #f5f5f0;
  --cuis-border-subtle: rgba(17, 17, 17, 0.12);

  /* Five-Tier Grayscale Categorical Series */
  --cuis-series-1: #111111;
  --cuis-series-2: #3f3f46;
  --cuis-series-3: #71717a;
  --cuis-series-4: #a1a1aa;
  --cuis-series-5: #d4d4d8;
}

/* Dark Appearance (Obsidian Canvas) */
html[data-cuis-theme="mono"][data-cuis-appearance="dark"] {
  --cuis-surface-canvas: #111111;
  --cuis-surface-raised: #18181b;
  --cuis-action-primary-background: #f5f5f0;
  --cuis-action-primary-text: #111111;
  --cuis-border-subtle: rgba(255, 255, 255, 0.12);
}

Foundations

Typography System

Exactly six role sizes govern all text. A page uses these strict roles and never introduces arbitrary pixel sizes.

Role Class	Visual Specimen	Size	Weight	Line Height
`.cuis-page-title`	Page Title	1.5rem (24px)	600 / 700	1.25
`.cuis-section-title`	Section Title	1.125rem (18px)	600	1.35
`.cuis-card-title`	Card Title	1rem (16px)	600	1.35
`.cuis-metric`	1,280	1.75rem (28px)	600	1.15 (tabular)
`.cuis-body`	Standard reading and cell copy (max 66ch, pretty)	0.9375rem (15px)	400	1.50
`.cuis-label`	Column headers, captions, metadata	0.8125rem (13px)	500	1.35

Foundations

Space Roles & Density

Density modifies spatial rhythm (stack, inset, header) without altering type sizes. It can be applied globally to <html> or locally to any component.

Space Role	Compact	Standard	Comfortable	Purpose
`--cuis-stack`	1.5rem (24px)	2.0rem (32px)	2.5rem (40px)	Vertical rhythm between major sections and cards.
`--cuis-stack-tight`	0.5rem (8px)	0.75rem (12px)	1.0rem (16px)	Internal spacing between labels, headings, and fields.
`--cuis-inset`	1.0rem (16px)	1.25rem (20px)	1.5rem (24px)	Internal card, drawer, and specimen padding.
`--cuis-header`	3.0rem (48px)	3.5rem (56px)	4.0rem (64px)	Fixed navigation bar clearance.

Compact Density

High Information Density

Ideal for monitoring dashboards, dense tables, and data entry grids.

Active 8px tight / 16px inset

Standard Density

Balanced Baseline

The standard configuration for general purpose applications and portals.

Nominal 12px tight / 20px inset

Comfortable Density

Breathable Layout

Designed for long-form reading, documentation, and executive summaries.

Attention 16px tight / 24px inset

Foundations

Color System & Categorical Series

Chrome remains neutral. The action color highlights interactive controls. Five calibrated series tokens encode categorical data in charts, chips, and bars.

Action
Series 1
Series 2
Series 3
Series 4
Series 5
Status Info
Status Ok
Status Warn
Status Crit

Identity & Iconography

CUIS Brand Mark

The CUIS brand mark is a mathematically constructed scalable vector mark. Built as a regular hexagon with concentric facets radiating from an inscribed solid nucleus, it embodies the compact core architecture of the design system. Designed for crisp rendering across all sizes, from 16px navigation badges to hero displays.

64px Display

36px Footer

24px Masthead

16px Inline

Download SVG Mark View Favicon Asset

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="cuis-brand-mark" aria-hidden="true">
  <!-- CUIS Solid Central Core -->
  <polygon points="14.86,13.65 12,15.3 9.14,13.65 9.14,10.35 12,8.7 14.86,10.35" fill="currentColor" stroke="none" />
  <!-- Concentric Hexagonal Rings & Radiating Struts -->
  <g fill="none" stroke="currentColor" stroke-width="0.95" stroke-linecap="round" stroke-linejoin="round">
    <polygon points="16.94,14.85 12,17.7 7.06,14.85 7.06,9.15 12,6.3 16.94,9.15" fill="none" />
    <polygon points="19.01,16.05 12,20.1 4.99,16.05 4.99,7.95 12,3.9 19.01,7.95" fill="none" />
    <polygon points="21.09,17.25 12,22.5 2.91,17.25 2.91,6.75 12,1.5 21.09,6.75" fill="none" />
    <line x1="12" y1="8.7" x2="12" y2="1.5" />
    <line x1="12" y1="15.3" x2="12" y2="22.5" />
    <line x1="14.86" y1="10.35" x2="21.09" y2="6.75" />
    <line x1="14.86" y1="13.65" x2="21.09" y2="17.25" />
    <line x1="9.14" y1="10.35" x2="2.91" y2="6.75" />
    <line x1="9.14" y1="13.65" x2="2.91" y2="17.25" />
  </g>
</svg>

Components

Button

Purpose: Commit the action named on the label. Limit: Do not use a button for navigation; links navigate.

HTML

<button type="button" class="cuis-button">Primary Action</button>
<button type="button" class="cuis-button cuis-button-quiet">Quiet / Cancel</button>
<button type="button" class="cuis-button cuis-button-icon" aria-label="Settings">
  <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" fill="none">...</svg>
</button>
<button type="button" class="cuis-button" disabled>Disabled</button>

Components

Input & Field

Purpose: Collect a single line of text. Limit: Do not use an input for selecting among known discrete choices; use tabs or a select.

Cluster Name Alphanumeric characters and hyphens only.

HTML

<div class="cuis-field">
  <label class="cuis-label" for="cluster-name">Cluster Name</label>
  <input id="cluster-name" class="cuis-input" type="text" placeholder="e.g. us-east-production-01">
  <span class="cuis-label cuis-measure">Alphanumeric characters and hyphens only.</span>
</div>

Components

Select

Purpose: Pick one value from an enumerated set of options.

Deployment Region

HTML

<div class="cuis-control">
  <label class="cuis-label" for="region-select">Deployment Region</label>
  <select id="region-select" class="cuis-select">
    <option value="us-east">US East (N. Virginia)</option>
    <option value="us-west">US West (Oregon)</option>
  </select>
</div>

Components

Card & Surface

Purpose: Group a title and related content on a raised surface with calibrated elevation. Limit: Never nest cards inside cards.

Compute Cluster Alpha

Operational

Dedicated high-memory compute pool executing continuous background processing pipelines.

Utilization 74%

HTML

<article class="cuis-card cuis-stack-tight">
  <div class="cuis-spread">
    <h3 class="cuis-card-title">Compute Cluster Alpha</h3>
    <span class="cuis-chip cuis-chip-ok">Operational</span>
  </div>
  <p class="cuis-body">Dedicated high-memory compute pool executing continuous pipelines.</p>
  <div class="cuis-bar"><span data-series="1" style="width: 74%"></span></div>
</article>

Components

KPI & Metrics Tiles

Purpose: Display quantitative high-level indicators with tabular numerals and contextual trend status.

Active Workflows

1,482

+12.4% vs prior cycle

P99 Latency

18ms

Across 4 global regions

Throughput Rate

99.98%

Zero dropped events

HTML

<div class="cuis-kpis">
  <div class="cuis-kpi cuis-card cuis-stack-tight">
    <span class="cuis-kicker">Active Workflows</span>
    <p class="cuis-metric">1,482</p>
    <p class="cuis-label"><span class="cuis-chip cuis-chip-ok">+12.4%</span> vs prior cycle</p>
  </div>
</div>

Components

Table

Purpose: Compare homogeneous rows sharing identical column dimensions. Text aligns left; numbers align right in tabular figures (.cuis-num). Limit: Do not rebuild tables with divs.

Service Endpoint	Cluster Region	Status	Replicas	Avg Latency
`api.auth-gateway`	us-east-1	Ready	12	14 ms
`worker.telemetry-ingest`	us-east-1	Ready	24	22 ms
`indexer.document-search`	eu-west-1	Degraded	8	148 ms

HTML

<div class="cuis-table-scroll">
  <table class="cuis-table">
    <thead>
      <tr>
        <th scope="col">Service Endpoint</th>
        <th scope="col">Status</th>
        <th class="cuis-num" scope="col">Replicas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>api.auth-gateway</td>
        <td><span class="cuis-chip cuis-chip-ok">Ready</span></td>
        <td class="cuis-num">12</td>
      </tr>
    </tbody>
  </table>
</div>

Components

Tabs

Purpose: Switch among alternate peer views in the same section without navigation. Limit: Do not use tabs to trigger page navigation.

Primary deployment summary and health vitals are visible.

HTML

<div class="cuis-tabs">
  <div role="tablist" aria-label="Views">
    <button type="button" role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true">Overview</button>
    <button type="button" role="tab" id="tab-2" aria-controls="panel-2" aria-selected="false" tabindex="-1">Settings</button>
  </div>
  <div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Panel 1 content</div>
  <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>Panel 2 content</div>
</div>

Components

Dialog (Modal)

Purpose: Interrupt the user flow to request a decision that blocks the page. Implemented with native HTML <dialog> and backdrop dismiss.

HTML

<button type="button" class="cuis-button" data-cuis-open="my-modal">Open Dialog</button>

<dialog class="cuis-dialog" id="my-modal" aria-labelledby="dialog-title">
  <div class="cuis-stack-tight">
    <h3 class="cuis-card-title" id="dialog-title">Confirm Action</h3>
    <p class="cuis-body">Detailed explanation of the decision.</p>
    <div class="cuis-row">
      <button type="button" class="cuis-button" data-cuis-close>Submit</button>
      <button type="button" class="cuis-button cuis-button-quiet" data-cuis-close>Cancel</button>
    </div>
  </div>
</dialog>

Components

Drawer (Side Sheet)

Purpose: Reveal complementary inspection details, filters, or editing tools beside the primary page canvas.

HTML

<button type="button" class="cuis-button" data-cuis-open="my-drawer">Open Drawer</button>

<dialog class="cuis-drawer" id="my-drawer" aria-labelledby="drawer-title">
  <div class="cuis-stack-tight">
    <h3 class="cuis-card-title" id="drawer-title">Inspector</h3>
    <p class="cuis-body">Supporting copy and controls.</p>
    <button type="button" class="cuis-button cuis-button-quiet" data-cuis-close>Close</button>
  </div>
</dialog>

Components

Chip

Purpose: Name a status or categorical classification. Limit: Chips are never buttons or clickable submit actions.

Neutral Info Tone Ok Status Warning Critical

Series 1 Series 2 Series 3 MK Action Pill

HTML

<!-- Status Chips -->
<span class="cuis-chip">Neutral</span>
<span class="cuis-chip cuis-chip-info">Info Tone</span>
<span class="cuis-chip cuis-chip-ok">Ok Status</span>
<span class="cuis-chip cuis-chip-warn">Warning</span>
<span class="cuis-chip cuis-chip-critical">Critical</span>

<!-- Categorical Series & Special Chips -->
<span class="cuis-chip" data-series="1">Series 1</span>
<span class="cuis-chip" data-series="2">Series 2</span>
<span class="cuis-chip cuis-chip-mark" title="Fixed status mark">MK</span>
<span class="cuis-chip cuis-chip-action">Action Pill</span>

Components

Alert

Purpose: Announce persistent system status or conditions across the canvas. Limit: Do not use alerts for blocking decisions; use a dialog.

Scheduled infrastructure maintenance is planned for Sunday at 02:00 UTC.

Configuration cache refreshed from primary configuration repository.

All cluster worker nodes are healthy and connected.

High memory utilization detected on data ingestion pipeline.

Connection to database failover replica timed out.

HTML

<p class="cuis-alert" role="status">Neutral announcement message.</p>
<p class="cuis-alert cuis-alert-info" role="status">Informational notice.</p>
<p class="cuis-alert cuis-alert-ok" role="status">Operation completed successfully.</p>
<p class="cuis-alert cuis-alert-warn" role="status">Warning: system capacity high.</p>
<p class="cuis-alert cuis-alert-critical" role="status">Critical error occurred.</p>

Components

Capacity & Share Bar

Purpose: Visualize proportional progress, allocation, or quota thresholds cleanly with series tokens.

Series 1 Allocation 65%

Series 2 Allocation 40%

Neutral Share 80%

HTML

<div class="cuis-spread">
  <span class="cuis-label">Category Share</span>
  <span class="cuis-label cuis-num">65%</span>
</div>
<div class="cuis-bar" aria-hidden="true">
  <span data-series="1" style="width: 65%"></span>
</div>

Components

Layout Primitives

Deterministic flex and grid primitives eliminating one-off CSS margins and inline layout styles.

Primitive	Behavior	Standard Use Case
`.cuis-stack`	Vertical column layout with `--cuis-stack` spacing.	Separating page sections and cards.
`.cuis-stack-tight`	Vertical column layout with `--cuis-stack-tight` spacing.	Card interiors, forms, label-value pairs.
`.cuis-row`	Horizontal flex row with wrapping and tight gap.	Button bars, chip lists, filter pills.
`.cuis-spread`	Flex row with `justify-content: space-between`.	Card headers, quota bars with percentage labels.
`.cuis-cluster`	Inline flex group with tight horizontal gap.	Icon + label pairs, badge clusters.
`.cuis-pair`	Label-value metadata row.	Configuration readouts, properties list.

Patterns

Pattern: App Shell

Unified application chrome featuring brand identity, segmented view navigation with SVG icons and counts, and action utilities.

Active Capacity 72%

Patterns

Pattern: Nav-Detail Rail

Sticky navigation and resource browser with interior scrolling (.cuis-roster), active indicator, and filter rail switches.

Cluster Nodes 4 Online

HTML

<div class="cuis-rail">
  <h3 class="cuis-card-title">Rail Roster</h3>
  <div class="cuis-roster">
    <button type="button" aria-current="true">Active Item</button>
    <button type="button">Peer Item</button>
  </div>
</div>

Companion Kits

Core Data Visualization Kit (cdviz)

19 Chart Types

19 zero-dependency, accessible SVG charts seamlessly rendered and themed via CUIS token bridging.

1. Horizontal Bar (`horizontal-bar`)

Proportional category shares comparing operational metrics across geographic regions.

2. Vertical Bar (`vertical-bar`)

Discrete vertical columns with labeled categorical X axis and quantitative Y axis ticks.

3. Stacked Bar (`stacked-bar`)

Composition breakdown across quarterly periods with sequential series tokens.

4. Grouped Bar - Vertical (`grouped-bar`)

Multi-series side-by-side vertical cluster comparison.

5. Grouped Bar - Horizontal (`grouped-bar`)

Multi-series grouped horizontal bars comparing targets against actual delivery.

6. Donut Chart (`donut`)

Proportional part-to-whole allocation with centered summary metric callout.

7. Pie Chart (`pie`)

Solid radial partition comparing resource allocations.

8. Meter Bar (`meter`)

Linear single-metric progress against an operational threshold.

9. Radial Gauge (`gauge`)

Semi-circular speedometer-style gauge dial with threshold markers.

10. Bullet Graph - Horizontal (`bullet`)

Horizontal qualitative ranges with performance bar and target marker line.

11. Bullet Graph - Vertical (`bullet`)

Vertical qualitative ranges comparing quota vs target.

12. Floating Bar / Range (`floating-bar`)

Gantt-style interval spans detailing task start, end, and duration.

13. Line Chart (`line`)

Continuous milestone progression with connected data points.

14. Area Chart (`area`)

Volume progression with translucent gradient fill beneath trendline.

15. Stacked Area Chart (`stacked-area`)

Multi-series cumulative area ribbons detailing volume composition over time.

16. Scatter Plot (`scatter`)

Two-dimensional correlation plot with dual continuous axes and series groupings.

17. Sparkline (`sparkline`)

Streamlined, borderless trend indicator designed for KPI summary cards.

18. Proportional Meter (`proportional-meter`)

Multi-segment horizontal capacity bar with legend chips showing resource allocation.

19. Deterministic Empty State (`empty`)

Deterministic fallback rendering when data array is missing or empty.

Companion Kits

Core Diagramming Kit (cdiag)

11 Diagram Types

11 relational and structural SVG diagram renderers with accessible nested outline navigation.

1. Platform Mind Map (`mindmap`)

Radial contextual relationship mapping around a core central topic.

2. System Context Ecosystem Map (`context-map`)

Hub-and-spoke boundary mapping with categorized upstream, downstream, and external services.

3. Organization Taxonomy Tree (`tree-horizontal`)

Left-to-right drill-down classification taxonomy from root to leaf teams.

4. Governance Hierarchy Tree (`tree-vertical`)

Top-down governance structure with clean stepped orthogonal routing.

5. Release Verification Pipeline (`flowchart`)

Sequential and branching execution pipeline with terminals, steps, and decision gates.

6. Identity & Workspace Schema (`entity-relationship`)

Domain entities with primary/foreign keys and cardinality relationship connectors.

7. Clean Architecture Tiers (`layered-architecture`)

Horizontal architecture tiers detailing components, responsibilities, and boundary flows.

8. OAuth 2.0 Authorization Flow (`sequence`)

Synchronous and asynchronous message exchanges along participant vertical lifelines.

9. Task Lifecycle State Machine (`state-machine`)

Discrete state transitions with triggers, guard conditions, and terminal end states.

10. Prioritization Impact vs. Effort Matrix (`matrix`)

2x2 strategic relationship matrix mapping initiatives across effort and impact quadrants.

11. Platform Evolution Roadmap (`timeline`)

Horizontal chronological spine with milestone checkpoints, stems, and optional phase bands.

Companion Kits

Token Bridging Architecture

How CUIS hosts connect to zero-dependency companion kits without foreign token pollution.

Neither cdviz nor cdiag contain references to --cuis-*. The host maps them by loading bridges/kits.css and setting data-theme from data-cuis-appearance:

CSS

/* bridges/kits.css: Clean mapping without framework pollution */
html[data-cuis-appearance="light"],
html[data-cuis-appearance="dark"] {
  /* Data Viz Mapping */
  --cdviz-series-1: var(--cuis-series-1);
  --cdviz-series-2: var(--cuis-series-2);
  --cdviz-series-3: var(--cuis-series-3);
  --cdviz-bg: var(--cuis-surface-raised);
  --cdviz-surface: var(--cuis-surface-canvas);
  --cdviz-text: var(--cuis-text-primary);
  --cdviz-border: var(--cuis-border-subtle);

  /* Diagrams Mapping */
  --cdiag-series-1: var(--cuis-series-1);
  --cdiag-series-2: var(--cuis-series-2);
  --cdiag-bg: var(--cuis-surface-raised);
  --cdiag-surface: var(--cuis-surface-canvas);
  --cdiag-text: var(--cuis-text-primary);
  --cdiag-line: var(--cuis-text-secondary);
  --cdiag-line-active: var(--cuis-action-primary-background);
}

Core UI System

The CUIS Framework

Core UI System

Core Data Visualization Kit

Core Diagramming Kit

Token bridging layer (packages/bridge)

Core Principles

Stack Owns Vertical Rhythm

Role: One Role, One Job

Density Changes Space, Not Type

Native Elements First

Intent is Not a Color

Strict Token Boundaries

Quickstart & Installation

Link the files

Tokens & Theming Architecture

Core Theme

Mono Theme

Red theme

Authoring Custom Themes

Typography System

Space Roles & Density

High Information Density

Balanced Baseline

Breathable Layout

Color System & Categorical Series

CUIS Brand Mark

Button

Input & Field

Select

Card & Surface

Compute Cluster Alpha

KPI & Metrics Tiles

Table

Tabs

Dialog (Modal)

Drawer (Side Sheet)

Chip

Alert

Capacity & Share Bar

Layout Primitives

Pattern: App Shell

Pattern: Nav-Detail Rail

Core Data Visualization Kit (cdviz)

1. Horizontal Bar (horizontal-bar)

2. Vertical Bar (vertical-bar)

3. Stacked Bar (stacked-bar)

4. Grouped Bar - Vertical (grouped-bar)

5. Grouped Bar - Horizontal (grouped-bar)

6. Donut Chart (donut)

7. Pie Chart (pie)

8. Meter Bar (meter)

9. Radial Gauge (gauge)

10. Bullet Graph - Horizontal (bullet)

11. Bullet Graph - Vertical (bullet)

12. Floating Bar / Range (floating-bar)

13. Line Chart (line)

14. Area Chart (area)

15. Stacked Area Chart (stacked-area)

16. Scatter Plot (scatter)

17. Sparkline (sparkline)

18. Proportional Meter (proportional-meter)

19. Deterministic Empty State (empty)

Core Diagramming Kit (cdiag)

1. Platform Mind Map (mindmap)

2. System Context Ecosystem Map (context-map)

3. Organization Taxonomy Tree (tree-horizontal)

4. Governance Hierarchy Tree (tree-vertical)

5. Release Verification Pipeline (flowchart)

6. Identity & Workspace Schema (entity-relationship)

7. Clean Architecture Tiers (layered-architecture)

8. OAuth 2.0 Authorization Flow (sequence)

9. Task Lifecycle State Machine (state-machine)

10. Prioritization Impact vs. Effort Matrix (matrix)

11. Platform Evolution Roadmap (timeline)

Token Bridging Architecture

Token bridging layer (`packages/bridge`)

1. Horizontal Bar (`horizontal-bar`)

2. Vertical Bar (`vertical-bar`)

3. Stacked Bar (`stacked-bar`)

4. Grouped Bar - Vertical (`grouped-bar`)

5. Grouped Bar - Horizontal (`grouped-bar`)

6. Donut Chart (`donut`)

7. Pie Chart (`pie`)

8. Meter Bar (`meter`)

9. Radial Gauge (`gauge`)

10. Bullet Graph - Horizontal (`bullet`)

11. Bullet Graph - Vertical (`bullet`)

12. Floating Bar / Range (`floating-bar`)

13. Line Chart (`line`)

14. Area Chart (`area`)

15. Stacked Area Chart (`stacked-area`)

16. Scatter Plot (`scatter`)

17. Sparkline (`sparkline`)

18. Proportional Meter (`proportional-meter`)

19. Deterministic Empty State (`empty`)

1. Platform Mind Map (`mindmap`)

2. System Context Ecosystem Map (`context-map`)

3. Organization Taxonomy Tree (`tree-horizontal`)

4. Governance Hierarchy Tree (`tree-vertical`)

5. Release Verification Pipeline (`flowchart`)

6. Identity & Workspace Schema (`entity-relationship`)

7. Clean Architecture Tiers (`layered-architecture`)

8. OAuth 2.0 Authorization Flow (`sequence`)

9. Task Lifecycle State Machine (`state-machine`)

10. Prioritization Impact vs. Effort Matrix (`matrix`)

11. Platform Evolution Roadmap (`timeline`)