El sistema NIX

Un lenguaje visual tranquilo y editorial: vidrio esmerilado, hairlines en vez de sombras y un único azul que solo aparece donde hay algo con lo que interactuar. Todo lo que sigue en esta página se construye con estas mismas piezas.

Montaje

Ver componentes Realtime

Tarjeta esmerilada

Blur, una hairline y color. Sin sombra: la profundidad la dan los bordes finos y el desenfoque del fondo.

Notificaciones Activo

Principios

01

Susurra, no grites

Entendimiento confiado. Tipografía ligera (peso 350), mucho aire y copy sobrio. La interfaz no compite por atención: deja respirar al contenido.

02

Un solo acento

El azul #0071e3 es exclusivo de lo interactivo: enlaces, foco, estados activos y selección. Nunca un bloque grande de color de relleno.

03

Hairlines, no sombras

La jerarquía nace del desenfoque, las líneas de 1.6px y el color del texto. Cero drop shadows: la profundidad se sugiere, no se proyecta.

✓ Do

Reutiliza los tokens y las piezas de este sistema tal cual. Reserva el azul para lo accionable, apóyate en hairlines y vidrio, y deja whitespace generoso entre bloques.

✕ Don't

No introduzcas nuevos colores de marca, sombras o rellenos sólidos llamativos, ni redefinas la tipografía. Si una pieza pide otro acento, casi siempre la respuesta es menos, no más.


  
  Ver componentes
    
  

  
  Realtime

  
  
    Tarjeta esmerilada
    Blur, hairline y color.
  

  
  
    
    
    Notificaciones
  

  
  
    
    
  

  
  Activo

Blocks

Bloques de layout listos para componer páginas — combinan los componentes del sistema en patrones completos de UI/UX. Copia, pega y cambia el contenido.

Hero dividido

Plataforma NIX

Tu ERP en marcha en minutos, no en meses.

Aprovisionamos tu instancia, eliges tu industria y tu stack se instala solo. Sin servidores que mantener, sin migraciones a medianoche.

Empezar ahora Sin tarjeta · 14 días

Estado de la flota En vivo

99,98% Disponibilidad este mes

Instancias activas1.284

Tiempo de aprovisionamiento3 min 12 s

Respaldos hoy26 / 26

Última actualización hace 8 s


  
    
      Plataforma NIX
      Tu ERP en marcha en minutos, no en meses.
      Aprovisionamos tu instancia, eliges tu industria y tu stack se instala solo. Sin servidores que mantener, sin migraciones a medianoche.
      
        Empezar ahora→
        Sin tarjeta · 14 días
      
    
    
      
        
          Estado de la flota
          En vivo
        
        
          99,98%
          Disponibilidad este mes
        
        
          Instancias activas1.284
          Tiempo de aprovisionamiento3 min 12 s
          Respaldos hoy26 / 26
        
        
          Última actualización
          hace 8 s

Cuadrícula de características

Plataforma

Todo lo que tu negocio necesita, en un solo lugar

Despliegue en minutos

Aprovisionamos tu servidor y tu stack de módulos sin que muevas un dedo. Eliges la industria y empiezas.
Datos siempre tuyos

Cada cliente corre en su propio servidor aislado, con copias de seguridad automáticas y cifrado en reposo.
Actualizaciones sin fricción

Las mejoras llegan a tu instancia de forma silenciosa. Sin downtime, sin migraciones manuales, sin sorpresas.


  
    
      Plataforma
      Todo lo que tu negocio necesita, en un solo lugar
    
    
      
        
          
        
        Despliegue en minutos
        Aprovisionamos tu servidor y tu stack de módulos sin que muevas un dedo. Eliges la industria y empiezas.
      
      
        
          
        
        Datos siempre tuyos
        Cada cliente corre en su propio servidor aislado, con copias de seguridad automáticas y cifrado en reposo.
      
      
        
          
        
        Actualizaciones sin fricción
        Las mejoras llegan a tu instancia de forma silenciosa. Sin downtime, sin migraciones manuales, sin sorpresas.

Stats / Métricas

La flota en números

1 240+ Instancias activas

99,98% Uptime últimos 90 días

4,2min Aprovisionamiento medio

12 Industrias soportadas


  
    La flota en números
    
      
        1 240+
        Instancias activas
      
      
        99,98%
        Uptime últimos 90 días
      
      
        4,2min
        Aprovisionamiento medio
      
      
        12
        Industrias soportadas

Pricing — planes editoriales

Precios

Una cuota mensual. Tu servidor, tu equipo, tus módulos — sin sorpresas.

Arranque

29 €/mes

Empezar gratis

Negocio Popular

89 €/mes

Elegir Negocio

Empresa

A medida/anual

Hablar con ventas

Todos los planes incluyen SSL, copias diarias y actualizaciones automáticas. Sin permanencia.


  
    
      Precios
      Una cuota mensual. Tu servidor, tu equipo, tus módulos — sin sorpresas.
    
    
      
        Arranque
        29 €/mes
        
          Empezar gratis
            
          
        
      
      
        Negocio Popular
        89 €/mes
        
          Elegir Negocio
            
          
        
      
      
        Empresa
        A medida/anual
        
          Hablar con ventas
            
          
        
      
    
    Todos los planes incluyen SSL, copias diarias y actualizaciones automáticas. Sin permanencia.

Banda de llamada a la acción

Empieza hoy

Tu ERP en marcha en
menos de cinco minutos.

Aprovisionamos tu instancia, eliges tu industria y el stack se instala solo. Sin servidores que mantener, sin sorpresas en la factura.

Crear mi instancia Ver una demo en vivo

14 días de prueba · Sin tarjeta · Cancela cuando quieras


  
  
    Empieza hoy
    Tu ERP en marcha en
menos de cinco minutos.
    Aprovisionamos tu instancia, eliges tu industria y el stack se instala solo. Sin servidores que mantener, sin sorpresas en la factura.
    
      Crear mi instancia
      
        Ver una demo en vivo
        
          
        
      
    
    14 días de prueba · Sin tarjeta · Cancela cuando quieras

Barra de confianza / logos

Equipos que operan con NIX

AtlasBienes Marverde Núcleo 42 Sancorp Vela&Co Orbita


  
    Equipos que operan con NIX
    
      AtlasBienes
      Marverde
      Núcleo 42
      Sancorp
      Vela&Co
      Orbita

Testimonio

“

Migramos de tres herramientas distintas a NIX en una tarde. Lo que antes era un parche de hojas de cálculo y correos ahora vive en un solo sitio, y el equipo dejó de pelearse con el software para volver a atender el negocio.

Mariana Rivas Directora de operaciones · Panadería Burgos


  
    “
    
      Migramos de tres herramientas distintas a NIX en una tarde. Lo que antes era un parche de hojas de cálculo y correos ahora vive en un solo sitio, y el equipo dejó de pelearse con el software para volver a atender el negocio.
    
    
      MR
      
        Mariana Rivas
        Directora de operaciones · Panadería Burgos

Preguntas frecuentes

Soporte

Preguntas frecuentes

Lo esencial sobre cómo NIX aprovisiona, cobra y actualiza tu instancia. Si no encuentras la respuesta, escríbenos a hola@nix.cm.

¿Cuánto tarda en estar lista mi instancia?

En cuanto se confirma el pago, NIX clona un snapshot dorado en Hetzner y levanta tu VPS en pocos minutos. Aterrizas en tu subdominio tunombre.nix.cm, eliges tu industria y el stack de módulos se autoinstala sin que toques nada.

¿Dónde viven mis datos y quién los gestiona?

Cada cliente corre en su propio servidor aislado dentro de Hetzner Cloud, con SSL gestionado y snapshots periódicos. Nosotros operamos la infraestructura desde el control plane, pero tu base de datos es tuya: puedes exportarla cuando quieras.

¿Cómo se aplican las actualizaciones?

Repartimos las mejoras de los módulos nix_* de forma centralizada. Las actualizaciones se prueban primero en instancias de pruebas y luego se aplican a tu entorno en una ventana de mantenimiento, sin interrumpir tu operación diaria.

¿Puedo cancelar o cambiar de plan?

Sí. La facturación se gestiona con Stripe y puedes subir, bajar o cancelar tu plan desde tu panel cuando lo necesites. Al cancelar conservas acceso hasta el fin del periodo pagado y te entregamos una copia completa de tus datos.


  
    
      Soporte
      Preguntas frecuentes
      Lo esencial sobre cómo NIX aprovisiona, cobra y actualiza tu instancia. Si no encuentras la respuesta, escríbenos a hola@nix.cm.
    
    
      
        
          ¿Cuánto tarda en estar lista mi instancia?
          
        
        
          En cuanto se confirma el pago, NIX clona un snapshot dorado en Hetzner y levanta tu VPS en pocos minutos. Aterrizas en tu subdominio tunombre.nix.cm, eliges tu industria y el stack de módulos se autoinstala sin que toques nada.
        
      
      
        
          ¿Dónde viven mis datos y quién los gestiona?
          
        
        
          Cada cliente corre en su propio servidor aislado dentro de Hetzner Cloud, con SSL gestionado y snapshots periódicos. Nosotros operamos la infraestructura desde el control plane, pero tu base de datos es tuya: puedes exportarla cuando quieras.
        
      
      
        
          ¿Cómo se aplican las actualizaciones?
          
        
        
          Repartimos las mejoras de los módulos nix_* de forma centralizada. Las actualizaciones se prueban primero en instancias de pruebas y luego se aplican a tu entorno en una ventana de mantenimiento, sin interrumpir tu operación diaria.
        
      
      
        
          ¿Puedo cancelar o cambiar de plan?
          
        
        
          Sí. La facturación se gestiona con Stripe y puedes subir, bajar o cancelar tu plan desde tu panel cuando lo necesites. Al cancelar conservas acceso hasta el fin del periodo pagado y te entregamos una copia completa de tus datos.

Cómo funciona

En marcha en minutos

De pago a operando, sin fricción

Pagas una vez y NIX hace el resto: aprovisiona tu servidor, levanta tu Odoo y deja tu industria lista para trabajar.

01
Activa tu cuenta

Elige tu plan y paga con tarjeta. La suscripción se gestiona por Stripe; cancelas cuando quieras.
02
Aprovisionamos tu VPS

Creamos un servidor dedicado desde un snapshot dorado y lo publicamos en tu propio subdominio ·.nix.cm.
03
Eliges tu industria

Seleccionas tu sector y se autoinstala el stack de módulos pensado para tu negocio, sin configurar nada a mano.
04
Empieza a operar

Entras a tu panel con todo listo: facturación, equipo y datos. Las actualizaciones llegan solas.

Crear mi instancia


  
    
      En marcha en minutos
      De pago a operando, sin fricción
      Pagas una vez y NIX hace el resto: aprovisiona tu servidor, levanta tu Odoo y deja tu industria lista para trabajar.
    
    
      
        01
        Activa tu cuenta
        Elige tu plan y paga con tarjeta. La suscripción se gestiona por Stripe; cancelas cuando quieras.
      
      
        02
        Aprovisionamos tu VPS
        Creamos un servidor dedicado desde un snapshot dorado y lo publicamos en tu propio subdominio ·.nix.cm.
      
      
        03
        Eliges tu industria
        Seleccionas tu sector y se autoinstala el stack de módulos pensado para tu negocio, sin configurar nada a mano.
      
      
        04
        Empieza a operar
        Entras a tu panel con todo listo: facturación, equipo y datos. Las actualizaciones llegan solas.
      
    
    Crear mi instancia→

Contenido y media

Plataforma

Tu negocio, gobernado desde un solo panel.

NIX aprovisiona tu instancia Odoo en minutos, instala el stack de tu industria y se ocupa de los respaldos, el SSL y las actualizaciones. Tú te concentras en operar; la infraestructura se cuida sola.

Ver cómo funciona

02:14 Recorrido del panel


  
    
      
        Plataforma
        Tu negocio, gobernado desde un solo panel.
        NIX aprovisiona tu instancia Odoo en minutos, instala el stack de tu industria y se ocupa de los respaldos, el SSL y las actualizaciones. Tú te concentras en operar; la infraestructura se cuida sola.
        Ver cómo funciona→
      
      
        
          02:14
          
          Recorrido del panel

Newsletter


  
    
      Boletín
      Novedades de NIX, sin ruido.
      Cada par de semanas: nuevas industrias, mejoras del backend y notas de versión. Cero spam.
    
    
      
        Correo
        
      
      
    
  
  Al suscribirte aceptas nuestra política de privacidad. Puedes darte de baja cuando quieras.

Footer oscuro


  
    
      
        NIX
        Tu negocio, gestionado sobre Odoo. Sin tocar el core, todo en módulos propios.
        Hablar con ventas →
      
      
        
          Producto
          
            Factory
            App Store
            Nómina
            Reservas
          
        
        
          Recursos
          
            Documentación
            Guías
            Estado del servicio
            Changelog
          
        
        
          Compañía
          
            Sobre NIX
            Contacto
            Empleo
            Prensa
          
        
      
    
    
      
        LinkedIn
        ·
        X
      
      
        Privacidad
        ·
        Términos
        ·
        © 2026 NIX

Color

Una paleta de grises de papel y tinta, con un solo azul. El color casi nunca decora: estructura el contenido y señala lo interactivo. El azul es una señal, no una superficie.

PALETA

Ink #0f1012 --ink

Texto y elementos oscuros. La CTA sólida más fuerte permitida.

Canvas #f2f2f4 --canvas

Fondo base de la página. El lienzo sobre el que flota todo.

Paper #fdfdfd --paper

Superficies sólidas: tarjetas, hojas, texto sobre fondo oscuro.

Fog #8f8f8f --fog

Texto atenuado: placeholders, captions, metadatos, estados inactivos.

Smoke #5e5e5e --smoke

Texto secundario: subtítulos, descripciones, etiquetas de campo.

Signal Blue #0071e3 --blue

El único acento. Enlaces, foco, activo, seleccionado, checks. Nunca relleno.

RELLENOS FROSTED

Light hsla(0,0%,47%,.10) Glass sobre lienzo claro

Dark hsla(0,0%,100%,.10) Glass sobre fondo oscuro

Blue hsla(0,0%,100%,.16) Glass de acento, foco/activo

TOKENS

Token	Hex / valor	Uso
`--ink`	`#0f1012`	Texto principal, CTA sólida
`--canvas`	`#f2f2f4`	Fondo de página
`--paper`	`#fdfdfd`	Superficies sólidas, texto invertido
`--fog`	`#8f8f8f`	Texto atenuado, placeholders
`--smoke`	`#5e5e5e`	Texto secundario
`--blue`	`#0071e3`	Acento: interactivo, foco, activo
frosted light	`hsla(0,0%,47%,.10)`	Glass sobre claro
frosted dark	`hsla(0,0%,100%,.10)`	Glass sobre oscuro
frosted blue	`hsla(0,0%,100%,.16)`	Glass de acento

✓ Do

Reserva el azul para lo interactivo: enlaces, anillos de foco, estados activos, checks y selección. Construye jerarquía con tinta, humo y niebla sobre papel.

✕ Don't

No pintes bloques grandes rellenos de azul ni lo uses como fondo de tarjeta. La profundidad viene del blur, la línea capilar y el contraste de gris, no del color.

CÓDIGO

:root {
  /* Tinta y papel */
  --ink:    #0f1012;  /* texto, CTA sólida */
  --canvas: #f2f2f4;  /* fondo de página */
  --paper:  #fdfdfd;  /* superficies sólidas */

  /* Grises de texto */
  --fog:    #8f8f8f;  /* atenuado / placeholder */
  --smoke:  #5e5e5e;  /* secundario */

  /* La única señal */
  --blue:   #0071e3;  /* interactivo, foco, activo */
}

/* Rellenos frosted */
.glass        { backdrop-filter: blur(20px);
                background: hsla(0,0%,47%,.10); }   /* light  */
.glass--dark  { background: hsla(0,0%,100%,.10); }  /* dark   */
.glass--blue  { background: hsla(0,0%,100%,.16); }  /* accent */

Materials

NIX tiene un solo material: vidrio esmerilado. Las superficies no proyectan sombra — flotan porque desenfocan lo que tienen detrás, se cierran con una hairline y se tiñen apenas con un color. La profundidad nace del blur, el borde y el grano, nunca de una sombra.

Las tres variantes

Light hsla(0,0%,47%,.10) Sobre fondos claros — texto en --ink.

Dark hsla(0,0%,100%,.10) Sobre fondos oscuros — texto en --paper.

Blue hsla(0,0%,100%,.16) Sobre el azul de marca — texto en --paper.

Mismo backdrop-filter: blur(20px) en las tres. Solo cambia el relleno hsla según el fondo que tienen detrás.

Anatomía de una superficie

Blur 20px + saturate(1.2)

Relleno hsla translúcido

Hairline 1.6px a .12

Grano fractal global a .035

El grano

Con grano

Sin grano

Capa position: fixed; inset: 0 con ruido fractal SVG, opacity: .035 y mix-blend-mode: multiply. Quita el plano plástico del vidrio; es global, no por componente.

Propiedad	Valor
Backdrop filter	`blur(20px) saturate(1.2)`
Relleno — light	`hsla(0,0%,47%,.10)`
Relleno — dark	`hsla(0,0%,100%,.10)`
Relleno — blue	`hsla(0,0%,100%,.16)`
Hairline	`var(--hair) solid rgba(15,16,18,.12)`
Radio	`10px` (cards / pills / inputs)
Grano — opacidad	`.035` · `mix-blend-mode: multiply`
Grano — fuente	`feTurbulence fractalNoise, baseFrequency 0.9`
Sombra	`none` — siempre

✓ Do

Construye la profundidad con blur + hairline + un tinte hsla. Adapta solo el relleno al fondo (light / dark / blue) y deja el grano global encima.

✕ Don't

No uses box-shadow ni rellenos opacos de color para fingir relieve. Sin blur detrás, el vidrio se vuelve una tarjeta plana cualquiera.

Código

/* Superficie esmerilada — adapta solo el relleno al fondo */
.frost {
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: var(--hair) solid rgba(15,16,18,.12);
  border-radius: 10px;
  background-color: hsla(0,0%,47%,.10);  /* light  */
  /* fondo oscuro */ /* background-color: hsla(0,0%,100%,.10); color: var(--paper); */
  /* fondo azul   */ /* background-color: hsla(0,0%,100%,.16); color: var(--paper); */
}

/* Grano: una sola capa global, nunca por componente */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

…

Escala tipográfica

Una sola familia, un solo peso. PP Neue Montreal en 350 con tracking −0.022em recorre toda la escala: la jerarquía nace del tamaño y el espacio, nunca del grosor.

ESPECÍMENES

Aa

Giant clamp(80–140px) · 350 · −0.022em · 0.95

Tu negocio, en orden

Display 38px · 350 · −0.022em · 1.05

Provisiona en minutos

Heading 27px · 350 · −0.022em · 1.1

Una infraestructura, cada industria

Subhead 18px · 350 · −0.022em · 1.3

El cliente paga, recibe su VPS con Odoo 19 y elige su industria. Su stack de módulos se instala solo. Sin fricción, sin pasos manuales, sin esperar a nadie.

Body 16px · 350 · −0.022em · 1.5

Disponible en todas las regiones de Hetzner con SSL automático y snapshots diarios.

Small 14px · 350 · −0.022em · 1.5

Última sincronización hace 2 min · nix.cm

Caption 12px · 350 · −0.022em · 1.4

ESPECIFICACIONES

Estilo	Tamaño	Peso	Tracking	Interlineado
Giant	`clamp(80px, 9.72vw, 140px)`	`350`	`-0.022em`	`0.95`
Display	`38px`	`350`	`-0.022em`	`1.05`
Heading	`27px`	`350`	`-0.022em`	`1.1`
Subhead	`18px`	`350`	`-0.022em`	`1.3`
Body	`16px`	`350`	`-0.022em`	`1.5`
Small	`14px`	`350`	`-0.022em`	`1.5`
Caption	`12px`	`350`	`-0.022em`	`1.4`

✓ Do

Mantén el peso en 350 (máximo 400). El peso ligero es la firma de NIX: la jerarquía se construye con tamaño, tracking negativo y aire, no con grosor.

✕ Don't

No uses 700/bold ni mezcles familias para destacar. Un titular en negrita rompe el tono editorial y delata la plantilla.

CÓDIGO

Aa
Tu negocio, en orden
El cliente paga y recibe su VPS.

.ty-giant {
  font-size: clamp(80px, 9.72vw, 140px);
  font-weight: 350;
  letter-spacing: -0.022em;
  line-height: 0.95;
}

.ty-body {
  font-size: 16px;
  font-weight: 350;
  letter-spacing: -0.022em;
  line-height: 1.5;
}

Alerts

Banner inline para comunicar estado o contexto sin interrumpir. Caja frosted con punto de estado, título, mensaje y una acción ghost opcional. Cuatro variantes, una sola intensidad de color.

VARIANTES

Sincronización en curso

Tus módulos se están actualizando. Puedes seguir trabajando mientras tanto.

Ver detalle

Pago confirmado

Tu suscripción quedó activa. La factura llegará a tu correo en unos minutos.

Certificado próximo a expirar

El SSL de tu dominio caduca en 6 días. Renuévalo para evitar interrupciones.

Renovar ahora

Modo lectura

Esta instancia está en pausa. Los cambios no se guardarán hasta reanudarla.

SOBRE FONDO OSCURO

Despliegue programado

El siguiente update de la flota se aplicará esta noche a las 02:00.

Reprogramar

Propiedad	Valor
Superficie	`blur(20px) · hsla(0,0%,47%,.10)`
Radio	`10px`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Padding	`16px 18px`
Punto de estado	`8px · 50% · color de variante`
Color info	`var(--blue) #0071e3`
Color success	`#0a8f5b`
Color warning	`#c98a00`
Color neutral	`var(--fog) #8f8f8f`
Título	`weight 400 · var(--ink)`
Mensaje	`weight 350 · var(--smoke)`
Acción	`ghost link · var(--blue) · arrow 30px`
Transición	`.22s ease`

✓ Do

Usa el punto de color solo como señal de estado y deja que el título lleve el peso semántico. El mensaje en una sola línea de contexto basta.

✕ Don't

No rellenes la caja entera con el color de la variante ni apiles varios botones sólidos. El banner informa, no grita.


  
  
    Certificado próximo a expirar
    El SSL de tu dominio caduca en 6 días.
  
  
    Renovar ahora

Boxes

Las superficies que contienen contenido. Cuatro tratamientos, una sola lógica de profundidad: blur, pelo (hairline) y color — nunca sombra. Cada caja elige cuánto desaparece sobre el lienzo.

LOS CUATRO TRATAMIENTOS

Frosted

Vidrio esmerilado

Flota sobre el lienzo. blur(20px) + relleno traslúcido. Para paneles que se superponen a contenido.

Paper well

Pozo de papel

Superficie hundida. El pelo interior sugiere que el contenido está embutido, no encima.

Bordered

Caja con borde

Solo un hairline. Sin relleno, sin blur. La estructura más callada que existe.

Canvas tile

Baldosa de lienzo

Del color del fondo. Se distingue solo por el pelo. Para mosaicos y rejillas densas.

SOBRE FONDO OSCURO

Frosted · dark

El esmerilado también funciona en oscuro

El mismo blur, el relleno y el pelo se invierten en luminosidad. El azul sigue siendo el único acento.

ESPECIFICACIONES

Token	Valor
Radio — caja estándar	`16px`
Radio — pill / input / botón	`10px`
Frosted — blur	`backdrop-filter: blur(20px)`
Frosted — relleno	`hsla(0,0%,47%,.10)`
Paper well — relleno	`var(--paper)`
Paper well — pelo interior	`inset 0 0 0 var(--hair) rgba(15,16,18,.10)`
Bordered — relleno	`transparent`
Canvas tile — relleno	`var(--canvas)`
Hairline (borde)	`var(--hair) solid rgba(15,16,18,.12)`
Padding interno	`22px–28px`
Sombra	`ninguna`

CÓDIGO


…


…


…


…

✓ Do

Construye la profundidad con blur, hairline y color. Usa el frosted solo cuando la caja se superpone a algo; sobre lienzo plano basta el borde o la baldosa.

✕ Don't

No añadas box-shadow de caída ni rellenos de color saturado. No apiles frosted sobre frosted: dos capas de blur ensucian el fondo y rompen la jerarquía.

Botones

El botón por defecto es un enlace fantasma: texto azul con una flecha en un anillo. Reservamos el relleno sólido para una única llamada a la acción discreta. Nunca bloques de color pesados.

JERARQUÍA

Continuar Primario · ghost link

Filtrar Secundario · pill azul

Saber más Terciario · texto azul

Empezar ahora CTA fuerte · pill sólida

ESTADOS

Default Hover Active Disabled Primario Acción Acción Acción Acción Secundario Filtrar Filtrar Filtrar Filtrar Terciario Saber más Saber más Saber más Saber más CTA Empezar Empezar Empezar Empezar

Pasa el cursor sobre la columna Default para ver las transiciones reales; las demás columnas fijan cada estado para referencia.

Propiedad	Valor
Tipo por defecto	`ghost link` (texto azul + anillo)
Color de acento	`var(--blue) #0071e3`
Anillo de flecha	`30px circle · var(--hair) solid`
Radio pill / CTA	`999px`
Borde pill	`1.6px solid var(--blue)`
Relleno pill (hover)	`background var(--blue); color #fff`
CTA fuerte	`background var(--ink); color var(--paper)`
Disabled	`opacity .35; pointer-events none`
Active	`transform translateY(.5px); opacity .85`
Transición	`.24s ease`
Sombras	`ninguna`

✓ Do

Deja el ghost link como acción primaria. Usa la pill sólida (ink) solo una vez por vista, para el CTA más importante.

✕ Don't

No rellenes botones grandes de azul ni apiles varios CTAs sólidos. El relleno de color compite con el contenido y rompe la calma editorial.



  Continuar
  
    
  



Filtrar


Saber más


Empezar ahora


Acción

Color wells

Una fila de muestras de color seleccionables: la activa lleva un anillo azul. Más un botón "color well" que abre un chip de color con su valor hex.

SELECTOR DE MUESTRAS

COLOR WELL CON HEX

Color de marca #0071E3

Propiedad	Valor
Tamaño del chip	`28px`
Radio del chip	`50%` (círculo)
Borde del chip	`var(--hair) solid rgba(15,16,18,.12)`
Anillo de selección	`0 0 0 2px var(--blue)` con offset de 3px
Check seleccionado	`var(--blue)`, solo en chips claros
Gap entre muestras	`12px`
Hover (no activos)	siblings a `opacity: .4`
Well trigger	pill `10px`, frosted, hairline
Hex	`var(--mono)`, color `var(--smoke)`
Transición	`.2s ease`

✓ Do

Marca la muestra activa con el anillo azul y deja respirar la fila. El azul es el único indicador de selección.

✕ Don't

No uses sombras, escalados grandes ni un segundo color de "activo". El color de la muestra ya es el contenido; el anillo es el estado.


  
    
    
    
  
  
    
    
    
  
  




  
    
    Color de marca
    #0071E3

Combo box

Un input de texto con chevron que combina escritura libre y selección. El usuario puede teclear para filtrar o abrir la lista y elegir. La lista vive en una superficie frosted bajo el campo; al pasar el cursor por una fila, las hermanas se atenúan.

ABIERTO (FOCUS)

Haz clic en el campo para abrir la lista. Teclea para filtrar.

CERRADO (REPOSO)

Propiedad	Valor
Alto del campo	`44px`
Padding del campo	`0 14px`
Radio (campo y lista)	`10px`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Borde / anillo en focus	`1.6px solid var(--blue)`
Superficie de la lista	`blur(20px) · hsla(0,0%,47%,.10)`
Alto de fila	`40px`
Hover de fila	`hermanas → opacity .35`
Selección	`check var(--blue)`
Chevron	`rota 180° al abrir · .2s ease`
Separación lista–campo	`6px (margin-top)`

✓ Do

Usa el combo box cuando el valor pueda escribirse libremente o elegirse de una lista conocida. El azul solo marca la opción seleccionada, el focus y el check.

✕ Don't

No rellenes las filas con bloques de color ni añadas sombras. La profundidad es blur + hairline; si solo hay opciones fijas sin escritura, usa un select normal.

CÓDIGO


  
    
    
      
    
  
  
    
      Restauración✓
    
    Retail
    Educación

Dialogs

Una tarjeta esmerilada centrada que pide una decisión deliberada. El fondo se atenúa y se desenfoca para aislar el foco — sin sombras duras, la profundidad nace del blur y la hairline.

DIÁLOGO DE CONFIRMACIÓN

VARIANTE NEUTRA — CONTENIDO LARGO

Propiedad	Valor
Backdrop / scrim	`rgba(15,16,18,.28)` + `blur(6px)`
Superficie de la tarjeta	`backdrop-filter: blur(20px)` · `hsla(0,0%,47%,.10)`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Radio	`10px`
Ancho máximo	`340px` (wide: `420px`)
Padding	`26px 28px 22px`
Título	`17px` · `var(--ink)` · weight 400
Cuerpo	`13.5px` · `var(--smoke)` · line-height 1.5
Acciones	derecha · gap `14px` · ghost + pill
Sombra	`none` (profundidad = blur + hairline)
Transición	`.24s ease`

✓ Do

Desenfoca y atenúa el fondo (blur(6px) + scrim translúcido) para aislar la decisión. La acción primaria es un ghost link o un pill sutil; la secundaria, texto plano.

✕ Don't

No uses sombras duras ni un bloque azul lleno como tarjeta. No pongas dos botones llenos compitiendo, ni un scrim negro opaco — rompe la calma del frosted glass.


  

  
    ¿Eliminar instancia?
    
      Se desconectará NIX-Burgos-0012 y se
      liberará su VPS. Esta acción no se puede deshacer.

Disclosure / Accordion

Una pila de filas plegables sobre

nativo. Cada fila revela su contenido al abrirse; el chevron gira y los separadores son hairline. Sin script.

EJEMPLO

¿Qué incluye cada instancia NIX?

Cada cliente recibe su propio servidor Odoo 19 aislado, con dominio en nix.cm, SSL automático y los módulos de su industria preinstalados. Nada se comparte entre clientes.

¿Cómo se reparten las actualizaciones?

El control plane distribuye las nuevas imágenes a la flota y aplica las migraciones de módulo de forma escalonada, sin tiempo de inactividad perceptible.

¿Puedo cambiar de industria más tarde?

Sí. El stack de módulos se recalcula al vuelo: se instalan los addons de la nueva industria y se conservan tus datos existentes.

ESPECIFICACIONES

Propiedad	Valor
Elemento base	`/`
Separador entre filas	`var(--hair) solid rgba(15,16,18,.12)`
Padding del summary	`18px 4px`
Tamaño del chevron	`9px` (lado de la flecha)
Giro al abrir	`rotate(45deg)` vía `[open]`
Transición del chevron	`transform .25s ease`
Acento (hover/focus)	`var(--blue)` solo en texto y anillo
Abierto por defecto	Primera fila (atributo `open`)

USO

✓ Do

Deja una sola fila abierta por defecto y separa las filas con hairline. El chevron gira con una transición suave de .25s.

✕ Don't

No rellenes la fila abierta con un bloque de color, ni uses sombras o iconos pesados. La jerarquía viene del peso tipográfico y el espacio.

CÓDIGO


  
    
      ¿Qué incluye cada instancia NIX?
      
    
    
      Servidor Odoo 19 aislado, dominio nix.cm y SSL automático.
    
  

  
    
      ¿Cómo se reparten las actualizaciones?
      
    
    
      El control plane distribuye imágenes de forma escalonada.

Forms

Campos tranquilos sobre superficie clara, etiquetas alineadas a un ritmo constante y un anillo de foco azul. El azul aparece solo cuando el campo está activo; el resto del formulario permanece en gris tinta.

EJEMPLO EN VIVO

ANATOMÍA

Token	Valor
Gap etiqueta → campo	`8px`
Gap entre campos	`22px`
Alto del input / select	`44px`
Padding horizontal input	`14px`
Radio	`10px`
Borde hairline	`var(--hair) solid rgba(15,16,18,.12)`
Texto etiqueta	`13px · var(--smoke)`
Texto de ayuda	`12.5px · var(--fog)`
Anillo de foco	`0 0 0 3px rgba(0,113,227,.22)`
Borde en foco	`var(--blue)`
Transición	`.2s ease`

✓ Do

Reserva el azul para el estado de foco y el enlace de envío. Mantén etiquetas en gris humo y un ritmo vertical constante entre campos.

✕ Don't

No rellenes inputs con color, no añadas sombras ni botones sólidos de colores. El campo en reposo es papel con hairline; la profundidad la da el foco, no la sombra.

CÓDIGO


  
    Nombre del espacio
    
  

  
    Subdominio
    
    Disponible en miempresa.nix.cm
  

  
    Industria
    
      
      
    
  

  
    
    
    
      Copias automáticas
      Snapshot diario, retención de 7 días.

Image well

Una zona de subida con borde discontinuo para arrastrar o seleccionar una imagen. El estado vacío invita; el estado lleno muestra una miniatura con un control para quitarla.

ESTADO VACÍO

Arrastra una imagen o haz clic PNG, JPG o WEBP · hasta 5 MB

ESTADO LLENO

portada.webp 1.2 MB · 1600 × 900

EN CONTEXTO

Logotipo SVG o PNG cuadrado

Propiedad	Valor
Borde vacío	`var(--hair) dashed rgba(15,16,18,.18)`
Radius	`10px`
Fondo (well)	`hsla(0,0%,47%,.05)`
Hover / focus-within	`border-color: var(--blue); icono → var(--blue)`
Padding vacío	`32px 28px`
Miniatura (lleno)	`48px · radius 10px`
Quitar (×)	`circle 30px · hairline · hover var(--blue)`
Transición	`.24s ease`

✓ Do

Mantén el borde discontinuo y el fondo casi transparente. Reserva el azul para el hover, el foco y la miniatura activa; indica formatos y peso aceptados bajo el título.

✕ Don't

No rellenes la zona con un bloque de color, no añadas sombras ni uses un botón sólido grande. No escondas el control de quitar tras un menú: déjalo visible junto a la miniatura.



  
  
  Arrastra una imagen o haz clic
  PNG, JPG o WEBP · hasta 5 MB




  
  
    portada.webp
    1.2 MB · 1600 × 900

Listas y tablas

Datos en reposo: filas separadas por una sola hairline, sin zebra ni bordes de celda. La tabla editorial alinea nombre, valor y acción; la lista simple lleva un icono guía y atenúa las filas hermanas al pasar el cursor.

TABLA EDITORIAL

Plan	Instancias	Precio / mes
Starter 1 industria, soporte por correo	1 VPS	29 €	Elegir→
Pro Actual Hasta 3 industrias, snapshots diarios	3 VPS	79 €	Gestionar→
Fleet Industrias ilimitadas, DNS y SSL incluidos	10 VPS	199 €	Elegir→

LISTA CON ICONO · HOVER ATENÚA HERMANAS

Aprovisionar VPS Golden snapshot · Hetzner · ~90 s Listo
Asignar subdominio cliente.nix.cm · DNS + SSL Listo
Instalar stack de industria Módulos nix_* según selección En curso
Primer cobro Stripe Ciclo mensual · prorrateo Pendiente

Propiedad	Valor
Separador de fila	`border-bottom: var(--hair) solid rgba(15,16,18,.12)`
Bordes de celda / zebra	`ninguno`
Altura de fila	`padding: 18px 4px`
Cabecera	`--fog · 12px · letter-spacing .04em · uppercase`
Nombre / valor	`--ink` · `secundaria → --fog`
Columna numérica	`text-align: right · font-feature-settings "tnum"`
Acción	`ghost link --blue + flecha →`
Fila activa	`borde izq. 1.6px --blue · badge --blue`
Icono de lista	`círculo 28px · hairline · --fog (→ --blue activo)`
Hover en lista	`fila activa opacidad 1 · hermanas → .35`
Transición	`.22s ease`

✓ Do

Separa filas con una sola hairline, alinea los números a la derecha con cifras tabulares y deja la acción como ghost link azul. Al pasar el cursor por una fila de la lista, atenúa las hermanas para enfocar.

✕ Don't

No uses bordes de celda completos, rayas zebra, fondos de cabecera de color ni sombras. El azul nunca rellena una fila entera: solo marca lo activo o lo interactivo.


  
    
      Plan
      Instancias
      Precio / mes
      
    
  
  
    
      
        Pro Actual
        Hasta 3 industrias, snapshots diarios
      
      3 VPS
      79 €
      
        Gestionar→
      
    
  




  
    ◆
    
      Aprovisionar VPS
      Golden snapshot · Hetzner
    
    Listo

Plan	Instancias	Precio / mes
Pro Actual Hasta 3 industrias, snapshots diarios	3 VPS	79 €	Gestionar→

Menu bar

La cabecera del sitio: dos pastillas esmeriladas que flotan sobre el contenido — un círculo con el logo y una pastilla con 3-4 enlaces — con una pastilla de anuncio justo debajo. Vidrio, hairline y un solo azul de acento.

CABECERA COMPLETA

Nuevo App Store dentro de NIX — instala tu stack en un clic

SOBRE FONDO OSCURO

Nuevo El mismo vidrio, ahora sobre tinta

ANATOMÍA

1

Círculo de logo — pastilla circular independiente de 46px, vidrio esmerilado + hairline. Separada de los enlaces por un gap de 6px.

2

Pastilla de enlaces — contenedor de 46px de alto, radio 10px, con 3-4 enlaces. El activo lleva el azul; al hover de uno, los hermanos bajan a opacidad .35.

3

Pastilla de anuncio — fila opcional bajo la nav: tag azul de 999px + texto + flecha. Mismo vidrio, centrada.

ESPECIFICACIONES

Propiedad	Valor
Alto de cada pastilla	`46px`
Radio (pastillas / logo)	`10px` / `50%`
Gap entre logo y enlaces	`6px`
Superficie (vidrio)	`backdrop-filter: blur(20px)`
Fondo adaptable al tema	`hsla(0,0%,47%,.10)`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Padding horizontal de enlaces	`14px`
Estado activo / hover	`var(--blue)`
Tag de anuncio	`border-radius: 999px`
Transición	`.25s ease`

USO

✓ Do

Mantén dos pastillas separadas por 6px y deja que el vidrio adopte el color del fondo via hsla. Reserva el azul para el enlace activo y el tag.

✕ Don't

No rellenes la barra con un bloque de color sólido, ni le pongas sombra, ni metas más de 4 enlaces. La depuración llega del blur + hairline, no del peso.

CÓDIGO


  N
  
    Producto
    Precios
    Docs
    Acceder
  



  Nuevo
  App Store dentro de NIX
  →

Menus

Panel desplegable frosted para navegación secundaria y acciones. Filas con icono cuadrado, etiqueta y badge de flecha; al pasar el cursor por una fila, las hermanas se atenúan.

PANEL DESPLEGABLE

SOBRE LIENZO OSCURO

Propiedad	Valor
Superficie	`blur(20px) · hsla(0,0%,47%,.10)`
Radio del panel	`10px`
Borde	`1.6px solid rgba(15,16,18,.12)`
Ancho mínimo	`280px`
Padding interno	`6px`
Icono de fila	`28px · radio 10px · hairline`
Alto de fila	`auto · padding 10px 12px`
Badge de flecha	`↗ · 18px · color var(--fog)`
Atenuación hermanas	`opacity .35`
Estado activo / hover	`icono y flecha en var(--blue)`
Transición	`.2s ease`

✓ Do

Atenúa las filas hermanas al .35 cuando el cursor entra en una fila — dirige la mirada con quietud. Reserva el azul para el estado activo, el hover y el icono seleccionado.

✕ Don't

No pongas fondos azules rellenos en las filas ni sombras bajo el panel. La profundidad viene del blur y la hairline, no del color ni del drop shadow.


  
    Espacio de trabajo
    ⌘K
  
  
    
      
        ◰
        
          Agentes
          NAY, Factory, Omni
        
        ↗

Notifications

Avisos efímeros que confirman una acción o entregan información sin interrumpir el flujo. Tarjeta frosted compacta: icono, título, mensaje y cierre. Dos variantes — informativa y de éxito.

TOAST

Cambios guardados localmente

Se sincronizarán con el servidor en cuanto recuperes conexión.

Instancia aprovisionada

Tu servidor ya responde en acme.nix.cm.

Propiedad	Valor
Superficie	`blur(20px) · hsla(0,0%,47%,.10)`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Radio	`10px`
Ancho	`min(360px, 100%)`
Padding	`14px 16px`
Icono	`26px círculo · 50%`
Acento info	`var(--blue) #0071e3`
Acento success	`var(--blue) #0071e3`
Título	`15px · weight 400 · var(--ink)`
Mensaje	`13.5px · weight 350 · var(--smoke)`
Cierre ×	`var(--fog) → var(--ink) en hover`
Transición	`.2s ease`
Sombra	`ninguna`

✓ Do

Mantén el toast breve: un título de una línea y un mensaje de apoyo. Usa el icono y el acento azul solo para marcar el estado, nunca para teñir todo el bloque.

✕ Don't

No rellenes la tarjeta con un color de fondo sólido ni añadas sombra. No metas varios botones de acción: el toast informa, no es un diálogo de decisión.

CÓDIGO


  
    
  
  
    Instancia aprovisionada
    Tu servidor ya responde en
      acme.nix.cm.

Pointers

El cursor es una promesa: dice qué pasa antes de hacer clic. Cada superficie declara su intención con la propiedad cursor, y las listas susurran su interactividad atenuando lo que no señalas.

CURSOR POR ESTADO

default Texto y superficies inertes

pointer Cualquier cosa que reacciona al clic

text Campos editables y selección

not-allowed Acciones deshabilitadas

Pasa el cursor sobre cada tarjeta para ver su afordancia.

CURSOR EN CONTROLES REALES

Enlace de texto

SIGNATURE — SIBLING-DIM HOVER

Aprovisionar instancia nix.cm
Repartir actualización flota
Renovar certificado SSL wildcard
Tomar snapshot Hetzner

Al señalar una fila, las hermanas bajan a opacidad .35 — el foco emerge sin recuadros ni rellenos.

Propiedad	Valor
Superficie inerte / texto	`cursor: default`
Elemento interactivo	`cursor: pointer`
Campo editable	`cursor: text`
Acción deshabilitada	`cursor: not-allowed`
Atenuado del hermano	`opacity: .35`
Opacidad en reposo	`opacity: 1`
Transición de atenuado	`opacity .25s ease`
Acento de hover (fila activa)	`var(--blue) #0071e3`
Radio de tarjeta / pill	`10px / 999px`
Borde hairline	`var(--hair) solid rgba(15,16,18,.12)`

✓ Do

Reserva cursor: pointer para lo que de verdad responde al clic, y deja que el sibling-dim revele el foco solo con opacidad y el acento azul.

✕ Don't

No pongas pointer en texto estático ni señales lo deshabilitado con relleno: usa not-allowed y opacidad reducida, nunca un bloque de color.


      
          
 



  Aprovisionar instancia
  Repartir actualización
  Renovar certificado SSL

Pop-up & Pull-down Buttons

Dos botones que abren un menú frosted. El pop-up muestra el valor seleccionado y lo cambia; el pull-down agrupa acciones bajo una etiqueta fija. Ambos se abren sin script con :focus-within.

POP-UP (SELECT)

Enfoca el botón (Tab / clic) para abrir el menú.

POP-UP — ESTADO ABIERTO (STATIC)

PULL-DOWN (ACCIONES)

El pull-down no guarda valor: la etiqueta es fija y cada fila es una acción.

Propiedad	Valor
Tipo	`pop-up` (cambia valor) · `pull-down` (ejecuta acción)
Radio trigger / menú	`10px`
Altura trigger	`40px`
Borde trigger	`var(--hair) solid rgba(15,16,18,.12)`
Borde / hover (focus)	`rgba(0,113,227,.5)`
Superficie del menú	`backdrop-filter: blur(20px)` · `hsla(0,0%,47%,.10)`
Padding fila	`9px 12px`
Check / activo	`var(--blue)` #0071e3
Chevron	13px · gira `180°` al abrir
Separador	`var(--hair) solid rgba(15,16,18,.10)`
Apertura (sin JS)	`:focus-within` → reveal del menú
Transición	`.2s ease`

✓ Do

Usa el pop-up cuando el botón representa un valor que se mantiene visible. Marca el seleccionado con un check azul y deja el resto neutro.

✕ Don't

No mezcles los tipos: un pull-down no debe mostrar un valor seleccionado ni cambiar su etiqueta al elegir una acción. Para destructivo, solo el texto va en rojo — nada de bloques rellenos.

Popovers

Una tarjeta flotante esmerilada con un pequeño pico, anclada sobre o bajo su disparador. Aparece al pasar el cursor o al enfocar — sin una sola línea de JavaScript.

ABAJO Y ARRIBA

SOBRE FONDO OSCURO

Propiedad	Valor
Superficie	`blur(20px) · hsla(0,0%,47%,.10)`
Radio de la tarjeta	`10px`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Pico / beak	`9px rotado 45° · mismo borde`
Ancho	`min(260px, 80vw)`
Separación al disparador	`12px`
Disparo	`:hover, :focus-within`
Transición	`opacity/transform .22s ease`
Enlace	`ghost link · var(--blue)`
Acento	`solo en el enlace y el foco`

✓ Do

Mantén el popover breve: un título, una frase y un enlace ghost. Deja que el desenfoque y el pico den la profundidad, sin sombra.

✕ Don't

No metas formularios, listas largas ni rellenos azules dentro del popover, ni lo uses para contenido crítico que el usuario deba leer sí o sí.


  
  
    Plan Estudio
    Hasta 5 instancias activas, snapshots
      diarios y soporte prioritario.
    
      Ver comparativa
      →

Progress Indicators

Indicadores de avance discretos: el progreso se comunica con un hilo azul sobre una pista de hairline, nunca con bloques de color. Determinado cuando conocemos el porcentaje, indeterminado cuando solo sabemos que algo ocurre.

BARRA DETERMINADA

Sincronizando módulos24%

Aprovisionando VPS68%

Instalación completa100%

BARRA INDETERMINADA

Esperando al servidoren curso

SPINNER CIRCULAR

PROGRESO POR PASOS

Cuenta
Industria
Dominio
Pago

Propiedad	Valor
Altura de pista (barra)	`3px`
Pista / fondo	`rgba(15,16,18,.10)`
Relleno / acento	`var(--blue) #0071e3`
Radio de barra	`999px`
Transición de relleno	`width .3s ease`
Ciclo indeterminado	`1.4s ease-in-out infinite`
Spinner (sm / base / lg)	`18px / 28px / 44px`
Grosor del anillo	`var(--hair) 1.6px`
Giro del spinner	`.8s linear infinite`
Nodo de paso	`10px círculo, 50%`
Paso completado / actual	`relleno var(--blue)`
Segmento (pista por pasos)	`4px alto, 999px radio`

✓ Do

Usa el azul solo para el relleno o el segmento activo, sobre una pista hairline neutra. Acompaña el porcentaje con un texto en --smoke y deja respirar la barra a ancho completo.

✕ Don't

No pongas barras gruesas con gradientes, sombras o varios colores. No animes una barra determinada en bucle ni uses la indeterminada cuando ya conoces el porcentaje real.



  
  Aprovisionando VPS68%










  Cuenta
  Dominio
  Pago

Search Fields

Campos de búsqueda frosted con lupa. El pill centrado vive en el header; la variante inline, alineada a la izquierda, lleva una × para limpiar. El acento azul aparece solo al enfocar.

PILL SEARCH — CENTRADO (HEADER)

⌘K

INLINE SEARCH — IZQUIERDA, CON CLEAR

SOBRE FONDO OSCURO

⌘K

Token	Valor
Radio	`10px`
Superficie frosted	`blur(20px) · hsla(0,0%,47%,.10)`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Borde · focus	`var(--blue)` + ring `rgba(0,113,227,.16)`
Lupa / texto	`var(--fog)` → `var(--ink)` al enfocar
Padding (pill)	`0 14px` · altura `44px`
Padding (inline)	`0 10px` · altura `38px`
Placeholder	`var(--fog)`, weight 350
Clear ×	visible solo con valor · hover `var(--ink)`
Transición	`.22s ease`

✓ Do

Mantén el campo transparente con borde hairline; deja que el azul aparezca solo en el foco. La lupa es delgada y silenciosa, alineada con el texto.

✕ Don't

No rellenes el campo con azul ni le pongas sombra. No muestres la × cuando el campo está vacío ni uses un botón sólido de "Buscar" al lado.



  
  
  ⌘K

Segmented Control

Un selector único entre opciones mutuamente excluyentes, alojado en una píldora frosted. El segmento activo se eleva con un chip de papel; el resto queda en silencio. Sin scripts: radio + :checked.

EJEMPLO

Día Semana Mes

SOBRE CANVAS · DOS SEGMENTOS

Mensual Anual

ESTADO DESHABILITADO

Cómoda Compacta Densa

SPECS

Propiedad	Valor
Contenedor	`frosted · blur(20px)`
Radio contenedor	`10px`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Padding interno	`3px`
Chip activo	`background: var(--paper)`
Radio chip	`8px`
Texto activo	`var(--ink)`
Texto inactivo	`var(--smoke)`
Texto hover	`var(--ink)`
Tamaño label	`13.5px / weight 350`
Altura segmento	`34px`
Foco	`outline 1.6px var(--blue)`
Transición chip	`transform .25s ease`
Mecánica	`input[type=radio] + label + :checked`

DO & DON'T

✓ Do

Úsalo para 2–4 opciones excluyentes y de igual peso (vista, periodo, densidad). El chip de papel marca la selección; el azul queda solo para el anillo de foco.

✕ Don't

No rellenes el segmento activo de azul ni metas más de cuatro opciones. Si las opciones no son excluyentes usa toggles; si son muchas, un select.

CÓDIGO


  
  Día

  
  Semana

  
  Mes

Scrollbar & scroll indicator

Las superficies con desbordamiento usan una barra fina y casi invisible: un thumb de un pelo de grosor que solo insinúa el progreso. Para invitar al scroll, una píldora con una flecha que oscila suavemente.

SCROLLBAR FINA

Términos de servicio

1. El producto vive sobre Odoo

NIX se construye encima de Odoo sin tocar nunca el core. Todo lo que se añade o cambia se hace creando o extendiendo módulos propios, jamás parcheando lo de terceros.

2. Aprovisionamiento de la flota

Cada cliente recibe un VPS dedicado clonado desde un golden snapshot. El control plane reparte updates, DNS y certificados sin que el cliente lo perciba.

3. Cobro y facturación

El ciclo de vida de la suscripción se gobierna desde el manager. El pago dispara el aprovisionamiento; la baja libera los recursos y archiva los snapshots.

4. Actualizaciones

Un swap de imagen entrega archivos, no migra bases de datos existentes. Las actualizaciones de módulo se aplican de forma deliberada, nunca implícita.

5. Continuidad

Sigue desplazándote: la barra a la derecha es del grosor de un pelo y solo aparece para acompañar, no para dominar la superficie.

Desplázate dentro del recuadro · ::-webkit-scrollbar de 6px con thumb hairline

SCROLLBAR FINA — SOBRE OSCURO

Changelog

v19.4 — Reaper de jobs

Limpieza automática de trabajos huérfanos y polling de estado cada 45 segundos para mantener la cola sana.

v19.3 — Bootstrap seguro

El arranque inicial de cada instancia se endurece: sin credenciales en claro, sin pasos manuales frágiles.

v19.2 — App Store E2E

Instalación de extremo a extremo en verde. La autoinstalación del stack por industria queda cubierta por pruebas.

v19.1 — Snapshots golden

Imagen base reproducible para clonar la flota en segundos.

El thumb hereda el tono del texto, manteniéndose discreto en cualquier fondo

INDICADOR DE SCROLL

Píldora 26×44 con punto que cae · flecha chevron que oscila · @keyframes CSS, sin script

Propiedad	Valor
Ancho de la barra	`6px`
Grosor del thumb	`4px` (border transparente lo afina)
Radio del thumb	`999px`
Color del thumb	`rgba(15,16,18,.22)` · hover `.34`
Track	`transparent`
scrollbar-width (Firefox)	`thin`
scrollbar-color	`rgba(15,16,18,.22) transparent`
Píldora indicador	`26×44` · radio `999px` · border `var(--hair)`
Chevron / punto	`1.6px` · color `var(--blue)`
Animación	`2.4s ease-in-out infinite`

✓ Do

Mantén la barra de un pelo y casi transparente: acompaña el desplazamiento sin pelear con el contenido. Usa el indicador solo cuando haya más por ver bajo el pliegue.

✗ Don't

No pintes la barra de azul ni la engrueses, ni dejes el indicador oscilando de forma permanente en una página que no scrollea. El azul se reserva para lo interactivo.



  … contenido largo …

Sheets

Un panel esmerilado anclado a un borde de la pantalla. Lo usamos para flujos secundarios — detalles, filtros, formularios cortos — sin abandonar el contexto. Se desliza desde el lateral (slide-over) o desde abajo (bottom sheet).

SLIDE-OVER

BOTTOM SHEET

Ordenar por

Más reciente Nombre A–Z Mayor consumo

Propiedad	Valor
Superficie	`backdrop-filter: blur(20px)`
Fondo del panel	`hsla(0,0%,47%,.10)`
Scrim (velo)	`rgba(15,16,18,.18)`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Radio — slide-over	`10px` en la esquina interior
Radio — bottom sheet	`10px 10px 0 0`
Ancho slide-over	`min(380px, 86%)`
Grip (asa)	`36px × 4px · 999px`
Acciones	Ghost links · acento `var(--blue)`
Transición	`transform .26s ease`
Sombra	`ninguna` (profundidad = blur + hairline)

✓ Do

Mantén el sheet ligero: un encabezado, contenido enfocado y acciones ghost. Usa el scrim esmerilado para separar del fondo sin oscurecerlo de más.

✕ Don't

No rellenes el panel de azul ni apiles botones sólidos. Como máximo una pill sólida; el resto, ghost. Nada de sombras: la profundidad la dan el blur y la hairline.


  
    
      Servidor
      NIX-Burgos-0012
    
    
  

  
    
      Estado
Activo
      Región
fsn1
    
  

  
    
    
  




  
  ...

Sidebars

La columna de navegación que estás usando ahora mismo. Una superficie esmerilada con ítems agrupados, divisores hairline entre grupos y un único ítem activo resaltado con una píldora suave.

EJEMPLO

ESPECIFICACIONES

Propiedad	Valor
Superficie	`blur(20px) · hsla(0,0%,47%,.10)`
Ancho	`248px`
Radio columna	`10px`
Borde	`1.6px solid rgba(15,16,18,.12)`
Divisor de grupo	`1.6px solid rgba(15,16,18,.12)`
Etiqueta de grupo	`11px · uppercase · var(--fog)`
Ítem	`14px · var(--smoke) · radius 10px`
Ítem activo	`var(--blue) · píldora hsla(211,100%,45%,.08)`
Hover hermanos	`opacity .35`
Transición	`.2s ease`

CUÁNDO USARLO

✓ Do

Agrupa los ítems por categoría con una etiqueta discreta y separa los grupos con un divisor hairline. Marca un solo ítem activo con la píldora azul suave.

✕ Don't

No rellenes el ítem activo con un bloque azul sólido ni añadas sombras a la columna. La profundidad nace del blur, el hairline y el color del acento, no del relleno.

CÓDIGO


  
    Componentes
    Botones
    Toggles
    Sidebars
    Tablas

Sliders y diales

Controles continuos para ajustar un valor dentro de un rango. Pista en gris hairline, relleno azul a la izquierda del puntero y un manejador circular. El azul aparece solo cuando el control está activo o enfocado.

Slider continuo

Volumen de notificaciones 62% Brillo del panel 28%

Slider escalonado

Capacidad del servidor 8 GB

Dial circular

68 % CPU

34 % RAM

Propiedad	Valor
Altura de la pista	`4px`
Radio de la pista	`999px`
Pista (vacía)	`rgba(15,16,18,.12)`
Pista (relleno)	`var(--blue)`
Manejador	`18px · 50% · var(--paper)`
Borde del manejador	`var(--hair) solid var(--blue)`
Foco (anillo)	`0 0 0 4px hsla(211,100%,45%,.18)`
Dial — pista / progreso	`6px · var(--blue) (stroke)`
Transición	`.2s ease`

✓ Do

Reservá el azul para el relleno, el manejador y el anillo de foco. Mostrá el valor actual junto a la etiqueta para que el slider sea legible sin arrastrarlo.

✕ Don't

No rellenes la pista con bloques de color sólido ni agregues sombras al manejador. La profundidad nace del hairline y el azul, no de elevaciones.


  
    Volumen
    62%
  
  


/* pista + relleno azul (la var --p = porcentaje) */
.range {
  --p: 62%;
  -webkit-appearance: none; appearance: none;
  height: 18px; background: transparent;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: var(--p) 4px; background-repeat: no-repeat;
  background-position: 0 50%;
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: rgba(15,16,18,.12);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  margin-top: -7px; border-radius: 50%;
  background: var(--paper);
  border: var(--hair) solid var(--blue);
  transition: box-shadow .2s ease;
}
.range::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: rgba(15,16,18,.12);
}
.range::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--blue);
}
.range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: var(--hair) solid var(--blue);
}
.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px hsla(211,100%,45%,.18);
}

Text fields

Entradas de texto de una y varias líneas. Cada campo lleva etiqueta, placeholder discreto, anillo de foco azul en hairline y mensajes de estado que solo aparecen cuando hacen falta. El azul se reserva para el foco; el rojo, solo para el error.

Input — una línea

Nombre del negocio Aparecerá en facturas y en tu subdominio. Correo de facturación Introduce un correo válido. Subdominio Asignado automáticamente. No editable.

Textarea — varias líneas

Notas internas Visible solo para tu equipo, nunca para el cliente. Descripción La descripción necesita al menos 10 caracteres.

Propiedad	Valor
Etiqueta (label)	`13px` · `var(--smoke)` · weight 400
Texto del campo	`15px` · `var(--ink)` · weight 350
Placeholder	`var(--fog)`
Superficie	`var(--paper)` · borde `var(--hair) solid rgba(15,16,18,.18)`
Radio	`10px` (input y textarea)
Padding	`11px 14px`
Foco	borde `var(--blue)` + ring `0 0 0 3px rgba(0,113,227,.16)`
Error	borde `#cf3b3b` · mensaje `#cf3b3b` · `12px`
Disabled	fondo `hsla(0,0%,47%,.07)` · texto `var(--fog)` · `cursor: not-allowed`
Textarea	`resize: vertical` · `min-height: 84px` · `line-height: 1.5`
Transición	`border-color, box-shadow .2s ease`

✓ Do

Usa el anillo azul en hairline solo en :focus y reserva el rojo para errores reales. Mantén la etiqueta siempre visible encima del campo.

✕ Don't

No uses placeholder como etiqueta, ni rellenes el campo de azul, ni añadas sombras. La profundidad es borde hairline + foco, nada más.



  Nombre del negocio
  
  Aparecerá en facturas y en tu subdominio.




  Correo de facturación
  
  Introduce un correo válido.




  Subdominio
  




  Notas internas

Steppers

Incremento por toques discretos. Un control frosted con botones − / + y un valor central, más una variante compacta para formularios. Ideal para cantidades pequeñas y acotadas: comensales, unidades, días de reserva.

Stepper pill

2

1

7noches

Field stepper (compacto)

Unidades Margen % %

Propiedad	Valor
Superficie pill	`backdrop-filter: blur(20px)` · `hsla(0,0%,47%,.10)`
Radio del contenedor	`10px` (pill / field)
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Botón − / +	círculo `32px` · `50%` · texto `var(--smoke)`
Botón hover	borde y glifo `var(--blue)`, fondo `hsla(207,100%,45%,.08)`
Botón :focus-visible	anillo `2px var(--blue)`
Botón disabled="disabled" (en límite)	`opacity: .35` · `pointer-events: none`
Valor central	`var(--ink)` · `font-feature-settings: "tnum"` (cifras tabulares)
Field stepper alto	`40px` · input `tnum`, flechas apiladas `14px`
Transición	`.2s ease`

✓ Do

Úsalo para rangos pequeños y discretos (1–12). Deshabilita el botón al tocar el límite y usa cifras tabulares para que el valor no salte de ancho.

✕ Don't

No lo emplees para rangos amplios (usa un input o slider), ni rellenes los botones de azul sólido: el azul es solo para hover, foco y estado activo.


  
  2
  




  Unidades

Toggles

Controles binarios construidos sobre inputs nativos. El switch azul refleja un estado encendido/apagado; el checkbox y el radio comparten el mismo lenguaje: hairline en reposo, azul al activarse. Sin JavaScript — solo :checked.

SWITCH

Anuncios del producto Avisos de nuevas versiones y mantenimiento Modo beta Recibe funciones antes de su lanzamiento Sincronización en pausa No disponible en este plan

CHECKBOX

Aceptar facturación mensual Incluir IVA en los importes mostrados Migrar datos heredados (no disponible)

RADIO

MensualRenovación cada 30 días AnualDos meses de cortesía A medidaContacta con ventas

Propiedad	Valor
Pista del switch	`30 × 17 px · radius 999px`
Perilla	`13 × 13 px · círculo · traslada 13px`
Apagado	`border var(--hair) rgba(15,16,18,.18)`
Encendido	`background + border var(--blue)`
Checkbox / radio	`18 × 18 px · radius 6px / 50%`
Marca (check / punto)	`var(--paper) sobre var(--blue)`
Foco	`outline azul 2px · offset 3px`
Transición	`.22s ease`
Deshabilitado	`opacity .4 · cursor not-allowed`

✓ Do

Usa el switch para un estado que se aplica al instante (encendido/apagado). Reserva el azul para el estado activo y deja el resto en hairline.

✕ Don't

No pongas un switch donde haga falta confirmar con un botón, ni rellenes la pista apagada de color. El azul solo aparece cuando está activo.



  
    Anuncios del producto
    Avisos de nuevas versiones
  
  




  
  Aceptar facturación mensual




  
  Mensual

Toolbars & Titlebars

La fila que encabeza una vista: etiqueta de sección a la izquierda, acciones a la derecha, separadas del contenido por una hairline. Sin relleno, sin sombra — la jerarquía la marca el espacio.

TITLEBAR ESTÁNDAR

Reservas 24

Filtrar Exportar Lista Tabla Calendario Nueva

TITLEBAR COMPACTO — SUBVISTA

← Detalle de cliente

Archivar

ANNOUNCEMENT PILL

Nueva versión 2.4 disponible — actualización automática esta noche. Ver cambios

Propiedad	Valor
Altura titlebar estándar	`56px`
Altura titlebar compacto	`44px`
Borde inferior	`var(--hair) solid rgba(15,16,18,.12)`
Título — peso / tracking	`350 / -0.022em`
Contador / etiqueta meta	`color: var(--fog)`
Gap entre acciones	`20px`
Ghost link	`color: var(--smoke) → var(--blue)`
Segmented — radio activo	`:checked → bg blanco + texto --ink`
Segmented — contenedor	`frosted, radius 10px`
CTA fuerte (pill sólida)	`bg var(--ink), color var(--paper)`
Announcement pill — radio	`999px`
Announcement — punto	`6px círculo var(--blue)`
Transición	`.2s ease`

✓ Do

Una sola hairline inferior separa la barra del contenido. Las acciones secundarias son ghost links; reserva la pill sólida para la acción primaria única.

✕ Don't

No apiles varios botones rellenos ni añadas sombras a la barra. No uses azul para texto inactivo del título ni rellenes el segmented entero de azul.


  
    Reservas
    24
  
  
    Filtrar
    Exportar

    
      
      Lista
      
      Tabla
      
      Calendario
    

    
      Nueva
      →
    
  




  
  
    Nueva versión 2.4 disponible.
  
  Ver cambios

Tooltips

Una etiqueta breve y oscura que aparece al pasar el cursor sobre un disparador. Solo CSS, sin scripts: el tooltip vive dentro del trigger y se revela con :hover y :focus-visible.

EN VIVO

Guardar borrador i Atajo

DISPOSICIÓN

Arriba Abajo

Propiedad	Valor
Fondo	`var(--ink)`
Texto	`var(--paper)`
Tamaño de fuente	`12px`
Padding	`6px 10px`
Radio	`10px`
Beak (pico)	`6px` rotado 45°
Separación del trigger	`8px`
Ancho máximo	`220px`
Aparición	`opacity` + `translateY`, .2s ease
Trigger accesible	`tabindex="0"` + `:focus-visible`

✓ Do

Mantén el texto en una sola idea corta: una pista, un atajo, un porqué. Fondo --ink, texto --paper, ~12px con un pico hacia el trigger.

✕ Don't

No metas párrafos, enlaces ni acciones dentro del tooltip — eso es un popover. Nada de azul de fondo ni de sombras: la profundidad es pico + hairline + color.

CÓDIGO


  Guardar borrador
  Se guarda cada 30 s

Windows

Superficie enmarcada que representa una ventana de aplicación o un modal del sistema: una tarjeta esmerilada con una barra de título delgada y un área de contenido. Profundidad por desenfoque y filo, nunca por sombra.

VENTANA ESTÁNDAR

Ajustes de instancia

Dominio

burgos.nix.cm Activo

Región

Hetzner · Nuremberg Editar

MODAL — ACCIÓN CON CIERRE

VENTANA OSCURA

Consola

$ nix deploy --branch dev

→ build ok · 12.4s

✓ live en burgos.nix.cm

Propiedad	Valor
Radio de ventana	`10px`
Superficie	`blur(20px) · hsla(0,0%,47%,.10)`
Borde	`var(--hair) solid rgba(15,16,18,.12)`
Altura de barra	`40px`
Separador barra/cuerpo	`var(--hair) solid rgba(15,16,18,.10)`
Puntos de control	`3 × 9px · 50% · rgba(15,16,18,.18)`
Cierre ×	`color var(--fog) → var(--ink) en hover`
Título	`var(--smoke) · 14px · weight 350`
Padding del cuerpo	`22px 24px`
Sombra	`ninguna`
Transición	`.2s ease`

✓ Do

Marca el borde con una hairline y separa la barra del cuerpo con otra hairline. La profundidad viene del desenfoque y el filo, no del relieve.

✕ Don't

No añadas drop shadows, gradientes ni una barra de título rellena de color. El azul solo entra en el enlace fantasma, el foco o la acción primaria.


  
    
      
      
      
    
    Ajustes de instancia
    
    
    
  
  
    Dominio
    
      burgos.nix.cm
      Activo

El sistema NIX

Blocks

Tu ERP en marcha en minutos, no en meses.

Tu ERP en marcha en minutos, no en meses.

Despliegue en minutos

Datos siempre tuyos

Actualizaciones sin fricción

Despliegue en minutos

Datos siempre tuyos

Actualizaciones sin fricción

Tu ERP en marcha enmenos de cinco minutos.

Tu ERP en marcha enmenos de cinco minutos.

Activa tu cuenta

Aprovisionamos tu VPS

Eliges tu industria

Empieza a operar

Activa tu cuenta

Aprovisionamos tu VPS

Eliges tu industria

Empieza a operar

Tu negocio, gobernado desde un solo panel.

Tu negocio, gobernado desde un solo panel.

Novedades de NIX, sin ruido.

Novedades de NIX, sin ruido.

Color

Materials

Escala tipográfica

Aa

Tu negocio, en orden

Alerts

Boxes

Botones

Color wells

Combo box

Dialogs

Disclosure / Accordion

Forms

Image well

Listas y tablas

Menu bar

Menus

Notifications

Pointers

Pop-up & Pull-down Buttons

Popovers

Progress Indicators

Search Fields

Segmented Control

Scrollbar & scroll indicator

1. El producto vive sobre Odoo

2. Aprovisionamiento de la flota

3. Cobro y facturación

4. Actualizaciones

5. Continuidad

v19.4 — Reaper de jobs

v19.3 — Bootstrap seguro

v19.2 — App Store E2E

v19.1 — Snapshots golden

Sheets

Sidebars

Sliders y diales

Text fields

Steppers

Toggles

Toolbars & Titlebars

Tooltips

Windows

Tu ERP en marcha en
menos de cinco minutos.

Tu ERP en marcha en
menos de cinco minutos.