dark-modern-tech-ui-skilllisted
Install: claude install-skill 4ntiDandruff/zero-bloat-skills
# Dark Modern Tech UI Skill (Slate Glassmorphism Architecture)
Design system and frontend engineering patterns for building high-conversion, technical workbench interfaces, repair service landing pages, developer consoles, and high-trust digital storefronts without Node.js, npm, or bundler compilation steps.
Directly reverse-engineered and extracted from the production-tested **Megapass Intra Solusindo** flagship web platform (`megapass.web.id`, `install-windows/`, and `home-service/`).
---
## 1. Visual Foundation & Slate Dark Matrix
Strictly avoid flat muddy grays or harsh, eye-straining `#000000` pitch blacks. The authentic Dark Modern Tech aesthetic uses a rich **Deep Slate / Navy Ink** base (`#0B1220`) illuminated by ambient radial cyan gradients and precision frosted glass surfaces.
### Core Color Palette Tokens
```javascript
// Standalone Tailwind Play CDN Theme Extension
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#0B1220', // Base canvas foundation (Deep Midnight Slate)
ink2: '#111A2E', // Card surface layer 1 (Elevated panel)
ink3: '#1E293B', // Inset wells, borders, and input backgrounds
accent: '#22D3EE', // Primary high-voltage Electric Cyan (Tailwind cyan-400)
accent2: '#0891B2', // Secondary Dark Cyan for gradient stops (cyan-600)
paper: '#F8FAFC', // Crisp high-contrast heading text (slate-50)
muted: '#7E8EA6', // Secondary readable body text