Skip to content
Orion DS v2.0 — 68 components, zero dependencies, <25KB gzipped
68 Components

The Orion Design System

A complete vanilla CSS component library. No frameworks, no build step, no complexity. Dark-first, mobile-first, accessibility-first.

Explore Components Why Orion?
0 Components
0 CSS Gzipped
0 Cost
0 Section Modes
Cloudflare Pages Lucide Icons Open Sans CSS Custom Properties IntersectionObserver Scroll Snap BEM Naming WCAG AA Cloudflare Pages Lucide Icons Open Sans CSS Custom Properties
Why Orion?

Everything You Need

Built for speed, simplicity, and scale — with zero dependencies.

Lightning Fast

Under 25KB gzipped. No runtime, no framework overhead. Pure CSS served from a global CDN.

Dark-First

Designed for dark mode from day one. 5 section modes create visual rhythm and contrast.

Accessible

WCAG AA compliant. Focus management, ARIA, keyboard nav, reduced motion — baked in.

Mobile-First

Every component starts mobile, scales up. Stack-mobile utilities, responsive grids.

Token-Driven

Zero hardcoded colors. Every value comes from CSS custom properties. Change tokens, change everything.

68 Components

From atoms to organisms. Buttons, cards, modals, galleries, charts, timelines, and more.

Process

How It Works

1

Create

Run the create script. Pick a template. Your site is scaffolded in seconds.

2

Build

Compose sections from 68 pre-built components. Copy, paste, customize.

3

Publish

One command deploys to Cloudflare Pages. Live globally with free SSL.

Capabilities

What's Included

Feature List
CSS Custom Properties
BEM Naming Convention
Scroll Animations
Dark / Light Modes
Focus Management
Image Placeholders
Framework Required
Build Step Needed
Progress Bar
Performance 98%
Accessibility 100%
Bundle Size 24KB
Star Rating
Showcase

Component Library

Every component in action. Scroll to explore.

Buttons & Badges
Primary Secondary Outline Ghost Small Large
Default Accent Outline Small
Tooltip
Hover me Bottom
Modal
Search Bar
Form Fields
We'll never share your email.
People

Meet the Stack

CF

Cloudflare

Hosting & CDN

CSS

Custom Props

Design Tokens

LU

Lucide

Icon Library

IO

IntersectionObserver

Scroll Animations

History

Build Timeline

Phase 1 — Foundation

Design tokens, section modes, animations, utilities, and image placeholders.

Phase 2 — Atoms

Icons, images, headings, text, links, lists, tooltips, progress bars, star ratings.

Phase 3 — Molecules

Icon boxes, flip boxes, counters, blockquotes, forms, search bars, breadcrumbs.

Phase 4 — Interactive Organisms

Accordion, tabs, carousel, modal, gallery with lightbox.

Phase 5 — Section Organisms

Logo bar, timeline, CTA, countdown, step flow, notification bar.

Phase 6 — P1 Components

HotSpot, price menu, team cards, data tables, charts, video playlist.

Phase 7 — P2 Components

Image masks, news ticker, code highlight, link-in-bio, particle field.

Data

Charts & Tables

Bar Chart
CSS
92%
HTML
78%
JS
45%
Tokens
100%
Data Table
Module Size Components
components.css 5,711 lines 52
animations.css 206 lines 12
utilities.css 224 lines 40+
tokens.css 215 lines 120+ vars
Commerce

Menu & Hours

Price Menu

Hosting Plans

Static Site Free
Workers Site $5/mo
Full Stack $20/mo

Includes D1 database, R2 storage, and Workers KV.

Add-ons

Custom Domain Free
Analytics Pro $10/mo
Business Hours
Monday 24/7 Online
Tuesday 24/7 Online
Wednesday 24/7 Online
Thursday 24/7 Online
Friday 24/7 Online
Saturday 24/7 Online
Sunday Maintenance Offline
New

Section Modes

5 contrast modes via a single data attribute. Dark, raised, subtle, accent, glass.

Popular

Zero Build Step

No webpack, no Vite, no bundler. Drop the CSS files and start building.

Token-Driven

Every color, spacing, and radius value comes from CSS custom properties.

Developer

Quick Start

bash 
# Create a new site
./scripts/create-site.sh my-portfolio landing

# Preview locally
npx serve sites/my-portfolio

# Deploy to Cloudflare Pages
./scripts/publish.sh my-portfolio
html 
<!-- Section with contrast mode -->
<section class="section" data-section-mode="accent">
  <div class="container">
    <div class="icon-box hover-lift" data-reveal="fade-up">
      <div class="icon-box__icon">
        <i data-lucide="zap"></i>
      </div>
      <h3 class="icon-box__title">Fast</h3>
      <p class="icon-box__text">Under 25KB.</p>
    </div>
  </div>
</section>
68 Components Zero Dependencies Under 25KB Gzipped WCAG AA Compliant Dark-First Design Mobile-First Responsive 5 Section Modes CSS Custom Properties 68 Components Zero Dependencies Under 25KB Gzipped WCAG AA Compliant
Launch

Countdown Timer

00 Days
00 Hours
00 Min
00 Sec
Pricing

Simple Pricing

Everything is free. Seriously.

Starter

$0
/forever
  • Unlimited sites
  • All 68 components
  • Free SSL
Get Started
Recommended

Pro

$0
/also forever
  • Everything in Starter
  • Custom domains
  • Unlimited bandwidth
It's Free

Enterprise

$0
/you get the idea
  • Everything in Pro
  • Source code access
  • No vendor lock-in
Still Free
FAQ

Common Questions

Orion DS is a complete vanilla CSS design system with 68 components. No React, no Vue, no framework — just HTML, CSS, and minimal JavaScript. Deploy to Cloudflare Pages for free.
Edit tokens.css. Every color, spacing, radius, and font value is a CSS custom property. Change the tokens, and every component updates automatically.
Yes. Zero hardcoded colors, WCAG AA accessibility, keyboard navigation, focus management, reduced motion support, and under 25KB gzipped. Battle-tested on multiple live sites.
Absolutely. Cloudflare Pages supports custom domains with automatic SSL on the free tier. Point your DNS and you're live.
Section modes control the visual contrast rhythm of your page. Add data-section-mode="dark", "raised", "subtle", "accent", or "glass" to any section. This page uses all 5 modes — scroll and see the alternating backgrounds.

Ready to Build?

Create your first site in under 60 seconds. 68 components, zero cost, zero complexity.

Create Your Site View on GitHub