Modal
Un terminal fosforescente nunha sala de servidores escura: a única fonte de luz é unha cor verde brillante.
As funcións modais son como un terminal fosforescente nunha sala de servidores escura: unha lona case negra, tipo verde pálido e un único acento verde lima brillante que actúa como indicador LED de estado. A linguaxe de deseño está centrada no desenvolvedor: xanelas de código monoespaciadas con puntos de semáforo, iconas 3D isométricas no verde característico e moito espazo en branco, o que permite que brille un elemento de cada sección. A tipografía divídese entre unha fonte personalizada (Goga) para os títulos e unha fonte variable (Inter) para todos os elementos da IU, ambas configuradas cun seguimento negativo estreito. As cores distribúense uniformemente: a maioría das pantallas son acromáticas e a cor verde lima brillante aparece só nas accións clave, o logotipo, as ilustracións 3D e os momentos de énfase. Os compoñentes son planos e sen marco, con profundidade creada a través de sutís bordos verdes e desenfoque de fondo en lugar de sombras.
O modal usa un deseño escuro de ancho completo cunha anchura máxima de 1280 px para acomodar o contido. A xanela principal está centrada: o título (a primeira frase en verde lima), un subtítulo, dúas chamadas á acción e un único obxecto 3D como áncora visual, sen separar o deseño da barra lateral. As seccións de contido seguen un ritmo uniforme: etiqueta de cella (maiusculas, Moss 70) → título Goga → texto do corpo silenciado, e despois un deseño de dúas columnas cunha descrición da función (texto + código/tarxeta visual) ou unha grella de tarxetas de tres columnas. Os espazos entre as seccións son xenerosos: 80 px. A páxina alterna entre raias de fondo baleiras e profundas (#000000) e lixeiramente máis claras (#181818), cunha sección clara (#def0dd) que aparece no medio da páxina como un respiro visual. A navegación consiste nunha única barra superior fixa cun fondo borroso, sen barra lateral nin megamenú. O pé de páxina é compacto e escuro, con columnas de ligazóns verdes apagadas. A densidade do texto é cómoda: cada sección ten espazo dabondo e as grellas das tarxetas non empregan máis de tres columnas.
A linguaxe visual de Modal divídese en dous modos: renderizacións de produtos brillantes en 3D e maquetas de ventás de código escuras. O punto focal é un único cubo 3D renderizado cun degradado de mercadotecnia (de verde lima a esmeralda), situado dentro dun halo de degradado radial que baña o espazo baleiro con luz verde, o estilo visual característico da marca. As tarxetas de carga de traballo conteñen iconas 3D isométricas (un cubo de estrutura metálica, unha escaleira sólida, capas) renderizadas no mesmo verde lima sobre un fondo escuro. Os resultados do código e das probas de referencia preséntanse como tarxetas de ventás de terminal con puntos de semáforo, resaltado de sintaxe monoespaciado nunha paleta fosforescente e un bordo verde apagado; semellan capturas de pantalla dunha interface de liña de comandos real. Os logotipos dos clientes móstranse como etiquetas verde-gris desaturadas nunha única fila de baixo contraste, o que indica confianza sen competencia visual. A densidade xeral é baixa: a maioría das páxinas conteñen predominantemente texto e as imaxes preséntanse como puntos focais individuais en lugar de grellas de fotografías. Non hai fotografías; todo o sistema visual está renderizado, é xeométrico e radiante.
Paleta
Marca
- Lime Pulse
#7fee64— Os elementos principais da identidade corporativa son o logotipo, a chamada á acción principal (CTA), o recheo de etiquetas, os estados activos e a cor básica da ilustración.
Neutro
- Phosphor White
#ddffdc— O texto principal, a cor do título, o contorno da icona e o texto do botón cheo son a principal superficie lexible. - Void Black
#000000— Lenzo da páxina, a capa de fondo máis profunda - Ground Iron
#181818— Recheo do botón principal, superficies da tarxeta en zonas escuras, superficie base da interface de usuario. - Carbon Veil
#212525— Superficies elevadas, fondo de navegación, lixeiramente máis claras que o chan. - Circuit Border
#485346— O marco de acción do contorno/fantasma, a principal liña fina interactiva, é dun ton gris verdoso apagado. - Phosphor Blue-Black
#1f2a33— Liñas de marcado finas secundarias, dividindo os trazos entre raias escuras.
Tipografía
de 12 a 64 px · 8 pasos
- Goga — substitución: Inter Tight or Space Grotesk · contornos 400, 500 · Fonte de títulos e subtítulos: úsase para todos os títulos e tarxetas H1–H4. Goga é unha fonte sans-serif xeométrica personalizada con aberturas estreitas e terminais lixeiramente cadrados. O grosor medio (500) resérvase para resaltar os títulos a nivel de tarxeta; o grosor normal (400) úsase para os títulos de sección e de heroe. Para acceder ás formas de glifos alternativas que definen a identidade de Modal, debe estar activado o seu conxunto estilístico "ss01". O espazado negativo entre letras diminúe gradualmente de -0,007 em a 48 px a -0,017 em a 21 px.
- Inter Variable — substitución: Inter · contornos 400, 500 · Interface de usuario e corpo da páxina: navegación, botóns, corpo da páxina, etiquetas, pé de páxina. Por defecto, úsase o grosor medio (500) para os elementos interactivos e a navegación; o normal (400) para os parágrafos. O espazado entre letras redúcese notablemente mesmo en tamaños pequenos (-0,026 em a 14 px, -0,022 em a 16 px), o que lle dá á interface unha densidade terminal condensada. Para a puntuación alternativa, débese incluír a variante de carácter "cv11". As etiquetas en maiúsculas a 12 px usan un espazado entre letras de +0,05 em para contrarrestar a densidade do corpo da páxina.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 20px |
| Radio do botón | 12px |
| Radio da tarxeta | 8px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 80px |
| Largura da páxina | 1280px |
A IA creará o teu sitio web ao estilo de Modal e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Slash — Bóveda de medianoite con libros maiores dourados
- AgentQL — Auroras boreais sobre a terminal pola noite
- GitHub — Un panel de mando espacial con puntos de control bioluminescentes: un espazo de traballo escuro e atmosférico onde un único brillo verde sinala o camiño a seguir.
- Doppler — A iluminación púrpura da bóveda á medianoite. A lona case negra brilla cun único sinal lavanda e unha luz verde de confirmación, cada superficie curvada o suficiente para ser agarrada.
- Basedash — Un terminal de datos de medianoite con fonte mate. Un observatorio escuro onde as métricas brillan en púrpura e verde, os titulares con serifas flotan por riba do ruído e os botóns brancos con forma de pílula son os únicos obxectos brillantes nunha sala de superficies negras suaves.
- Superwhisper — A aurora boreal disólvese sobre o cristal da medianoite
- Better Stack — Consola SRE de medianoite
- Langbase — Consola Midnight Northern Lights
- Astro — Control de Misións Espaciais Profundos cun único brillo púrpura procedente dunha nebulosa
- Wayfinder — Unha pantalla de cine negra cun título apenas audible sobre unha ilustración en directo. A interface é un control deslizante de brillo en lugar dun panel de control.
- HashiCorp — A sala de control á medianoite con neón morado é unha superficie técnica escura onde un cubo hexagonal brillante serve como única referencia de cor.
- Umbrel — Unha acolledora fogueira na sala de servidores nocturna: unha habitación escura onde un único brillo intenso destaca o que é realmente importante.