Cobalt Design System

La estructura invisible que hace que todo funcione. Web Components framework-agnostic, tokens y guías que unifican todos los productos Prolibu.

Empezar Ver componentes

Ver código

<co-button label="Guardar" variant="primary"></co-button>
<co-button label="Cancelar" variant="stroke"></co-button>
<co-button label="Ver más" variant="ghost" icon-right="arrow-right"></co-button>
<co-icon-button icon="bell" variant="outlined"></co-icon-button>
<co-icon-button icon="gear" variant="ghost"></co-icon-button>
<co-badge color="success"></co-badge>
<co-chip label="Activo" color="success" removable></co-chip>

Tokens

Sistema --co-*: colores, tipografía, spacing, radius y sombras. Una sola fuente de verdad, tema claro y oscuro out-of-the-box.

Ver tokens →

53 Componentes

Web Components co-* listos para producción. API auto-documentada desde el Custom Elements Manifest.

Ver componentes →

Theming

Cuatro colores de marca, cuatro compuestos químicos del cobalto. Personalizá vía CSS variables, modo oscuro nativo.

Ver dark mode →

Instalación

@prolibu-suite/cobalt-core en npm — o <script src="unpkg.com/..."> para HTML vanilla. Sin bundler obligatorio.

Cómo instalar →