Getting Started
Raven Design is a pure CSS design system. Works with HTML, React, Vue, Svelte, or any framework.
Installation
Option 1: CDN (Recommended)
Easiest way to get started
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/raven-design@latest/framework/css/index.css">Option 2: Local File
Download and host yourself
<link rel="stylesheet" href="/path/to/raven-design.css">Option 3: npm
For Node.js projects
npm install raven-design
Then import in your CSS: @import 'raven-design/framework/css/index.css';
Basic Usage
After adding the CSS, you can use Raven Design classes directly in your HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/raven-design@latest/framework/css/index.css">
</head>
<body>
<div class="raven-container raven-py-lg">
<h1 class="raven-h1">Hello World</h1>
<button class="raven-button raven-button--primary">
Click Me
</button>
<div class="raven-card">
<h3 class="raven-card__title">Card Title</h3>
<p>Card content</p>
</div>
</div>
</body>
</html>This gives you:
- Responsive container
- Styled heading with proper hierarchy
- Primary button with hover/active states
- Card with shadow and hover effect