Personalidades

Alinéala con tu marca

La base es la misma luz para todos: accesible, física, integrada con Rails. La personalidad es la forma que tú le das: su voz, su forma, su color, su aire y su ritmo. Elige una de partida, pégala en tu theme.css, hazla tuya, y todo se alinea solo: botones, formularios, tablas y lo que venga.

Empieza por una

6 órbitas distintas alrededor de la misma base, cada una para un tipo de marca. Son de donde arrancas, no a donde llegas.

Cómo hacerla tuya ↓
Carbón Herramientas, paneles y productos técnicos. Eclipse Marcas cálidas y editoriales. Alba Bienestar, belleza, editorial. Brisa Salud, clínicas y servicios profesionales. Umbra Deporte, energía y marcas de alto contraste. Terra Comunidad, artesanía y lo hecho a mano.

Personalidad

Eclipse

Marcas cálidas y editoriales.

Por ejemplo: un estudio boutique de pilates.

Va en tu theme.css, en lugar de tu bloque :root.

Descargar

Voz
Fraunces para los títulos e Inter para leer.
Forma
Curvas medias y capas cálidas con bordes suaves.
Color
Oro cálido sobre papel; la marca tiñe apenas los grises.
Aire
Aire base y sombras suaves.
Ritmo
Calmado.
Ver el bloque de theme.css 
:root {
  --eui-focus: initial;
  --eui-moon: initial;
  --eui-brand: #a3946b;
  --eui-ink: #1a1a18;
  --eui-paper: #f5f2ec;
  --eui-tint: 25%;
  --eui-roundness: 1;
  --eui-density: 1;
  --eui-depth: 1;
  --eui-motion: 1;
  --eui-halo: 1;
  --eui-line: 1;
  --eui-control-radius: initial;
  --eui-control-case: none;
  --eui-control-tracking: normal;
  --eui-control-weight: 500;
  --eui-font-text: "Inter", system-ui, -apple-system, sans-serif;
  --eui-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --eui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --eui-display-weight: 500;
  --eui-display-tracking: -0.02em;
  --eui-display-leading: 1.05;
  --eui-display-style: normal;
  --eui-display-case: none;
  --eui-display-stretch: normal;
  --eui-display-soft: initial;
  --eui-display-wonk: initial;
}

Eclipse sobre la página de un estudio de ejemplo

Luna Estudio
Yoga y pilates · Roma Norte

Respira, muévete, vuelve a ti.

Clases pequeñas con maestras que se aprenden tu nombre. Reserva en segundos y llega a tiempo de soltar el día.

  • Ana García
  • Sofía Ruiz
  • Mariana Cruz
  • Diego Torres
  • y 2 más: Lucía Herrera y Pablo Méndez

128 clientes esta semana

83%

del cupo de esta semana ya está reservado

Hoy en el estudio

Lunes 12 de octubre · Sala 1 y terraza

, 60 min

4/12

Vinyasa Flow

con Ana GarcíaTodos los niveles

, 50 min

10/12

Reformer

con Iván LópezIntermedio

, 30 min

6/15

Meditación

con Sofía Ruiz

Reservada

Paquetes

Sin inscripción. Tus créditos sirven en cualquier clase.

Más popular

Paquete

10 clases

Para venir dos o tres veces por semana.

$1,350 MXN

10 clases · $135 por clase

Vigencia de 60 días

  • Acceso a todos los tipos de clases
  • Reserva hasta con 7 días de anticipación
  • Lista de espera cuando las clases estén llenas
  • Reserva prioritaria
Comprar paquete

Tu primera clase va por nosotras

Déjanos tu correo y te mandamos el horario de la semana con un crédito de regalo.

Sin tarjeta

Revisa el correo: le falta el dominio.

Llévala a tu proyecto

No necesitas Rails ni Tailwind. Con dos archivos cualquier página toma la personalidad, y con el DESIGN.md tu IA la sigue en cada pantalla que construya.

  1. Con CSS, en cualquier proyecto

    El motor y luego el theme.css de tu personalidad. Para el modo oscuro, class="dark" en <html>.

    <link rel="stylesheet" href="https://eclipse-ui.vercel.app/v1/eclipse-ui.css">
<link rel="stylesheet" href="theme.css">

  2. Con shadcn/ui

    Los bloques :root y .dark de shadcn.css, en lugar de los de tu globals.css. Tus componentes toman sus colores, su radio y sus fuentes.

    /* globals.css */
:root { /* …de shadcn.css… */ }
.dark { /* …de shadcn.css… */ }

  3. Con tu IA

    El DESIGN.md en la raíz de tu proyecto. Le dice a tu agente qué tokens usar, qué reglas seguir y qué la haría ver hecha por IA.

    Lee DESIGN.md y aplícalo
a esta pantalla.

Úsalo en cualquier proyecto, propio o de un cliente, también comercial; no lo revendas. Licencia

Hazla tuya

Una personalidad de partida es solo el comienzo. Mueve cualquiera de sus cinco rasgos en tu theme.css y todo lo demás se realinea solo: los componentes, las vistas y lo que se construya después.

Voz
Las tipografías, el peso de los títulos, la cursiva, las mayúsculas y la voz de los botones.
--eui-font-display: "Cormorant";
--eui-control-case: uppercase;
Forma
La redondez de todo, botones y campos en pastilla o rectos, y qué tan marcados son los bordes.
--eui-roundness: 1.4;
--eui-control-radius: 9999px;
Color
La marca, la tinta y el papel, y cuánto tiñe la marca los grises. El contraste se ajusta solo.
--eui-brand: #4f6b52;
--eui-tint: 18%;
Aire
Qué tan compacta o aireada es la interfaz y cuánta sombra lleva lo que flota.
--eui-density: 1.1;
--eui-depth: 0.5;
Ritmo
Qué tan rápido se mueve todo y cuánto brilla lo importante.
--eui-motion: 0.8;
--eui-halo: 1.4;

Ejemplo: Terra, ajustada a una marca

Las mismas piezas con tres líneas de diferencia: la marca en verde musgo, menos tinte en los grises y los botones en pastilla. Lo demás de Terra se queda.

Terra de partida

, 60 min

9/12

Hatha suave

con Lucía HerreraTodos los niveles

Terra, ajustada 3 diales

, 60 min

9/12

Hatha suave

con Lucía HerreraTodos los niveles 

:root {
  /* …el bloque de Terra que copiaste… */
  --eui-brand: #4f6b52;
  --eui-tint: 18%;
  --eui-control-radius: 9999px;
}

Cómo crear la tuya

  1. 1

    Elige la de partida

    La que más se parezca a tu marca. En su ficha, «Copiar para theme.css».

  2. 2

    Pégala y muévela

    En tu theme.css. Cambia los rasgos que quieras: el color de marca casi siempre, lo demás si tu producto lo pide.

  3. 3

    Revisa la alineación

    El guardián de contraste mide tu theme.css en claro y oscuro: si algún texto deja de leerse, te dice cuál.