dcs.spa - default template

Dual Carousel
Sidebars

Single Page Application

A modular CSS/JS application design system with OKLCH color schemes, dark/light modes, and mobile-first responsive layout. No build step required.

View on GitHub Explore Features
Core Features

Everything You Need

A complete design system in four files

OKLCH Colors

  • Perceptually uniform
  • 5 color schemes
  • Dark + light modes
  • Consistent lightness

Mobile-First

  • Responsive breakpoints
  • Off-canvas sidebars
  • Desktop pinning
  • Touch-friendly

CSS Cascade Layers

  • reset, tokens, base
  • components, utilities
  • animations layer
  • No specificity wars

Zero Build Step

  • Vanilla CSS + JS
  • No npm required
  • CDN-ready
  • Copy and go
Modular Architecture

Base + Site Separation

Generic framework stays untouched. Customize with site.css only.

base.css (705 lines)

  • Color-agnostic framework
  • Layout: topnav, sidebars, container
  • Components: cards, buttons, forms
  • Prose styling for markdown

base.js (245 lines)

  • Theme toggle (dark/light)
  • Color scheme switching
  • Sidebar open/close/pin
  • Toast notifications

site.css (theme)

  • OKLCH color definitions
  • Marketing components
  • Hero, cards, pricing
  • Particles + animations

site.js (optional)

  • Particle effects
  • Scroll reveal
  • Footer year
  • Your custom code
Try Them Now

5 Color Schemes

Open the right sidebar to switch schemes live

Ocean (H=220)

  • Cyan-blue, professional
  • Default scheme
  • Medium chroma

Crimson (H=25)

  • Bold red, high energy
  • High chroma
  • Strong contrast

Stone (H=60)

  • Warm neutral, minimal
  • Low chroma
  • Great for docs

Forest (H=150)

  • Natural green
  • Balanced chroma
  • Calming feel

Sunset (H=45)

  • Warm orange-amber
  • High vibrancy
  • Inviting tone
Built-In Components

Ready to Use

Cards, buttons, forms, tables, prose, and more

App Shell

  • Fixed topnav
  • Dual sidebars (L/R)
  • Pinnable on desktop
  • Collapsible groups

Cards

  • Mobile: edge-to-edge
  • Desktop: rounded + shadow
  • Hover lift animation
  • Size variants (sm/md/lg)

Buttons

  • Primary, outline, ghost
  • Success, danger, warning
  • Size variants
  • Focus-visible rings

Prose

  • Markdown rendering
  • Code blocks + tables
  • Blockquotes + lists
  • Badge support
Get Started

Three Use Cases

Marketing sites, documentation, and Laravel+React apps

Brochure Site

  • Copy all 4 files
  • Edit site.css colors
  • Write your HTML
  • Deploy anywhere

Documentation

  • Use base.css + base.js
  • Minimal site.css (colors)
  • Add md.js for markdown
  • Sidebar navigation

Laravel + React

  • Import OKLCH tokens
  • Adapt to Tailwind v4
  • React theme context
  • Same color system
Open Source

MIT Licensed

Use it in any project, commercial or personal

Clone the Repo Quick Start