Skip to content

feat(design): port neuraldeep visual identity (palette + Inter + motion)#225

Merged
vakovalskii merged 1 commit into
mainfrom
feat/neuraldeep-design-tokens
May 26, 2026
Merged

feat(design): port neuraldeep visual identity (palette + Inter + motion)#225
vakovalskii merged 1 commit into
mainfrom
feat/neuraldeep-design-tokens

Conversation

@vakovalskii
Copy link
Copy Markdown
Owner

What

Ports the neuraldeep hub-frontend visual identity onto codbash while keeping the zero-deps vanilla-JS architecture intact.

Before / after (dark theme — default)

before 7.5.0 after
bg `#1a1d23` `#08090C` (deep cool black)
panel `#2a2e37` `#121418`
border `#363b44` `#2A2D33`
text `#e4e7eb` `#EBEDF0` (slightly cool)
muted `#5f6571` `#9499A5` (AA on the new bg)
brand accent `#4ade80` (mint) `#00FF88` (neon brand)
font system stack Inter (Google Fonts, falls back to system)

Light theme cooled to `#FAFBFC` bg + `#111827` fg + AA-safe deeper green `#10804A`.
Monokai theme untouched — kept as the retro third option.

What ships

Tokens (`src/frontend/styles.css`)

  • All `:root` (dark) and `[data-theme="light"]` palette values replaced
  • RGB-triplet aliases (`--c-accent` / `--c-bg` / `--c-panel` / `--c-border` / `--c-fg` / `--c-muted`) added — enables `rgb(var(--c-accent) / 0.12)` alpha-modulation
  • Semantic accents (blue/orange/purple/red/cyan) left alone — they carry meaning (tool badges, status indicators)

Motion

  • `html.theme-transition` class (toggled by `setTheme` in app.js) gives a smooth 180ms cross-fade on theme swap, then removes itself so individual hovers stay snappy
  • `@keyframes accent-pulse` + `.cta-pulse` class — soft 2.4s glow for primary CTAs
  • `[data-reveal]` opt-in scaffold for fade-up entry animations (pure CSS, no JS hooked up yet — additive follow-up)
  • `prefers-reduced-motion` short-circuits all of the above

Typography

  • `<link rel="stylesheet" ...family=Inter...">` in `index.html`
  • Body font: `'Inter', -apple-system, ..., sans-serif` (graceful fallback if Google Fonts unreachable)
  • `-webkit-font-smoothing: antialiased` for crisper rendering on Retina

CSP (`src/server.js`)

Verified

  • `node -c` clean on `src/server.js` and `src/frontend/app.js`
  • `node --test test/*.test.js` → 144/0/2 (no regressions)
  • Dark theme — palette, Inter, neon green confirmed via Playwright screenshot
  • Light theme — cool off-white + AA-safe accent confirmed
  • Monokai — preserved unchanged (`--accent-green: #a6e22e` still wins on `[data-theme="monokai"]`)
  • CSP no longer blocks the font (`document.fonts.check('1em Inter')` → `true`)

Diff size

4 files, +90/-21 — mostly CSS variable values in two `:root` blocks.

What this does NOT do

  • ❌ No React / Tailwind / build step — zero-deps vanilla-JS architecture preserved
  • ❌ No component restructure — sidebar/cards/buttons keep their existing markup
  • ❌ Monokai theme not touched
  • ❌ Semantic accent colors (blue/orange/purple/red/cyan) not changed — they still differentiate tool badges and statuses

Tokens
- Dark theme deepened to #08090C bg / #121418 panels with #2A2D33 borders
- Cool text (#EBEDF0 / #B6BCC8 / #9499A5) replaces gray-blue stack
- Brand accent shifted to neon green #00FF88 (dark) / AA-safe #10804A (light)
- Light theme cooled to #FAFBFC bg + #111827 fg + #57606D muted
- RGB-triplet aliases (--c-accent / --c-bg / --c-panel / --c-border / --c-fg /
  --c-muted) added for rgb(var(--c-accent) / 0.12) alpha-modulation
- Monokai theme untouched (preserved as a separate retro identity)

Motion
- 180ms theme cross-fade via html.theme-transition class (toggled by setTheme)
- accent-pulse keyframe for primary CTAs
- data-reveal opt-in for fade-up entry (no JS active yet — pure CSS scaffold)
- prefers-reduced-motion respected for all of the above

Typography
- Inter loaded from Google Fonts, font-smoothing antialiased
- CSP relaxed for fonts.googleapis.com / fonts.gstatic.com only

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vakovalskii vakovalskii merged commit b4e6cba into main May 26, 2026
6 checks passed
@vakovalskii vakovalskii deleted the feat/neuraldeep-design-tokens branch May 26, 2026 05:41
@vakovalskii vakovalskii mentioned this pull request May 26, 2026
3 tasks
vakovalskii added a commit that referenced this pull request May 26, 2026
Patch — picks up the design port (#225) and Pi resume-target hardening
(#224) shipped since 7.5.0.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant