Noether Capital - Brand Guidelines

Logo & Brand Identity

How the Noether Capital brand appears across all pages

NOETHER CAPITAL

Logo Mark	"NC" monogram inside a rounded square
Logo Dimensions	40×40px in header. Minimum size: 24×24px.
Logo Background	#1d293d (Primary Navy)
Logo Text Colour	#ffffff (White)
Logo Font	Playfair Display, 700 weight, 16px
Logo Border Radius	6px
Brand Name	"NOETHER CAPITAL" — always uppercase, always letter-spacing: 2px
Brand Name Font	System sans-serif, 600 weight, 18px
Clear Space	Minimum 12px on all sides of the lockup
Never	Never change logo colours. Never rotate. Never use below 24px. Never place on busy backgrounds without a white container.

Colour Palette

All colours used across the dashboard — use CSS variables, never hardcode hex values

Core Colours

Primary Navy

--color-primary

#1d293d

Headings, header, logo, active nav, card titles

Black

--color-black

#000000

Body text

Near Black

--color-near-black

#09090b

Code block backgrounds only

White

--color-white

#ffffff

Card backgrounds, page elements

Accent

--color-accent

#4a5565

Secondary emphasis

Accent Light

--color-accent-light

#e5e7eb

Active category borders

Grays

Gray

--color-gray

#6a7282

Subtitles, metadata, version tags

Gray Medium

--color-gray-medium

#6b7280

Icons, secondary text

Gray Dark

--color-gray-dark

#364153

Descriptions, body copy in cards

Gray Light

--color-gray-light

#f3f4f6

Table headers, card borders, dividers

Gray Lighter

--color-gray-lighter

#f9fafb

Page background, alternating rows

Status Colours (semantic — use for data meaning only)

PASS

Success Green

--status-green / --status-green-bg

#065f46 on #d1fae5

Pass, healthy, complete, verified

WARN

Warning Amber

--status-amber / --status-amber-bg

#92400e on #fef3c7

Warnings, attention, in-progress

FAIL

Danger Red

--status-red / --status-red-bg

#991b1b on #fee2e2

Fail, error, broken, critical

INFO

Info Blue

--status-info / --status-info-bg

#1e40af on #dbeafe

Informational, in-progress, neutral

Zone Colours (dashboard categories)

DATA

Blue Zone

#185FA5 / #E6F1FB

Data & Awareness dashboards

DISC

Teal Zone

#0F6E56 / #E1F5EE

Discovery & Intelligence

PORT

Green Zone

#3B6D11 / #EAF3DE

Portfolio & Quality

EXEC

Amber Zone

#854F0B / #FAEEDA

Execution & Cost

GOV

Purple Zone

#534AB7 / #EEEDFE

Governance & Configuration

RISK

Coral Zone

#993C1D / #FAECE7

Risk & Failure

SYS

Grey Zone

#5F5E5A / #F1EFE8

System & Infrastructure

Rules

ALWAYS use CSS variables (var(--color-primary)) not hex values in code
Status colours are semantic — green always means success, red always means failure
Zone colours identify dashboard categories — do not mix across zones

NEVER use rainbow colour maps for data — they are perceptually non-uniform
NEVER invent new colours — only use what is defined above

Typography

Font families, sizes, and weights — every text element defined

Font Families

Brand Font	'Playfair Display', serif — headings, titles, card titles
UI Font	ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif — body, labels, buttons
Code Font	monospace — packet IDs, code references, hashes

Type Scale

Page Title · 30px · 700 · Playfair

Factory Structure

Card Title · 22px · 700 · Playfair

Build Steps & Packet Slots

Section Heading · 18px · 700 · Playfair

Step 1: Core Infrastructure

Body Large · 15px · 400 · Sans

Paragraph text in overview sections

Body · 14px · 400 · Sans

Default body text for content

Body Small · 13px · 400 · Sans

Subtitles, descriptions, metadata

Label · 12px · 600 · Sans

TABLE HEADER · STAT LABEL

Caption · 11px · 600 · Sans

BADGE TEXT · SMALL LABELS

Micro · 10px · 400 · Mono

token_count: 3420 | sha256: dcc076...

Code · 12px · 400 · Mono

F-01-01 · PKT-H08-CB-L1-004

Rules

Playfair Display is ONLY for headings and titles. Never for body text.
Body text is ALWAYS system sans-serif. Never Playfair.
Line height: 1.6 for body text, 1.3 for headings, 1.0 for single-line labels.

Monospace is ONLY for code, IDs, and technical values. Never for labels.

Spacing & Layout

Consistent spacing, page structure, and grid rules

Spacing Scale

4px

8px

12px

component

16px

20px

section

24px

lg / card

32px

40px

2xl / page

Page Layout

Header Height	72px, fixed at top
Main Content	max-width 1440px, centered, padding 40px 32px
Card Margin	24px margin-bottom between cards

Card Structure

Background	White (#ffffff)
Border	1px solid var(--color-gray-light)
Border Radius	8.4px (--radius-sm)
Padding	24px
Layout	Title + subtitle at top, body below

Component Library

Standard components — copy these patterns exactly

Buttons

Action Button

bg #1d293d, white text, 6px radius, 13px

Small Button

white bg, gray border, 4px radius, 11px

Disabled Button

opacity 0.35, cursor not-allowed

Badges

Status Badges

PASS FAIL WARN INFO EMPTY

Version Badge

v3 (3 versions)

Change Type Badges

INITIAL BUILD BUG FIX SPEC CHANGE IMPROVEMENT REBUILD

Gate Badge

READY BLOCKED COMPLETE

Calibration Badge

CALIBRATED MISCALIBRATED

Cards

Standard Card

Card Title
White bg, 1px gray-light border, 8.4px radius, 24px padding

Highlight Card

Highlight Card
4px left border in --color-primary for overview/callout

Warning Callout

Current status: Amber background, amber border, for status/warning callouts

Progress Bars

Standard Progress

8px height, gray-light bg, 4px radius, primary fill

Stat Boxes

Packets Built

Verified

Failed

Numeric Display Rule

Tabular numerals for all live-updating numbers

Every numerical value that changes frequently (price, P&L, latency, token count, percentage, cost) must use tabular numerals to prevent text “jumping” during refreshes.

/* Apply to ALL elements displaying live-updating numbers */
.numeric, .stat-value, .metric-value, .latency-value, .cost-value, .pnl-value {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-numeric);
}

/* CSS Variable (add to :root) */
--font-numeric: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

Rule: Any element whose text content changes on a refresh interval must have font-variant-numeric: tabular-nums. This ensures digits are fixed-width and the layout does not shift when “1” changes to “8” or “0.05” changes to “12.34”.

Status Colour Rules (Updated)

Blue = busy, Amber = degraded — never interchangeable

State	Colour	CSS Variable	Use For	NOT For
Success / Pass / Healthy	Green	`--status-green / --status-green-bg`	Verified, complete, healthy, pass, connected	—
In Progress / Busy / Loading	Blue	`--status-info / --status-info-bg`	Verifying, building, scanning, calculating, connecting	Do NOT use for warnings or degraded states
Warning / Degraded / Attention	Amber	`--status-amber / --status-amber-bg`	Degraded performance, approaching limit, needs review, stale data	Do NOT use for “system is busy” — use Blue instead
Error / Fail / Critical	Red	`--status-red / --status-red-bg`	Failed, broken, offline, breach, critical alert	—
Unchecked / Pending / Unknown	Gray	`--color-gray-light / --color-gray`	Not yet checked, no data, awaiting input	—

Critical rule: Blue and Amber must NEVER be used interchangeably. Blue means “the system is actively working.” Amber means “something is degraded and may need attention.” If a button shows a spinner, it is Blue (busy). If a corridor latency is 115% of baseline, it is Amber (degraded). Mixing these causes warning fatigue.

CSS Variable Reference

Copy-paste ready — include this :root block in every page

:root {
    /* Colours */
    --color-primary: #1d293d;
    --color-black: #000000;
    --color-near-black: #09090b;
    --color-white: #ffffff;
    --color-accent: #4a5565;
    --color-accent-light: #e5e7eb;
    --color-gray-medium: #6b7280;
    --color-gray: #6a7282;
    --color-gray-dark: #364153;
    --color-gray-light: #f3f4f6;
    --color-gray-lighter: #f9fafb;
    --color-primary-light: rgba(29,41,61,0.04);

    /* Status */
    --status-green: #065f46;
    --status-green-bg: #d1fae5;
    --status-amber: #92400e;
    --status-amber-bg: #fef3c7;
    --status-red: #991b1b;
    --status-red-bg: #fee2e2;
    --status-info: #1e40af;
    --status-info-bg: #dbeafe;

    /* Fonts */
    --font-brand: 'Playfair Display', serif;
            --font-numeric: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
    --font-ui: ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;

    /* Radii */
    --radius-sm: 8.4px;
    --radius-pill: 9999px;

    /* Layout */
    --header-height: 72px;
    --max-width: 1440px;
}

Do's and Don'ts

Rules that apply to every page built for Noether Capital

Use CSS variables for all colours and fonts
Follow the type scale exactly
Use Playfair Display ONLY for headings
Use status colours semantically (green = success, red = failure)
Keep cards at 24px padding
Include breadcrumbs on every page
Match the header/nav exactly — copy from an existing page
Left-align all body text (stat values may be centred)

Don't

Don't hardcode hex colours — use var(--color-*)
Don't use Playfair Display for body text
Don't use rainbow colour scales for data
Don't add box shadows to cards (the design is flat)
Don't change the header height or nav structure
Don't use icon libraries (no FontAwesome, no Material Icons) — use Unicode symbols or plain text
Don't add custom fonts beyond Playfair Display and system sans-serif
Don't use gradients
Don't centre body text — always left-aligned except stat values

Extended visual specification: Chart types, data visualisation colours, refresh rates, interaction patterns, and empty states are defined in the Dashboard Visual Specification →

F1. Panel Types & Behaviour

Standard panel types the builder must use — do not invent new patterns

Panel Type	Purpose	Behaviour	Example
Metric Card	Single KPI value with trend	Current value (large), label, optional sparkline (7-day), optional comparison (vs target). Updates on refresh.	NAV, Daily P&L, Active Operators
Status Grid	Multiple items with health	Grid of items, each with status dot (green/amber/red/gray). Click item → expand detail.	Server health, Agent pool
Data Table	Sortable, filterable list	Sortable columns (click header). Clickable rows. Pagination if >50. Search/filter bar above.	Kill Feed, Findings, Packets
Gauge	Value vs threshold	Circular or horizontal. Green/amber/red zones. Threshold line. Percentage label.	Funnel pressure, CPU, Budget
Timeline / Gantt	Time-ordered events	Horizontal time axis. Zoomable (1h/6h/24h/7d). Hover → tooltip.	Execution timeline, Scan history
Feed / Stream	Real-time event list	Newest first. Auto-scrolls unless user scrolled up. Max 100 visible. Click → expand.	Kill Feed, Alert Feed
Chart	Time-series or categorical	Line/bar/area/stacked. Recharts. Tooltip on hover. Legend if multi-series. Time range selector.	Spending, Funnel trend, Latency
Map / Topology	Spatial or network viz	SVG/Canvas. Nodes + edges. Colour-coded status. Click node/edge → detail panel.	Global Pulse Pane, C-Space
Action Panel	Controls & inputs	Buttons, sliders, dropdowns. Confirmation before destructive actions. All changes logged.	Fine-tuning, Emergency Stop
Collapsible Section	Expandable content	Header always visible with summary. Click → expand/collapse. Chevron. State in localStorage.	Version history, Test results

Rules

Every panel must be exactly ONE of these types
If a new panel doesn’t fit, consult the Research Director before inventing a new type
Panels must not mix types (e.g., don’t put a gauge inside a data table)

The Three-Second Rule

Every dashboard page must have a “North Star” metric in the top-left position (first element visible without scrolling).

This is a single, binary health indicator that answers “Is this system OK?” in under three seconds. Green = Director doesn’t need to read the rest. Red = something needs attention.

Dashboard	North Star Metric	Green	Red
Code Creator	Factory Build Health	All steps progressing, no failures	Any step blocked, verification failing
Mission Control	Pipeline Status	Packets flowing, no stalls	Pipeline stalled or failure detected
GNDID	Trading Health	Operators active, P&L positive	All gates closed, zero flow, or loss
Horizon Scanning	Intelligence Status	Scans running on schedule	Scans failing or no findings in 14 days
Infrastructure Mesh	Mesh Health	All corridors green	Any corridor red or server offline

Implementation: 48×48px coloured circle or pill badge at top-left of page content. Green pulse animation when healthy. Static red when unhealthy. Click → scrolls to the problem section.

F2. Interaction Patterns

How users interact with dashboard elements — consistent across all pages

Interaction	Behaviour	Implementation
Click table row	Expand detail below row	Collapsible div, not modal. One row expanded at a time.
Click button	Execute with feedback	Loading state (spinner + “Processing...”). Success: green flash. Error: red flash + message.
Hover element	Show tooltip	300ms delay. Max 300px width. Dark bg, white text. Disappears on mouse-out.
Sort column	Toggle asc/desc	Click header → asc. Again → desc. Again → remove. Arrow indicator.
Filter	Narrow displayed data	Dropdown or text input above table. Immediate filtering. Clear button (“×”).
Pagination	Navigate large datasets	50 rows/page. Previous/Next. “Page X of Y”. “Show all” for <200 rows.
Refresh	Update from server	Auto on interval. Manual “↻” button. Last refreshed timestamp shown.
Confirm destructive	Prevent accidents	Modal: “Are you sure?” + consequence. Cancel (default focus) + Confirm (red).
Drag and drop	Reorder/categorise	Only where specified. Visual drag handle. Drop zone highlight.
Keyboard nav	Accessibility	Tab through elements. Enter to activate. Escape to close modals.

Confirmation Tiers

Not all confirmations are equal. Three tiers:

Tier	When Used	Method
Standard	Reversible: archiving, marking status, dismissing alerts	Modal: “Are you sure?” with Cancel (default) + Confirm.
High-Impact	Significant: corridor stall, parameter override, run all verifications	Modal with impact summary. Confirm requires 3-second hold (button fills left to right). “Hold to confirm”.
Critical	Irreversible: Emergency Stop, reset verifier, reset baselines	Modal with impact. Type-to-confirm: user types exact phrase (e.g., “EMERGENCY STOP”). Button enables only when text matches.

/* Hold-to-confirm button */
.hold-confirm-btn { position: relative; overflow: hidden; }
.hold-confirm-btn::before {
    content: ''; position: absolute;
    left: 0; top: 0; height: 100%; width: 0%;
    background: rgba(153, 27, 27, 0.2);
    transition: width 3s linear;
}
.hold-confirm-btn.holding::before { width: 100%; }

F3. Data Loading & Refresh

How data is fetched, displayed, and kept current

Behaviour	Specification
Initial load	On DOMContentLoaded, fetch all panel data in parallel. Show skeleton loading. Render progressively — do not wait for all panels.
Skeleton loading	Gray pulsing placeholder shapes matching expected content. Never show blank panel.
Refresh intervals	Per panel: Real-time (WebSocket), 5s, 10s, 15s, 30s, 60s, 5min, hourly. Use setInterval for polling. WebSocket for real-time only.
Stale indicator	2× expected interval → amber “Stale” badge. 5× interval → red “Stale” badge.
Error on fetch	Error in panel (not global). “Failed to load. Retrying in Xs.” 3 retries (5s, 15s, 45s). Then manual Retry button.
Empty state	Helpful message: “No [items] yet. [What needs to happen first].” Never blank or “null”.
WebSocket reconnect	Amber “Reconnecting...” banner. Exponential backoff. On reconnect: fetch full state.

Stale Data Handling (Updated)

Staleness	Condition	Visual Treatment
Fresh	Within expected refresh interval	Normal display. No indicator needed.
Amber Stale	2× expected interval	Amber “Stale” badge in panel header. Data remains full colour.
Red Stale (Dead)	5× expected interval	Red “STALE” badge. Entire panel: `filter: grayscale(100%); opacity: 0.6;` with overlay: “STALE — do not use for decisions”

.panel-stale-dead {
    filter: grayscale(100%);
    opacity: 0.6;
    position: relative;
}
.panel-stale-dead::after {
    content: 'STALE — do not use for decisions';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(153, 27, 27, 0.9);
    color: white; padding: 8px 16px;
    border-radius: 4px; font-size: 13px;
    font-weight: 700; z-index: 10;
}

Empty State Messages (Updated)

Generic “No data” messages are prohibited. Every empty state must: (1) confirm the system IS working, (2) explain what it looked for, (3) state what needs to happen for data to appear.

Bad	Good
“No data available”	“No verified packets yet. Build and verify packets in Build Steps to populate this library.”
“No results”	“No liquidity gaps in last scan (06:00 UTC). All venues show normal depth. Next scan tomorrow.”
“Empty”	“No active corridor stalls. All 6 corridors GREEN. Stalls appear when latency exceeds 125% baseline.”
“No findings”	“V-MICRO found 0 structural changes this week. May indicate stable conditions or query updates needed.”

Skeleton Loading Patterns (Updated)

Content Type	Skeleton Pattern
Text / Labels	Gray pulsing rectangle matching expected width and height.
Tables	Gray pulsing rows (5 rows) with column-width rectangles.
Stat Values	Gray pulsing rectangle at 24px height.
Charts / Graphs	Path Skeleton: Faint gray line (opacity 0.15) showing last known trend. Maintains Director’s mental model. No previous data → flat horizontal midpoint line. `.chart-skeleton-path { stroke: var(--color-gray); stroke-width: 1.5; opacity: 0.15; fill: none; }`
Maps / Topology	Faint gray outlines of nodes and corridors at last known positions. Pulsing animation.

F4. Modal & Popup Behaviour

Standard modal pattern used across all dashboards

Element	Specification
Overlay	Fixed, full viewport, rgba(0,0,0,0.5). Click overlay to close.
Container	White, 8px radius, 90% width, max-width 1000px, max-height 85vh, 24px padding. Centred.
Close	Top-right “×”, 20px. Also Escape key.
Tabs	Flex row, 4px gap, active = primary bg white text. Panels switch on click.
Scrolling	Modal body scrolls if needed. Page behind does NOT scroll (body overflow: hidden).
Nested modals	NOT PERMITTED. Replace modal content instead of opening a second modal.
Loading	Show spinner within modal. Do not close and reopen.

F5. Button States & Actions

Every button type and its behaviour through all states

Button Type	Default	Loading	Success	Error	Disabled
Action (primary)	Dark bg, white text	Spinner + “Processing...”	Green flash + “Done” (2s)	Red flash + error (5s)	opacity 0.35
Small (secondary)	White bg, gray border	Spinner + text change	Content updates, resets	Error text (3s)	opacity 0.35
Verify	White, “Verify”	Spinner + “Verifying...”	Green + “✓ Verified” (persists)	Red + “✗ Failed” (persists)	Gray, “Not ready”
Destructive	Red text, white bg	Spinner + “Deleting...”	Removed from DOM	Error message	Gray
Toggle	Gray bg (inactive)	N/A	Active colour	N/A	Gray, no click

Rules

Never use a button without a loading state
Success lasts 2s then resets (except Verify which persists)
Error shows the specific message, not just “Error”

F6. Form & Input Patterns

Standard input elements used in dashboards

Input Type	Specification
Text input	Full width, 8px 10px padding, 1px gray-light border, 4px radius. Placeholder in gray. Focus: blue border.
Dropdown	Same styling as text input. Native HTML select (no custom libraries).
Slider	Horizontal range. Show current value, min/max labels, default marker. Snap to intervals if applicable.
Checkbox	Standard HTML. Label to right. Clickable label area.
Textarea	Same styling as text input. Resizable vertically only. Min 3 rows.
Validation	Validate on blur. Red border + error below on invalid. Green on valid (after first attempt).
Range constraints	Show allowed range in help text. Reject out-of-range on submit with specific error.

F7. Notification & Alert Patterns

How the system communicates status changes and problems

Pattern	When Used	Implementation
Inline success	After successful action	Green background flash on affected element. 2 seconds. No separate notification.
Inline error	After failed action	Red text below element. Specific error message. Persists until user acts.
Page banner	System-wide status	Full-width below header. Amber/red. Persists until resolved. Action button if applicable.
Panel badge	Persistent status	Small coloured badge in panel header. Updates automatically.
Toast	NOT USED	We do not use toast notifications. All feedback is contextual (near the element).

Status Tooltip Content Rule

Every RED or FAIL status indicator must have a tooltip following this three-part structure:

Problem: What is wrong, in specific terms.
Impact: What this means for the system.
Action: What the Director should do.

Bad Tooltip	Good Tooltip
“Server Down”	“A1 Osaka unreachable for 45s. All Binance execution stalled. Check server status or activate Singapore-standalone.”
“Verification Failed”	“F-05-02 failed GPT-4o prosecution. 3 missing functions. Builder Agent blocked until fixed. View details.”
“Budget Exceeded”	“Daily budget ($20) exhausted at 14:32 UTC. 12 packets awaiting verification. No AI calls until tomorrow or budget increased.”
“Latency High”	“A1↔A2 RTT 95ms (baseline 70ms, 136%). Cross-venue arb losing edge. Consider stall if no recovery in 5min.”

Rule: Generic messages (“Error”, “Failed”, “Down”) are prohibited. Every status must be specific, contextual, and actionable.

F8. Responsive & Viewport Behaviour

How dashboards adapt to different screen sizes

Viewport	Layout Rules
Desktop ≥1440px	Full layout. Max-width 1440px centred. Stat grids: 4 columns.
Laptop 1024–1439px	Same layout, narrower. Stat grids: 3 columns. Tables may hide less-important columns.
Tablet Landscape 768–1023px	Single column. Stat grids: 2 columns. Tables scroll horizontally. Nav → hamburger.
Tablet Portrait 600–767px	Single column. Grids: 2 columns. Charts reduce height. Modals full-width.
Mobile <600px	Single column. Grids: 1 column. Tables → card view. Nav → hamburger. Modals full-screen.

Rules

No horizontal scrollbar at any viewport (except within tables)
Cards stack vertically on narrow viewports
Navigation always accessible
Touch targets minimum 44×44px on touch devices
Charts minimum 200px height

F9. Performance Requirements

Speed targets for all dashboard pages

Metric	Target	How To Achieve
Page load	< 2s to first meaningful paint	Inline critical CSS. Lazy-load below-fold. Fetch in parallel.
Panel render	< 500ms data → display	No unnecessary re-renders. Document fragment for bulk DOM.
Interaction response	< 100ms click → feedback	Immediate button state. Async data fetch.
Table sort	< 200ms for 1000 rows	JS sort for <5000 rows.
Chart render	< 1s for 10,000 points	Data decimation for large datasets.
WebSocket message	< 50ms receive → display	Minimal processing. Direct DOM update.
Memory	< 200MB per tab	Limit retained data. Dispose hidden chart instances.

F10. Accessibility Minimum

Baseline accessibility requirements

Requirement	Implementation
Colour contrast	WCAG AA (4.5:1 normal, 3:1 large). Status uses colour AND text/icon — never colour alone.
Keyboard navigation	All interactive elements via Tab. Enter activates. Escape closes. Visible focus indicator.
Screen reader	aria-label on icon-only buttons. alt on images. scope on table headers.
No motion dependency	Animations supplementary. Respect `prefers-reduced-motion`.

Visual standards: Logo, colours, typography, spacing, and component library are in the Visual Standards tab →