Ciridae
Uma sala vazia com a pulsação de brasas fumegantes - uma catedral quase negra onde o único som quente é uma fina linha de ferrugem, e cada superfície é definida por linhas delicadas em vez de sombras.
Ciridae opera em um vazio: uma tela #0b0b0b, controles em formato de pílula com contornos quase imperceptíveis e tipografia fixa em maiúsculas da fonte Pragmatica Cond, peso 400 — sem negrito, sem maiúsculas e minúsculas mistas, sem elementos decorativos. A única nota cromática é #cc6437, um tom ferrugem quente e intenso usado para os traços mais finos e pequenos sinais de pontuação, nunca como preenchimento. Os mapas flutuam sobre #272a2a com raio de 10px e sem sombras; o sistema evita a elevação, definindo as superfícies por meio de contraste tonal e bordas finíssimas de 1px. As fotografias são fortemente desfocadas e atmosféricas — mármore líquido, fumaça, fogo — colocadas atrás do texto em modo de tela cheia, de modo que as imagens visuais parecem mais atmosféricas do que ilustrativas.
O layout da página é de largura total, com o conteúdo centralizado em uma largura máxima de aproximadamente 1400px. O destaque é uma composição escura de largura total com um logotipo de constelação centralizado, ladeado por micro-rótulos nas laterais esquerda e direita. As seções se alternam: destaque escuro → faixa clara com sobreposições (Bone) → texto de transformação escuro → grade escura de cartões do sistema → rodapé escuro. A única seção clara cria uma transição tonal única e nítida. A grade de cartões utiliza 4 colunas, com o primeiro cartão aproximadamente duas vezes mais largo que os outros três, criando um layout assimétrico com ênfase no conteúdo. O espaço vertical entre as seções é generoso (mais de 80px). A navegação é minimalista: uma barra de notícias superior + um botão "Começar agora" alinhado à esquerda e um botão "Menu" alinhado à direita na barra superior. Sem barra lateral, sem mega-menu.
Fotografias atmosféricas, ocupando toda a superfície da página, dominam a tela inicial e os cartões. As imagens são bastante desfocadas (valores de desfoque de fundo de 50px e 40px foram detectados) e de alto contraste, retratando mármore líquido com redemoinhos azul-avermelhados, fumaça, silhuetas escuras de paisagens e texturas de fogo/brasas. As fotografias são melancólicas e escuras, não vibrantes — compartilham a mesma gama tonal da tela em branco, em vez de se destacarem contra ela. Não há fotos de produtos, pessoas ou capturas de tela da interface do usuário. As imagens criam atmosfera em vez de servirem como conteúdo ilustrativo. A grade de cartões mapeia cada sistema para uma cena atmosférica diferente, permitindo que as fotografias funcionem como identificadores visuais abstratos em vez de imagens literais de produtos.
Paleta
Marca
- Ember Rust
#cc6437— Os traços de destaque, as linhas dos ícones e os pequenos realces de texto são as únicas cores cromáticas em um sistema monocromático, aparecendo mais como um ponto pulsante quase imperceptível do que como um preenchimento.
Neutro
- Void Black
#0b0b0b— Imagens de fundo para a página principal e seções; a base de todo o sistema. - Charcoal Surface
#272a2a— As imagens de fundo feitas de papelão e painéis em áreas escuras são um tom mais claro que a tela para criar uma separação de superfícies sem sombras. - Bone
#edebe7— As áreas claras do fundo e da superfície são de cor creme, onde o sistema transita do escuro para o claro. - Bone Darker
#dfddd9— Um tom delicado chamado "Bone" para superfícies claras com múltiplas camadas e elementos de uma cor quente, quase branca. - Pure White
#ffffff— Todo o texto principal e os títulos, as bordas dos botões fantasmas e os elementos de navegação estão na cor primária com uma taxa de contraste de 19,7:1 sobre um fundo preto Void. - Abyss
#050505— Fundo em relevo para a tira de notícias (tireta de notícias superior) - um tom mais escuro que a tela principal para destacar a tira.
Tipografia
de 11 a 32px · 5 etapas
- Pragmatica Cond — substituição: Oswald · esboços 400 · A fonte principal de exibição e da interface do usuário é uma fonte estreita e condensada, com 14px em maiúsculas para o corpo do texto, 20px para títulos de seção e 32px para o texto principal. Uma fonte extremamente estreita e 14px em maiúsculas para o corpo do texto é a solução mais característica do sistema: o corpo do texto se assemelha à caligrafia delicada de uma fonte arquitetônica, em vez de uma prosa comum. Substitua por Oswald ou Barlow Condensed caso Pragmatica Condensed não esteja disponível.
- Pragmatica — substituição: Inter · esboços 400 · Uma fonte secundária, usada principalmente para trechos de prosa mais longos (por exemplo, a descrição do cartão "Sistema Operacional de IA" tem 24px, o texto do parágrafo tem 15px). Ligeiramente mais larga que a Pragmatica Cond para facilitar a leitura em blocos maiores, mas ainda com peso 400 — nunca em negrito. Substitua por Inter ou Söhne.
- Roboto Mono — substituição: Roboto Mono (free · esboços 400 · Uma microfonte monoespaçada para um ticker de notícias ("NOTÍCIAS • 15 DE JUNHO DE 2026 • ACESSO ANTECIPADO AO CRUCIBLE JÁ ESTÁ ABERTO"). A fonte monoespaçada é usada apenas aqui, criando uma distinção funcional clara: trata-se de dados do sistema, não de identidade visual da marca.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 16-20px |
| Raio do botão | 1440px |
| Raio do cartão | 10px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80px |
| Largura da página | 1400px |
A IA criará seu site no estilo Ciridae 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
- Dala — uma constelação pairando sobre veludo negro
- Linear — instrumento de precisão da meia-noite
- Resend — veludo preto com detalhes em roxo neon
- Dovetail — Uma planta sob uma lua negra — linhas do gráfico quase invisíveis, fonte branca, um brilho roxo.
- Neon — Uma sala de servidores após o anoitecer. Escuridão total, onde a única luz vem dos dados e das interações dos usuários.
- Discord — O mundo do jogo está oculto atrás de uma janela de bate-papo pop-up — cada seção é um ambiente independente com sua própria iluminação e conjunto de personagens.
- Aaru — Observatório de Campo de Partículas à Meia-Noite
- Atlas Card — O Cofre da Meia-Noite, com seu único raio de safira, é uma extensão completamente escura onde a única coisa que importa é o azul elétrico profundo.
- Midjourney — Um terminal bioluminescente nas profundezas do oceano. Um mundo submarino onde a inteligência se gera visualmente em fluxos ASCII, e os controles aparecem como padrões levemente brilhantes.
- Checkly — Centro de Controle de Missão em Órbita Profunda
- Krea — galeria noir à meia-noite
- Wope — Wope é uma interface de horizonte púrpura. Imagine uma mesa de observatório escura com uma luz púrpura brilhando por baixo do vidro.