Contents

  1. ARC — Agent for Revenue & Client Management
  2. Pyrometrix — Fire Safety Compliance Platform
  3. PFP — (Pyrometrix skin alias)
  4. Nesto — Warehouse Automation Platform
  5. Endo — AI Intelligence Platform (Endo)
  6. Orion — Orion Edge IoT Intelligence
  7. Plato — Sports Academy Operations
  8. SignalForge — Quant Intelligence Platform
  9. AER — Augmented Equipment Register
  10. AES — Assessment Engine Service
  11. EDR — Enhanced Data Repository v6
  12. CA-KB — CA Knowledge Base Graph Builder

ARC — Agent for Revenue & Client Management

Freelance / CRM 02_ARCHITECTURE.md §5

Color Palette

Pastel pink + pastel orange dual-brand light theme. Source: 02_ARCHITECTURE.md §5.1.

TokenHexUsage
primary-50#FFF5F0Page backgrounds
primary-100#FFE8D6Card backgrounds, subtle fills
primary-200#FFD1B2Hover states
primary-300#F4A261Primary accent (pastel orange)
primary-400#E8924APrimary hover / active
primary-500#D4803APrimary text on light bg
secondary-50#FFF0F3Alternate backgrounds
secondary-100#FFD1DCSecondary card backgrounds
secondary-200#FFBCCCSecondary hover
secondary-300#F2A0B5Secondary accent (pastel pink)
secondary-400#E8899ESecondary hover / active
secondary-500#D47388Secondary text
neutral-50#FAFAFALightest neutral
neutral-100#F5F5F5Borders, dividers
neutral-200#E5E5E5Input borders
neutral-700#404040Body text
neutral-900#171717Headings
success#4ADE80Positive sentiment, paid
warning#FBBF24Pending, attention needed
danger#F87171Overdue, negative sentiment
#F4A261
#F2A0B5
#FFE8D6
#FFD1DC
#171717
#4ADE80
#FBBF24
#F87171

Typography

font-family (body/headings)Inter (Google Fonts)
font-family (monospace)JetBrains Mono
heading font-weight600–700
body font-weight400
font-size detailnot specified in source (Tailwind utilities)

Component Specs

card border-radius12px
spacing grid8px base
button stylepill-shaped (pill badges); FAB for primary actions
card shadowsubtle (Tailwind shadow-sm / shadow-md)
layoutcard-based; slide-out panels; skeleton loaders
event types / coloursdeadline=red, meeting=blue, reminder/follow_up=orange, project_start=green, custom=gray

Framework / Build

frontend frameworkNext.js 14 (React) + TypeScript
styling systemTailwind CSS (custom theme)
chartsRecharts
calendar widgetFullCalendar
i18ni18next (PL/EN)

Pyrometrix — Fire Safety Compliance Platform

Industrial / Fire Safety style-guide.html + demo-spa.html

CSS Custom Properties — style-guide.html

/* ---- Backgrounds ---- */ --color-bg-primary: #1E1E24; /* Phantom — content panels */ --color-bg-surface: #2D2E38; /* Derived — cards / table rows */ --color-bg-elevated: #40424D; /* Arsenic — outer page bg */ --color-bg-light: #EDEFF7; /* Cloud — light section bg */ /* ---- Grey scale ---- */ --color-grey-phantom: #1E1E24; --color-grey-arsenic: #40424D; --color-grey-graphite: #6E7180; --color-grey-space: #9DA2B3; --color-grey-steel: #BCBFCC; --color-grey-smoke: #D3D6E0; --color-grey-cloud: #EDEFF7; --color-grey-black: #000000; /* ---- Accent (brand orange) ---- */ --color-accent-primary: #CC5600; /* Brand accent primary */ --color-accent-secondary: #FFA566; /* Brand accent secondary */ --color-accent-hover: #FFA566; /* Hover state */ --color-accent-muted: rgba(204,86,0,0.15); /* Accent overlay */ /* ---- Text ---- */ --color-text-primary: #FFFFFF; /* Primary text on dark bg */ --color-text-secondary: #9DA2B3; /* Space */ --color-text-muted: #6E7180; /* Graphite */ --color-text-dark: #1E1E24; /* Phantom — text on light bg */ /* ---- Borders ---- */ --color-border: rgba(255,255,255,0.10); /* On dark */ --color-border-light: rgba(0,0,0,0.10); /* On light */ /* ---- Status ---- */ --color-status-green: #22C55E; /* Compliant / pass */ --color-status-amber: #F59E0B; /* Warning / review required */ --color-status-red: #EF4444; /* Non-compliant / fail */ --color-status-blue: #3B82F6; /* Informational */ /* ---- Typography ---- */ --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif; --font-size-hero: clamp(2.5rem, 5vw, 4.5rem); --font-size-h1: clamp(2rem, 4vw, 3.25rem); --font-size-h2: clamp(1.5rem, 3vw, 2.25rem); --font-size-h3: clamp(1.25rem, 2.5vw, 1.75rem); --font-size-h4: 1.25rem; --font-size-body: 1rem; --font-size-small: 0.875rem; --font-size-label: 0.75rem; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; --line-height-tight: 1.15; --line-height-base: 1.6; --line-height-relaxed: 1.8; --letter-spacing-wide: 0.08em; --letter-spacing-wider: 0.15em; /* ---- Spacing ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---- Border radius ---- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); /* ---- Transitions ---- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ---- Layout ---- */ --grid-max-width: 1280px; --grid-gutter: var(--space-8); /* 32px */

Component Overrides from demo-spa

Source: e:/repos/CodeZero/Pyrometrix/docs/demo-spa.html <style> block only. These override/supplement the style-guide values in the interactive demo SPA context.
ComponentPropertyValue
base bodybackground#1e1e1e (slightly lighter than style-guide bg-primary)
base bodycolor#cccccc
base bodyfont-family'Segoe UI', Arial, sans-serif (runtime override of Manrope)
base bodyfont-size13px
header / topbarbackground#1a1a4a (dark navy — brand variant)
header / topbarborder-bottom2px solid #c62828 (brand red accent)
header / topbarheight48px
left panel (sidebar)background#252526
left panel (sidebar)border-right1px solid #3c3c3c
right panel (content)background#1e1e1e
panel section headbackground#2d2d2d
scenario tab activebackground#c62828 (brand red)
scenario tab activecolor#fff
scenario tab hoverbackgroundrgba(255,255,255,.18)
table row hoverbackground#272727
table alternating rowsnot specifiedhover only — no :nth-child alternation in demo-spa
badge: tag-passbackground / color#1b5e20 / #a5d6a7
badge: tag-failbackground / color#7b1fa2 / #ce93d8 (purple scheme)
badge: tag-openbackground / color#1565c0 / #90caf9
rs-badge.passbackground / color#1b5e20 / #a5d6a7
rs-badge.failbackground / color#7b1fa2 / #ce93d8
rs-badge.redbackground / color#b71c1c / #ef9a9a
status-dot.passbackground#4caf50
status-dot.failbackground#ef5350
pass-cell (table)color / weight#66bb6a / 600
fail-cell (table)color / weight#ef5350 / 600
compliance-bar.passbackgroundrgba(27,94,32,.75)
compliance-bar.failbackgroundrgba(183,28,28,.75)
compliance-bar.warnbackgroundrgba(191,54,12,.75)
evaluate buttonbackground#c62828
evaluate button hoverbackground#e53935
evaluate button disabledbackground / color#3c3c3c / #555
input fieldbackground / border / color#3c3c3c / 1px solid #555 / #ddd
active btn-group buttonbackground / border-color#1a1a4a / #5c6bc0

PFP — Pyrometrix Skin Alias

Pyrometrix Client Sub-Brand T-25 spec note
PFP org inherits the Pyrometrix skin directly with no colour overrides. See §Pyrometrix above for the complete token set. Source: NEXUS_SPRINT5_PLAN.html T-25 spec: "PFP org inherits the same skin — add a one-line §PFP entry pointing to Pyrometrix."

Nesto — Warehouse Automation Platform

Logistics / Warehouse NESTO_STYLE_GUIDE.html

CSS Custom Properties

/* ---- Backgrounds ---- */ --color-bg-primary: #080E1A; --color-bg-surface: #0F1E35; --color-bg-elevated: #0C1826; /* ---- Accent (Nesto electric blue + teal) ---- */ --color-accent-primary: #0094FF; /* Vibrant blue */ --color-accent-hover: #2BADFF; --color-accent-secondary:#006DB3; --color-accent-tertiary: #00C8A0; /* Teal — secondary brand */ /* ---- Text ---- */ --color-text-primary: #FFFFFF; --color-text-secondary: #B8C7D8; --color-text-muted: #6B7F94; /* ---- Border ---- */ --color-border: rgba(0, 148, 255, 0.15); /* Blue-tinted */ /* ---- Status ---- */ --color-status-green: #22C55E; --color-status-amber: #F59E0B; --color-status-blue: #3B82F6; --color-status-red: #EF4444; /* ---- Typography ---- */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; /* ---- Spacing (denser than Pyrometrix) ---- */ --space-1: 0.15rem; --space-2: 0.25rem; --space-3: 0.375rem; --space-4: 0.5rem; --space-5: 0.75rem; --space-6: 1rem; --space-8: 1.25rem; --space-10: 1.5rem; --space-12: 2rem; --space-16: 2.5rem; /* ---- Border radius ---- */ --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; /* ---- Transition ---- */ --transition-base: 250ms ease;

Palette

#080E1A
#0F1E35
#0094FF
#2BADFF
#00C8A0
#006DB3
#22C55E
#F59E0B
#EF4444
Nesto uses a deep navy background with electric blue primary accent and teal secondary. No radius-sm defined in source. Shadow values: not specified in NESTO_STYLE_GUIDE.html (assume same pattern as Pyrometrix). Font-weight scale and detailed font sizes: not specified in source.

Endo — AI Intelligence Platform

AI / SaaS Platform docs/brand_identity.html
Source: Endo/docs/brand_identity.html. This file is marked as a HISTORICAL DOCUMENT (warning banner present). Endo/website/mockups/ contains only README.md — no HTML file found there. Live site referenced: https://endo.pryzmat.media/

CSS Variables from brand_identity.html

/* ---- Core darks ---- */ --endo-dark: #0A0A0A; --endo-dark-alt: #1A1A1A; --ink: #0A0A0A; --ink-700: #1A1A1A; /* ---- Primary (historical spec — green) ---- */ --primary: #178C56; /* Early brand spec — green */ --primary-lt: #EFF6FF; --primary-mid: #BFDBFE; /* ---- Orange accent ---- */ --orange: #F97316; /* Logo span accent, footer links */ --orange-dk: #EA6B00; --orange-lt: #FFF7ED; /* ---- Page / surface ---- */ --page: #F8FAFC; --green: #10B981; /* ---- Slate scale ---- */ --slate-700: #334155; --slate-600: #475569; --slate-500: #64748B; /* inferred — standard Tailwind slate-500 */ --slate-400: #94A3B8; --slate-200: #E2E8F0; --slate-100: #F1F5F9;

Swatch Colors (from embedded swatches)

#0A0A0A
#0F172A
#1E293B
#2563EB
#F97316
#178C56
#10B981
#F8FAFC

Typography

font-family (headings)'Montserrat', sans-serif
font-family (body)'Open Sans', sans-serif
h1 size2.5rem, weight 700
h2 size1.5rem, weight 700
h3 size1.1rem, weight 600

Component Specs

section border-radius12px
swatch border-radius10px
prop-card border-radius8px
swatch box-shadow0 2px 8px rgba(0,0,0,0.08)
header backgroundvar(--ink) = #0A0A0A, color white
logo accent spancolor: var(--orange) = #F97316
footer backgroundvar(--ink-700) = #1A1A1A
button shadownot specified in source
This is a historical document. Button style details (border-radius, padding, hover state) not specified in brand_identity.html beyond colour variables. For current brand: see live site at https://endo.pryzmat.media/

Orion — Orion Edge IoT Intelligence

IoT / Edge Computing NEXUS_USECASE_ORION_EDGE.html
T-29 search result: UVWeb/templates/products/ — no orion*.html. UVWeb/routes/ — no orion route. UVpolicies/ — no canonical Orion URL. Source: NEXUS_USECASE_ORION_EDGE.html (inlined CSS).

CSS Custom Properties

/* ---- Orion dark-green theme ---- */ --color-bg-primary: #0A0C10; --color-bg-surface: #131820; --color-bg-elevated: #0F1318; --color-accent-primary: #19E28A; /* Orion-green */ --color-accent-hover: #14c278; --color-accent-dim: rgba(25,226,138,.10); --color-accent-border: rgba(25,226,138,.18); --color-text-primary: #E6FFF4; /* Green-tinted white */ --color-text-secondary: #8AB5A0; --color-text-muted: #4E7868; --color-border: rgba(25,226,138,.08); --color-border-mid: rgba(25,226,138,.14); --color-status-green: #19E28A; --color-status-amber: #F59E0B; --color-status-blue: #4F8EF7; --color-status-red: #EF4444; --color-status-purple: #A78BFA; --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Consolas', 'Courier New', monospace; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; --transition-base: 220ms ease;

Palette

#0A0C10
#131820
#19E28A
#14c278
#E6FFF4
#8AB5A0
#4F8EF7
#A78BFA

Plato — Sports Academy Operations

Sports Academy / Ops Management NEXUS_USECASE_PLATO.html + Kairos_SOW.html
NEXUS_USECASE_PLATO.html shares the same CodeZero dark-green template CSS as Orion (same --color-accent-primary: #19E28A etc.). See §Orion for the shared CSS variable set. UVexpansionPlan: no Plato-specific materials. No prototype URL found.

Inherited Template Skin

NEXUS_USECASE_PLATO.html uses identical CSS custom properties to Orion. Plato inherits the CodeZero dark-green template with no org-specific overrides. See §Orion CSS block for full variable set.

Domain Context

clientFundacja Akademia Mistrzow — Kairos Sports Foundation
domainSports Academy / Operations Management
system descriptionPipeline-driven operations platform for multi-academy sports foundation

Kairos Brand (from Kairos_SOW.html)

The Kairos Statement of Work has distinct branding separate from the CodeZero template used by NEXUS_USECASE_PLATO.html. The Kairos brand uses:
TokenValueUsage
brand primary#2E00D6Headers, brand text, dividers
brand vibrant#3300ffSection headings
accent table header#2E00D6 bg, white textTable header rows
page background#f9f9f5Cream/off-white
text color#333 (body), #000000 (data cells)Standard text
font-familyArial, sans-serifBody and headings
section bgwhiteContent panels
Kairos SOW branding is a standalone document style, not a SaaS product skin. Plato's product UI skin would follow the CodeZero dark-green template. No prototype website URL found in docs or UVexpansionPlan.

SignalForge — Quant Intelligence Platform

Fintech / Quantitative Trading NEXUS_USECASE_SIGNALFORGE.html

Template Skin

NEXUS_USECASE_SIGNALFORGE.html uses the CodeZero dark-green template (same as Orion/Plato/AER/AES/EDR). --color-accent-primary: #19E28A. See §Orion for full CSS variable set.

Domain Context

one-lineAI-driven quantitative trading platform — end-to-end quant pipeline
org slugsignalforge

ChameleonBI Placeholder Image Requirements

Analytics widget types visible in SignalForge modules that do NOT exist in standard ChameleonV2 FormNode/NavMenu components and therefore require ChameleonBI placeholder images:

  • Cumulative Equity Curve — strategy return vs benchmark, dual line chart with fill area
  • Monte Carlo Simulation Paths — percentile band chart (5th/25th/50th/75th/95th), equity path fan
  • Return Distribution Histogram — daily/weekly return frequency distribution
  • Sector Allocation Donut Chart — Technology, Healthcare, Financials, etc. (from Portfolio module)
  • Trade Distribution (R Multiple Histogram) — trade outcome frequency by R multiple
  • Walk-Forward Validation Chart — in-sample vs out-of-sample performance bands
  • Maximum Drawdown Chart — peak-to-trough equity decline over time
  • Factor Performance Heatmap — Momentum/Trend/Volatility/Value/Quality signals vs time
  • Signal Ranking Leaderboard — tabular with score sparklines and status badges (Signal Tournament)
  • CAGR vs Benchmark Comparison Bar — side-by-side bar for strategy vs index
  • Monte Carlo Scenario Ending Equity Distribution — return distribution panel alongside equity paths
Source: NEXUS_USECASE_SIGNALFORGE.html §Backtest Engine section (lines 485–495) and Module cards (lines 306–378). ChameleonV2 does not support chart-type pipeline nodes; these require ChameleonBI chart node type (future capability).

Platform Modules Summary

ModuleKey Features
Market DashboardMarket Bar, System Status, Notifications, Plan Badge
Signal LabFactor Builder, Universe Filter, OOS Validation, LLM Analysis, Walk-Forward, Tournament Submit
BacktestsCAGR vs Benchmark, Monte Carlo, Scenario Testing, R Multiple, AI Intelligence Panel, Strategy Comparison
PortfolioHoldings + Conviction, Sector Allocation (donut), Agent Baskets, Paper Trades, Exposure Summary, Multi-Wallet
Pipeline7-Stage Pipeline, Multi-Agent, Live Toggle, Broker Connections, Scheduled Runs
TournamentSignal Ranking, Submit Signal

AER — Augmented Equipment Register

Oil & Gas / Industrial Engineering NEXUS_USECASE_AER.html

Template Skin

NEXUS_USECASE_AER.html uses the CodeZero dark-green template. See §Orion for full CSS variable set. --color-accent-primary: #19E28A applies.

Domain Context

full nameAugmented Equipment Register
domainOil & Gas / Industrial Engineering — Equipment Data Management
one-lineCapital project equipment register integrated with EDR v6 via bi-directional pipeline
key rolesEngineering Lead, Vendor, Approver

UI Aesthetic Notes

Typical industrial/engineering equipment register UI patterns:

  • Table-heavy data views (equipment tag numbers, specs, status columns)
  • Pipeline approval workflow visualization (N-stage linear flows)
  • Data-dense forms for equipment attributes (tag, type, P&ID reference, vendor, status)
  • Bi-directional data sync indicators (AER ↔ EDR v6)
  • Colour-coded approval state badges
AER-specific brand color overrides: not found in source. AOS directory at e:/repos/AOS/ confirmed to be an Age of Sigmar tournament tool, NOT related to AER or AES.

AES — Assessment Engine Service

Education / Certification NEXUS_USECASE_AES.html

Template Skin

NEXUS_USECASE_AES.html uses the CodeZero dark-green template. See §Orion for full CSS variable set.

AOS Directory Identity

AOS at e:/repos/AOS/ is NOT AES. Contents confirmed: aos_cli.py, battleplans.json, warscroll_data/, tournament_analysis.json, SquigLeague/, SilentGate/ — this is an Age of Sigmar (AOS = Age of Sigmar) tournament management and Google Sheets uploader tool. AES workspace does not exist as a separate repo.

Domain Context

full nameAES Assessment Engine Service
domainEducation / Certification / Assessment
one-lineAI-hybrid assessment platform — Form(questions) → Pipeline(scoring) → Result
planned pipelinesaes-assessment, aes-scoring, aes-results-dashboard, aes-nav-menu
implementation statusP2 — pipelines planned but none seeded yet

UI Aesthetic Notes

  • Form-heavy delivery (assessment questions, multi-step forms)
  • Scoring pipeline with results dashboard (bar/score charts)
  • Certification/badge output modules
  • Administrator role for question bank management
AES-specific brand color overrides: not found in source. No separate AES workspace directory exists.

EDR — Enhanced Data Repository v6

Oil & Gas / Data Consolidation NEXUS_USECASE_EDR.html + EDR_PARITY_GAPS.md

Template Skin

NEXUS_USECASE_EDR.html uses the CodeZero dark-green template. See §Orion for full CSS variable set. EDR implementation: 85% complete, MVP achieved. Frontend: React 18 + Bootstrap ("Wormwood EDR Command Center").

Domain Context

full nameEnhanced Data Repository v6
domainOil & Gas / Industrial — Legacy Data Consolidation System (Python rewrite)
one-lineComplete Python rewrite of a legacy data consolidation system — 35% accuracy improvement target
frontendReact 18 + Bootstrap ("Wormwood EDR Command Center")
backlog168 story points across 4 milestones
status85% complete, MVP achieved, post-MVP ongoing

UI Aesthetic Notes (Equipment Data Registry)

  • Table-heavy data views (equipment consolidation tables, delta comparison)
  • Batch processing status indicators
  • Multi-source data merge conflict visualization
  • Parity gap reporting (EDR_PARITY_GAPS.md documents functional gaps vs legacy)
  • Command Center aesthetic: dark dashboard, data-dense, Bootstrap grid
EDR-specific brand color overrides: not found in NEXUS_USECASE_EDR.html. AOS directory at e:/repos/AOS/ = Age of Sigmar (not EDR). No separate EDR workspace at e:/repos/UV. Deployment matrix references: EDR domain confirmed via NEXUS_USECASE_EDR.html title "EDR v6 Data Consolidation".

CA-KB — CA Knowledge Base Graph Builder

AI / Knowledge Management NEXUS_USECASE_CA_KB.html + arc/docs

Palette Inheritance Decision

CA-KB inherits the ARC skin (pastel pink + pastel orange) with NO colour overrides.

Rationale: CA-KB is a UV internal client project built for CreativeAnswer. It runs in the CreativeAnswer org context (org_slug = ca-kb, client = CreativeAnswer). The arc/docs directory (01_FUNCTIONAL_SPECIFICATION.md, 02_ARCHITECTURE.md, 12 files total) contains no CA-KB-specific style definitions. CA-KB is a data/pipeline product (knowledge graph builder) rather than a customer-facing UI app with distinct branding. When rendered through Nexus APP_MGMT or ChameleonV2 in the ca-kb org context, it will use the ARC skin as its base (primary: #F4A261 orange, secondary: #F2A0B5 pink, Inter font, 12px border-radius cards).

Domain Context

full nameCA Knowledge Base Graph Builder
domainAI / Knowledge Management / Graph DB
one-lineAI-powered knowledge graph construction from unstructured email attachments and documents
clientCreativeAnswer (UV internal)
org slugca-kb
pipelinesca-kb-nav-menu, ca-kb-full-rebuild, ca-kb-incremental, ca-kb-graph-view

arc/docs Directory Contents

Files in e:/repos/arc/docs/ (12 files): 01_FUNCTIONAL_SPECIFICATION.md, 02_ARCHITECTURE.md, 03_SITEMAP.md, 04_USER_STORIES.md, 05_USER_MANUAL.md, 06_IMPLEMENTATION_PLAN.md, 07_GOOGLE_OAUTH_SETUP.md, DEMO_MODE_IMPLEMENTATION_GUIDE.md, DEMO_MODE_PYROMETRIX_REFERENCE.md, DEMO_MODE_ROADMAP.md, offer_package_contract.json, Z04_ALIGNMENT.md. None of these contain CA-KB-specific style definitions. ARC design system (see §ARC above) is the complete skin for both ARC and CA-KB org contexts.