Auros
Terminal abisal con esferas de datos bioluminiscentes
Auros funciona como una terminal fintech enclavada en el abismo: un lienzo turquesa casi negro con orbes de datos bioluminiscentes y degradados de luz del turquesa al rosa, creando una sensación de profundidad, fluidez y movimiento. La interfaz es minimalista y cinematográfica, basándose en una única pantalla de usuario (Matter) de grosor medio con un agresivo seguimiento negativo para crear escala sin ser demasiado llamativa. Los colores están distribuidos uniformemente: blancos y plateados acromáticos se utilizan para casi todo el contenido, mientras que la paleta cromática se reserva para los degradados atmosféricos, las superficies distintivas de las tarjetas y un único botón distintivo en forma de píldora que cambia de color del azul turquesa al rosa lavanda. Las tarjetas flotan sobre sutiles crestas de superficie turquesa (radio de 16 px, sin sombras) en lugar de altura, por lo que la jerarquía se percibe como la profundidad del agua en lugar de una sombra en el papel. Los componentes parecen cuidados y como instrumentos: marcas de seguimiento en mayúsculas, finos iconos de flechas geométricas, grandes lecturas numéricas en rosa pálido.
Un lienzo oscuro de ancho completo con contenido de un ancho máximo de 1440px. El elemento principal es un bloque de texto centrado (ceja → título → subtexto → llamada a la acción) que abarca toda la altura de la ventana gráfica, con una partícula como elemento de fondo. Las secciones son franjas de ancho completo separadas por grandes espacios verticales de 68px+, alternando entre lienzo y superficies ligeramente hundidas. La sección "Explorar" utiliza un diseño asimétrico de dos columnas: la columna izquierda contiene tarjetas de características apiladas, mientras que la columna derecha presenta una ilustración molecular geométrica. El contenido está centrado en columnas estrechas (máximo ~600px) para facilitar la lectura, en lugar de extenderse de borde a borde. El pie de página es un hueco (#011d1c) con un margen vertical de 120px, creando el efecto de una piscina profunda. La navegación es un panel delgado y transparente con elementos espaciados entre 16 y 24px. El ritmo general es cinematográfico y espacioso: cada sección respira, y la paleta de colores profundos, que recuerdan al agua, crea la sensación de hundirse más profundamente con cada pasaje.
El estilo visual es minimalista y evocador. La página de inicio presenta una esfera de partículas tridimensional: miles de diminutos puntos azul turquesa y blancos forman una esfera giratoria que se hace eco del lienzo y los detalles en rosa lavanda en los bordes, creando un efecto bioluminiscente que recuerda a un objeto de información. Diagramas moleculares geométricos planos (círculos blancos y finas líneas de conexión sobre un fondo oscuro) sirven como elementos decorativos en la columna derecha. Sin fotografías, sin imágenes de estilo de vida, sin personas: el lenguaje visual se basa en gráficos de datos limpios y formas abstractas. La esfera de partículas es el elemento visual definitorio de la identidad de marca; debe aparecer al menos una vez en cada página importante para reforzar la metáfora de las profundidades marinas.
Paleta
Marca
- Liquid Abyss
#012624— El fondo principal constituye la base de la página, el encabezado, el elemento principal y el campo dominante de color turquesa oscuro. Crea una atmósfera de profundidad marina. - Liquid Deep
#011d1c— La superficie hundida corresponde al fondo del pie de página y a los paneles de cartón más profundos. Se percibe como un tono ligeramente más oscuro que el lienzo, creando un sutil degradado descendente de profundidad. - Liquid Kelp
#003734— Superficie de tarjeta en relieve y relleno de botón: una superficie en relieve situada un escalón por encima del borde. Se utiliza para tarjetas destacadas, paneles de contenido y como punto de partida de un botón con degradado.
Neutral
- Liquid Mist
#edfffe— Un tono blanco frío resalta el cuerpo del texto, los títulos de las secciones y la tipografía cálida y luminosa. Un sutil matiz azul integra el cuerpo del texto con la paleta de colores turquesa. - Platinum
#ffffff— El blanco puro se utiliza para los títulos, los elementos de navegación, los contornos de los iconos y el texto de alto contraste. Es el color principal del texto en todos los niveles de títulos y en la navegación principal. - Silver Mist
#bbc7c6— Texto secundario, descripciones atenuadas y color de enlace en su estado original. Tienen un ligero tinte verdoso que complementa el fondo turquesa. - Ash
#f2f2f2— Texto adicional para citas y reseñas. Un tono gris neutro y frío para cuando el matiz turquesa de Silver Mist resulta demasiado brillante. - Slate Deep
#707777— Un sutil tinte superficial para fondos estáticos o de baja visibilidad. Se sitúa entre el lienzo y el cartón, creando una diferencia de altura muy discreta. - Lavender Phosphor
#fde9ff— Color de retroiluminación para grandes estadísticas, contadores y métricas importantes. El tono rosa del degradado característico se usa con moderación como acento luminoso en superficies oscuras.
Tipografía
De 10 a 96 píxeles · 6 pasos
- Matter — reemplazo: Inter · esquemas 400, 500 · La fuente principal para los encabezados y el cuerpo del texto se utiliza con un grosor de 500 para todos los encabezados (H1–H3) y texto cinético grande (86–295px). Se utiliza un grosor de 400 para el cuerpo del texto y el texto de la interfaz de usuario. Presenta un espaciado entre letras negativo agresivo en tamaños grandes (-0,04em a 61px, -0,046em a 86px) y un amplio espaciado entre letras positivo en mayúsculas de título (0,08em a 20px, 0,12em a 12px, 0,15em a 10px). La estrategia de utilizar solo un grosor medio para los encabezados es una característica distintiva —sin negrita ni fuente ligera— lo que le confiere a la fuente una uniformidad y una seguridad mecánica.
- Arial — reemplazo: system-ui · esquemas 400 · Un recurso secundario para elementos interactivos de la interfaz de usuario (navegación, botones, texto de encabezado, pie de página). Aparece solo a 14 píxeles; se utiliza como un recurso universal seguro cuando Matter no está cargado y cubre las etiquetas de formulario, el texto de los botones y el texto auxiliar pequeño.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 20px |
| Radio del botón | 6px |
| Radio de la tarjeta | 16px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 68px |
| Ancho de página | 1440px |
La IA construirá tu sitio web al estilo de Auros 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
- Design Full-Time — un cine de estudio con un foco cálido
- Air — Escultura "Cielo de medianoche a través del cristal"
- Slash — Bóveda de medianoche con libros de contabilidad dorados
- Raycast — Centro de mando de medianoche, neón coral
- Dimension — un puesto de trabajo iluminado al anochecer con paneles de vidrio esmerilado
- Modal — Un terminal fosforescente en una sala de servidores a oscuras: la única fuente de luz es de un color verde brillante.
- Giga — Horizonte de medianoche sobre obsidiana escarchada
- Reflect Notes — El espacio violeta estrellado es un observatorio oscuro donde las notas flotan como constelaciones contra un telón de fondo de un vacío índigo casi negro.
- Ameba — La sala de control a medianoche: un pulso azul eléctrico dentro de los paneles de vidrio esmerilado.
- AgentQL — Auroras boreales sobre la terminal por la noche.
- Frame — Una sala de cine para proyecciones nocturnas. Una habitación oscura donde un único foco azul hace todo el trabajo y la interfaz de usuario pasa a un segundo plano, permitiendo que el contenido creativo se proyecte hacia adelante.
- Harness — Centro de control de misiones a medianoche con detalles en verde fosforescente.