Huly
Aurora boreale all'Osservatorio di mezzanotte: il protagonista è un raggio verticale di viola che sfuma nel corallo, e ogni sezione tranquilla sottostante riprende la stessa storia bicolore raccontata con un tono più tenue.
Huly evoca l'atmosfera di uno spazio di lavoro cosmico: una tela quasi nera con un singolo bagliore viola-ambra che attraversa l'elemento principale e, al di sotto, una griglia più sobria per una maggiore produttività. Il sistema opera all'interno di una gamma di colori ristretta: un blu brillante e un corallo si occupano di tutta la comunicazione del marchio su superfici grafite stratificate, quindi la modalità scura non risulta mai neutra. La tipografia è in stile Inter per tutto ciò che è funzionale, con un font personalizzato (Esbuild) riservato ai punti chiave, con un passo di 80-84px e un'aggressiva spaziatura negativa tra le lettere. I componenti hanno una forma a capsula: raggio di 9999px per i controlli, 12px per le schede, ombra minima e linee sfumate luminose come decorazione principale. La pagina alterna aree scure a tutta pagina e sezioni chiare e delicate, quindi ogni nuova schermata dovrebbe decidere la modalità prima di scegliere i colori.
La homepage a tutta larghezza presenta un fascio verticale di aurora boreale e un titolo allineato a sinistra, insieme a uno screenshot del prodotto posizionato in basso a destra. Sotto la homepage si trova un'area di contenuto di larghezza massima, 1200px, con strisce scure e chiare alternate. Ogni sezione è un singolo blocco verticale: un'intestazione più una griglia di schede a 3 o 4 colonne separate da spazi di 96px. La sezione "MetaBrain" interrompe la griglia con un titolo centrato e un mosaico di schede di diverse dimensioni (una scheda principale grande più schede di supporto più piccole). La pagina è ricca di contenuti, in linea con gli standard SaaS, ma utilizza strisce scure e chiare alternate per dare respiro a ogni sezione. La navigazione è costituita da una singola barra superiore trasparente che diventa opaca scorrendo la pagina.
L'elemento principale è una sfumatura aurora boreale pura, priva di fotografie. Tutte le illustrazioni sono screenshot reali dell'interfaccia utente del prodotto (Kanban in modalità scura, posta in arrivo, calendario), incorniciate in cornici a cartoncino che fungono sia da prova che da elemento decorativo. Nessuna foto di lifestyle, nessuna immagine di repertorio, nessun rendering 3D. L'unico elemento visivo non correlato all'interfaccia utente è un caldo bagliore radiale a raggiera alla base dell'aurora, realizzato con una sfumatura CSS. Le icone sono icone monocromatiche lineari in #95979 o bianche, mai multicolore. Il sistema considera la propria interfaccia utente scura come l'elemento principale: il prodotto sono le fotografie.
Tavolozza
Marca
- Electric Iris
#5683da— Lo sfondo principale, l'indicatore di navigazione attivo e il suggestivo accento dell'aurora boreale (un vibrante colore blu-violetto su uno sfondo nero intenso) creano un'impressione di coinvolgimento piuttosto che di attività aziendale. - Ember Pulse
#ff8964— Un accento secondario, una calda zona di aurora boreale, un punto di notifica e un elemento di spicco nell'illustrazione: una tonalità ambrata che rompe la sobrietà del blu e aggiunge calore al fascio.
Neutro
- Obsidian Canvas
#303236— Lo sfondo della pagina, la superficie dominante, è di un colore quasi nero con una leggera sfumatura calda, l'ambiente standard per tutti i contenuti. - Void
#090a0c— Lo strato superficiale più profondo per le sfumature nella schermata principale, negli sfondi modali e nelle cornici che devono fondersi con la tela. - Charcoal Card
#111111— Superfici rialzate realizzate in cartone e pannelli, posizionate un gradino sopra la tela. - Slate Edge
#4a4b50— Bordi e divisori discreti su superfici scure - Iron Veil
#6b6c6d— Sfondo attenuato per tag, elementi di elenco e campi di testo disabilitati. - Smoke
#95979e— I contorni delle icone, il testo aggiuntivo e i controlli inattivi sono l'elemento funzionale principale, di colore grigio medio.
Tipografia
da 11 a 80px · 8 passaggi
- Inter — sostituzione: DM Sans · contorni 300, 400, 500, 600, 700 · Tutto il testo funzionale nell'interfaccia utente (corpo del testo, navigazione, pulsanti, elementi di elenco, etichette e titoli di piccole dimensioni) è utilizzato con un peso del carattere di 500-600 per l'enfasi, 400 per il corpo del testo e 300 con parsimonia per i metadati non invasivi.
- Esbuild — sostituzione: Sora · contorni 400, 500, 600 · Solo visualizzazione: titoli a comparsa, intestazioni di sezione e titoli degli articoli di MetaBrain. La geometria condensata e la spaziatura ridotta tra le lettere creano l'impressione che 84px sia più adatto al lavoro editoriale che ai progetti SaaS. Non utilizzare mai al di sotto di 28px.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | spazioso |
| Passo base | 12px |
| Raggio del pulsante | 9999px |
| Raggio della carta | 12px |
| Ombre | ombre morbide |
| Tra le sezioni | 96px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Huly 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
- monday — Laboratorio bianco con adesivi pastello
- Slack — Il palcoscenico è color melanzana con faretti bianchi. Una profonda tonalità prugna domina le zone d'ombra, mentre la tela bianco sporco permette ai grandi titoli d'avanguardia di risaltare liberamente.
- Base44 — Quaderno illuminato dal sole con pennarello verde lime
- Supahub — Luce tenue su una cresta violacea. Una tela prevalentemente bianca e ariosa, illuminata da un unico sole viola brillante, con sfere decorative sfumate che diffondono colore nello spazio negativo e una geometria generosa e arrotondata che conferisce a ogni superficie una piacevole e tangibile pesantezza.
- Raycast — Centro di comando di mezzanotte, Coral Neon
- Dimension — una postazione di lavoro illuminata dal crepuscolo con pannelli in vetro satinato
- Wiza — Un osservatorio per l'esplorazione minerale al crepuscolo, avvolto da una nebbia color lavanda.
- Paste — Una lanterna color ambra su marmo bianco: il logo del marchio, dalle calde sfumature, aleggia nell'ampio spazio bianco, come l'unica finestra illuminata in un edificio innevato.
- Reworkd — La tenue luce del giorno nel diagramma del prodotto è l'unico colore che parla da sé, è il pulsante di azione e il titolo sfumato sopra di esso.
- 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.
- Todoist — Uno spazio di lavoro illuminato dal sole con un'agenda cartacea: una scrivania color crema caldo, appunti a inchiostro, una penna rossa.