diff --git a/.daemon/logs/signet-2026-02-19.log b/.daemon/logs/signet-2026-02-19.log
index 450a57041..a796f9b34 100644
--- a/.daemon/logs/signet-2026-02-19.log
+++ b/.daemon/logs/signet-2026-02-19.log
@@ -1413,3 +1413,15 @@
{"timestamp":"2026-02-19T12:32:12.315Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
{"timestamp":"2026-02-19T12:32:12.317Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
{"timestamp":"2026-02-19T12:32:12.327Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db"}}
+{"timestamp":"2026-02-19T12:32:17.330Z","level":"warn","category":"git","message":"Git add failed"}
+{"timestamp":"2026-02-19T12:32:17.509Z","level":"info","category":"git","message":"Auto-committed","data":{"message":"2026-02-19T12-32-17_auto_memory/memories.db-shm, memory/memories.db-wal, me","filesChanged":4}}
+{"timestamp":"2026-02-19T12:33:17.933Z","level":"info","category":"git","message":"Git push","data":{"commits":4}}
+{"timestamp":"2026-02-19T12:37:12.019Z","level":"warn","category":"git","message":"Periodic sync failed: No git credentials found. Run `gh auth login` or set GITHUB_TOKEN secret."}
+{"timestamp":"2026-02-19T12:37:19.528Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
+{"timestamp":"2026-02-19T12:37:19.528Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
+{"timestamp":"2026-02-19T12:37:19.530Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
+{"timestamp":"2026-02-19T12:37:19.546Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db"}}
+{"timestamp":"2026-02-19T12:37:19.528Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
+{"timestamp":"2026-02-19T12:37:19.528Z","level":"info","category":"watcher","message":"File added","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
+{"timestamp":"2026-02-19T12:37:19.530Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-wal"}}
+{"timestamp":"2026-02-19T12:37:19.546Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db"}}
diff --git a/memory/memories.db b/memory/memories.db
index 6c6ac3bd1..9fbb14555 100644
Binary files a/memory/memories.db and b/memory/memories.db differ
diff --git a/skills/signet-design/SKILL.md b/skills/signet-design/SKILL.md
index 6b0c26692..cf8b230af 100644
--- a/skills/signet-design/SKILL.md
+++ b/skills/signet-design/SKILL.md
@@ -12,6 +12,8 @@ description: >
# Signet Design System
+See `assets/design-brief.png` for a full-page reference screenshot.
+
## Aesthetic Direction
Technical. Industrial. Near-monochrome. The visual language draws from
@@ -29,6 +31,34 @@ Core principles:
- **Registration marks** — crosshair (+) elements as visual punctuation
- **Generative texture** — Bayer-dithered halftone art as bold compositional elements
- **Dual theme** — dark (near-black) and light (warm beige cream)
+- **Background opacity 0.8** — all overlay elements (connectors, nodes,
+ schematic circles) sit at 80% opacity to recede behind content
+
+## Anti-Patterns
+
+These violate the design system. Never do:
+- **Border-radius** — no rounded corners, no pills, no circles on
+ containers. Only exception: schematic decorator circles.
+- **Filled buttons at rest** — buttons are always outlined, fill only
+ on hover (invert).
+- **Generic fonts** — no Inter, Roboto, Arial, system-ui. Only Chakra
+ Petch and IBM Plex Mono.
+- **Serif fonts** — never. Too editorial, too warm.
+- **Saturated color** — no bright blues, greens, purples. The palette
+ is desaturated gray with muted danger/success accents only.
+- **Purple gradients** — the quintessential AI slop aesthetic. Banned.
+- **Soft/friendly UI** — no rounded icons, no emoji glyphs, no pastel
+ tones, no bouncy animations.
+- **Opacity on muted text** — use `--color-text-muted` directly,
+ never layer `opacity: 0.5` on top of already-muted colors.
+- **Pure white backgrounds** — light theme uses warm beige `#e4dfd8`,
+ never `#ffffff`.
+- **Single-font hierarchy** — always pair display + mono. Using one
+ font for everything flattens the hierarchy.
+- **Attention-grabbing animation** — no bounce, no scale-up entrances,
+ no flash effects. Ambient only.
+- **S-curves or multi-inflection connector lines** — connectors use
+ single-curve quadratic beziers. Never cubic with two control points.
## Typography
@@ -56,10 +86,6 @@ CSS variables:
--font-mono: 'IBM Plex Mono', monospace;
```
-Anti-patterns: using a single font for everything (lacks hierarchy),
-serif fonts, generic sans (Inter, Roboto, Arial), any font that
-feels too polished for the raw industrial aesthetic.
-
## Design Tokens
See `assets/globals.css` for the full token set. All tokens use CSS
@@ -89,8 +115,7 @@ Light background is warm beige, never pure white. Borders flip from
white-alpha to black-alpha. Dither dots flip color via `--color-dither`.
Readability: light mode `--color-text-muted` must be dark enough for
-legible text on the beige surface (~3.5:1 contrast min). Avoid
-layering opacity on top of muted-colored text — use the token directly.
+legible text on the beige surface (~3.5:1 contrast min).
## Icon System
@@ -151,17 +176,92 @@ Stroked containers with monospace text. `.badge-accent` variant
uses bright text + bright border. Can include inline icons.
### Inputs
-Monospace, surface background, strong border. Focus brightens border.
-Select uses custom SVG chevron background-image.
+Monospace, surface background, strong border. Focus brightens border
+and adds 1px `box-shadow` ring. Select uses custom SVG chevron
+background-image. `border-radius: 0` always.
+
+### Section Panels
+Content sections wrap in `.section-panel` — `--color-surface` bg,
+`--color-border` stroke, 6px corner L-bracket registration marks
+via `::before`/`::after`. Elevates content above the background
+layers.
### Decorative Elements
-- Crosshair marks (`.crosshair`) — 10px, muted
+- Crosshair marks (`.crosshair`) — 10px, muted color
- 4-pointed star (`.star-4`) — clip-path polygon
-- Schematic circles — stroked circles with centered crosshairs
-- Connector lines — 1px lines with dot endpoints
-- Corner star markers (`****`)
+- Schematic circles — stroked circles with centered crosshairs,
+ `opacity: 0.8`, `node-pulse` animation
+- Corner star markers (`****`) — mono text, positioned absolute
- Vertical sidebar text (`writing-mode: vertical-rl`)
- Numbered index grids (00–23 in 8-column grid)
+- Inverted labels (`.label-inv`) — bright bg, dark text, no radius
+
+## Embedding Graph Overlay
+
+A background layer of interconnected crosshair nodes arranged as
+an embedding/vector-space visualization. Inspired by Detroit
+Underground record sleeve schematics.
+
+### Node Layout
+16 crosshair nodes (`#ch-0` through `#ch-15`) in 4 clusters plus
+outliers, positioned with `position: absolute` percentages:
+
+- **Cluster A** (upper-left, near `#sc-1`): ch-0 through ch-3
+- **Cluster B** (upper-right, sparse): ch-4, ch-5
+- **Cluster C** (mid-left, near `#sc-2`): ch-6 through ch-8
+- **Cluster D** (lower region): ch-9 through ch-12
+- **Outliers**: ch-13, ch-14, ch-15 (bridge nodes between clusters)
+
+3 hub nodes as larger schematic circles (`#sc-1`, `#sc-2`, `#sc-3`)
+with crosshair pseudo-elements and `node-pulse` animation.
+3 star markers (`#sm-1`, `#sm-2`, `#sm-3`) as `****` text.
+
+### Edge Topology
+Edges defined as `[fromId, toId, style, label?]` array:
+- **Intra-cluster** — short connections within each cluster
+- **Inter-cluster bridges** — longer connections between clusters,
+ labeled with embedding metrics (`cos=0.74`, `d=0.12`)
+- **Hub connections** — edges from crosshair nodes to schematic
+ circles and star markers
+
+### Connector Rendering
+JS-drawn SVG overlay. On load (and resize), reads
+`getBoundingClientRect` centers of all nodes, then draws
+**quadratic bezier curves** (`Q` command) between them:
+
+```js
+const dx = b.x - a.x, dy = b.y - a.y;
+const mx = (a.x + b.x) / 2 + dy * 0.12;
+const my = (a.y + b.y) / 2 - dx * 0.12;
+path.setAttribute('d', `M ${a.x},${a.y} Q ${mx},${my} ${b.x},${b.y}`);
+```
+
+Single control point offset 12% perpendicular from the midpoint.
+This produces exactly one gentle arc per line — never S-curves.
+
+Connector styles:
+- `conn-dashed` — `stroke-dasharray: 6 4`, animated `dash-flow` 12s
+- `conn-dashed-rev` — same dash, reverse direction 15s
+- `conn-dot` — 2px filled circles at each endpoint
+- `conn-label` — 7px mono text near midpoint (`d=0.12`, `cos=0.74`)
+- All connectors render at `opacity: 0.8` base
+
+### Node Hover Interaction
+Crosshair nodes have `pointer-events: auto` (rest of the field is
+`pointer-events: none`). On hover:
+
+1. **Crosshair expansion** — `::before`/`::after` pseudo-elements
+ scale 1.8x on their respective axes, color brightens to
+ `--color-text`
+2. **SLOT label** — `SLOT_XX` micro-tooltip appears above node.
+ 6px mono text, bordered container with `--color-bg` background
+3. **Ring pulse** — circular ring (`.ch-ring`) scales from 0.6 to
+ 1.0 and fades in at 50% opacity around the node
+4. **Connected edge highlight** — JS builds adjacency map from
+ edge list. On hover, all SVG elements belonging to connected
+ edges get `.conn-highlight` class: stroke brightens to
+ `--color-text`, width increases to 1.5px, dots/labels brighten
+5. **On mouseleave** — all `.conn-highlight` classes removed
## Generative Art
@@ -180,29 +280,29 @@ Use `--color-dither` so canvases adapt to theme.
## Depth & Layering
-The design uses multiple overlapping layers to create spatial depth,
-inspired by flight terminal / CRT interface aesthetics:
+Multiple overlapping layers create spatial depth, inspired by
+flight terminal / CRT interface aesthetics:
-1. **SVG noise grain** — `body::before`, fixed, z-index 9999 (0.04/0.06 opacity)
-2. **Bleed typography** — massive text (12–20rem) bleeding off viewport edges,
- 2.5% opacity, `--font-display`, provides subliminal brand reinforcement
-3. **Floating panels** — 4–6 translucent rectangles (`--color-surface` and
- `--color-surface-raised`) at 15–50% opacity, positioned at various
- depths around the viewport. Creates the layered glass-panel effect.
-4. **Metadata fragments** — scattered timestamps, coordinates, version codes,
- reference numbers in 7px mono text at 35% opacity. Both functional
- texture and information-density signifier.
-5. **Schematic overlay** — circles with crosshairs, connector lines, star markers
-6. **Crosshair field** — repeating + marks at very low opacity
+1. **SVG noise grain** — `body::before`, fixed, z-index 9999
+ (0.04/0.06 opacity)
+2. **Bleed typography** — massive text (12–20rem) bleeding off
+ viewport edges, 2.5% opacity, `--font-display`
+3. **Floating panels** — 4–6 translucent rectangles at 15–50%
+ opacity, drifting ±3–4px over 40–65s cycles
+4. **Metadata fragments** — scattered timestamps, coordinates,
+ version codes in 7px mono text at 35% opacity
+5. **Embedding graph** — crosshair nodes + quadratic bezier
+ connectors at 80% opacity (see section above)
+6. **Schematic overlay** — circles with crosshairs, star markers
7. **Right edge dither** — 240px canvas strip, organic noise
-8. **Section panels** — content wrapped in `--color-surface` panels with
- corner registration marks (6px L-brackets). Elevates content above
- the background layers.
+8. **Section panels** — content wrapped in `--color-surface`
+ panels with corner registration marks
## Animation & Interaction
-All animations are subtle and ambient — never attention-grabbing. The
-goal is to create the feeling of a live, breathing system dashboard.
+All animations are subtle and ambient — never attention-grabbing.
+The goal is to create the feeling of a live, breathing system
+dashboard.
### Ambient (CSS keyframes)
- **Floating panel drift** — `fp-drift` 40–65s ease-in-out infinite
@@ -210,33 +310,33 @@ goal is to create the feeling of a live, breathing system dashboard.
- **Metadata flicker** — `mf-flicker` 7–15s. Brief opacity dip to
simulate data refresh. Stagger child delays.
- **SVG connector dash flow** — `dash-flow` / `dash-flow-rev` on
- `stroke-dasharray: 6 4` paths, 12–15s linear infinite. Dashed
- bezier curves and straight lines with endpoint dots.
+ `stroke-dasharray: 6 4` paths, 12–15s linear infinite.
- **Schematic node pulse** — `node-pulse` 5–8s, scale 1→1.04 and
- opacity 1→0.7 on circles with crosshairs.
+ opacity 1→0.7 on hub circles with crosshairs.
- **Scan line sweep** — 1px horizontal gradient line sweeps top to
bottom every 15–25s at 0.06 opacity. Triggered via JS setTimeout.
### Interactive (JS + CSS transitions)
- **Scroll reveal** — `.reveal` class, `IntersectionObserver` with
- `threshold: 0.08`. Fade+translateY(12px→0), 0.6s ease-out. Above-fold
- elements stagger with 80ms delay increments.
-- **Cursor coordinates** — fixed `div` follows mouse, shows `x: # y: #`
- in 7px mono, fades to 0 after 2s idle.
-- **Icon hover coordinates** — CV-debug-style `x:### y:###` label at
- top-right of icon cells, green color (`--color-success`), fades in
- on hover. Icon SVGs scale 1.12x.
+ `threshold: 0.08`. Fade+translateY(12px→0), 0.6s ease-out.
+ Above-fold elements stagger with 80ms delay increments.
+- **Cursor coordinates** — fixed `div` follows mouse, shows
+ `x: # y: #` in 7px mono, fades to 0 after 2s idle.
+- **Node hover** — crosshair expansion + ring pulse + SLOT label +
+ connected edge highlighting (see Embedding Graph section).
+- **Icon hover coordinates** — CV-debug-style `x:### y:###` label
+ at top-right of icon cells, green color (`--color-success`),
+ fades in on hover. Icon SVGs scale 1.12x.
- **Swatch hover** — scale 1.08x with 1px outline ring.
- **Input focus glow** — 1px `box-shadow` ring on focus.
-### SVG Connector Overlay
-JS-drawn SVG layer. On load (and resize), reads `getBoundingClientRect`
-centers of schematic circles (`#sc-*`), crosshairs (`#ch-*`), and
-star markers (`#sm-*`), then draws cubic bezier curves between them
-with endpoint dots and slot/pass labels. This ensures connectors
-always attach to real background elements. Edges defined as
-`[fromId, toId, style, label?]` array. Uses `conn-dashed` /
-`conn-dashed-rev` classes for animated `stroke-dashoffset`.
+### Animation Anti-Patterns
+- No bounce or spring animations
+- No scale-up entrance effects
+- No flash/blink effects
+- No parallax scrolling
+- Durations always > 5s for ambient, 0.2–0.6s for interactive
+- Never `animation-iteration-count: 1` for ambient effects
## Layout Principles
@@ -258,9 +358,11 @@ On toggle: update attribute, re-render all canvas dither art after
## Resources
+- `assets/design-brief.png` — Full-page reference screenshot of
+ the design brief with all components and background layers.
- `assets/globals.css` — Complete token stylesheet with dual themes,
typography, components, icon classes, and utilities.
- `assets/index.html` — Full reference implementation with all
- components, icon set, generative art, theme toggle.
+ components, icon set, generative art, embedding graph, theme toggle.
- `references/generative-patterns.md` — Perlin noise + fbm + Bayer
dither + glitch smear implementation with code.
diff --git a/skills/signet-design/assets/design-brief.png b/skills/signet-design/assets/design-brief.png
new file mode 100644
index 000000000..9ea5965eb
Binary files /dev/null and b/skills/signet-design/assets/design-brief.png differ
diff --git a/skills/signet-design/assets/index.html b/skills/signet-design/assets/index.html
index e288f2fb3..fae413245 100644
--- a/skills/signet-design/assets/index.html
+++ b/skills/signet-design/assets/index.html
@@ -255,6 +255,7 @@
border: 1px solid var(--color-border-strong);
border-radius: 50%;
pointer-events: none;
+ opacity: 0.8;
animation: node-pulse 6s ease-in-out infinite;
}
.schematic-circle:nth-child(2) { animation-delay: -2s; animation-duration: 8s; }
@@ -299,6 +300,8 @@
stroke: var(--color-border-strong);
stroke-width: 1;
fill: none;
+ opacity: 0.8;
+ transition: opacity 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}
.connector-svg .conn-dashed {
stroke-dasharray: 6 4;
@@ -317,6 +320,8 @@
.connector-svg .conn-dot {
fill: var(--color-text-muted);
r: 2;
+ opacity: 0.8;
+ transition: opacity 0.3s ease, fill 0.3s ease;
}
.connector-svg .conn-dot--bright {
fill: var(--color-text);
@@ -334,6 +339,21 @@
text-transform: uppercase;
fill: var(--color-text-muted);
opacity: 0.4;
+ transition: opacity 0.3s ease, fill 0.3s ease;
+ }
+ /* Highlight state for edges connected to hovered node */
+ .connector-svg path.conn-highlight {
+ stroke: var(--color-text);
+ stroke-width: 1.5;
+ opacity: 1;
+ }
+ .connector-svg .conn-dot.conn-highlight {
+ fill: var(--color-text-bright);
+ opacity: 1;
+ }
+ .connector-svg .conn-label.conn-highlight {
+ fill: var(--color-text);
+ opacity: 0.8;
}
/* Vertical sidebar */
@@ -639,12 +659,17 @@
position: absolute;
width: 12px;
height: 12px;
+ pointer-events: auto;
+ cursor: crosshair;
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
}
.crosshair-field .ch::before,
.crosshair-field .ch::after {
content: '';
position: absolute;
background: var(--color-border);
+ transition: background 0.25s ease, transform 0.25s ease;
}
.crosshair-field .ch::before {
width: 1px;
@@ -656,6 +681,55 @@
height: 1px;
top: 50%;
}
+ /* Node hover — expand crosshair, brighten */
+ .crosshair-field .ch:hover {
+ opacity: 1;
+ }
+ .crosshair-field .ch:hover::before {
+ background: var(--color-text);
+ transform: scaleY(1.8);
+ }
+ .crosshair-field .ch:hover::after {
+ background: var(--color-text);
+ transform: scaleX(1.8);
+ }
+ /* Node label — hidden until hover */
+ .crosshair-field .ch-label {
+ position: absolute;
+ top: -16px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-family: var(--font-mono);
+ font-size: 6px;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--color-text);
+ white-space: nowrap;
+ opacity: 0;
+ transition: opacity 0.25s ease;
+ pointer-events: none;
+ background: var(--color-bg);
+ padding: 1px 4px;
+ border: 1px solid var(--color-border-strong);
+ }
+ .crosshair-field .ch:hover .ch-label {
+ opacity: 1;
+ }
+ /* Ring pulse on hover */
+ .crosshair-field .ch-ring {
+ position: absolute;
+ inset: -6px;
+ border: 1px solid var(--color-text-muted);
+ border-radius: 50%;
+ opacity: 0;
+ transform: scale(0.6);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ pointer-events: none;
+ }
+ .crosshair-field .ch:hover .ch-ring {
+ opacity: 0.5;
+ transform: scale(1);
+ }
/* === Schematic overlay === */
.schematic-overlay {
@@ -790,26 +864,26 @@
-
-
-
-
+
SLOT_00
+
SLOT_01
+
SLOT_02
+
SLOT_03
-
-
+
SLOT_04
+
SLOT_05
-
-
-
+
SLOT_06
+
SLOT_07
+
SLOT_08
-
-
-
-
+
SLOT_09
+
SLOT_10
+
SLOT_11
+
SLOT_12
-
-
-
+
SLOT_13
+
SLOT_14
+
SLOT_15