🌆 Introducing CYBERCORE CSS: A Cyberpunk Design Framework for Futuristic UIs

#css #webdev #opensource #design

🌆 Introducing CYBERCORE CSS

A pure CSS framework for building futuristic, cyberpunk-inspired interfaces

Ever wanted to build a UI that looks like it belongs in Night City? I just released CYBERCORE CSS — a comprehensive CSS framework inspired by Cyberpunk 2077, Blade Runner, and the neon-soaked aesthetics of sci-fi dystopias.

⚡ Why Another CSS Framework?

Most CSS frameworks focus on clean, minimal designs. But what if you're building:

A gaming dashboard
A hacker-themed portfolio
A sci-fi web app
An admin panel with personality

CYBERCORE gives you that distinctive cyberpunk look out of the box — glowing neon borders, glitch effects, scanlines, and more.

🎯 Key Features

Feature	Description
🎨 Pure CSS	Zero JavaScript dependencies
🧩 Modular	Import only what you need
🌙 Dark Theme	Designed for dark interfaces
♿ Accessible	Respects `prefers-reduced-motion`
⚡ Modern CSS	CSS Layers, color-mix(), Container Queries
🎭 153 Icons	Cyberpunk-themed SVG icon system

🚀 Quick Start

npm install cybercore-css

Or use the CDN:

<link rel="stylesheet" href="https://unpkg.com/cybercore-css@latest/dist/cybercore.min.css">

🎨 The Color Palette

🔵 Cyan      #00f0ff  →  Primary accent
🔴 Magenta   #ff2a6d  →  Danger/alerts
🟡 Yellow    #fcee0a  →  Warnings
🟢 Green     #05ffa1  →  Success states
⚫ Void      #0a0a0f  →  Deep backgrounds

✨ Effects That Pop

Glitch Text

<h1 class="cyber-glitch" data-text="NIGHT CITY">NIGHT CITY</h1>

Neon Borders

<div class="cyber-neon-border">Glowing border effect</div>
<div class="cyber-neon-border cyber-neon-border--magenta">Magenta variant</div>

Scanlines & Noise

<div class="cyber-scanlines">CRT monitor effect</div>
<div class="cyber-noise">Subtle static texture</div>

🧩 Component Examples

Buttons

<button class="cyber-btn">EXECUTE</button>
<button class="cyber-btn cyber-btn--magenta">TERMINATE</button>
<button class="cyber-btn cyber-btn--green">CONFIRM</button>
<button class="cyber-btn cyber-btn--outline">SCAN</button>

Cards

<div class="cyber-card">
  <div class="cyber-card__header">
    <h4 class="cyber-h5">SYSTEM STATUS</h4>
  </div>
  <div class="cyber-card__body">
    All systems operational.
  </div>
  <div class="cyber-card__footer">
    <span class="cyber-badge cyber-badge--green">Online</span>
  </div>
</div>

Terminal

<div class="cyber-terminal">
  <div class="cyber-terminal__header">
    <span class="cyber-terminal__dot cyber-terminal__dot--red"></span>
    <span class="cyber-terminal__dot cyber-terminal__dot--yellow"></span>
    <span class="cyber-terminal__dot cyber-terminal__dot--green"></span>
  </div>
  <div class="cyber-terminal__body">
    <span class="cyber-terminal__prompt">$</span> hack the planet
    <span class="cyber-terminal__cursor"></span>
  </div>
</div>

🎭 153 Cyberpunk Icons

CYBERCORE includes a complete icon system with cyberpunk-themed SVG icons:

import { renderIcon } from 'cybercore-css/icons';

const icon = renderIcon('terminal', { size: 24, color: 'cyan' });

Categories include: Navigation, Actions, Media, Security, Tech, and more.

🔧 Customization

Override any CSS variable:

:root {
  --cyber-cyan-500: #00ffaa;
  --glow-cyan: 0 0 10px #00ffaa, 0 0 30px rgba(0, 255, 170, 0.5);
}

📦 What's Included

14 Components: Buttons, Cards, Inputs, Tables, Terminal, Modal, Progress, and more
6 Effects: Glitch, Neon Border, Scanlines, Noise, Datastream, Text Glow
8 Utility Modules: Display, Flex, Grid, Spacing, Text, Animation, Accessibility
153 Icons: Across 10 categories with 4 style variants