Overview

Acopl UI is the official design system for acopl.ar — a framework-agnostic UI library built with TypeScript and SASS, compiled to vanilla CSS + Web Components.

Why no framework dependency?

Acopl’s stack spans multiple Astro projects (landing-page, app, auth) that all share the same visual identity. Rather than coupling the design system to React, Vue, or any other framework, Acopl UI compiles to:

Vanilla CSS — works everywhere, no build step required on the consumer side
Web Components — custom HTML elements (<ac-button>, <ac-input>, etc.) that work in any framework or plain HTML

What’s in the box?

File	Size (gzipped)	Description
`acopl-ui.css`	~8 KB	Complete CSS: dark + light themes + all components
`acopl-ui.js`	~6 KB	All Web Components + ThemeManager
`tokens.js`	~1 KB	Design tokens as a typed ES module

Philosophy

Semantic tokens — components use var(--ac-*) tokens, not hardcoded values. Change the theme, everything updates.
Dark-first — dark mode is the default. Light mode is a first-class citizen, not an afterthought.
No Tailwind, no Bootstrap — zero runtime dependencies, no utility class inflation.
Progressive enhancement — CSS works without JS. Web Components add interactivity.
Backwards compatible — --color-brand-* aliases from v1.x still work in v2.x.

Versioned CDN

Every release is immutable at its version URL:

https://ui.acopl.ar/v2.0.0/acopl-ui.css
https://ui.acopl.ar/v2.0.0/acopl-ui.js
https://ui.acopl.ar/v2.0.0/tokens.js

And always available at /latest/ pointing to the most recent version:

https://ui.acopl.ar/latest/acopl-ui.css