framed-tech-dark-border-gradient — Claude Code skill: dark framed UI

---
name: framed-tech-dark-border-gradient
description: "Create a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere."
---

# Framed Tech Dark Border Gradient Skill

## Use When
- Create a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.

## Workflow

## Scope
- Apply this as a full design-system direction across page shell, framing lines, cards, panels, typography, controls, and atmospheric background treatment.
- Use it when the interface should feel premium, technical, dark, and architected around visible boundaries instead of soft floating cards.
- This is not generic dashboard dark mode and not glossy glassmorphism. The identity should come from frame logic, border gradients, overshooting rails, and precise monochrome hierarchy.

## Visual target
- Build the page on a near-black foundation with subtle tonal separation between background, framed panels, and elevated interactive rows.
- Use a strong outer container or application shell with visible edge rails, thin grid boundaries, and small corner markers that make the whole composition feel engineered.
- Let one-pixel gradient borders or wrapper borders become a signature motif on containers, buttons, modules, and interactive cards.
- Prefer a restrained monochrome palette of black, charcoal, smoke gray, white, and silver. If an accent color is needed, derive it from the brand and keep it sparse.
- Pair quiet sans-serif typography with mono labels, uppercase system headings, and micro-metadata so the interface feels operational and precise.

## Implementation guidance
- Prefer asymmetrical grid layouts with clearly segmented panel blocks, such as a larger hero or information region balanced by a smaller visualization or utility panel.
- Separate panels with thin dividers, border lines, or gap-based frame seams so every region reads as part of one measured container system.
- Add vertical rails that extend slightly beyond the main shell, tiny corner squares, inset strokes, or short scanning lines to reinforce the technical framing.
- Use border-gradient wrappers around premium surfaces, then place a darker inner fill inside them so the edge treatment stays crisp and visible.
- Interactive rows, permission lists, nav items, and small control modules should use line-led states: active side bars, subtle fill lifts, hover brightening, and locked or muted inactive rows.
- Background atmosphere should stay controlled and monochrome: soft wave fields, faint blur blooms, gentle flashlight falloff, or low-contrast moving line effects are appropriate.
- Motion should feel calm and procedural, such as masked text reveals, scanning streaks, line sweeps, or slow ambient canvas movement rather than flashy transitions.

## Recommended patterns
- Large master shell with border-x rails, overshooting outer guide lines, and tiny corner squares marking the container boundary.
- Grid of dark technical panels divided by thin white or gray lines, with one hero panel, one utility or visualization panel, and one structured list panel.
- Mono top rails using section codes, status labels, sequence markers, and utility metadata in uppercase tracking.
- Border-gradient buttons, pills, and cards with dark inner surfaces and restrained white-light highlight rather than saturated color.
- Active list rows using a left-edge bar, brighter text, and subtle translucent fill while inactive rows remain outlined or low-contrast.
- Soft monochrome canvas effects behind or inside selected panels to add atmosphere without weakening readability.

## Tuning knobs
- Border brightness: increase or reduce the white-to-transparent edge gradient depending on how premium or severe the framing should feel.
- Grid asymmetry: keep panel proportions uneven enough to feel composed, but balanced enough to remain usable and intentional.
- Technical density: add or remove corner marks, overshoot rails, scan lines, and metadata depending on how instrument-like the page should become.
- Surface opacity: tune inner fills between matte solid and lightly translucent dark glass without losing the crisp frame silhouette.
- Accent restraint: default to monochrome, then introduce brand color only in small active cues if the page needs more identity.

## Avoid
- Flat black layouts with no visible container logic or boundary system.
- Heavy colorful neon glows that overpower the monochrome frame language.
- Thick borders, chunky shadows, or bloated cards that make the system feel clumsy instead of precise.
- Soft consumer-app styling that removes the engineered shell and utility-label character.
- Treating gradient borders as decoration only; they should actively define hierarchy and premium structure.