SLASHED — a cascade-layer CSS framework

The name is the manifesto. Seven promises, one stylesheet.

A cascade-layer CSS framework: 729 design tokens, automatic dark mode, fluid type & spacing — zero JavaScript, zero build step. Override six tokens and the whole site rebrands.

Open Configurator → Live Demo GitHub

Hover the name for the full words. Styled by slashed.optimal.css — toggle your OS color scheme to see dark mode apply with no JS.

729: design tokens
15: cascade layers
0: lines of frontend JS
0: build steps

Features

Live CSS, not screenshots

OKLCH Color Engine

Six brand colors in, a full palette out. Hover states, tints, shades, status colors, and the entire dark palette all derive in plain CSS — nothing on this card is an image.

--sf-color-primary · 50 → 950

--sf-color-primary-a5 → a80 · alpha ramp

primary --hover --active success warning danger info

Automatic Dark Mode

Follows the OS by default. Mix modes on one page with a single attribute — like these two panels:

Aa data-theme="light"

Aa data-theme="dark"

Fluid Type & Space

Modular scales computed in the browser from 12 dials using pow() and clamp() — phone to 4K, no breakpoints. Resize the window:

@layer Architecture

Fifteen named cascade layers in a fixed order. No !important, no specificity wars:

Zero Build Step

Pure CSS custom properties. No Node, no Sass, no purge step. The entire install is:

<link rel="stylesheet" href="slashed.optimal.css">

Visual Configurator

Tune every token with a live light/dark preview, export override CSS, or share a config link — in the browser, nothing to install.

Open it →

Philosophy

Seven letters, seven promises

Every letter of SLASHED is a design commitment — and each one is checkable against the source.

Standalone: One stylesheet. No build step, no Node, no runtime dependencies.
Lean: A foundation, not a kit. No utility bloat, nothing to purge, nothing you didn't ask for.
Agnostic: No stack assumptions. Any CMS, any builder, any framework, plain HTML — no vendor lock-in, ever.
Structured: Fifteen named cascade layers in a fixed order, and a catalogued token API with stability tiers.
Hybrid: Classless where it can be — base elements, opt-in forms — class-based where it counts: layout, macros, states.
Explicit: Every visual value is a named token; hardcoded numbers are treated as bugs. Even the browser floor is stated up front.
Deterministic: Same tokens in, same design out. Load order never changes the cascade; every derived color is computed by formula.

Install

Install: one link tag

This section is <section data-theme="dark"> — mixing light and dark sections is one attribute, no wrapper JS.

<!-- jsDelivr CDN — recommended -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">

/* or @import — render-blocking & serialized, prefer <link> */
@import "https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css";

Bundle	Includes
`slashed.optimal.css`	Core + classless forms — the lean foundation, recommended
`slashed.full.css`	Optimal + the component layer (`.sf-btn`, `.sf-card`) and the utility layer

SLASHED relies on 2024 CSS — light-dark(), OKLCH relative colors, @property, pow() — so the browser floor is Chrome 125+, Safari 18+, Firefox 129+.

Documentation

StandaloneLeanAgnosticStructuredHybridExplicitDeterministic