Saltar al contenido
Versión 1.0.1

Componentes

Un componente por carpeta, como en shadcn/ui, pero en CSS puro sobre los tokens, sin framework. Cada uno con su ejemplo vivo en claro y oscuro, su HTML y su guía.

Cómo se usa

Carga tokens.css y después components.css, pon nu-ui en la raíz de la pantalla y, en una pantalla de trabajo con mouse, nu-ui--compact. En producción, la copia fija de tu build; para probar sin build, la versión fija con su hash:

HTML
<link rel="stylesheet" href="https://ui.nuevauno.com/v/1.0.1/tokens/tokens.css" integrity="sha384-2bQcJSsHawHzCx4Z/2g8/zZfxhtm2+2i/HeoMaOJHBCAw1m6UV/b4/PLV/4u01ge" crossorigin="anonymous">
<link rel="stylesheet" href="https://ui.nuevauno.com/v/1.0.1/components/components.css" integrity="sha384-++rOU80wTu+yaVkLuYAPJ4mDBtQyvsgUeJr2dhpPUoMDR74Ks+b/kyq3hGNboA2p" crossorigin="anonymous">
Pantallaspropuesto

Base

La raíz de una pantalla. La fuente, el tamaño, el interlineado y el color de la marca, sin negritas.

Hoy · 16 de octubre

Todo el texto en Urbanist 400. La jerarquía va por tamaño y color, nunca por peso.

Compacto

Hoy · 16 de octubre

Todo el texto en Urbanist 400. La jerarquía va por tamaño y color, nunca por peso.

Compacto

HTML
<div class="nu-ui">
  <p class="nu-label">Hoy · 16 de octubre</p>
  <p>Todo el texto en Urbanist 400. La jerarquía va por <strong>tamaño y color</strong>, nunca por peso.</p>
</div>
<div class="nu-ui nu-ui--compact nu-fields">
  <p class="nu-label">Compacto</p>
  <div class="nu-buttons">
    <button class="nu-button nu-button--primary" type="button">Nuevo contacto</button>
    <button class="nu-button" type="button">Exportar</button>
    <button class="nu-button nu-button--small" type="button">Filtrar</button>
  </div>
  <div class="nu-field">
    <label class="nu-field__label" for="base-search">Buscar</label>
    <input class="nu-field__control" id="base-search" placeholder="Nombre, correo o teléfono">
  </div>
</div>

Clases

nu-ui nu-ui--compact

Cuándo se usa

  • En el <body> (o la raíz) de toda pantalla hecha con los componentes. Sin ella, cada componente se ve bien solo, pero el texto suelto toma la letra del navegador.
  • Pone el fondo de la pantalla, box-sizing: border-box en todo y quita las negritas: un <strong> o un <h2> se distinguen por tamaño y color.
  • nu-ui--compact es la densidad de las pantallas de trabajo con mouse (listas, fichas, apps): controles de 32 px y texto de 14 px. En una pantalla táctil vuelve a 44 px. Sin ella, los componentes tienen sus tamaños táctiles, los de una página de una columna, el Inicio y los asistentes.
  • Trae las fuentes del kit (Urbanist y Ubuntu Mono, fonts/ junto a components/), nunca desde Google Fonts: con components.css no hace falta cargarlas aparte.

Accesibilidad

  • Los encabezados siguen siendo h1, h2…: la base sólo cambia cómo se ven.
Controlespropuesto

Botón

La acción de una pantalla. Uno principal naranja y los demás con borde o como texto.

Enlace deshabilitado
Enlace deshabilitado
HTML
<div class="nu-buttons">
  <button class="nu-button nu-button--primary" type="button">Guardar</button>
  <button class="nu-button" type="button">Cancelar</button>
  <button class="nu-button nu-button--text" type="button">Ver detalle</button>
</div>
<div class="nu-buttons">
  <button class="nu-button nu-button--primary nu-button--small" type="button">Nuevo contacto</button>
  <button class="nu-button nu-button--small" type="button">Exportar</button>
  <button class="nu-button nu-button--primary nu-button--large" type="button">Empezar →</button>
</div>
<div class="nu-buttons">
  <button class="nu-button nu-button--primary" type="button" disabled>Guardar</button>
  <button class="nu-button" type="button" disabled>Cancelar</button>
  <a class="nu-button" href="#button" aria-disabled="true">Enlace deshabilitado</a>
</div>
<button class="nu-button nu-button--primary nu-button--block" type="button">Entrar</button>

Clases

nu-button nu-button--primary nu-button--text nu-button--small nu-button--large nu-button--block nu-buttons

Cuándo se usa

  • nu-button--primary para la acción principal de la pantalla. Nunca dos principales juntos.
  • nu-button (sin variante) para las demás acciones: cancelar, exportar, volver. Su borde es el fuerte (--nu-color-border-strong), con contraste de 3:1 o más contra el fondo y la superficie (WCAG 1.4.11).
  • nu-button--text para una acción que se lee como enlace dentro de un texto o una fila.
  • Alto: 44 px por defecto (táctil) y 32 px dentro de nu-ui--compact, la densidad de las pantallas de trabajo con mouse. nu-button--small es un paso más chico. En el Inicio y en los asistentes, nu-button--large (56 px). En una página de una columna o en el teléfono, nu-button--block va a lo ancho.
  • nu-buttons agrupa una fila de botones, con el principal primero.

Estados

Normal, hover (borde naranja; el principal se oscurece), foco con teclado (anillo naranja de 2 px), deshabilitado (disabled, o aria-disabled="true" en un enlace) a media opacidad.

Accesibilidad

  • Un <button> para una acción y un <a> para ir a otra página; nunca un <div>.
  • El texto dice qué pasa ("Guardar", no "Aceptar"). Si sólo lleva ícono, va con aria-label.
  • Mide al menos 44 px en pantallas táctiles: nu-ui--compact vuelve a 44 px cuando la pantalla es táctil.
Controlespropuesto

Campo

Etiqueta de sistema arriba, el control y una línea de ayuda que pasa a ser el error.

Te enviamos el código a este correo.

El código tiene 6 números.

Te enviamos el código a este correo.

El código tiene 6 números.

HTML
<div class="nu-fields">
  <div class="nu-field">
    <label class="nu-field__label" for="field-name">Nombre de fantasía</label>
    <input class="nu-field__control" id="field-name" placeholder="Cómo te conocen tus clientes">
  </div>
  <div class="nu-field">
    <label class="nu-field__label" for="field-email">Correo</label>
    <input class="nu-field__control" id="field-email" type="email" value="hola@ejemplo.com" aria-describedby="field-email-help">
    <p class="nu-field__help" id="field-email-help">Te enviamos el código a este correo.</p>
  </div>
  <div class="nu-field" data-error="true">
    <label class="nu-field__label" for="field-code">Código</label>
    <input class="nu-field__control" id="field-code" inputmode="numeric" value="12" aria-invalid="true" aria-describedby="field-code-help">
    <p class="nu-field__help" id="field-code-help">El código tiene 6 números.</p>
  </div>
  <div class="nu-field">
    <label class="nu-field__label" for="field-role">Rol</label>
    <select class="nu-field__control" id="field-role">
      <option>Administrador</option>
      <option>Miembro</option>
    </select>
  </div>
  <div class="nu-field">
    <label class="nu-field__label" for="field-note">Nota</label>
    <textarea class="nu-field__control" id="field-note" placeholder="Algo que tu equipo deba saber"></textarea>
  </div>
  <div class="nu-field">
    <label class="nu-field__label" for="field-plan">Plan</label>
    <input class="nu-field__control" id="field-plan" value="Profesional" disabled>
  </div>
  <div class="nu-field nu-field--line">
    <label class="nu-field__label" for="field-company">01 / 03 · Tu empresa</label>
    <input class="nu-field__control" id="field-company" placeholder="Nombre de tu empresa">
  </div>
</div>

Clases

nu-field nu-field__label nu-field__control nu-field__help nu-field--line nu-fields

Cuándo se usa

  • Todo dato que la persona escribe o elige: texto, correo, número, selección o texto largo.
  • nu-field--line sólo en los asistentes, con una pregunta por pantalla.
  • nu-fields apila varios campos con su separación.
  • Para mostrar un dato que no se edita, usa una ficha, no un campo deshabilitado.

Estados

El borde es el fuerte (--nu-color-border-strong), con 3:1 o más contra el fondo y la superficie (WCAG 1.4.11).

Normal, hover (borde gris), foco (borde naranja), deshabilitado (fondo suave y texto gris), sólo lectura (fondo de la pantalla) y error: data-error="true" en el campo, o aria-invalid="true" en el control, pone el borde y la ayuda en naranja.

Accesibilidad

  • Cada control tiene su <label for>; el texto de muestra (placeholder) nunca reemplaza a la etiqueta.
  • La ayuda y el error van unidos al control con aria-describedby.
  • En pantallas táctiles el texto mide 16 px, para que el teléfono no haga zoom.
Avisospropuesto

Aviso

Una fila con su marca cuadrada, el texto y su acción. Y el mensaje de una línea bajo un formulario.

Tienes 3 facturas por aprobar. Revisar
Guardamos los cambios.
Tu plan se renueva el 1 de noviembre.
Usaste el 90 % del espacio de tu plan.

Te enviamos un código a tu correo.

Listo, tu clave quedó guardada.

Tienes 3 facturas por aprobar. Revisar
Guardamos los cambios.
Tu plan se renueva el 1 de noviembre.
Usaste el 90 % del espacio de tu plan.

Te enviamos un código a tu correo.

Listo, tu clave quedó guardada.

HTML
<div class="nu-notices">
  <div class="nu-notice">
    <span class="nu-notice__mark" aria-hidden="true"></span>
    <span class="nu-notice__text">Tienes 3 facturas por aprobar.</span>
    <a class="nu-link" href="#notice">Revisar</a>
  </div>
  <div class="nu-notice nu-notice--success" role="status">
    <span class="nu-notice__mark" aria-hidden="true"></span>
    <span class="nu-notice__text">Guardamos los cambios.</span>
  </div>
  <div class="nu-notice nu-notice--info">
    <span class="nu-notice__mark" aria-hidden="true"></span>
    <span class="nu-notice__text">Tu plan se renueva el 1 de noviembre.</span>
  </div>
  <div class="nu-notice nu-notice--warning">
    <span class="nu-notice__mark" aria-hidden="true"></span>
    <span class="nu-notice__text">Usaste el 90 % del espacio de tu plan.</span>
  </div>
  <div class="nu-notice nu-notice--error" role="alert">
    <span class="nu-notice__mark" aria-hidden="true"></span>
    <span class="nu-notice__text">No pudimos enviar el correo. Inténtalo de nuevo.</span>
  </div>
</div>
<p class="nu-message" role="status">Te enviamos un código a tu correo.</p>
<p class="nu-message nu-message--success" role="status">Listo, tu clave quedó guardada.</p>
<p class="nu-message nu-message--error" role="alert">Ese código ya venció. Pide uno nuevo.</p>

Clases

nu-notices nu-notice nu-notice__mark nu-notice__text nu-notice--success nu-notice--info nu-notice--warning nu-notice--error nu-message nu-message--success nu-message--error

Cuándo se usa

  • nu-notice para lo que pide atención en una pantalla: algo por aprobar, un tope cerca, un fallo. Varios van juntos en nu-notices, pegados por una línea de 1 px.
  • La marca es naranja cuando algo pide atención. Los colores de aviso (--success, --info, --warning, --error) son estados, no acentos: sólo pintan la marca.
  • nu-message es la línea de estado bajo un formulario ("Te enviamos el código"). Vacío, no ocupa lugar.
  • Datos reales o nada: si no hay nada que avisar, no se muestra el bloque.

Accesibilidad

  • Lo que aparece después de una acción va con role="status" (o role="alert" si falló), para que un lector de pantalla lo lea.
  • El color nunca es lo único que dice el estado: el texto lo dice.
Datospropuesto

Tarjeta

Una superficie blanca con borde de 1 px. Cabeza con la etiqueta del bloque y su acción, y el cuerpo.

Datos de la empresa
La razón social, el nombre de fantasía y la persona de contacto.
Usuarios

4 de 5

Archivos

0,5 MB de 1 GB

Pendientes

2 esta semana

Datos de la empresa
La razón social, el nombre de fantasía y la persona de contacto.
Usuarios

4 de 5

Archivos

0,5 MB de 1 GB

Pendientes

2 esta semana

HTML
<div class="nu-card">
  <div class="nu-card__head">
    <span class="nu-label">Datos de la empresa</span>
    <button class="nu-button nu-button--text nu-button--small" type="button">Editar</button>
  </div>
  <div class="nu-card__body">La razón social, el nombre de fantasía y la persona de contacto.</div>
</div>
<div class="nu-cards">
  <div class="nu-card">
    <div class="nu-card__body">
      <span class="nu-label">Usuarios</span>
      <p class="nu-card__figure">4 <span class="nu-card__unit">de 5</span></p>
    </div>
  </div>
  <div class="nu-card">
    <div class="nu-card__body">
      <span class="nu-label">Archivos</span>
      <p class="nu-card__figure">0,5 <span class="nu-card__unit">MB de 1 GB</span></p>
    </div>
  </div>
  <div class="nu-card">
    <div class="nu-card__body">
      <span class="nu-label">Pendientes</span>
      <p class="nu-card__figure">2 <span class="nu-card__unit">esta semana</span></p>
    </div>
  </div>
</div>

Clases

nu-card nu-card__head nu-card__body nu-card__figure nu-card__unit nu-cards

Cuándo se usa

  • Para agrupar lo que va junto en una pantalla: los datos de una ficha, un bloque del Inicio.
  • nu-card__figure con nu-card__unit: el número grande que cuenta el estado y su unidad chica al lado ("4 de 5").
  • nu-cards pega varias tarjetas con una línea de 1 px, como las franjas de datos.
  • Sin sombra: la sombra es sólo para lo que flota (un menú abierto, un modal).
  • Datos reales o nada: una tarjeta sin dato no se muestra.

Accesibilidad

  • Si la tarjeta es un bloque con título propio, el título va en un encabezado (h2, h3) con la clase nu-label.
Datospropuesto

Chip

Una etiqueta corta en caja. Un filtro, una categoría o un conteo; en naranja, el que está activo.

Clientes Proveedores · 12 Por cobrar
Clientes Proveedores · 12 Por cobrar
HTML
<div class="nu-chips">
  <span class="nu-chip">Clientes</span>
  <span class="nu-chip">Proveedores · 12</span>
  <span class="nu-chip nu-chip--accent">Por cobrar</span>
  <button class="nu-chip" type="button" aria-pressed="false">Este mes</button>
  <button class="nu-chip nu-chip--accent" type="button" aria-pressed="true">Hoy</button>
</div>

Clases

nu-chip nu-chip--accent nu-chips

Cuándo se usa

  • Para filtros, categorías y conteos cortos. Si se puede tocar, es un <button> con aria-pressed.
  • nu-chip--accent marca el filtro activo. Uno a la vez, o pocos.
  • Para un estado ("En línea", "Pendiente") usa nu-status, no un chip.

Accesibilidad

  • Un chip que filtra es un <button> con aria-pressed="true" o "false"; mide 26 px, así que en una pantalla táctil va en una fila con espacio alrededor o se usa un botón.
Datospropuesto

Estado

Un cuadrado de color junto a una etiqueta de sistema. Gris inactivo, naranja activo o alerta, verde en línea.

Inactivo Instalando · 3 de 7 En línea Atrasado
Inactivo Instalando · 3 de 7 En línea Atrasado
HTML
<div class="nu-chips">
  <span class="nu-status">Inactivo</span>
  <span class="nu-status nu-status--active">Instalando · 3 de 7</span>
  <span class="nu-status nu-status--online">En línea</span>
  <span class="nu-status nu-status--alert">Atrasado</span>
</div>

Clases

nu-status nu-status--active nu-status--online nu-status--alert

Cuándo se usa

  • Para decir en qué está algo: una instalación, una persona en línea, un pago atrasado.
  • nu-status--alert pinta también el texto: sólo para lo que pide atención ahora.

Accesibilidad

  • El texto dice el estado; el cuadrado sólo lo refuerza.
Textopropuesto

Etiqueta de sistema

Ubuntu Mono en mayúsculas espaciadas, en gris. Nombra bloques, fechas, contadores y estados.

Principal

Tus apps · 6

Jueves 16 de octubre

Principal

Tus apps · 6

Jueves 16 de octubre

HTML
<p class="nu-label">Principal</p>
<p class="nu-label nu-label--block">Tus apps · 6</p>
<p class="nu-label nu-label--accent">Jueves 16 de octubre</p>

Clases

nu-label nu-label--block nu-label--accent

Cuándo se usa

  • Para el nombre de un bloque ("PRINCIPAL", "TUS APPS · 6"), una fecha, un contador ("01 / 03") o la unidad de un dato. Nunca para un texto largo ni para un botón.
  • nu-label--block nombra un bloque del Inicio. nu-label--accent es la fecha del Inicio, en naranja.
  • El texto se escribe normal: las mayúsculas las pone el estilo, así un lector de pantalla no lo deletrea.

Accesibilidad

  • Si nombra una sección, va en el encabezado de esa sección (h2, h3) con la clase.
Pantallaspropuesto

Página de una columna

El ingreso, la cuenta, un reclamo o un aviso. El logo arriba, un título y una columna angosta al centro.

Entra a NUEVAUNO

Entra a NUEVAUNO

HTML
<div class="nu-page" style="min-height: 0">
  <main class="nu-page__main">
    <picture class="nu-page__logo">
      <img src="../logos/nuevauno-logo-light.anim.svg" alt="NUEVAUNO" height="40">
    </picture>
    <h1 class="nu-page__title">Entra a NUEVAUNO</h1>
    <form class="nu-page__stack" action="#page">
      <div class="nu-field">
        <label class="nu-field__label" for="page-email">Correo</label>
        <input class="nu-field__control" id="page-email" type="email" autocomplete="off">
      </div>
      <div class="nu-field">
        <label class="nu-field__label" for="page-password">Clave</label>
        <input class="nu-field__control" id="page-password" type="password" autocomplete="off">
      </div>
      <button class="nu-button nu-button--primary nu-button--block" type="button">Entrar con tu clave</button>
      <button class="nu-link nu-link--muted" type="button">Olvidé mi clave</button>
    </form>
    <p class="nu-page__divider" aria-hidden="true">o</p>
    <div class="nu-page__stack">
      <button class="nu-button nu-button--block" type="button">Enviarme un código</button>
      <button class="nu-button nu-button--block" type="button">Entrar con una llave de acceso</button>
    </div>
    <p class="nu-message" role="status"></p>
  </main>
</div>

Clases

nu-page nu-page__main nu-page__logo nu-page__title nu-page__subtitle nu-page__stack nu-page__divider nu-page__list

Cuándo se usa

  • Para las pantallas que están antes o fuera del escritorio: entrar, recuperar la clave, tomar una empresa, la cuenta y los avisos.
  • nu-page va en el <body>; nu-page__main es la columna de 400 px con 16 px de margen en el teléfono.
  • El logo es el archivo animado del kit (logos/nuevauno-logo-light.anim.svg, -dark en oscuro), nunca armado a mano, con el alto del ícono (40 px) en el <img>.
  • Dentro van los componentes de siempre: campos, botones a lo ancho (nu-button--block), enlaces y nu-message.
  • nu-page__divider separa dos formas de entrar ("o").

Accesibilidad

  • Un solo h1 por página. El estado del formulario va en un nu-message con role="status".
  • El texto del separador es decorativo (aria-hidden): cada botón dice qué hace.

Adaptadores

Puentes de los tokens a otras librerías: el tema de Kumo para el escritorio y el del escritorio anterior.