Redesigning Admin Components

Quick Start

Given a component to redesign, produce a 100% new visual treatment that follows these non-negotiable constraints:

• Theme tokens only from src/themes (colors, spacing, radii, typography scale) — no ad-hoc hex values outside that source.
• No competing skills/styles from elsewhere in the project — this is the sole design authority for the change.
• Icons: Lucide only (lucide-react or equivalent for the stack in use).
• Shadows: none, anywhere. Depth comes from flat layering, borders, and translucency only.
• Design language: compact, flat glassmorphism — translucent surfaces (backdrop-blur + low-opacity backgrounds), thin 1px borders, no gradients-as-shadows, no elevation blur.
• Colors: solid, flat fills from the theme palette — no gradients, no multi-stop blends.
• Fonts: JetBrains Mono for data/numeric/code-like content (labels, stats, table data, badges), Outfit for headings/body/UI copy.
• Pick ONE admin panel archetype (see Workflow step 2) and apply it consistently to every file touched in this session.

Example minimal glass card (React/Tailwind-flavored, adapt to stack):

TypeScript
import { Activity } from 'lucide-react';

<div className="backdrop-blur-md bg-surface/40 border border-border/50 rounded-lg p-4">
  <div className="flex items-center gap-2">
    <Activity size={16} className="text-accent" />
    <span className="font-outfit text-sm text-text-primary">Active Sessions</span>
  </div>
  <p className="font-mono text-2xl text-text-primary mt-2">1,248</p>
</div>

Workflow

Progress:

• Step 1: Audit existing component — note layout, spacing, hardcoded colors, icon library, fonts, shadow usage. This is what gets discarded.
• Step 2: Pick ONE admin archetype randomly from the list below (or an equally distinct one) and commit to it for every file in this change set.
• Step 3: Map every color used to a token in src/themes. If no token fits, flag it rather than inventing a hex value.
• Step 4: Replace all icons with Lucide equivalents (match by semantic meaning, not just shape).
• Step 5: Strip all box-shadow / elevation utilities. Rebuild depth via borders, blur, and opacity layering only.
• Step 6: Apply JetBrains Mono to numeric/tabular/code content, Outfit to everything else (headings, labels, nav, body).
• Step 7: Rebuild layout from scratch — do not reuse existing grid/flex structure, spacing rhythm, or component hierarchy.
• Step 8: Cross-check every other file touched in this session uses the same archetype, spacing scale, and glass treatment.

Archetype pool (pick exactly one per session, stay consistent):

1. Command Deck — dense sidebar + top command bar, data-forward, monospace-heavy stats.
2. Modular Tiles — bento-grid of glass tiles, each self-contained, generous internal padding but tight grid gaps.
3. Sidebar Console — collapsible icon-rail nav + glass content panels, terminal-adjacent feel.
4. Split Workspace — two-pane layout (list/detail), glass dividers, minimal chrome.
5. Floating Panels — overlapping translucent panels on a flat solid-color canvas, no page background texture.

Best Practices

• Opacity range for glass surfaces: 30–50% background fill, 40–60% border opacity — stay flat, avoid looking "foggy" or over-blurred.
• Use border color/width changes (not shadow) to indicate hover/focus/active states.
• Keep padding/gaps tight ("compact") — favor p-3/p-4 and gap-2/gap-3 equivalents over spacious layouts.
• Use Lucide's size prop consistently (e.g., 16 for inline, 20 for nav, 24 for feature icons) — don't mix arbitrary sizes.
• Reserve JetBrains Mono strictly for data: metrics, IDs, timestamps, code, table cell values, badges with counts.
• Use Outfit for everything a human reads as prose or UI chrome: headings, buttons, nav labels, descriptions.
• When multiple files are touched, build one shared reference block (e.g., a style note or shared constants) so archetype/spacing/typography decisions stay identical across the set.
• Solid colors should still convey hierarchy — use the theme's distinct tonal steps (e.g., surface/surface-alt/accent) rather than opacity tricks to fake variety.

Common Pitfalls

• Don't reuse any part of the original layout "just to save time" — the brief demands zero resemblance.
• Don't add box-shadow, drop-shadow, or elevation utility classes anywhere, including on hover states.
• Don't use gradients to simulate solid-color depth — flat fills only.
• Don't mix icon libraries (no Heroicons/Feather/FontAwesome alongside Lucide).
• Don't pull colors from outside src/themes, even visually close ones.
• Don't apply JetBrains Mono to headings or prose, or Outfit to numeric/data displays — the split must stay strict.
• Don't pick a different archetype for each file in the same session — inconsistency across the change set defeats the requirement.
• Don't over-blur glass surfaces to the point of illegibility — compact and flat still means readable.