A hand-crafted, synthwave/cyberpunk CSS framework for FutureVision projects.
Not another purple gradient AI design 😎 · Hand-crafted with love 💖 · Synthwave vibes 🌃
CURSY Framework is NOT another generic purple-gradient AI design. It's a carefully crafted design system with:
- Unique color palette: Green-cyan-purple-orange accents on deep slate backgrounds
- Hand-tuned animations: Orbit glows, light sweeps, scanlines
- Utility-first approach: Inspired by Tailwind, but custom-built
- Synthwave aesthetic: Retro-futuristic vibes for the Imaginatorium
"Augment, don't replace" — CURSY Framework enhances your projects with personality and craft, not cookie-cutter templates.
- Primary Green:
#22c55e— Energy, growth, action - Cyan:
#22d3ee— Tech, clarity, innovation - Purple:
#a855f7— Magic, creativity, depth - Orange:
#f97316— Warmth, excitement, drive - Deep Slate:
#020617,#1e293b— Foundation, depth
- Headers: Orbitron (futuristic, bold)
- Body: Inter (clean, readable)
- Letter-spacing: Generous (0.08em - 0.24em for that retro feel)
jsDelivr CDN - Automatically served from GitHub:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CURSY Project</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Inter:wght@300;400;600&display=swap" rel="stylesheet" />
<!-- CURSY Framework - Full Version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FutureVision-Labs/CURSY-Framework@main/cursy.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FutureVision-Labs/CURSY-Framework@main/cursy-utilities.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FutureVision-Labs/CURSY-Framework@main/cursy-components.css" />
</head>
<body class="scanlines">Or use the bundled version:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FutureVision-Labs/CURSY-Framework@main/cursy-full.css" />Basic Version (Components Only):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CURSY Project</title>
<link rel="stylesheet" href="cursy.css">
</head>
<body class="scanlines">Full Version (Components + Utilities + More):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My CURSY Project</title>
<link rel="stylesheet" href="cursy.css">
<link rel="stylesheet" href="cursy-utilities.css">
<link rel="stylesheet" href="cursy-components.css">
<!-- OR use cursy-full.css for everything -->
</head>
<body class="scanlines">
<div class="page">
<header>
<div class="nav-inner">
<div class="brand">
<div class="brand-mark">
<span>MC</span>
</div>
<div class="brand-text">
<div class="brand-title">My Project</div>
<div class="brand-sub">Synthwave vibes</div>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="hero-copy">
<h1>Welcome to CURSY</h1>
<p class="lede">Build beautiful synthwave interfaces</p>
<a href="#" class="btn-primary">Get Started</a>
</div>
</section>
</main>
</div>
</body>
</html>- Buttons:
.btn-primary,.btn-ghost - Cards:
.cardwith hover effects - Badges:
.badgefor tags and labels - Navigation:
.nav-inner,.brand-mark - Hero Sections:
.hero,.hero-copy - Grids:
.grid,.grid-3 - Animations:
.scanlines,.car-orbit,.light-sweep
Perfect for:
- Mini-Cursy project pages
- The Imaginatorium UI
- Team DC websites
- FutureVision Labs projects
- Any synthwave/cyberpunk aesthetic needs
See docs/ folder for:
- Component reference
- Customization guide
- Animation library
- Color system
CURSY Framework is part of the Imaginatorium ecosystem — where every design decision becomes canon.
Version: v4.20a 🚗
License: MIT - FREE for EVERYONE 📜
Maintained by: Team DC / FutureVision Labs 💖
Built for: Mini-Cursy · The Imaginatorium 🏛️