ARC — Agent for Revenue & Client Management
Freelance / CRM 02_ARCHITECTURE.md §5Color Palette
Pastel pink + pastel orange dual-brand light theme. Source: 02_ARCHITECTURE.md §5.1.
| Token | Hex | Usage |
|---|---|---|
| primary-50 | #FFF5F0 | Page backgrounds |
| primary-100 | #FFE8D6 | Card backgrounds, subtle fills |
| primary-200 | #FFD1B2 | Hover states |
| primary-300 | #F4A261 | Primary accent (pastel orange) |
| primary-400 | #E8924A | Primary hover / active |
| primary-500 | #D4803A | Primary text on light bg |
| secondary-50 | #FFF0F3 | Alternate backgrounds |
| secondary-100 | #FFD1DC | Secondary card backgrounds |
| secondary-200 | #FFBCCC | Secondary hover |
| secondary-300 | #F2A0B5 | Secondary accent (pastel pink) |
| secondary-400 | #E8899E | Secondary hover / active |
| secondary-500 | #D47388 | Secondary text |
| neutral-50 | #FAFAFA | Lightest neutral |
| neutral-100 | #F5F5F5 | Borders, dividers |
| neutral-200 | #E5E5E5 | Input borders |
| neutral-700 | #404040 | Body text |
| neutral-900 | #171717 | Headings |
| success | #4ADE80 | Positive sentiment, paid |
| warning | #FBBF24 | Pending, attention needed |
| danger | #F87171 | Overdue, 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.htmlCSS 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.| Component | Property | Value |
|---|---|---|
| base body | background | #1e1e1e (slightly lighter than style-guide bg-primary) |
| base body | color | #cccccc |
| base body | font-family | 'Segoe UI', Arial, sans-serif (runtime override of Manrope) |
| base body | font-size | 13px |
| header / topbar | background | #1a1a4a (dark navy — brand variant) |
| header / topbar | border-bottom | 2px solid #c62828 (brand red accent) |
| header / topbar | height | 48px |
| left panel (sidebar) | background | #252526 |
| left panel (sidebar) | border-right | 1px solid #3c3c3c |
| right panel (content) | background | #1e1e1e |
| panel section head | background | #2d2d2d |
| scenario tab active | background | #c62828 (brand red) |
| scenario tab active | color | #fff |
| scenario tab hover | background | rgba(255,255,255,.18) |
| table row hover | background | #272727 |
| table alternating rows | not specified | hover only — no :nth-child alternation in demo-spa |
| badge: tag-pass | background / color | #1b5e20 / #a5d6a7 |
| badge: tag-fail | background / color | #7b1fa2 / #ce93d8 (purple scheme) |
| badge: tag-open | background / color | #1565c0 / #90caf9 |
| rs-badge.pass | background / color | #1b5e20 / #a5d6a7 |
| rs-badge.fail | background / color | #7b1fa2 / #ce93d8 |
| rs-badge.red | background / color | #b71c1c / #ef9a9a |
| status-dot.pass | background | #4caf50 |
| status-dot.fail | background | #ef5350 |
| pass-cell (table) | color / weight | #66bb6a / 600 |
| fail-cell (table) | color / weight | #ef5350 / 600 |
| compliance-bar.pass | background | rgba(27,94,32,.75) |
| compliance-bar.fail | background | rgba(183,28,28,.75) |
| compliance-bar.warn | background | rgba(191,54,12,.75) |
| evaluate button | background | #c62828 |
| evaluate button hover | background | #e53935 |
| evaluate button disabled | background / color | #3c3c3c / #555 |
| input field | background / border / color | #3c3c3c / 1px solid #555 / #ddd |
| active btn-group button | background / border-color | #1a1a4a / #5c6bc0 |
PFP — Pyrometrix Skin Alias
Pyrometrix Client Sub-Brand T-25 spec notePFP 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.htmlCSS 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.htmlSource:
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.htmlT-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.htmlNEXUS_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:
| Token | Value | Usage |
|---|---|---|
| brand primary | #2E00D6 | Headers, brand text, dividers |
| brand vibrant | #3300ff | Section headings |
| accent table header | #2E00D6 bg, white text | Table header rows |
| page background | #f9f9f5 | Cream/off-white |
| text color | #333 (body), #000000 (data cells) | Standard text |
| font-family | Arial, sans-serif | Body and headings |
| section bg | white | Content 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.htmlTemplate 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:
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
| Module | Key Features |
|---|---|
| Market Dashboard | Market Bar, System Status, Notifications, Plan Badge |
| Signal Lab | Factor Builder, Universe Filter, OOS Validation, LLM Analysis, Walk-Forward, Tournament Submit |
| Backtests | CAGR vs Benchmark, Monte Carlo, Scenario Testing, R Multiple, AI Intelligence Panel, Strategy Comparison |
| Portfolio | Holdings + Conviction, Sector Allocation (donut), Agent Baskets, Paper Trades, Exposure Summary, Multi-Wallet |
| Pipeline | 7-Stage Pipeline, Multi-Agent, Live Toggle, Broker Connections, Scheduled Runs |
| Tournament | Signal Ranking, Submit Signal |
AER — Augmented Equipment Register
Oil & Gas / Industrial Engineering NEXUS_USECASE_AER.htmlTemplate 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:
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.htmlTemplate 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
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.mdTemplate 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)
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/docsPalette 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).
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.