tech-green-dark-mode-modern — Claude Code skill: install & guide

---
name: tech-green-dark-mode-modern
description: "Create a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow."
---

# Tech Green Dark Mode Modern Skill

## Use When
- Create a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.

## Workflow

## Scope
- Apply this as a full design-system direction across page background, layout framing, cards, navigation, typography, data modules, and motion.
- Use it when the interface should feel modern, analytical, technical, and premium, with green signal accents over a dark operational surface.
- This is not generic neon cyberpunk and not plain enterprise dark mode. It should feel calm, precise, and product-grade.

## Visual target
- Build the interface on a black or near-black base with subtle tonal separation between page background, panels, and elevated surfaces.
- Use emerald, mint, or controlled tech-green accents as the primary signal color for active states, live indicators, border details, and focused visual zones.
- Add technical framing with faint grid lines, vertical guides, corner brackets, tick marks, mono system labels, and utility metadata so the page feels instrumented.
- Cards should look premium and modern: dark glass or matte shells, thin gradient borders, soft inner glow, restrained blur, and precise spacing.
- Keep green glow controlled and localized. It should punctuate key components rather than flooding the whole interface.

## Implementation guidance
- Prefer a structured dashboard or module-based layout with strong rhythm, consistent gutters, and clearly segmented data surfaces.
- Use clean sans-serif typography for headlines and body, then pair it with mono text for labels, system IDs, timestamps, and micro-metadata.
- Let green accents appear in status dots, progress fills, corner markers, subtle gradients, active borders, graph highlights, and small emphasis chips.
- Backgrounds can include faint diagonal texture, technical grid lines, or soft patterned overlays, but keep them low-contrast so content stays primary.
- Use framed cards with one-pixel shells, corner details, and dark inner panels instead of flat generic rectangles.
- Motion should feel functional and modern: masked reveals, slight hover brightening, quiet glow shifts, or measured chart movement rather than flashy animations.

## Recommended patterns
- Large dashboard cards with soft emerald underglow, dark inner canvases, and small corner brackets.
- Header rails with mono section codes, subtle divider lines, and operational metadata aligned to the grid.
- Compact modules using icon plus label plus status footer structure for fast scanning.
- Data visuals with neutral bases and green used only for active bars, nodes, pulses, or flow indicators.
- Fixed background framing using vertical boundaries, crosshair marks, and outer-shell brackets to make the whole page feel engineered.

## Tuning knobs
- Green intensity: keep the accent vivid enough to read as signal color, but restrained enough to avoid radioactive neon.
- Surface lift: tune the contrast between the page background and cards so the layout feels layered without becoming muddy.
- Technical density: add or remove guides, corner marks, ticks, and metadata depending on how instrument-panel-like the design should feel.
- Glow radius: keep edge bloom small and controlled so it supports focus without softening the UI too much.
- Texture amount: use faint diagonal or grid texture only where it enriches empty space.

## Avoid
- Full-screen green glow washes or loud neon hacker aesthetics.
- Flat black layouts with no surface hierarchy or framing logic.
- Generic SaaS cards that ignore the technical bracketed system.
- Mixing many unrelated accent colors that dilute the green signal language.
- Overdecorating every component with bright borders, motion, or glow.