Modal
Um terminal fosforescente em uma sala de servidores escura - a única fonte de luz é um verde brilhante.
A interface modal funciona como um terminal fosforescente em uma sala de servidores escura: uma tela quase preta, texto verde-claro e um único detalhe em verde-limão brilhante que atua como um indicador de status em LED. A linguagem de design é voltada para desenvolvedores — janelas de código monoespaçadas com pontos de semáforo, ícones 3D isométricos no verde característico e bastante espaço em branco, permitindo que um elemento em cada seção brilhe. A tipografia é dividida entre uma fonte personalizada (Goga) para títulos e uma fonte variável (Inter) para todos os elementos da interface, ambas configuradas com espaçamento negativo estreito. As cores são distribuídas uniformemente: a maioria das telas é acromática e o verde-limão brilhante aparece apenas em ações importantes, no logotipo, em ilustrações 3D e em momentos de ênfase. Os componentes são planos e sem moldura, com profundidade criada por meio de bordas verdes sutis e desfoque de fundo, em vez de sombras.
O modal utiliza um layout escuro de largura total com uma largura máxima de 1280px para acomodar o conteúdo. A janela principal é centralizada: o título (a primeira frase em verde limão), um subtítulo, duas chamadas para ação e um único objeto 3D como âncora visual — sem separar o layout da barra lateral. As seções de conteúdo seguem um ritmo uniforme: título em destaque (letras maiúsculas, Moss 70) → título Goga → texto do corpo em tom neutro, seguido por um layout de duas colunas com uma descrição do recurso (texto + código/cartão visual) ou uma grade de cartões de três colunas. Os espaçamentos entre as seções são generosos — 80px. A página alterna entre faixas de fundo escuras e vazias (#000000) e faixas de fundo ligeiramente mais claras (#181818), com uma seção clara (#def0dd) aparecendo no meio da página como um respiro visual. A navegação consiste em uma única barra superior fixa com fundo desfocado — sem barra lateral ou megamenu. O rodapé é compacto e escuro, com colunas de links em um tom verde suave. A densidade do texto é confortável: cada seção recebe amplo espaço e as grades de cartões não utilizam mais do que três colunas.
A linguagem visual do Modal divide-se em dois modos: renderizações 3D de produtos com brilho e mockups de janelas de código escuras. O ponto focal é um único cubo 3D renderizado com um gradiente de marketing (do verde limão ao esmeralda), inserido em um halo radial que banha o espaço vazio em luz verde — o estilo visual característico da marca. Os cartões de tarefas contêm ícones 3D isométricos (um cubo em wireframe, uma escada sólida, camadas) renderizados no mesmo verde limão sobre um fundo escuro. O código e os resultados de benchmarks são apresentados como cartões de janela de terminal com pontos de semáforo, realce de sintaxe monoespaçado em uma paleta fosforescente e uma borda verde suave — assemelham-se a capturas de tela de uma interface de linha de comando real. Os logotipos dos clientes são exibidos como rótulos verde-acinzentados dessaturados em uma única linha de baixo contraste, transmitindo confiança sem competição visual. A densidade geral é baixa — a maioria das páginas contém predominantemente texto, e as imagens são apresentadas como pontos focais individuais em vez de grades de fotografias. Não há fotografias; todo o sistema visual é renderizado, geométrico e radiante.
Paleta
Marca
- Lime Pulse
#7fee64— Os principais elementos da identidade corporativa são o logotipo, a principal chamada para ação (CTA), o preenchimento das tags, os estados ativos e a cor básica da ilustração.
Neutro
- Phosphor White
#ddffdc— O texto principal, a cor do título, o contorno do ícone e o texto preenchido do botão constituem a principal superfície legível. - Void Black
#000000— Tela da página, a camada de fundo mais profunda - Ground Iron
#181818— Preenchimento do botão principal, superfícies do cartão em áreas escuras, superfície base da interface do usuário. - Carbon Veil
#212525— Superfícies elevadas, fundo para navegação, ligeiramente mais claras que o solo. - Circuit Border
#485346— O contorno/moldura de ação fantasma, a principal linha fina interativa, tem um tom cinza-esverdeado discreto. - Phosphor Blue-Black
#1f2a33— Linhas de marcação secundárias finas, dividindo os traços entre listras escuras.
Tipografia
de 12 a 64px · 8 etapas
- Goga — substituição: Inter Tight or Space Grotesk · esboços 400, 500 · Fonte para Títulos e Subtítulos – Usada para todos os títulos e cards H1 a H4. Goga é uma fonte geométrica sans-serif personalizada com aberturas estreitas e terminações ligeiramente quadradas. A versão média (500) é reservada para destacar títulos de nível de card; a versão normal (400) é usada para títulos de destaque e de seção. Para acessar os formatos alternativos de glifos que definem a identidade da fonte Modal, seu conjunto estilístico 'ss01' deve estar ativado. O espaçamento negativo entre letras diminui gradualmente de -0,007em a 48px para -0,017em a 21px.
- Inter Variable — substituição: Inter · esboços 400, 500 · Interface do usuário e corpo do texto – navegação, botões, corpo do texto, rótulos, rodapé. A espessura média (500) é usada por padrão para elementos interativos e navegação; a espessura normal (400) é usada para parágrafos. O espaçamento entre letras é visivelmente reduzido mesmo em tamanhos pequenos (-0,026em em 14px, -0,022em em 16px), conferindo à interface uma densidade condensada e terminal. Para pontuação alternativa, a variante de caractere 'cv11' deve ser incluída. Rótulos em maiúsculas com 12px usam espaçamento entre letras de +0,05em para contrabalançar a densidade do corpo do texto.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 20px |
| Raio do botão | 12px |
| Raio do cartão | 8px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80px |
| Largura da página | 1280px |
A IA criará seu site no estilo Modal e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Slash — Cofre da meia-noite com livros-razão dourados
- AgentQL — Aurora boreal sobre o terminal à noite.
- GitHub — Um painel de comando espacial com pontos de controle bioluminescentes — um espaço de trabalho escuro e atmosférico onde um único brilho verde indica o caminho a seguir.
- Doppler — A iluminação púrpura do cofre à meia-noite. A tela quase negra brilha com um único sinal lavanda e uma luz verde de confirmação, cada superfície curvada o suficiente para ser tocada.
- Basedash — Um terminal de dados à meia-noite com fonte fosca. Um observatório escuro onde as métricas brilham em tons de roxo e verde, títulos com serifa flutuam acima do ruído e botões brancos em forma de pílula são os únicos objetos brilhantes em uma sala de superfícies pretas e suaves.
- Superwhisper — A aurora boreal se dissolve sobre o vidro da meia-noite.
- Better Stack — Console SRE da meia-noite
- Langbase — Console Midnight Northern Lights
- Astro — Centro de Controle de Missão no Espaço Profundo com um único brilho púrpura proveniente de uma nebulosa.
- Wayfinder — Uma tela de cinema preta com um título quase inaudível pairando sobre uma ilustração em movimento. A interface consiste em um controle deslizante de brilho, em vez de um painel de controle.
- HashiCorp — A sala de controle à meia-noite, com luzes de néon roxas, é um ambiente técnico escuro onde um cubo hexagonal brilhante serve como única referência de cor.
- Umbrel — Uma aconchegante fogueira na sala de servidores noturna — um cômodo escuro onde um único brilho alaranjado destaca o que é verdadeiramente importante.