Ciridae
Una habitación vacía con el palpitar de brasas humeantes: una catedral casi negra donde el único sonido cálido es una fina línea de óxido, y cada superficie está definida por líneas finas en lugar de sombras.
Ciridae opera en un vacío: un lienzo #0b0b0b, controles en forma de píldora con contornos apenas perceptibles y tipografía fijada en las mayúsculas de Pragmatica Cond con un grosor de 400; sin negrita, sin mayúsculas y minúsculas, sin elementos decorativos. La única nota cromática es #cc6437, un tono óxido cálido y humeante utilizado como trazos finos y pequeños signos de puntuación de acento, nunca como relleno. Los mapas flotan sobre #272a2a con un radio de 10 px y sin sombras; el sistema prescinde de la elevación, definiendo las superficies mediante contraste tonal y bordes finísimos de 1 px. Las fotografías están muy borrosas y son atmosféricas —mármol líquido, humo, fuego— colocadas detrás del texto en modo de pantalla completa, por lo que las imágenes visuales se sienten más atmosféricas que ilustrativas.
El diseño de la página es de ancho completo, con el contenido centrado dentro de un ancho máximo de ~1400px. El héroe es una composición oscura de ancho completo con un logotipo de constelación centrado flanqueado por microetiquetas a la izquierda y derecha. Las secciones se alternan: héroe oscuro → franja clara con fondos (Bone) → texto de transformación oscuro → cuadrícula oscura de tarjetas del sistema → pie de página oscuro. La única sección clara crea una transición tonal única y nítida. La cuadrícula de tarjetas usa 4 columnas, con la primera tarjeta aproximadamente el doble de ancha que las otras tres, creando un diseño asimétrico con énfasis en el contenido. El espacio vertical entre secciones es generoso (80px+). La navegación es mínima: una barra de noticias superior + un "Comenzar ahora" alineado a la izquierda y un "Menú" alineado a la derecha en la barra superior. Sin barra lateral, sin mega-menú.
Fotografías atmosféricas, que ocupan toda la superficie de la página, dominan la pantalla de inicio y las tarjetas. Las imágenes están muy desenfocadas (se detectaron valores de desenfoque de fondo de 50 px y 40 px) y presentan un alto contraste, mostrando mármol líquido con remolinos azul-rojos, humo, siluetas oscuras de paisajes y texturas de fuego/brasas. Las fotografías son sombrías y melancólicas, no vibrantes; comparten la misma gama tonal que el lienzo en blanco en lugar de destacar sobre él. No hay fotos de productos, ni personas, ni capturas de pantalla de la interfaz de usuario. Las imágenes crean atmósfera en lugar de servir como contenido ilustrativo. La cuadrícula de tarjetas asigna cada sistema a una escena atmosférica diferente, lo que permite que las fotografías funcionen como identificadores visuales abstractos en lugar de imágenes literales de productos.
Paleta
Marca
- Ember Rust
#cc6437— Los trazos de acento, las líneas de los iconos y los pequeños resaltados de texto son el único color cromático en un sistema monocromo, apareciendo más como un punto pulsante apenas perceptible que como un relleno.
Neutral
- Void Black
#0b0b0b— Imágenes de fondo para la página principal y las secciones; la base de todo el sistema. - Charcoal Surface
#272a2a— Las imágenes de fondo, hechas de cartón y paneles sobre áreas oscuras, son un tono más claras que el lienzo para crear una separación de superficies sin sombras. - Bone
#edebe7— Las zonas claras del fondo y de la superficie son de color crema, donde el sistema pasa de oscuro a claro. - Bone Darker
#dfddd9— Un tono delicado llamado "Hueso" para superficies claras multicapa y elementos de color cálido, casi blanco. - Pure White
#ffffff— Todo el texto principal, los encabezados, los bordes de los botones transparentes y los elementos de navegación están en el color principal con una relación de contraste de 19,7:1 sobre un fondo negro vacío. - Abyss
#050505— Fondo en relieve para la tira de noticias (tira de noticias superior): un tono más oscuro que el lienzo principal para que la tira destaque.
Tipografía
de 11 a 32 píxeles · 5 pasos
- Pragmatica Cond — reemplazo: Oswald · esquemas 400 · La fuente principal de la interfaz de usuario es una fuente estrecha y condensada con 14 px en mayúsculas para el texto principal, 20 px para los encabezados de sección y 32 px para el texto general. Esta fuente extremadamente estrecha, con 14 px en mayúsculas para el texto principal, es la solución más característica del sistema: el texto principal se lee como el susurro de una tipografía arquitectónica, en lugar de como prosa común. Si Pragmatica Condensed no está disponible, utilice Oswald o Barlow Condensed.
- Pragmatica — reemplazo: Inter · esquemas 400 · Fuente secundaria utilizada para pasajes de prosa más extensos (por ejemplo, la descripción de la tarjeta "Sistema Operativo de IA" tiene un tamaño de 24 px, mientras que el texto del párrafo tiene 15 px). Es ligeramente más ancha que Pragmatica Cond para facilitar la lectura en bloques grandes, pero mantiene un grosor de 400 ppp; nunca se usa en negrita. Se puede reemplazar por Inter o Söhne.
- Roboto Mono — reemplazo: Roboto Mono (free · esquemas 400 · Microfuente monoespaciada para un teletipo de noticias ("NOTICIAS • 15 DE JUNIO DE 2026 • ACCESO ANTICIPADO A CRUCIBLE YA DISPONIBLE"). La fuente monoespaciada se utiliza solo aquí, creando una clara distinción funcional: se trata de datos del sistema, no de una marca.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 16-20px |
| Radio del botón | 1440px |
| Radio de la tarjeta | 10px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80px |
| Ancho de página | 1400px |
La IA construirá tu sitio web al estilo de Ciridae y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Dala — una constelación flotando sobre terciopelo negro
- Linear — instrumento de precisión de medianoche
- Resend — terciopelo negro con color neón morado
- Dovetail — Un plano bajo una luna negra: líneas gráficas apenas visibles, fuente blanca, un destello púrpura.
- Neon — Una sala de servidores al anochecer. Oscuridad absoluta, donde la única luz proviene de los datos y las interacciones de los usuarios.
- Discord — El mundo del juego está oculto tras una ventana de chat emergente; cada sección es un entorno independiente con su propia iluminación y conjunto de personajes.
- Aaru — Observatorio de Campo de Partículas a Medianoche
- Atlas Card — La Bóveda de Medianoche, con su único rayo de zafiro, es una extensión completamente oscura donde lo único que importa es el profundo azul eléctrico.
- Midjourney — Una terminal bioluminiscente en las profundidades del océano. Un mundo submarino donde la inteligencia se genera visualmente mediante secuencias ASCII, y los controles aparecen como patrones que emiten un brillo tenue.
- Checkly — Centro de Control de Misiones en Órbita Profunda
- Krea — galería noir a medianoche
- Wope — Wope es una interfaz de horizonte púrpura. Imagina una mesa de observatorio oscura con una luz púrpura que emana desde debajo del cristal.