Auros
Terminal abisal con bólas de datos bioluminescentes
Auros funciona como un terminal fintech aniñado no abismo: unha lona turquesa case negra con orbes de datos bioluminescentes e gradientes de luz do turquesa ao rosa, creando unha sensación de profundidade, fluidez e fluxo. A interface é minimalista e cinematográfica, baseándose nunha única pantalla de usuario (Matter) de grosor medio con seguimento negativo agresivo para crear escala sen ser demasiado rechamante. As cores distribúense uniformemente: os brancos e pratas acromáticos úsanse para case todo o contido, mentres que a paleta cromática resérvase para gradientes atmosféricos, que distinguen as superficies das cartas e un único botón característico en forma de pílula que cambia de cor do azul turquesa ao rosa lavanda. As cartas flotan sobre sutís cristas superficiais turquesas (radio de 16 px, sen sombras) en lugar de altura, polo que a xerarquía percíbese como a profundidade da auga en lugar dunha sombra no papel. Os compoñentes parecen reflexivos e semellantes a instrumentos: marcas de seguimento en maiúsculas, iconas de frechas xeométricas finas, grandes lecturas numéricas en rosa pálido.
Un lenzo escuro de ancho completo cun contido dun ancho máximo de 1440 px. O elemento principal é un bloque de texto centrado (brow → title → subtext → call to action) que abrangue toda a altura da ventá gráfica, cunha partícula como elemento de fondo. As seccións son franxas de ancho completo separadas por grandes espazos verticais de máis de 68 px, alternando entre lenzo e superficies lixeiramente rebaixadas. A sección "Explore" usa un deseño asimétrico de dúas columnas: a columna esquerda contén tarxetas de características apiladas, mentres que a columna dereita presenta unha ilustración molecular xeométrica. O contido está centrado en columnas estreitas (máximo ~600 px) para facilitar a lectura, en lugar de estenderse de bordo a bordo. O pé de páxina é un pozo rebaixado (#011d1c) cunha marxe vertical de 120 px, creando o efecto dunha piscina profunda. A navegación é un panel fino e transparente con elementos separados entre 16 e 24 px. O ritmo xeral é cinematográfico e espazoso: cada sección respira, e a combinación de cores profundas, semellantes á auga, crea a sensación de afundirse máis con cada pasaxe.
O estilo visual é minimalista e atmosférico. A páxina de inicio presenta unha esfera de partículas tridimensionais: miles de pequenos puntos azul turquesa e brancos que forman unha esfera xiratoria que reflicte o lenzo e detalles en rosa lavanda nos bordos, creando un efecto bioluminescente que lembra a un obxecto de información. Os diagramas moleculares xeométricos planos (círculos brancos e liñas de conexión finas sobre un lenzo escuro) serven como elementos decorativos na columna dereita. Sen fotografías, sen imaxes de estilo de vida, sen persoas: a linguaxe visual baséase en gráficos de datos limpos e formas abstractas. A esfera de partículas é o elemento visual definitorio da identidade da marca; debe aparecer polo menos unha vez en cada páxina importante para reforzar a metáfora das profundidades mariñas.
Paleta
Marca
- Liquid Abyss
#012624— O fondo principal é a base da páxina, a cabeceira, o elemento principal e o campo turquesa escuro dominante. Crea unha atmosfera mariña profunda. - Liquid Deep
#011d1c— O nivel da superficie rebaixada é o fondo do pé de páxina e os paneis de cartón máis profundos. Percíbese como un medio ton máis escuro que o lenzo, creando un sutil gradiente de profundidade descendente. - Liquid Kelp
#003734— Superficie elevada da tarxeta e recheo do botón: unha superficie elevada situada un chanzo por riba do abismo. Úsase para tarxetas de funcións, paneis de contido e o punto de inicio dun botón de degradado.
Neutro
- Liquid Mist
#edfffe— Un ton branco frío realza o corpo do texto, os títulos das seccións e a tipografía cálida e clara. Un sutil matiz azul une o corpo do texto á combinación de cores turquesa. - Platinum
#ffffff— O branco puro úsase para títulos, elementos de navegación, contornos de iconas e texto de alto contraste. É a cor principal do texto en todos os niveis de títulos e na navegación principal. - Silver Mist
#bbc7c6— Texto secundario, descricións apagadas e cor da ligazón no seu estado orixinal. Teñen un lixeiro ton verdoso que complementa o fondo turquesa. - Ash
#f2f2f2— Texto adicional para citas e reseñas. Un ton gris neutro e frío para cando o matiz turquesa de Silver Mist semella demasiado brillante. - Slate Deep
#707777— Un tinte superficial sutil para fondos inactivos ou de pouca visibilidade. Atópase entre a lona e o cartón, proporcionando unha diferenza de altura moi sutil. - Lavender Phosphor
#fde9ff— Cor de retroiluminación para estatísticas grandes, números de contadores e métricas importantes. O ton rosa no degradado característico úsase con moderación como acento luminoso en superficies escuras.
Tipografía
de 10 a 96 px · 6 pasos
- Matter — substitución: Inter · contornos 400, 500 · A fonte principal para os títulos e o corpo do texto úsase cun peso de 500 para todos os títulos (H1–H3) e o texto cinético grande (86–295 px). Para o corpo do texto e o texto da interface de usuario úsase un peso de 400. Presenta un espazado negativo agresivo entre letras en tamaños grandes (-0,04 em a 61 px, -0,046 em a 86 px) e un espazado positivo amplo entre letras nas maiúsculas dos títulos (0,08 em a 20 px, 0,12 em a 12 px, 0,15 em a 10 px). A estratexia de usar só un peso medio para os títulos é unha característica distintiva (sen letras grosas nin claras) que lle dá á fonte unha confianza uniforme e mecánica.
- Arial — substitución: system-ui · contornos 400 · Un recurso secundario para elementos interactivos da IU (navegación, botóns, microcopia da cabeceira, pé de páxina). Aparece só a 14 px; úsase como un recurso seguro e universal cando non se carga Matter e abrangue as etiquetas dos formularios, o texto dos botóns e o texto auxiliar pequeno.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 20px |
| Radio do botón | 6px |
| Radio da tarxeta | 16px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 68px |
| Largura da páxina | 1440px |
A IA creará o teu sitio web ao estilo de Auros e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Design Full-Time — un cine de estudio cun foco cálido
- Air — escultura "Ceo de medianoite a través do vidro"
- Slash — Bóveda de medianoite con libros maiores dourados
- Raycast — Centro de Comando de Medianoite, Coral Neon
- Dimension — unha estación de traballo iluminada ao anoitecer con paneis de vidro esmerilado
- Modal — Un terminal fosforescente nunha sala de servidores escura: a única fonte de luz é unha cor verde brillante.
- Giga — Horizonte de medianoite sobre obsidiana xeada
- Reflect Notes — O espazo estrelado violeta é un observatorio escuro onde as notas flotan coma constelacións contra un pano de fondo dun baleiro índigo case negro.
- Ameba — A sala de control á medianoite: un pulso azul eléctrico dentro de paneis de vidro esmerilado
- AgentQL — Auroras boreais sobre a terminal pola noite
- Frame — Un cine para proxeccións nocturnas. Unha sala escura onde un único foco azul fai todo o traballo e a interface de usuario desaparece no fondo, permitindo que o contido creativo se proxecte cara adiante.
- Harness — Control da Misión á medianoite con detalles en verde fosforescente