Modal
Un terminal fosforescente en una sala de servidores a oscuras: la única fuente de luz es de un color verde brillante.
Modal funciona como una terminal fosforescente en una sala de servidores oscura: un lienzo casi negro, tipografía verde pálido y un único acento verde lima brillante que actúa como indicador LED de estado. El lenguaje de diseño está enfocado al desarrollador: ventanas de código monoespaciadas con puntos de semáforo, iconos 3D isométricos en el característico verde y mucho espacio en blanco, lo que permite que un elemento en cada sección brille. La tipografía se divide entre una fuente personalizada (Goga) para los títulos y una fuente variable (Inter) para todos los elementos de la interfaz de usuario, ambas configuradas con un espaciado negativo estrecho. Los colores se distribuyen uniformemente: la mayoría de las pantallas son acromáticas, y el verde lima brillante aparece solo en acciones clave, el logotipo, las ilustraciones 3D y los momentos de énfasis. Los componentes son planos y sin marco, con profundidad creada mediante sutiles bordes verdes y desenfoque de fondo en lugar de sombras.
El modal utiliza un diseño oscuro de ancho completo con un ancho máximo de 1280px para acomodar el contenido. La ventana principal está centrada: el título (la primera oración en verde lima), un subtítulo, dos llamadas a la acción y un único objeto 3D como ancla visual, sin separar el diseño de la barra lateral. Las secciones de contenido siguen un ritmo uniforme: etiqueta de ceja (letras mayúsculas, Moss 70) → título de Goga → texto de cuerpo atenuado, luego un diseño de dos columnas con una descripción de la característica (texto + código/tarjeta visual) o una cuadrícula de tarjetas de tres columnas. Los márgenes entre secciones son generosos: 80px. La página alterna entre franjas de fondo profundo vacío (#000000) y ligeramente más claras (#181818), con una sección clara (#def0dd) que aparece en el centro de la página como un respiro visual. La navegación consiste en una única barra superior fija con un fondo difuminado, sin barra lateral ni mega-menú. El pie de página es compacto y oscuro, con columnas de enlaces en verde tenue. La densidad del texto es adecuada: cada sección dispone de espacio suficiente y las cuadrículas de tarjetas no utilizan más de tres columnas.
El lenguaje visual de Modal se divide en dos modos: renders de productos brillantes en 3D y maquetas de ventanas de código oscuras. El punto focal es un único cubo 3D renderizado con un degradado de marketing (de verde lima a esmeralda), ubicado dentro de un halo de degradado radial que baña el espacio vacío con luz verde, el estilo visual característico de la marca. Las tarjetas de carga de trabajo contienen iconos 3D isométricos (un cubo de estructura alámbrica, una escalera sólida, capas) renderizados en el mismo verde lima sobre un fondo oscuro. Los resultados de código y de referencia se presentan como tarjetas de ventana de terminal con puntos de semáforo, resaltado de sintaxis monoespaciada en una paleta fosforescente y un borde verde tenue; se asemejan a capturas de pantalla de una interfaz de línea de comandos real. Los logotipos de los clientes se muestran como etiquetas verde grisáceas desaturadas en una sola fila de bajo contraste, lo que indica confianza sin competencia visual. La densidad general es baja: la mayoría de las páginas contienen predominantemente texto, y las imágenes se presentan como puntos focales individuales en lugar de cuadrículas de fotografías. No hay fotografías; todo el sistema visual es renderizado, geométrico y radiante.
Paleta
Marca
- Lime Pulse
#7fee64— Los elementos principales de la identidad corporativa son el logotipo, la llamada a la acción principal (CTA), el relleno de etiquetas, los estados activos y el color básico de la ilustración.
Neutral
- Phosphor White
#ddffdc— El texto principal, el color del título, el contorno del icono y el texto relleno del botón constituyen la superficie principal legible. - Void Black
#000000— Lienzo de página, la capa de fondo más profunda - Ground Iron
#181818— Relleno del botón principal, superficies de las tarjetas en áreas oscuras, superficie base de la interfaz de usuario. - Carbon Veil
#212525— Superficies elevadas, fondo de navegación, ligeramente más claro que el suelo. - Circuit Border
#485346— El contorno/marco de acción fantasma, la línea delgada interactiva principal, es de un tono gris verdoso apagado. - Phosphor Blue-Black
#1f2a33— Líneas de marcado secundarias finas que dividen los trazos entre las franjas oscuras.
Tipografía
De 12 a 64 píxeles · 8 pasos
- Goga — reemplazo: Inter Tight or Space Grotesk · esquemas 400, 500 · Fuente de encabezado y subencabezado: se utiliza para todos los encabezados H1–H4 y tarjetas. Goga es una fuente sans-serif geométrica personalizada con aberturas estrechas y terminales ligeramente cuadrados. El peso medio (500) se reserva para resaltar los encabezados de nivel de tarjeta; el peso normal (400) se utiliza para los encabezados de héroe y sección. Para acceder a las formas de glifos alternativas que definen la identidad de Modal, debe habilitarse su conjunto estilístico 'ss01'. El espaciado negativo entre letras disminuye gradualmente de -0,007em a 48px a -0,017em a 21px.
- Inter Variable — reemplazo: Inter · esquemas 400, 500 · Interfaz de usuario y texto principal: navegación, botones, texto principal, etiquetas, pie de página. Se utiliza un grosor medio (500) por defecto para los elementos interactivos y la navegación; se utiliza un grosor normal (400) para los párrafos. El espaciado entre letras se reduce notablemente incluso en tamaños pequeños (-0,026em a 14px, -0,022em a 16px), lo que confiere a la interfaz una densidad condensada y final. Para la puntuación alternativa, debe incluirse la variante de caracteres 'cv11'. Las etiquetas en mayúsculas a 12px utilizan un espaciado entre letras de +0,05em para compensar la densidad del texto principal.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 20px |
| Radio del botón | 12px |
| Radio de la tarjeta | 8px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80px |
| Ancho de página | 1280px |
La IA construirá tu sitio web al estilo de Modal y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Slash — Bóveda de medianoche con libros de contabilidad dorados
- AgentQL — Auroras boreales sobre la terminal por la noche.
- GitHub — Un panel de control espacial con puntos de control bioluminiscentes: un espacio de trabajo oscuro y atmosférico donde un único resplandor verde señala el camino a seguir.
- Doppler — La iluminación púrpura de la bóveda a medianoche. El lienzo casi negro brilla con una única señal de color lavanda y una luz de confirmación verde; cada superficie tiene la curvatura suficiente para poder ser agarrada.
- Basedash — Un terminal de datos nocturno con tipografía mate. Un observatorio oscuro donde las métricas brillan en tonos púrpura y verde, los titulares con serifa flotan sobre el ruido y los botones blancos en forma de píldora son los únicos objetos brillantes en una habitación de suaves superficies negras.
- Superwhisper — Las auroras boreales se disuelven sobre el cristal de medianoche.
- Better Stack — Consola SRE de medianoche
- Langbase — Consola de auroras boreales de medianoche
- Astro — Centro de control de misiones del espacio profundo con un único resplandor púrpura proveniente de una nebulosa.
- Wayfinder — Una pantalla de cine negra con un título apenas audible que flota sobre una ilustración animada. La interfaz consiste en un control deslizante de brillo en lugar de un panel de control.
- HashiCorp — La sala de control a medianoche, iluminada con luces de neón moradas, es una superficie técnica oscura donde un cubo hexagonal brillante sirve como única referencia de color.
- Umbrel — Una acogedora hoguera en la sala de servidores nocturna: una habitación oscura donde un único resplandor color melocotón resalta lo que es verdaderamente importante.