style: align web dashboard with Nous design language#6
Merged
kshitijk4poor merged 2 commits intoApr 12, 2026
Conversation
Port the official hermes-agent.nousresearch.com design system: - Amber/warm-brown palette (#ffac02 accent, #170d02 background, #ffe6cb text) - Bundle custom fonts (Mondwest, Collapse, RulesExpanded, RulesCompressed, Courier Prime) - Grid-border layout with structural borders instead of rounded cards with shadows - Uppercase tracking, monospace body text, display headings - Dither texture utility, blink cursor animation, thin amber scrollbars - Plus-lighter blend mode on headings - Sharp-edged components (no border-radius) to match landing page aesthetic
…sresearch.com Major visual overhaul to match the official Hermes Agent site and NousResearch/design-language canonical design system: Color palette: - Dark teal background (#041C1C) matching LENS_0 from design-language - Warm cream text (#ffe6cb) as midground color - Subtle borders at 15% foreground opacity Typography: - Mondwest for nav labels, UI text, body - RulesExpanded Bold for card/section headings - RulesCompressed for badges (canonical pattern) - Collapse for brand mark - System monospace (SF Mono) for dynamic values like model names Overlays (from NousResearch/design-language): - Noise: color-dodge blend on #eaeaea at 10% opacity (CSS approx of canonical WebGL shader) - Vignette: top-left amber radial gradient, lighten blend, 22% opacity - Cards/header slightly transparent so grain composites through EnvPage redesign: - Group API keys by provider (Nous Portal first, then alphabetical) - API key + base URL grouped per provider in collapsible rows - All providers shown by default (no hidden-behind-advanced for LLM keys) - All provider groups collapsed by default UX fixes: - All dropdowns/accordions collapsed by default (skills, env providers) - Analytics chart colors: cream (#ffe6cb) for input, emerald for output - Session preview text: added right padding to prevent italic glyph clipping - Skill description text vertically centered in collapsed rows - Blink cursor only animates on group:hover (canonical pattern)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restyling the web dashboard to match hermes-agent.nousresearch.com and the canonical NousResearch/design-language design system.
This adds on top of your existing
feat/web-ui-dashboard-salvagebranch — no functional changes, purely visual.What changed
Color palette → dark teal (matches live site)
#041C1C(LENS_0 from design-language, was generic blue-gray)#ffe6cbwarm cream (midground color)ffe6cbat 15% opacity (subtle, not harsh)Typography → official Nous fonts
Overlays (from NousResearch/design-language)
color-dodgeblend on#eaeaea(CSS approximation of canonical WebGL shader)lightenblendEnvPage redesign
UX fixes
Files changed (20 files)
New:
web/public/fonts/*.woff2— 9 font filesModified:
web/src/index.css— complete palette + overlay + font-face rewriteweb/src/App.tsx— header/footer/nav restyled with grid bordersweb/src/components/ui/*— card, badge, button, tabs, input, select, switch, label, separator, toastweb/src/pages/EnvPage.tsx— provider grouping redesignweb/src/pages/StatusPage.tsx— typography fixesweb/src/pages/SessionsPage.tsx— padding fixweb/src/pages/AnalyticsPage.tsx— chart color fixweb/src/pages/SkillsPage.tsx— collapse default + alignment fixweb/src/pages/LogsPage.tsx— minor class fixesScreenshots
Tested locally via
hermes web. All pages render and build cleanly (npm run buildpasses).