Quick Start

Get Started in 60 Seconds

Install CURSY Framework and start building beautiful synthwave interfaces.

Installation

🚀 Option 1: CDN (Recommended - No Download Needed!)

Use jsDelivr CDN to include CURSY Framework directly from GitHub:

<!-- 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" />

<!-- OR use bundled version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FutureVision-Labs/CURSY-Framework@main/cursy-full.css" />
          

Benefits: Always up-to-date, no local files needed, fast global CDN delivery

📦 Option 2: Local Installation

Download the CSS files and include them locally:

<link rel="stylesheet" href="path/to/cursy.css" />
<link rel="stylesheet" href="path/to/cursy-utilities.css" />
<link rel="stylesheet" href="path/to/cursy-components.css" />
          

✨ Add Scanlines Effect (Optional)

<body class="scanlines">

Basic Template

<!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>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Inter:wght@300;400;600&display=swap" rel="stylesheet" />
  <!-- CDN 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">
  <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>
        <nav>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#contact" class="btn-primary">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <main>
      <section class="hero">
        <div class="hero-copy">
          <h1>Welcome to CURSY</h1>
          <p class="lede">Build beautiful synthwave interfaces</p>
          <div class="hero-actions">
            <a href="#get-started" class="btn-primary">Get Started</a>
            <a href="#learn-more" class="btn-ghost">Learn More</a>
          </div>
        </div>
      </section>

      <section>
        <div class="section-label">01 · Features</div>
        <h2 class="section-title">What Makes CURSY Special</h2>
        <div class="grid grid-3">
          <div class="card">
            <h3>Hand-Crafted</h3>
            <p>Not another AI-generated template</p>
          </div>
          <div class="card">
            <h3>Unique Colors</h3>
            <p>Green-cyan-purple-orange palette</p>
          </div>
          <div class="card">
            <h3>Animations</h3>
            <p>Custom orbit glows and light sweeps</p>
          </div>
        </div>
      </section>
    </main>

    <footer>
      Built with CURSY Framework · FutureVision Labs
    </footer>
  </div>
</body>
</html>
          

Common Patterns

Navigation Bar

<header>
  <div class="nav-inner">
    <div class="brand">
      <div class="brand-mark"><span>LOGO</span></div>
      <div class="brand-text">
        <div class="brand-title">Site Name</div>
        <div class="brand-sub">Tagline</div>
      </div>
    </div>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </div>
</header>
            

Feature Cards

<div class="grid grid-3">
  <div class="card">
    <h3>Feature One</h3>
    <p>Description here</p>
    <span class="badge">New</span>
  </div>
</div>
            

Customization

CSS Variables

Override colors in your own CSS:

:root {
  --cursy-green: #22c55e;
  --cursy-cyan: #22d3ee;
  --cursy-purple: #a855f7;
  --cursy-orange: #f97316;
}
          