Framer

Paleta

Marca

• Vivid Violet #0066ff — O botão de ação principal é o único local na interface onde um fundo de botão de cor sólida é exibido.

Neutro

• Bone #ffffff — Títulos principais e texto principal em fundo escuro; o fundo dos botões é a única fonte de luz.
• Void #000000 — A tela da página, o fundo da navegação, as superfícies dos cartões, o preenchimento dos ícones — tudo é de uma cor preta infinita que absorve todo o conteúdo não essencial.
• Graphite #111111 — Superfícies de cartões em relevo representam um avanço em relação ao vazio — cartões grandes e funcionais e contêineres modais.
• Obsidian #171717 — Superfície intermediária para botões, cartões adicionais e preenchimentos de interface do usuário - separa os elementos interativos da tela.
• Slate #242424 — Ao passar o cursor sobre os campos, os campos de entrada e os painéis recuados exibem o tom neutro mais claro antes de mudarem para o formato de texto.
• Ash #333333 — Preenchimento profundo para imagens de fundo inativas e elementos estruturais.

Tipografia

de 12 a 68px · 8 etapas

• sans-serif — substituição: Inter · esboços 400 · sans-serif - encontrada nos dados extraídos, mas não descrita pela IA.
• GT Walsheim — substituição: Inter Tight · esboços 500 · A fonte usada para títulos e cabeçalhos é a fonte da marca. Ela é agressivamente condensada, com espaçamento entre linhas de 0,8 a 1,1 e espaçamento entre letras de -0,04em a -0,05em, em tamanhos de 44 a 68px. Não se trata de um elemento decorativo; o calor geométrico da GT Walsheim, combinado com métricas rigorosas, cria a voz do sistema — confiante, compacta e ligeiramente futurista. Para uma expressão geométrica semelhante, considere Inter Tight ou Space Grotesk Bold.
• Inter Variable — substituição: Inter · esboços 400 · O texto principal, a navegação e os títulos secundários são os elementos principais. O eixo variável Inter permite uma interpolação suave das espessuras. O espaçamento entre letras diminui à medida que o tamanho aumenta: de -0,001em a 18px e de -0,027em a 22px. A versão variável permite microanimações suaves no site. Alternativa: Inter ( Google) – uma alternativa praticamente idêntica.

Intervalos e forma

Estilos semelhantes

• Auros — Terminal abissal com esferas de dados bioluminescentes
• Origin Financial — Uma galeria noturna de opulência discreta. Uma sala silenciosa, quase escura, onde grandes fontes serifadas e alguns painéis coloridos iluminados criam a sensação de que as finanças são uma obra de arte cuidadosamente selecionada.
• Raycast — Centro de Comando da Meia-Noite, Neon Coral
• Dimension — uma estação de trabalho iluminada ao entardecer com painéis de vidro fosco
• Reflect Notes — O espaço violeta estrelado é um observatório escuro onde as notas flutuam como constelações contra um pano de fundo de vazio índigo quase negro.
• Ameba — A sala de controle à meia-noite – um pulso azul elétrico dentro de painéis de vidro fosco.
• Branding — Parede de galeria preta, detalhes em vermelho sangue - Grandes fontes brancas flutuam em uma tela escura que lembra um vazio, interrompido por um único detalhe em vermelho vivo e elementos decorativos marcantes que se assemelham mais à sinalização de uma galeria do que a uma interface da web.
• Harness — Centro de Controle da Missão à meia-noite com detalhes em verde fosforescente.
• Koto — A Galeria Obsidian à meia-noite. Um palco quase completamente escuro, onde a única fonte de luz quente é um marcador amarelo, e textos condensados flutuam no vasto espaço negativo como cartazes de exposição.
• Ohzi — Um cubo luminoso suspenso em uma galeria escura.
• Depot — Um terminal de servidor escuro. Um console de desenvolvedor quase preto, com um único LED verde sinalizando o início do trabalho, e o restante da interface do usuário exibido em grafite.
• Maciej Zadykowicz — A Galeria da Meia-Noite, com seu mural caleidoscópico, é uma parede de estúdio quase preta onde uma vibrante e colorida obra de arte tipográfica chama a atenção, enquanto todo o resto permanece silencioso e deliberado.