Skip to content

UI_REDESIGN.md

Latest commit

 

History

History
87 lines (66 loc) · 3.13 KB

UI_REDESIGN.md

File metadata and controls

87 lines (66 loc) · 3.13 KB
Raw

ShadowCore UI Redesign

Outcome

ShadowCore now uses a complete operations-focused interface built around an industrial command-desk aesthetic. The redesign covers the public landing and OAuth states, authenticated application shell, every dashboard route, shared forms, cards, tables, modals, empty states, feedback, and responsive behavior.

Product analysis

ShadowCore is a Next.js staff dashboard backed by a Discord operations API and realtime socket layer. Its primary jobs are:

  • See guild, bot, database, and automation health quickly.
  • Moderate members without losing context.
  • Configure logging, onboarding, and automatic moderation.
  • Create roles, announcements, and trigger-action automations.
  • Inspect audit history and guild telemetry.

The previous UI mixed generic glass panels, rounded presentation components, and several inconsistent control styles. Information hierarchy was present, but operational state, actions, and page identity did not feel like one system.

Design system

Direction

Incident command desk: dark graphite work surfaces, signal amber for operator actions, mint for healthy state, and red only for danger or failure. Fine grid lines, narrow radii, labeled panels, and compact monospace metadata make the product feel precise without harming readability.

Typography

  • IBM Plex Sans for interface, headings, and dense operational content.
  • IBM Plex Mono for status labels, codes, counters, and metadata.

Interaction rules

  • Primary actions use amber and retain a clear hover/focus response.
  • Destructive actions remain red and visually separate.
  • Focus rings are visible on keyboard navigation.
  • Motion is short, purposeful, and disabled for reduced-motion users.
  • Form fields, selectors, toggles, cards, tabs, badges, alerts, and modals now share common tokens.

No-SVG constraint

All Heroicons and hand-written SVG loaders/charts were removed. UI icons now use the Font Awesome webfont, spinners use CSS borders, and analytics progress uses a CSS conic gradient. Browser checks found zero rendered svg elements.

Redesigned surfaces

  • Landing page and staff sign-in
  • OAuth callback and unauthorized states
  • Responsive sidebar and top command bar
  • Dashboard overview
  • Server configuration
  • Moderation and ban review
  • Role management and role-member dialogs
  • Announcement composer, embed builder, preview, and history
  • Audit logs and filters
  • Analytics and system health
  • Automation list, builder, status, and execution feedback
  • Help and operator guide
  • Profile and session status
  • Shared buttons, cards, section shells, page headers, alerts, empty states, inputs, selectors, toggles, loaders, and modals

Verification

Completed on July 27, 2026:

  • npm run lint
  • npx tsc --noEmit
  • npm run build
  • Production Chromium render at 1440 px, 1280 px, and 390 px widths
  • Public landing checked at desktop and mobile widths
  • All authenticated dashboard routes rendered with deterministic mocked API data
  • No browser page errors
  • No horizontal overflow
  • No rendered SVG nodes

Reference screenshots are stored outside the repository in the Codex visualizations workspace for this task.