@menesesevandro/skopos
v1.0.0
Published
An intent-driven design system generator with physics-based motion, material-aware atmosphere, and automatic dark mode.
Maintainers
menesesevandroReadme
Skopos
Intent-Driven Design System Generator. Physics-based motion. Material-aware atmosphere. Automatic dark mode.
Skopos is not just a CSS framework. It's a compiler that takes your Brand DNA (Seeds) and generates a mathematically perfect design system tailored to your identity.
🚀 Why Skopos?
- 🎨 Intent > Color: You define "Brand", "Danger", "Success". Skopos generates the palettes, contrasts, and dark mode variants automatically using OKLCH perceptually uniform color space.
- 💡 Aurora Physics: Dark mode isn't just "black background". It uses a multi-layer lighting engine (Glow + Inset + Shadow) to simulate glass and light.
- ⚛️ Spring Physics: No more linear animations. Built-in spring variables for natural motion.
- ✂️ Zero Waste: Integrated PurgeCSS engine removes up to 95% of unused CSS in production.
📦 Installation
npm install skopos --save-dev⚡ Quick Start
1. Initialize
Create the configuration file with default seeds:
npx skopos init2. Watch Mode (Dev)
Start the compiler in watch mode. It recompiles instantly when you change skopos.config.js.
npx skopos watch3. Use in HTML
Link the generated file and start using intent classes:
<link rel="stylesheet" href="./dist/skopos.min.css">
<body class="v-bg-canvas v-text-main">
<button class="v-btn v-bg-brand v-shadow-2">
Hello Skopos
</button>
</body>🛠 Production Build
When you are ready to ship, use the --prod flag. This will scan your HTML/JS files and remove unused CSS.
# skopos.config.js must have 'content' array configured!
npx skopos build --prod🧩 Architecture
- ColorEngine: Generates palettes from seeds using OKLCH.
- ElevationEngine: Manages shadows (Light) and glows (Dark).
- PhysicsEngine: Provides
var(--v-ease-spring)for animations. - AtmosphereEngine: Manages texture noise and glassmorphism.
📄 License
MIT