Design System Neo Design
El sistema de diseño usado en las aplicaciones, el sitio, el complemento de Word y los plugins de Neo, con colores por producto, neutros, estados, tipografía, espacios, formas y la regla de daltonismo.
En esta página
Neo Design es el aspecto único de NeoMath, NeoChem, NeoConverter, NeoProof, la web, el complemento de Word y el plugin de InDesign: limpio y organizado, con esquinas redondeadas, bordes finos, sombras suaves y una tipografía serena. Cada aplicación tiene su propio color principal; con las tres abiertas una junto a otra, el color ya dice cuál es cuál. Todo está adaptado para el daltonismo, y eso es una regla obligatoria.
Fuente única de tokens#
Todos los colores, fuentes, espacios, radios, tamaños y tiempos vienen de un solo archivo, tokens.json. De él se generan los tokens que usan las aplicaciones de escritorio, la web, el complemento de Word, el plugin UXP y este sitio (variables CSS --neo-*). Nadie escribe un color, radio, fuente o duración suelto: se usa siempre el token.
Color de cada producto#
Cada aplicación elige su color en cuanto se abre. Los botones principales, la selección, el foco, los interruptores, las pestañas activas y los resaltes siguen ese color.
| Producto | Color | Claro | Oscuro |
|---|---|---|---|
| NeoMath | azul | #1F5FD6 |
#8DB4FF |
| NeoChem | verde petróleo | #0B7380 |
#52D6C4 |
| NeoConverter | violeta | #7B3AC6 |
#C99DFF |
| NeoProof | magenta | #B02A7E |
#D369BC |
Cada color genera la familia completa: destaque (acento), destaque-hover, destaque-pressionado, destaque-texto (texto sobre el color), destaque-suave (fondo suave), selecao, borda-destaque y foco. La marca Neo es neutra: tinta oscura en el tema claro y casi blanco en el oscuro, con el degradado de los tres colores como firma.
Neutros#
Iguales en todas las aplicaciones.
| Nombre | Claro | Oscuro | Uso |
|---|---|---|---|
fundo |
#F2F3F7 |
#0F1013 |
fondo de la ventana |
lateral |
#EAECF1 |
#16181C |
barras laterales |
cartao |
#FFFFFF |
#1B1D22 |
tarjetas, listas y campos |
elevada |
#FFFFFF |
#25272D |
menús y diálogos |
texto |
#16181F |
#ECEDF1 |
texto principal |
texto-2 |
#4A4F5C |
#B4B8C3 |
texto secundario |
texto-3 |
#646A78 |
#8C919E |
texto de apoyo |
borda-controle |
#858B97 |
#7C8290 |
contorno de controles (3:1) |
Estados#
| Estado | Claro | Oscuro | Forma obligatoria junto al color |
|---|---|---|---|
| Éxito | #0B7782 |
#5EEAD4 |
círculo con ✓ |
| Aviso | #916400 |
#F2BE3A |
triángulo con ! |
| Peligro | #B0213F |
#FF5E7A |
octógono con × |
| Información | #1F5FD6 |
#8DB4FF |
círculo con i |
Daltonismo: regla obligatoria#
- El color nunca es la única señal. Todo estado tiene una forma (✓, triángulo, octógono, i) y un texto; el filtro activo tiene ✓ y fondo invertido; la pestaña activa tiene fondo y sombra; el interruptor cambia de posición. En esta documentación, los avisos siguen la misma regla.
- Contraste. Texto con al menos 4,5:1 y controles con al menos 3:1 (WCAG 1.4.3 y 1.4.11).
- Distancia de color medida en la visión común y simulada para protanopía, deuteranopía y tritanopía: éxito, aviso y peligro quedan a distancia 20 o más entre sí.
- Los colores siguen la familia de Okabe e Ito, sin el par verde puro y rojo puro.
- Todo cambio de color pasa por un verificador de paleta, que hoy aprueba 90 comprobaciones.
Tipografía#
| Elemento | Valor |
|---|---|
| Fuente | Figtree, sin serifa, geométrica y redondeada, usada en las aplicaciones y en este sitio |
| Matemática | Cambria Math |
| Código | Fira Code |
| Tamaños | 11, 12, 13, 14, 15, 16, 18, 20 y 22 px |
| Pesos | 400 texto, 500 etiquetas y botones, 600 títulos de sección y botón principal, 700 títulos de pantalla |
Espacios, radios y alturas#
| Token | Valores |
|---|---|
Espacios (--neo-e1 a --neo-e7) |
4, 8, 12, 16, 20, 24 y 32 px |
| Radios | 7 elemento de menú, 8 controles, 10 segmentado, 12 menús, 14 tarjetas y grupos, 18 diálogos; las píldoras usan la mitad de la altura |
| Alturas de control | 32 compacto, 36 estándar, 44 grande |
| Sombras | tarjetas 3 px muy suave; menús 30 px; diálogos 60 px |
Movimiento#
Duraciones de 110 ms (pasar el ratón), 200 ms (deslizar) y 280 ms (entrada), siempre con la curva cubic-bezier(0.2, 0, 0, 1). Los botones se encogen un 3% al pulsarlos. Con prefers-reduced-motion, las animaciones se desactivan y el contenido aparece directamente.
Componentes#
Las aplicaciones montan las pantallas con los componentes del kit, sin redibujar nada localmente.
| Componente | Para qué sirve |
|---|---|
| Botón | acción; el principal usa el color de la aplicación, uno solo por área |
| Botón de herramienta, con menú, dividido | barras de herramientas y acciones con variaciones |
| Campo de entrada y campo numérico | texto y número con − y + |
| Selector, segmentado, pestañas en píldora | elecciones entre pocas o muchas opciones |
| Interruptor y casilla | activar y desactivar, listas y opciones cortas |
| Grupo y fila de grupo | opciones agrupadas, como en los Ajustes del iPhone |
| Etiqueta, insignia y sello | filtros, rótulos cortos y tipos de archivo |
| Menús y diálogos | superficie elevada, radio 12 y 18, sombra propia |
| Columna lateral | se desliza y empuja el contenido; nunca flota encima |
| Icono de situación | estado siempre con forma y color |
Botones#
| Tipo | Cuándo |
|---|---|
| Principal | la acción de la pantalla o del diálogo |
| Principal grande (44 px) | la acción final de la pantalla, como “Convertir 8 archivos” |
| Común | acciones secundarias |
| Simple | acciones dentro de filas, solo el texto en el color de la aplicación |
| Peligro | cancelar una conversión o borrar |
| Herramienta | barras de herramientas, solo icono |
Iconos#
Todos usan la misma cuadrícula de 24 px, trazo de 1,7 px, extremos y esquinas redondeados y formas abiertas y simples. El relleno solo aparece en estados, acciones de medios y en el dibujo de la “C” de apariencia. El color viene del contexto (currentColor en la web). Los símbolos de las aplicaciones son √x para NeoMath, el anillo de benceno para NeoChem y ⇄ para NeoConverter.
Patrones de pantalla#
- Ventana: contenido en tarjetas con radio 14 y sombra ligera, sin líneas pesadas.
- Acción principal: un solo botón principal grande por pantalla, con un texto que dice qué va a pasar.
- Resultado: números con icono de situación, en lugar de una frase larga.
- Lista vacía: se convierte en un área para soltar, con un icono grande y las alternativas en botones.
- Textos: directos y cortos, en español natural (“Guardar en”, no “Dónde escribir”), botones con verbo y puntos suspensivos cuando la acción abre una ventana (“Elegir…”).
- Idiomas: toda pantalla se comprueba en portugués, inglés y español, con el ancho mínimo y a pantalla completa; manda el texto más largo.
En este sitio#
El sitio y esta documentación usan los mismos tokens: las variables --neo-* vienen del tokens.json del design system. Los bloques de código usan los colores de Neo Design en los temas claro y oscuro, y los avisos tienen icono y forma además del color.