Caldera

Tavolozza

Marca

• Ember #fc5000 — I pulsanti di azione principali, le schede statistiche e gli elementi visivi chiave sono gli unici a presentare un accento di colore aggressivo; la sua intensità, in contrasto con le calde tonalità di grigio, crea un senso di urgenza senza bisogno di ulteriori elementi decorativi.
• Plasma Violet #524ae9 — Base principale con gradiente a mezzitoni, una superficie aggiuntiva per la scheda - Utilizzata quasi esclusivamente nel motivo a punti principale e su una scheda dedicata; mai utilizzata per i controlli.

Neutro

• Sulfur #f5f28e — Lo sfondo delle icone di tag e categorie, piccole evidenziazioni, è di un giallo tenue utilizzato per indicare le categorie dei post del blog e gli annunci del programma.
• Limestone #f7f6f2 — Le superfici delle schede, gli sfondi dei blocchi di contenuto e i riempimenti aggiuntivi dei pulsanti presentano una tonalità di bianco più chiara e calda che fa risaltare gli elementi rispetto allo sfondo della pagina.
• Pumice #e2e2df — Lo sfondo principale della pagina è di un grigio medio caldo che funge da base per ogni sezione; è leggermente più scuro della superficie del cartoncino, consentendo una sottile separazione tra figura e sfondo senza ombre.
• Obsidian #070607 — Il testo principale, i titoli, il testo dei link e le cornici dei pulsanti sono quasi neri con una leggera sfumatura calda appena percettibile che si abbina ai colori caldi della tela.
• Chalk #ffffff — Testo in sezioni scure, testo di input su sfondi scuri, sovrapposizioni ad alto contrasto: il bianco puro viene utilizzato solo dove è richiesto il massimo contrasto con le superfici scure.

Tipografia

da 12 a 189px · 10 passaggi

• PP Neue Corp Compact — sostituzione: Bebas Neue · contorni 400 (Ultrabold cut) · Tutti i titoli e il testo in evidenza. Un font personalizzato, condensato e ultra-grassetto conferisce ai titoli un aspetto industriale, quasi da insegna. La dimensione di 189px nel blocco principale riflette lo stile distintivo del marchio: condensato, quasi strutturale piuttosto che tipografico. Le impostazioni "ss06" e "ss10" attivano forme delle lettere e spaziature alternative per un ritmo più aggressivo e condensato. La spaziatura positiva tra le lettere (+0,02em) è insolita per le dimensioni in evidenza e impedisce una sensazione di testo compresso tra 80 e 189px.
• DM Sans — sostituzione: Inter · contorni 500 (Medium only — never Regular or Bold) · Il testo principale, i link di navigazione, le etichette dei pulsanti e le intestazioni secondarie hanno una dimensione massima di 30 pixel. La scelta del peso medio del carattere è stata intenzionale: il Regular risulterebbe troppo sottile rispetto al carattere extra-grassetto delle intestazioni, mentre il Bold creerebbe un contrasto eccessivo. DM Sans crea un contrappunto umanistico e leggermente geometrico al carattere industriale delle intestazioni.
• System sans-serif — sostituzione: Inter · contorni 400 · Didascalie, metatesti, date, microtag. Utilizzati solo in 12px, dove il peso e il riconoscimento del marchio sono meno importanti del risparmio di spazio.

Intervalli e forma

Stili simili

• teenage engineering — Catalogo industriale di illuminazione da studio: il prodotto è l'unico oggetto significativo della pagina, e tutto il resto ruota attorno ad esso.
• basement — Una macchina da stampa vuota alle 3 del mattino: caratteri enormi e compressi si stagliano nel nero pece, un singolo barlume di luce arancione sulla barra di navigazione, tutto il resto bianco o di un grigio spettrale.
• amra — Una sfera iridescente su sfondo bianco: l'accento lavanda è l'unico tocco di colore su una pagina quasi perfettamente acromatica, e la singola sfera sfumata svolge la funzione che solitamente spetta all'illustrazione principale.
• Stink Studios — Uno studio cinematografico a mezzanotte: il proiettore ronza, la stanza è buia, solo la pellicola è illuminata.
• Andrei Rybin — Un quaderno da disegno monocromatico è un taccuino di design in cui gli schermi dei telefoni sono attaccati a una parete bianca come i fogli di contatto.
• Uniswap Cup — La trasmissione della competizione di eSport si svolge su un sito di prova: un pennarello rosa delinea una griglia di quadrati bianchi e linee sottili.
• Freytag Anderson — Il sipario del cinema si alza su una sola parola. Un'enorme immagine in movimento occupa l'intero schermo, il nome del marchio è posizionato in un angolo come un titolo e nient'altro distrae.
• Integrated Biosciences — laboratorio di bioluminescenza a mezzanotte
• Vercel — Terminale stampato su carta bianca
• Mintlify — Un giardino di nuvole sopra un tavolo di vetro. Il cielo disegnato a mano e il documentario sono incorniciati insieme: l'unico punto in cui colore e concetto si fondono prima che la pagina svanisca in un bianco monastico.
• Gleap — Uno spazio di lavoro decorato con calde tonalità crema e accenti color grafite: uno studio dove punti di inchiostro nero opaco sembrano fluttuare sopra la struttura in lino.
• ClickUp — Una dashboard di grande impatto su sfondo di marmo bianco. La pagina è una brochure di prodotto per uno strumento di produttività, quindi il linguaggio visivo è mutuato dal prodotto stesso: elenchi densi, indicatori di stato, gruppi di avatar e affermazioni tipografiche in grassetto che sembrano le specifiche di un prodotto esposto.