
Ciridae
Una stanza vuota percorsa dal pulsare di braci ardenti: una cattedrale quasi nera dove l'unico suono caldo è un sottile fruscio di ruggine e ogni superficie è definita da linee delicate anziché da ombre.
Ciridae opera nel vuoto: una tela #0b0b0b, controlli a forma di pillola con contorni appena percettibili e tipografia bloccata nel maiuscolo di Pragmatica Cond con spessore 400 – niente grassetto, niente maiuscole/minuscole miste, niente elementi decorativi. L'unica nota cromatica è #cc6437, una calda tonalità ruggine fumante usata per i tratti più sottili e i piccoli segni di punteggiatura, mai come riempimento. Le mappe fluttuano su #272a2a con un raggio di 10px e senza ombre; il sistema evita l'elevazione, definendo le superfici attraverso il contrasto tonale e bordi sottilissimi di 1px. Le fotografie sono fortemente sfocate e suggestive – marmo liquido, fumo, fuoco – posizionate dietro il testo in modalità a schermo intero, in modo che l'immagine visiva risulti più atmosferica che illustrativa.
Il layout della pagina occupa tutta la larghezza, con il contenuto centrato entro una larghezza massima di circa 1400 pixel. L'elemento principale (hero) è una composizione scura a tutta larghezza con un logo a forma di costellazione centrato, affiancato da micro-etichette sui lati sinistro e destro. Le sezioni si alternano: elemento principale scuro → striscia chiara con sottostrati (Bone) → testo scuro con effetto di trasformazione → griglia scura di schede di sistema → piè di pagina scuro. L'unica sezione chiara crea una transizione tonale netta e lineare. La griglia di schede utilizza 4 colonne, con la prima scheda larga circa il doppio delle altre tre, creando un layout asimmetrico che enfatizza il contenuto. Lo spazio verticale tra le sezioni è generoso (oltre 80 pixel). La navigazione è minimale: una barra delle notizie in alto + un pulsante "Inizia ora" allineato a sinistra e un pulsante "Menu" allineato a destra nella barra superiore. Nessuna barra laterale, nessun mega-menu.
Fotografie suggestive, che occupano l'intera superficie della pagina, dominano la schermata iniziale e le schede. Le immagini sono fortemente sfocate (sono stati rilevati valori di sfocatura dello sfondo di 50px e 40px) e ad alto contrasto, e raffigurano marmo liquido con vortici blu-rossi, fumo, silhouette scure di paesaggi e texture di fuoco/brace. Le fotografie sono malinconiche e scure, non vibranti: condividono la stessa gamma tonale dello sfondo bianco anziché risaltare su di esso. Non ci sono foto di prodotti, né persone, né screenshot dell'interfaccia utente. Le immagini creano atmosfera anziché fungere da contenuto illustrativo. La griglia delle schede associa ogni sistema a una diversa scena suggestiva, consentendo alle fotografie di funzionare come identificatori visivi astratti piuttosto che come immagini letterali del prodotto.
Tavolozza
Marca
- Ember Rust
#cc6437— I tratti di accento, le linee delle icone e le piccole evidenziazioni del testo sono gli unici elementi cromatici in un sistema monocromatico, apparendo più come un punto pulsante appena percettibile che come un riempimento.
Neutro
- Void Black
#0b0b0b— Immagini di sfondo per la pagina principale e le sezioni; la base dell'intero sistema. - Charcoal Surface
#272a2a— Le immagini di sfondo, realizzate in cartone e pannelli nelle zone scure, sono di una tonalità più chiara rispetto alla tela, in modo da creare una separazione delle superfici senza ombre. - Bone
#edebe7— Le zone chiare dello sfondo e della superficie sono color crema, dove il sistema passa da scuro a chiaro. - Bone Darker
#dfddd9— Una delicata tonalità chiamata "Osso" per superfici chiare multistrato ed elementi di un colore caldo, quasi bianco. - Pure White
#ffffff— Tutto il testo principale e le intestazioni, i bordi dei pulsanti trasparenti e gli elementi di navigazione sono nel colore primario con un rapporto di contrasto di 19,7:1 su uno sfondo nero Void. - Abyss
#050505— Sfondo in rilievo per la striscia di notizie (striscia di notizie superiore) - una tonalità più scura rispetto alla tela principale per far risaltare la striscia.
Tipografia
da 11 a 32 pixel · 5 passaggi
- Pragmatica Cond — sostituzione: Oswald · contorni 400 · Il carattere principale per la visualizzazione e l'interfaccia utente è un carattere stretto e condensato con 14 pixel in maiuscolo per il corpo del testo, 20 pixel per i titoli di sezione e 32 pixel per il testo principale. Un carattere estremamente stretto e 14 pixel in maiuscolo per il corpo del testo è la soluzione più caratteristica per il sistema: il corpo del testo si legge come un sussurro di un carattere tipografico architettonico piuttosto che come una normale prosa. Sostituire con Oswald o Barlow Condensed se Pragmatica Condensed non è disponibile.
- Pragmatica — sostituzione: Inter · contorni 400 · Un carattere secondario, ma primario, utilizzato per passaggi di prosa più lunghi (ad esempio, la descrizione della scheda "AI Operating System" è di 24px, il testo del paragrafo è di 15px). Leggermente più largo di Pragmatica Cond per facilitare la lettura in blocchi più grandi, ma comunque con uno spessore di 400 punti – mai in grassetto. Sostituire con Inter o Söhne.
- Roboto Mono — sostituzione: Roboto Mono (free · contorni 400 · Un microfont a spaziatura fissa per un notiziario scorrevole ("NEWS • JUNE 15, 2026 • CRUCIBLE EARLY ACCESS NOW OPEN"). Il font a spaziatura fissa viene utilizzato solo qui, creando una chiara distinzione funzionale: si tratta di dati di sistema, non di branding.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 16-20px |
| Raggio del pulsante | 1440px |
| Raggio della carta | 10px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 80px |
| Larghezza del pannello | 1400px |
L'IA creerà il tuo sito web nello stile Ciridae 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
- Dala — una costellazione sospesa su velluto nero
- Linear — strumento di precisione di mezzanotte
- Resend — velluto nero con dettagli viola neon
- Dovetail — Un progetto sotto una luna nera: linee del grafico appena visibili, caratteri bianchi, un luccichio viola
- Neon — Una sala server al calar della notte. Oscurità assoluta, dove l'unica luce proviene dai dati e dalle interazioni degli utenti.
- Discord — Il mondo di gioco è nascosto dietro una finestra di chat a comparsa: ogni sezione è un ambiente autonomo con una propria illuminazione e un proprio set di personaggi.
- Aaru — Osservatorio del campo di particelle a mezzanotte
- Atlas Card — La Cripta di Mezzanotte, con il suo unico raggio di zaffiro, è una distesa di oscurità impenetrabile dove l'unica cosa che conta è il profondo blu elettrico.
- Midjourney — Un terminale bioluminescente nelle profondità oceaniche. Un mondo sottomarino dove l'intelligenza si genera visivamente in flussi ASCII e i comandi appaiono come motivi debolmente luminosi.
- Checkly — Centro di controllo della missione in orbita profonda
- Krea — galleria nera a mezzanotte
- Wope — Wope è un'interfaccia a orizzonte viola. Immaginate un tavolo scuro da osservatorio con una luce viola che filtra da sotto il vetro.