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

Four hand-authored files — two generic, two yours — cover the entire surface of a modern marketing or documentation site. No npm, no bundler, no framework lock-in. Drop them into any directory, open index.html, and every component listed below is live and themed.

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.

DCS separates the concerns that age differently. Base defines the mechanics — layout, components, state, interactions — and never references a single color. Site supplies the OKLCH tokens and marketing components that make a project yours. Update your theme without touching the framework; update the framework without breaking your theme.

base.css

  • Color-agnostic framework
  • Layout: topnav, dual sidebars
  • Cards, buttons, forms, tree
  • Panel carousel + prose

base.js

  • Theme + scheme switching
  • Autonomous sidebar open/pin
  • Panel carousel navigation
  • Width sliders, toast, tree

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

6 Color Schemes

Open the right sidebar to switch schemes live

Every scheme shares the same lightness and chroma ratios — only the hue rotates. Switching between Ocean, Crimson, Stone, Forest, Sunset, and Mono is a single class toggle on <html>, and each scheme carries its own light and dark pair. Pick a default; your users can switch any time from the right sidebar, and the choice survives every reload.

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

Mono (C=0)

  • Black, gray, white
  • Zero chroma
  • Status colors retained
Built-In Components

Ready to Use

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

Every primitive a product surface needs — cards, buttons, forms, dropdowns, tables, toasts, tree widgets, panel carousels, and the prose styles that render markdown — lives in base.css and is driven entirely by CSS custom properties. Drop in the HTML and the component inherits your scheme colors, dark-mode behavior, and focus rings with no additional work.

App Shell

  • Topnav + dual sidebars
  • Panel carousel (slide/fade)
  • Pinnable on desktop
  • Independent 25–75% widths

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

The same four files drive three very different integrations. Marketing sites copy them in and go; documentation sites swap site.js for md.js and skip the hero components; Laravel + React projects import the OKLCH tokens into Tailwind v4's @theme block and keep the color math identical. No build step in any of them.

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

Copyright © 2026 Mark Constable <mc@dcs.spa> — use it in any project, commercial or personal

Clone the Repo Quick Start
Morty Proxy This is a proxified and sanitized view of the page, visit original site.