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.