← ClaudeAtlas

dark-modern-tech-ui-skilllisted

Dark Modern Tech and Slate Glassmorphism UI engineering patterns: Deep Slate foundation (#0B1220), frosted dark glassmorphism (backdrop-blur 16px), electric cyan accents (#22D3EE), Bento grid modular service cards, pricing tier matrix, coverage radius indicators, zero-bloat FAQ accordion, and floating mobile thumb CTA dock without Node.js or bundlers.
4ntiDandruff/zero-bloat-skills · ★ 1 · Web & Frontend · score 74
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