Huly
Auroras Boreais no Observatório da Meia-Noite - o protagonista é um feixe vertical de luz roxa que se desvanece em coral, e cada seção silenciosa abaixo dele repete a mesma narrativa em dois tons, contada de forma mais suave.
Huly evoca a atmosfera de um espaço de trabalho cósmico: uma tela quase preta com um único brilho âmbar-violeta atravessando o elemento principal e, abaixo dela, uma grade mais discreta para aumentar a produtividade. O sistema opera dentro de uma paleta de cores restrita — um azul brilhante e um coral são os principais elementos de identidade visual sobre superfícies grafite em camadas, de modo que o modo escuro nunca parece neutro. A tipografia é Inter-style para tudo o que é funcional, com uma fonte personalizada (Esbuild) reservada para pontos-chave, com espaçamento entre letras de 80 a 84 pixels e espaçamento negativo acentuado. Os componentes têm formato de cápsula: raio de 9999 pixels nos controles, 12 pixels nos cartões, sombra mínima e linhas com gradiente luminoso como decoração principal. A página alterna entre áreas escuras em tela cheia e seções claras e suaves, portanto, qualquer nova tela deve definir o modo antes de escolher as cores.
A página inicial, em tela cheia, apresenta um feixe vertical representando a aurora boreal e um título alinhado à esquerda, além de uma captura de tela do produto posicionada no canto inferior direito. Abaixo da página inicial, encontra-se uma área de conteúdo com largura máxima de 1200px, alternando faixas claras e escuras. Cada seção é um bloco vertical único: um cabeçalho mais uma grade de cards com 3 ou 4 colunas, separadas por espaçamentos de 96px. A seção "MetaBrain" quebra a grade com um título centralizado e um mosaico de cards de tamanhos variados (um card principal grande mais cards de apoio menores). A página é densa em conteúdo, seguindo os padrões de SaaS, mas utiliza faixas claras e escuras alternadas para dar espaço a cada seção. A navegação consiste em uma única barra superior transparente que se torna opaca à medida que o usuário rola a página.
O elemento principal é um gradiente de aurora boreal puro, sem fotografias. Todas as ilustrações são capturas de tela reais da interface do usuário do produto (Kanban no modo escuro, caixa de entrada, calendário), emolduradas em molduras de cartão que servem tanto como evidência quanto como decoração. Sem fotos de estilo de vida, imagens de banco de imagens ou renderizações 3D. O único elemento visual não relacionado à interface do usuário é um brilho quente e radial na base da aurora, renderizado como um gradiente CSS. Os ícones são ícones de linha monocromáticos em #95979 ou branco, nunca multicoloridos. O sistema trata sua própria interface escura como o elemento principal — o produto são as fotografias.
Paleta
Marca
- Electric Iris
#5683da— O plano de fundo principal, o indicador de navegação ativo e o marcante destaque da Aurora Boreal — uma vibrante cor azul-violeta sobre um fundo preto intenso — criam uma impressão de envolvimento em vez de atividade corporativa. - Ember Pulse
#ff8964— Um detalhe secundário, uma zona quente para aurora boreal, um ponto de notificação e um destaque na ilustração — um tom âmbar que quebra a sobriedade do azul e adiciona calor ao feixe de luz.
Neutro
- Obsidian Canvas
#303236— O fundo da página, a superfície dominante, é de uma cor quase preta com um ligeiro toque de calor, o ambiente padrão para todo o conteúdo. - Void
#090a0c— A camada superficial mais profunda para gradientes na tela principal, fundos modais e molduras que devem se integrar à tela. - Charcoal Card
#111111— Superfícies elevadas feitas de papelão e painéis, posicionadas um degrau acima da tela. - Slate Edge
#4a4b50— Bordas e divisórias sutis em superfícies escuras. - Iron Veil
#6b6c6d— Fundo escurecido para etiquetas, preenchimento de itens de lista e preenchimento de itens desativados. - Smoke
#95979e— Os contornos dos ícones, o texto adicional e os controles inativos são os principais elementos de trabalho em cinza médio.
Tipografia
de 11 a 80px · 8 etapas
- Inter — substituição: DM Sans · esboços 300, 400, 500, 600, 700 · Todo o texto funcional na interface do usuário — texto principal, navegação, botões, itens de lista, rótulos e títulos pequenos — é usado com uma espessura de fonte de 500 a 600 para ênfase, 400 para texto principal e 300 com moderação para metadados discretos.
- Esbuild — substituição: Sora · esboços 400, 500, 600 · Exclusivo para exibição: títulos de destaque, cabeçalhos de seção e títulos de artigos do MetaBrain. A geometria condensada e o espaçamento reduzido entre as letras criam a impressão de que 84px é mais adequado para trabalhos editoriais do que para projetos SaaS. Nunca use abaixo de 28px.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | espaçoso |
| Passo básico | 12px |
| Raio do botão | 9999px |
| Raio do cartão | 12px |
| Sombras | sombras suaves |
| Entre seções | 96px |
| Largura da página | 1200px |
A IA criará seu site no estilo Huly 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
- monday — Oficina branca com adesivos em tons pastel
- Slack — O palco é cor de berinjela com holofotes brancos. Um tom ameixa profundo domina as áreas escuras, enquanto a tela esbranquiçada permite que os grandes títulos de vanguarda respirem livremente.
- Base44 — Caderno iluminado pelo sol com marcador verde-limão
- Supahub — Luz suave do dia em uma crista púrpura. Uma tela predominantemente branca e arejada, iluminada por um único sol púrpura brilhante, com esferas decorativas em degradê que espalham cor pelo espaço negativo e uma geometria arredondada generosa que confere a cada superfície uma agradável e palpável densidade.
- Raycast — Centro de Comando da Meia-Noite, Neon Coral
- Dimension — uma estação de trabalho iluminada ao entardecer com painéis de vidro fosco
- Wiza — Um observatório de exploração mineral ao entardecer, envolto em uma névoa lavanda.
- Paste — Uma lanterna âmbar sobre mármore branco — o logotipo da marca, com seu degradê em tons quentes, paira no vasto espaço branco, como a única janela iluminada em um prédio coberto de neve.
- Reworkd — A suave luz do dia no diagrama do produto é a única cor que se destaca, presente no botão de ação e no título em degradê acima dele.
- 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.
- Todoist — Um espaço de trabalho iluminado pelo sol com uma agenda de papel – uma escrivaninha em tons creme, anotações a tinta, uma caneta vermelha.