Auros
Terminale abissale con sfere dati bioluminescenti
Auros si presenta come un terminale fintech immerso nell'abisso: una tela turchese quasi nera con sfere dati bioluminescenti e sfumature di luce dal turchese al rosa, che creano un senso di profondità, fluidità e flusso. L'interfaccia è minimalista e cinematografica, basata su un singolo display utente (Matter) di medio spessore con un'aggressiva spaziatura negativa per creare un senso di scala senza risultare eccessivamente vistosa. I colori sono distribuiti uniformemente: bianchi e argenti cromatici sono utilizzati per quasi tutti i contenuti, mentre la palette cromatica è riservata alle sfumature atmosferiche, alle superfici distintive delle carte e a un singolo pulsante a forma di pillola, elemento distintivo del sistema, che cambia colore dal blu turchese al rosa lavanda. Le carte fluttuano su sottili creste turchesi (raggio di 16 pixel, senza ombre) anziché in altezza, in modo che la gerarchia venga percepita come la profondità dell'acqua piuttosto che come un'ombra su carta. I componenti appaiono curati e simili a strumenti: indicatori di tracciamento in maiuscolo, sottili icone a freccia geometriche, grandi display numerici in rosa pallido.
Una tela scura a tutta larghezza con contenuto a una larghezza massima di 1440px. L'elemento principale è un blocco di testo centrato (brow → titolo → sottotitolo → invito all'azione) che si estende per tutta l'altezza della viewport, con una particella come elemento di sfondo. Le sezioni sono strisce a tutta larghezza separate da ampi spazi verticali di oltre 68px, che si alternano tra tela e superfici leggermente rientranti. La sezione "Esplora" utilizza un layout asimmetrico a due colonne: la colonna di sinistra contiene schede di funzionalità impilate, mentre la colonna di destra presenta un'illustrazione molecolare geometrica. Il contenuto è centrato in colonne strette (massimo ~600px) per una facile lettura, anziché estendersi da bordo a bordo. Il piè di pagina è una rientranza (#011d1c) con un margine verticale di 120px, che crea l'effetto di una profonda pozza. La navigazione è un pannello sottile e trasparente con elementi distanziati di 16-24px. Il ritmo generale è cinematografico e arioso: ogni sezione respira, e la profonda palette di colori, simile all'acqua, crea la sensazione di sprofondare sempre più in profondità a ogni passaggio.
Lo stile visivo è minimalista e suggestivo. La homepage presenta una sfera di particelle tridimensionale: migliaia di minuscoli puntini turchesi e bianchi che formano una sfera rotante, richiamando la tela e gli accenti rosa lavanda lungo i bordi, creando un effetto bioluminescente che ricorda un oggetto informativo. Diagrammi molecolari geometrici piatti (cerchi bianchi e sottili linee di collegamento su uno sfondo scuro) fungono da elementi decorativi nella colonna di destra. Nessuna fotografia, nessuna immagine di lifestyle, nessuna persona: il linguaggio visivo si basa su grafici di dati puliti e forme astratte. La sfera di particelle è l'elemento visivo distintivo dell'identità del marchio; deve comparire almeno una volta in ogni pagina importante per rafforzare la metafora degli abissi marini.
Tavolozza
Marca
- Liquid Abyss
#012624— Lo sfondo principale è costituito dalla base della pagina, dall'intestazione, dall'elemento principale e da un campo turchese scuro dominante. Crea un'atmosfera da profondità marina. - Liquid Deep
#011d1c— La superficie incassata è costituita dallo sfondo del piede e da pannelli di cartone più profondi. Viene percepita come una mezzatinta più scura rispetto alla tela, creando una sottile gradazione di profondità verso il basso. - Liquid Kelp
#003734— Superficie della scheda in rilievo e riempimento del pulsante: una superficie in rilievo posizionata un gradino sopra il dislivello. Utilizzata per schede di funzionalità, pannelli di contenuto e come punto di partenza per un pulsante sfumato.
Neutro
- Liquid Mist
#edfffe— Una delicata tonalità di bianco mette in risalto il corpo del testo, i titoli di sezione e la tipografia calda e luminosa. Una sottile sfumatura blu collega il corpo del testo alla combinazione di colori turchese. - Platinum
#ffffff— Il bianco puro viene utilizzato per titoli, elementi di navigazione, contorni delle icone e testi ad alto contrasto. È il colore principale del testo in tutti i livelli di titolo e nella navigazione principale. - Silver Mist
#bbc7c6— Testo secondario, descrizioni attenuate e colore dei link nel loro stato originale. Hanno una leggera sfumatura verdastra che si armonizza con lo sfondo turchese. - Ash
#f2f2f2— Testo aggiuntivo per citazioni e recensioni. Una tonalità di grigio neutra e fredda, ideale quando il sottotono turchese di Silver Mist risulta troppo acceso. - Slate Deep
#707777— Una leggera tinta superficiale per sfondi inattivi o a bassa visibilità. Si posiziona tra la tela e il cartone, creando una differenza di altezza molto sottile. - Lavender Phosphor
#fde9ff— Colore di retroilluminazione per statistiche di grandi dimensioni, numeri di contatore e metriche importanti. La tonalità rosa nella sfumatura distintiva viene utilizzata con parsimonia come accento luminoso su superfici scure.
Tipografia
da 10 a 96px · 6 passaggi
- Matter — sostituzione: Inter · contorni 400, 500 · Il carattere principale per titoli e corpo del testo è utilizzato con un peso di 500 per tutti i titoli (H1–H3) e per il testo dinamico di grandi dimensioni (86–295px). Un peso di 400 è utilizzato per il corpo del testo e il testo dell'interfaccia utente. Presenta un'aggressiva spaziatura negativa tra le lettere nelle dimensioni maggiori (-0,04em a 61px, -0,046em a 86px) e un'ampia spaziatura positiva tra le lettere nelle maiuscole dei titoli (0,08em a 20px, 0,12em a 12px, 0,15em a 10px). La strategia di utilizzare solo un peso medio per i titoli è una caratteristica distintiva – nessun grassetto o leggero – che conferisce al carattere un aspetto uniforme e robusto.
- Arial — sostituzione: system-ui · contorni 400 · Un fallback secondario per gli elementi interattivi dell'interfaccia utente (navigazione, pulsanti, microtesto dell'intestazione, piè di pagina). Appare solo a 14px – utilizzato come fallback sicuro e universale quando Matter non è caricato e copre le etichette dei moduli, il testo dei pulsanti e il testo di aiuto di piccole dimensioni.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 20px |
| Raggio del pulsante | 6px |
| Raggio della carta | 16px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 68px |
| Larghezza del pannello | 1440px |
L'IA creerà il tuo sito web nello stile Auros e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Design Full-Time — una sala cinematografica in studio con un riflettore caldo
- Air — scultura "Cielo di mezzanotte attraverso il vetro"
- Slash — Cripta di mezzanotte con registri dorati
- Raycast — Centro di comando di mezzanotte, Coral Neon
- Dimension — una postazione di lavoro illuminata dal crepuscolo con pannelli in vetro satinato
- Modal — Un terminale fosforescente in una sala server buia: l'unica fonte di luce è di un verde brillante.
- Giga — Orizzonte di mezzanotte su ossidiana ghiacciata
- Reflect Notes — Lo spazio viola stellato è un osservatorio oscuro dove le note fluttuano come costellazioni su uno sfondo di vuoto indaco quasi nero.
- Ameba — La sala di controllo a mezzanotte: un impulso blu elettrico all'interno di pannelli di vetro smerigliato.
- AgentQL — Aurora boreale sopra il terminal di notte
- Frame — Una sala cinematografica per proiezioni a tarda notte. Una stanza buia dove un unico riflettore blu fa tutto il lavoro e l'interfaccia utente si dissolve sullo sfondo, permettendo ai contenuti creativi di emergere in primo piano.
- Harness — Centro di controllo missione a mezzanotte con dettagli verde fosforescente