Todo en línea
Todo se alinea.
Tu marca, cada pantalla y la experiencia de quien la usa, sobre una base que no cambia.
Eclipse UI
Una base de diseño con personalidad. Elige la de tu marca, descárgala y tu IA la sigue en cada pantalla: su voz, su forma, su color, su aire y su ritmo.
Cómo funciona
No hace falta un design system de meses ni un diseñador de planta. Hace falta una personalidad clara y un agente que la entienda.
Seis de partida, cada una para un tipo de marca. Míralas sobre una página real y quédate con la que más se te parezca. Cambia más que el color: la voz, la forma, el aire y el ritmo.
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: #a3946b;
--eui-ink: #1a1a18;
--eui-paper: #f5f2ec;
--eui-tint: 25%;
:root {
--radius: 0.75rem;
--background: oklch(0.962 0.009 84.6);
--foreground: oklch(0.217 0.004 106.7);
--card: oklch(1 0 0);
--card-foreground: oklch(0.217 0.004 106.7);
--popover: oklch(1 0 0);
## 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,
Tres archivos y nada más: su theme.css para cualquier proyecto, su shadcn.css si usas shadcn/ui y su DESIGN.md. Sin correo y sin cuenta.
Cómo usarlaEl DESIGN.md le dice a tu agente qué tokens usar y qué reglas seguir. Cada pantalla nueva sale con tu voz, no con la de la plantilla de siempre.
Ver las instrucciones› Arma la página de precios con la personalidad Eclipse.
Leo DESIGN.md: oro cálido sobre papel, Fraunces en los títulos, curvas medias, ritmo calmado.
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.
Más que un color
Cambiar el color primario no le da personalidad a una interfaz. Una personalidad decide cinco rasgos, y la base se encarga de que todo siga leyéndose y moviéndose bien.
308 mediciones de contraste
Contraste medido
En un navegador real, en cada personalidad, en claro y en oscuro. Si un texto deja de leerse, la prueba falla.
Accesibilidad127 líneas, sin dependencias
Movimiento con física
Resortes de verdad que conservan la velocidad, y que respetan a quien pide menos movimiento.
Movimiento6 DESIGN.md, uno por personalidad
Instrucciones para tu IA
Los tokens, las reglas y lo que haría que tu app se viera hecha por IA, listos para tu agente.
Ver cómoPara 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.
Rails
render Ui::ButtonComponent.new(
glow: true
)Componentes con vida en ViewComponent y Stimulus, integrados con Turbo, que toman la personalidad solos.
Seis de partida. Míralas sobre una página real, quédate con la que más se te parezca y llévatela hoy.