---
name: neuralectic-product-ui-system
description: Neuralectic product UI system with CSS variables, typography, layout, components (buttons, tables, run/evidence views, status, forms, drawers), motion and docs rules for the Neuralectic Systems app, the Tekton harness UI, dashboards, docs and CLI output.
---

# Neuralectic Product UI & Docs System (`product/skill.md`)

Canonical URL: `https://brand.neuralectic.com/product/skill.md`
Sibling: `https://brand.neuralectic.com/gtm/skill.md` · Router: `https://brand.neuralectic.com/skill`

> **Sign-off note:** The brand tokens come from the brand site. Status colors, the density scale, component specs and the docs layout extend the brand for product use and need team sign-off.

## 1. Philosophy

1. **Evidence first.** The UI exists to show what the agent proposed and what physics decided. Every result shows its checks, its inputs and how to reproduce it.
2. **Quiet and precise.** Use dark Paper workspaces, 1px hairlines, no shadows and small radii (2–4px). Spend color on meaning, not decoration.
3. **Mono for machines, sans for people.** Use IBM Plex Mono for values, IDs, units, code and labels. Use Zalando Sans for prose and UI text.

## 2. Tokens

```css
:root {
  --paper: #16141A;     /* app background */
  --surface: #1B1920;   /* panels, drawers */
  --raised: #221F28;    /* hover rows, inputs */
  --rule: #2E2A35;      /* 1px borders */
  --strong: #F0F0F0;    /* titles, key values */
  --ink: #CFC9D6;       /* body */
  --muted: #A29CA9;     /* meta */
  --lavender: #BFA1F5;  /* links, focus ring */
  --violet: #533FF4;    /* primary action, selection */
  --pink: #EC73CE;      /* single highlight: new, attention */
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-sans: "Zalando Sans", system-ui, sans-serif;
  --radius: 2px;        /* buttons, inputs */
  --radius-tag: 4px;    /* tags */
}
body { background: var(--paper); color: var(--ink); font: 14px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
```

- **Light mode** (docs print or embeds only):
  - Background: Marshmallow `#F0F0F0`
  - Text: Paper `#16141A`
  - Borders: `#DCD8E0`
  - Accent: violet
- **Banned:**
  - Tailwind default grays, greens, reds and ambers
  - Gradients
  - Glassmorphism, except the sticky top bar fade
  - Drop shadows on cards or tables

## 3. Status (verification states)

Status is typographic first: a Plex Mono 11px uppercase label with a small square glyph.

| State | Glyph & color | Meaning |
|---|---|---|
| VERIFIED | ■ Lavender text, Rule outline | Passed all checks against requirements and physics |
| RUNNING | ◐ Muted text, slow 2s opacity pulse | Search/simulation in progress |
| PROPOSED | ○ Ink text | Agent proposal, not yet checked |
| FAILED | ✕ Pink text | Violates a requirement or physical constraint. Always show which one. |
| NEW | Pink fill, Paper text | One per view |

Never rely on color alone. Always include the label text.

## 4. Typography

| Role | Spec |
|---|---|
| Page title | Plex Mono 500 24px, -0.02em, Strong |
| Section title | Plex Mono 500 16px, Strong |
| Body / UI | Zalando Sans 400 14px |
| Table header | Plex Mono 500 11px uppercase 0.14em, Muted |
| Values, IDs, units | Plex Mono 400 13px, tabular-nums |
| Code | Plex Mono 13px on `--surface` |

**Units:** always show SI units next to values (`12.4 kN`, `3.2e-4 m`), with a thin space between the number and the unit.

## 5. Layout

- **App shell:**
  - Top bar: 48px. The mark sits at 20px wide (ratio 0.62, solid white fallback; the gradient primary is only for 64px and up).
  - Left sidebar: 240px.
  - Content area: max 1216px with 24px gutters.
  - Right drawer: 420px for evidence and details.
- **Spacing scale:** 4, 8, 12, 16, 24, 32, 48. Rows are 40px; compact rows are 32px.
- **Navigation:**
  - Active item: Strong text plus a 2px violet inset bar on the left.
  - Hover: `--raised`.
  - Don't use filled colored nav pills.

## 6. Components

- **Buttons:**
  - Primary: violet with white text, 2px radius, 8×16 padding, one per view region.
  - Secondary: Rule outline with Ink text.
  - Quiet: Lavender text.
  - Destructive: Pink outline with Pink text.
- **Inputs:** `--raised` background, 1px Rule border, 2px radius. Focus is a 2px Lavender ring.
- **Tables:**
  - Hairline rows, no zebra striping. Numbers are right-aligned in mono.
  - Sticky header. The selected row gets a violet inset bar.
- **Run / evidence card:**
  - The header carries the proposal ID (mono), status and timestamp.
  - The body lists checks as rows: requirement → measured → limit → pass/fail.
  - The footer has "Reproduce" (it copies the exact command/config) and "View trace".
- **KPI strip:** up to 4 cells divided by hairlines. The value is Plex Mono 28px Strong; the label is 11px uppercase Muted.
- **Drawers and modals:** `--surface` with a 1px Rule border and no shadow. Use a Paper scrim at 70%.
- **Charts:**
  - Background: Paper. Gridlines: Rule.
  - Series order: Lavender, Violet, Pink, then Muted.
  - Constraint limits are dashed Pink lines.
- **Empty states:** one Plex Mono line plus one action. The mark is allowed at 48px in Muted opacity 0.4.

## 7. Motion

- **Timing:** UI transitions run 150–200ms ease-out, opacity and translate only.
- **Running:** a slow opacity pulse. No spinners for longer than 1s; show progress text instead (`step 3/12 · solving`).
- **Mark:** the attractor reveal: the swirls are attractor phase portraits, so 6–10 glowing particles (violet #533FF4 to pink #EC73CE) trace the swirl paths, spiraling inward like orbits converging on an attractor with fading trails; over about 2.4s (ease-out cubic) the trails resolve into the filled gradient mark, which holds while particles orbit faintly. 60fps canvas, lightweight. Static mark under prefers-reduced-motion. Never sway, spin or bounce.36,1), about 1.7s, then hold) is only allowed on loading and empty screens. Static under prefers-reduced-motion.
- **Reduced motion:** honor `prefers-reduced-motion`.

## 8. Docs & CLI

- **Docs layout:**
  - 39rem reading column, left nav, right "On this page".
  - Headings in Plex Mono, prose in Zalando Sans.
  - Code blocks use `--surface` with a copy button.
- **CLI output:**
  - Lead with the status word (`VERIFIED`, `FAILED`) and keep alignment monospace.
  - Use ANSI color only for status. Lavender maps to bright magenta and pink to magenta when truecolor is unavailable.

## 9. Pre-ship checklist
- [ ] Only the §2 tokens are used, with no gradients or shadows (the gradient primary mark at 64px+ is the only exception).
- [ ] Every result shows its checks and a reproduce path.
- [ ] Status has a text label, not just color.
- [ ] Values are mono with units.
- [ ] There is one primary button per region.
- [ ] The mark comes from the SVG at ratio 0.62.