Introduction

Shift CSS is an open-source CSS framework built for the modern web. It solves four critical problems with existing frameworks:

The Problems

1. Color Inconsistency

RGB-based frameworks produce “muddy” color scales. Blue-500 and Yellow-500 might have the same numeric value, but vastly different perceived brightness. Shift CSS uses OKLCH - a perceptually uniform color space where every shade at the same level looks equally bright.

2. The “Dark Mode Tax”

Traditional frameworks require redundant classes like bg-white dark:bg-black for every themed element. Shift CSS uses the native CSS light-dark() function - components automatically adapt to prefers-color-scheme with zero additional classes.

3. Specificity Wars

Overriding framework styles often requires !important or convoluted selectors. Shift CSS uses CSS Cascade Layers - all framework styles live in @layer shift.*, so any user-defined CSS naturally takes precedence.

4. Static Breakpoints

Media queries respond to the viewport, but modern components need to respond to their container. Shift CSS prioritizes Container Queries for truly modular, reusable components.

Core Principles

• Zero Runtime: No JavaScript required for theming or color calculations
• Build Optional: Ship a single CSS file, customize entirely via CSS variables
• Perceptually Correct: OKLCH ensures consistent visual appearance across hues
• Future-Facing: Targets cutting-edge browsers (Chrome 131+, Firefox 133+, Safari 18+)