HashHive Design Context#

This file is the source of truth for design decisions on the HashHive frontend. It is read by /impeccable:* skills and any agent working on UI surfaces.

Design Context#

Users#

HashHive serves three operator roles, all of them technical security/red-team personnel running the platform in a private lab on a closed network:

Admins — global system + user + project management. Power-tools posture, expects to see everything.
Power-users — project-level admins running campaigns across 7–10+ GPU rigs (~25× RTX 4090 capacity). Day-to-day operators. Comfortable with hashcat command surface, attack modes, mask languages, rule files. They do NOT need hand-holding.
End users — campaign creators and result reviewers. Less infrastructure-savvy than power-users, but still technical.

Operator context: 1–3 concurrent dashboard users on the LAN. Long-running sessions (hours to days). Operators glance at the dashboard while hashcat is running on the rigs — the dashboard is a status surface and a control plane, not a destination. Often viewed on second monitors or a wall display.

The job to be done: "Tell me, at a glance, that my rigs are running, my campaigns are progressing, and surface the moment a hash cracks." Plus: "When something is wrong (rig offline, queue backed up, object store slow), make it impossible to miss."

Brand Personality#

Three words: operator-grade, editorial, candid.

Operator-grade — built for people who know what they're doing. Dense by default, no condescending empty states, no marketing tone. Treats the user as a peer.
Editorial — typography-forward, intentional typography hierarchy (Space Grotesk display + Space Mono for hashes/IDs/output), editorial use of color rather than UI-kit reflex. The dashboard reads like a well-designed data magazine, not a SaaS template.
Candid — when things are broken, the UI says so. When a hash cracks, the UI celebrates. No fake-positive empty states, no aspirational charts, no marketing voice anywhere.

Voice: Direct, technical, no jargon-cheating. "Queue depth 12,340 exceeds warn threshold 10,000" beats "Something's not quite right!" Operators read the message text and trust it.

Emotional goal: Dramatic ops theater — the dashboard should feel like a pit-wall HUD or NOC display. Big numbers when they earn their size. Motion when the system moves, not when the chrome moves. The moment of a successful crack is acknowledged. The moment a rig goes offline is unmissable. Everything between is calm, dense, and trustworthy.

Aesthetic Direction#

Theme: Dark only. Locked via <html class="dark"> and color-scheme: dark. There is no light mode. Operators run this in dim labs, on second monitors, often at 2 AM. Light mode would be wrong for the scene.

Palette: Catppuccin Macchiato is the locked palette. Surface hierarchy crust → mantle → base → surface0/1/2 maps to depth. The full Catppuccin accent range (lavender, blue, sapphire, sky, teal, green, yellow, peach, maroon, red, mauve, pink, flamingo, rosewater) is available for editorial use, not just semantic status. Peach (#f5a97f) is the brand primary.

Color strategy: Editorial / data-rich (Committed register on the impeccable color-strategy axis). The Catppuccin range is treated as an editorial palette: per-attack-mode colors for chunking, graph series in the lavender → sapphire → sky → teal → green sequence, domain accents. Semantic status (green/yellow/red) still uses the same tokens but in their semantic role. The default surface is tinted neutrals; color appears with intent.

Typography: Space Grotesk (300–700) for everything except code, hashes, IDs, raw hashcat output, and probe detail dumps — those use Space Mono. Body line-height 1.6 (slightly looser for light-on-dark readability). Hierarchy via scale + weight contrast (≥1.25 ratio). Tabular numerals for stats.

Motion: Compositor-friendly only (transform, opacity, clip-path). Ease-out exponential curves. Reserved for operator moments, not chrome:

A hash cracks → the result row arrives with a brief reveal.
A rig transitions online → the agent indicator pulses once.
A campaign completes → the campaign card acknowledges it.
Status dots pulse on degraded/unhealthy (already implemented, motion-reduce-aware).

No motion for: page transitions, button presses, hover effects, loading skeletons (those use opacity-only fades).

Reference posture: Imagine a Formula 1 pit-wall HUD redrawn by someone who cares about typography, with the discipline of Bloomberg Terminal and the warmth of Catppuccin. Or: hashtopolis if it had been designed by the team behind Linear and ported to a dark editorial palette.

Anti-References (explicit rejection list)#

The user has explicitly rejected ALL of these aesthetic lanes — they are reflex traps for password-cracking / security tooling:

NOT generic SaaS dashboard — no cards-on-cards, no gradient hero metric, no cream backgrounds, no "I cost $25/seat" Linear/Vercel/Stripe reflex, no illustrated empty states, no marketing voice anywhere.
NOT enterprise security tool — no navy + gold, no Splunk/Tenable/Cisco vibe, no compliance-software density, no '$80k/seat' aesthetic.
NOT hacker theater — no Matrix green-on-black, no scrolling terminal effects, no skull icons, no fake-leet typography, no "look I'm hacking" cosplay.
NOT neon crypto dashboard — no glassmorphism, no neon gradients on black, no Coinbase Pro / Binance reflex, no animated number tickers as decoration, no RGB underglow, no web3 anything.

Whenever a design choice could be guessed from "password-cracking platform" alone (green-on-black, skull-icon, hash-as-decoration), reject it. The honest answer is editorial-warm dark with Catppuccin's peach/lavender/sapphire range — distinct from every saturated category lane.

Design Principles#

These five rules govern every design decision on HashHive. When a pattern conflicts with a principle, the principle wins.

Theater earns its place. Motion and spectacle are reserved for genuine operator moments — a hash cracks, an agent transitions, a campaign completes. Never for chrome (page loads, hovers, button presses). If you're animating because the page felt empty, remove the animation, not the emptiness.
Editorial color, never neon noise. Use Catppuccin's full range for chunking domains, encoding attack modes, and series in data viz. Reserve green/yellow/red for actual semantic status. A "gradient because it looks cool" is wrong; a "lavender header on the campaigns section because it's the campaign domain color" is right.
Every signal pairs with a non-color cue. Status = color plus icon plus label, never color alone. A degraded queue is a yellow dot and a warning glyph and the message "queue depth 12,340 exceeds 10,000." Survives color-blind operators, grayscale screenshots, and prefers-contrast settings.
Keyboard is a first-class peer of mouse. Visible focus rings (peach, 2px, offset 2px — already wired in :focus-visible). Logical tab order. Frequent operator actions surface a kbd hint inline (refresh, switch project, jump to agents). Reduced-motion users see no spinning loaders, no slide transitions, no auto-scroll.
No category reflexes. SaaS-cream, enterprise-navy, hacker-green, crypto-neon are all explicit anti-references. When a design could be guessed from "security tool" or "GPU dashboard" alone, rework it until the answer isn't obvious from the category. The first reflex is wrong; usually the second one is too.

Conformance target: WCAG 2.2 AA. The principles above (non-color cues, visible focus, keyboard parity, reduced-motion) are the how; AA is the measurable floor the implementation must clear — 4.5:1 contrast for body text, 3:1 for large text and for UI component / state boundaries, and the full set of 2.2 AA success criteria. Catppuccin Macchiato is a mid-tone palette, so some accent-on-surface pairings will not reach 4.5:1 as text: when an accent can't clear the floor for text, pair it with weight, size, or a non-color cue (per principle 3) rather than dropping below AA. AAA is not a goal — chasing 7:1 on this palette would flatten the editorial color range.

Locked Stack & Tokens#

These are not design decisions to revisit — they're constraints already wired into the codebase.

Theme: dark-only Catppuccin Macchiato (<html class="dark">, color-scheme: dark in index.html and index.css).
Tokens: packages/frontend/src/index.css defines the full token system — surfaces, text hierarchy, semantic colors, full Catppuccin accent palette, typography vars. New design work uses these tokens, doesn't redefine them.
Type: Space Grotesk (--font-sans) + Space Mono (--font-mono), loaded from Google Fonts in index.html.
Components: shadcn/ui primitives (Radix-backed via the unified radix-ui package + class-variance-authority + tw-animate-css) in src/components/ui/, feature components in src/components/features/. Lucide React for icons. Reach for shadcn/Radix before hand-rolling any interactive primitive — do not reintroduce bespoke dialogs/selects/tabs/toggles.
Logo: src/assets/logo.svg — hexagonal honeycomb cluster with peach lock. Don't redesign without explicit ask.
Existing surfaces: Dashboard, agents (list + detail), campaigns (list + detail + create), templates, hash lists, results, resources, crackers, account, login, select-project. Plus SystemHealthCard, ConnectionIndicator, StatCard, StatusBadge, sidebar, layout.

How to use this file#

Any /impeccable:* invocation reads this on startup. Don't rebuild context from the original prompt alone.
/impeccable shape and /impeccable craft use the Design Principles to constrain output.
/impeccable critique and /impeccable audit measure new work against this file.
If a design choice contradicts something here, surface the contradiction explicitly before proceeding — don't silently override.