Precision UI built on
OKLCH and semantic attributes

Zero-runtime CSS framework with perceptually uniform colors, cascade layers, and native light-dark() theming.

Get Started View on GitHub

Key Features

OKLCH Native

Perceptually uniform color scales. Blue-500 and Yellow-500 have the same visual brightness.

Zero-Class Theming

Native light-dark() function. No .dark class needed - respects prefers-color-scheme automatically.

Cascade Layers

No more !important. Framework styles live in @layer so your CSS always wins.

Container Queries

Components respond to their container, not the viewport. True modular design.

Comparison at a Glance

Other Frameworks
Shift CSS
Color
Random visual weight (HSL/Hex)
✓ Perceptual uniformity (OKLCH)
Dark Mode
.dark class + JavaScript
✓ Native light-dark()
Overrides
!important and selector wars
✓ Clean @layer orchestration
Responsiveness
Viewport-driven (@media)
✓ Context-driven (@container)

Quick Start

<!-- Just drop it in -->
<link rel="stylesheet" href="https://unpkg.com/@shift-css/core">

<!-- Customize with CSS variables -->
<style>
  :root {
    --shift-hue-primary: 280;  /* Purple brand */
  }
</style>

~8KB gzipped — All components, utilities, and a complete color system.

Search