remCSS v2

A modern, production-ready CSS framework for the 2026 web ecosystem — rooted in the Golden Ratio (φ = 1.618…) and built entirely in pure CSS.

• rem-only — every spatial value derives from a single root rem unit; change the browser font size, change everything proportionally
• Golden Ratio scale — --step-n3 through --step-12, computed as calc() chains from --phi; no arbitrary values
• Pure CSS — zero preprocessors, zero JS runtime; the source is the output
• 2026 standards — CSS Layers (@layer), oklch() color, light-dark(), logical properties, container queries, @scope
• Single file output — @dstn/remcss publishes one dist/remcss.css, no build step required in consumer projects

v1 (SCSS legacy) lives on the legacy branch.

Installation

npm install @dstn/remcss

<!-- or drop in directly -->
<link rel="stylesheet" href="node_modules/@dstn/remcss/dist/remcss.css" />

// via bundler
import '@dstn/remcss';

What's inside

| Layer | Files | Purpose | | ------------ | -------------------------------------------- | -------------------------------------------- | | base | src/base/reset.css | Modern CSS reset, root variables, font-face | | tokens | src/tokens/{scale,colors,typography}.css | --phi, --step-*, oklch() palette, fluid type | | components | src/components/{buttons,forms,table,grid}.css | Buttons, forms, tables, grid containers | | utilities | src/utilities/{spacing,flex,grid-utils,colors}.css | Single-purpose utility classes |

Golden Ratio scale

1rem = 10px (via html { font-size: 62.5% }). All steps multiply or divide by φ:

| Step | rem | px @10px | | ---- | ------- | -------- | | n3 | 0.2361 | 2.36 | | n2 | 0.3820 | 3.82 | | n1 | 0.6180 | 6.18 | | 0 | 1.0000 | 10.00 | | 1 | 1.6180 | 16.18 | | 2 | 2.6180 | 26.18 | | 3 | 4.2361 | 42.36 |

Color system

All colors in oklch(). Themes via light-dark() — no @media (prefers-color-scheme) in component rules.

--color-accent: oklch(62% 0.22 27); /* brand red */
background: light-dark(var(--color-surface-light), var(--color-surface-dark));

12 named families (red → pink), each with 6 lightness steps (10 / 30 / 50 / 70 / 90 / 95).

Development

npm install
npm run build        # → dist/remcss.css via Vite + Lightning CSS
npm test             # Vitest: enforces zero px in authored source
npm run docs:dev     # VitePress docs at localhost:5173
npm run docs:build   # Production docs build

# After any change:
npm version patch    # bug fixes
npm version minor    # new features
npm version major    # breaking changes

npm version automatically syncs the version into docs/.vitepress/config.js and test/index.html via scripts/sync-version.js.

Tech stack

| Role | Tool | Version | | ------------- | ------------- | -------- | | Build | Vite | ^8.0 | | CSS Transform | Lightning CSS | ^1.32 | | Unit tests | Vitest | ^4.1 | | Visual tests | Playwright | ^1.60 | | Docs | VitePress | ^1.6 |

Docs

Live: remcss.vercel.app (deployed from docs/.vitepress/dist via Vercel)

See CLAUDE.md for the full specification and coding standards. See CHANGELOG.md for version history.