Eclipse UI
Todo se alinea.
Tu marca, lo que construyes y lo que siente quien lo usa, en una sola línea.
Design system
Eclipse UI es un design system con las decisiones ya tomadas: color con contraste medido, tipografía con escala, capas, foco visible y movimiento con calma. Elige una personalidad, o arma la tuya, y cada pantalla sale bien hecha y con tu marca, la escribas tú o tu agente.
Design system
Eclipse UI no es una paleta ni un tema: es un design system completo. Fundamentos con escala y medidos en vivo, tokens que el motor deriva, componentes que solo los leen, convenciones para escribir y guardianes que fallan cuando algo se sale de línea. Las personalidades son lo que se ve; esto es lo que las sostiene.
Explorar el sistema7 fundamentos, cada uno con su escala y medido en vivo en cada personalidad. Nada se decide pantalla por pantalla.
81 variables que el motor deriva de cinco rasgos: superficies, texto, bordes, radios, sombras, duraciones y alturas, en claro y en oscuro. Las piezas nunca escriben un color: lo leen.
42 piezas en el catálogo, con su demo en vivo, su API y su accesibilidad. Cambia la personalidad y todas la siguen; ninguna trae un estilo propio.
Cómo se nombra, se escribe y se comprueba todo: 4 guías que valen para cada pieza, la de hoy y la que llegue mañana.
Pruebas que miden el contraste en un navegador real (336 mediciones), prohíben colores y tamaños sueltos y revisan íconos y fichas. Si algo se sale de línea, falla antes de publicarse.
Encima de todo esto van los themes y las personalidades: las 6 de partida o la tuya, con tus diales en theme.css. Personalidades.
Cómo funciona
El design system ya está hecho y documentado. Lo que tú instalas son tres archivos: dos para tu proyecto y uno con las reglas, para leerlas tú o dárselas a tu agente.
Duna para un estudio de pilates, Umbra para un box de HIIT, Eclipse para el panel de tu SaaS. Cada una cambia la tipografía, las curvas, el aire y la velocidad, no solo el color. Toca una y mira la misma página cambiar.
PersonalidadesLo que haces, contado con tu voz.
Una página que suena a tu marca y no a plantilla, en cada pantalla que agregues.
$299 MXN / mes
:root {
--eui-focus: initial;
--eui-moon: initial;
--eui-brand: #1b1a17;
--eui-ink: #1b1a17;
--eui-paper: #f2efe8;
--eui-tint: 0%;
:root {
--radius: 0rem;
--background: oklch(0.953 0.01 87.5);
--foreground: oklch(0.218 0.006 91.6);
--card: oklch(0.953 0.01 87.5);
--card-foreground: oklch(0.218 0.006 91.6);
--popover: oklch(0.953 0.01 87.5);
## Reglas
1. **Solo tokens.** Nada de hex, `rgb()`, `white`, `black` ni la paleta de
Tailwind (`gray-500`, `blue-600`). Si falta un color, es una decisión de
diseño, no un valor que inventar.
2. **Profundidad por capas y bordes de 1px.** Fondo, tarjeta, elevada: cada
capa con su borde. La sombra es solo para lo que flota (menús, popovers,
Su theme.css para cualquier proyecto, su shadcn.css si ya usas shadcn/ui y su DESIGN.md con sus reglas, para ti y para tu agente. Gratis, sin correo y sin cuenta.
Cómo usarlaEl DESIGN.md dice qué tokens usar, cómo se mueve tu marca y qué no hacer: hex sueltos, gray-500, tres botones principales en la misma pantalla. Las mismas reglas valen para ti y para tu agente, si le pides una pantalla.
Ver las instrucciones› Arma la página de precios con la personalidad Duna.
Leo DESIGN.md: tinta sobre papel periódico, filetes de oro en vez de tarjetas, Fraunces para leer.
Títulos con .eui-display. Una sola acción principal, en bg-primary.
Tarjetas por capas con bordes de 1px. Nada de hex ni de gray-500.
Lista: precios.html, con tu voz y contraste AA.
UI y UX
El diseño decide si alguien entiende tu app a la primera, encuentra el botón y vuelve. Que el código funcione no garantiza nada de eso. Eclipse UI ya lo trae resuelto: no lo decides pantalla por pantalla, y quien usa tu app no se atora.
Se lee
Texto en contraste AA en cada personalidad, en claro y en oscuro: 336 mediciones en un navegador real. Si una baja, la prueba falla.
ColorSe usa con teclado
Foco visible en todo lo que se enfoca, en el orden en que se lee. Nadie se queda atorado sin mouse.
AccesibilidadUna cosa importante a la vez
Una acción principal por pantalla y las demás más discretas: quien llega sabe qué hacer.
JerarquíaDice qué pasó
Errores que dicen cómo arreglarlo, estados vacíos que invitan a empezar y un color que nunca va solo.
ContenidoCabe en el teléfono
Cada plantilla del kit se prueba a 375px de ancho: nada se sale de la pantalla ni baja de AA.
PlantillasSe mueve con calma
El movimiento acompaña una acción, va al ritmo de la personalidad y se queda quieto para quien pide menos.
MovimientoSobre el sistema, la personalidad
Una personalidad decide cinco cosas a la vez sobre la misma base. El sistema se encarga de que, decidas lo que decidas, todo se siga leyendo y moviendo bien.
Para tu stack
CSS
<link rel="stylesheet" href="eclipse-ui.css">
<link rel="stylesheet" href="theme.css">Cualquier proyecto, con o sin framework: el motor y tu theme.css con dos líneas de HTML.
shadcn/ui
:root {
--primary: oklch(0.65 0.05 85);
}Los colores, el radio y las fuentes de tu personalidad en los bloques :root y .dark que ya usas.
Tu agente
Lee DESIGN.md y arma
la página de precios.El DESIGN.md, gratis, en la raíz de tu proyecto. El kit suma un skill para Claude Code, Cursor y AGENTS.md, con cada pieza en CSS y en shadcn/ui.
¿Usas Rails? Los componentes con vida existen como gema, con ViewComponent y Stimulus; llegan después. Mientras, míralos en el catálogo.
Precios
Tu personalidad y sus reglas no cuestan nada. El kit es para no empezar cada página en blanco.
Gratis
Para que tu proyecto se vea y se use bien desde hoy.
$0 USD
Para siempre, sin correo y sin cuenta.
Pago único
Todo lo gratis, más páginas de dónde partir y un skill que sabe las reglas.
$33.33 USD
Un solo pago, sin suscripción.
Después, 48 USD.
La venta abre muy pronto
Precios en USD. El kit se paga una vez con Stripe · Venta final, sin reembolsos · Términos
Gratis, sin cuenta y sin correo. Un design system completo detrás de tres archivos: tu proyecto ya sabe cómo se ve y cómo se usa bien.