Apple

Tavolozza

Marca

• Apple Blue #0071e3 — Pulsanti di azione riempiti, stati selezionati: l'unico colore cromatico interattivo utilizzato con parsimonia per rendere significativo ogni aspetto.
• Link Blue #0066cc — Bordi delle azioni evidenziati, link incorporati: viene utilizzato un colore più saturo del blu Apple laddove una tavoletta piena risulterebbe troppo appariscente.
• Signal Blue #2997ff — Cornici decorative, contorni delle immagini, bordi delle icone: il colore blu più chiaro del sistema, utilizzato per creare atmosfera piuttosto che per l'interazione con l'utente.

Neutro

• Carbon #1d1d1f — Il testo principale, i bordi dei titoli, le linee di navigazione, i bordi delle schede: il colore dell'inchiostro predominante è quasi nero con una leggera sfumatura calda.
• Frost #f5f5f7 — Lo sfondo della pagina, il testo principale e il piè di pagina sono del caratteristico grigio chiaro di Apple, una tonalità leggermente più fredda del bianco puro.
• Ice #f4f8fb — Riempimenti di superficie espressivi, tonalità delicate, testo dei pulsanti su sfondo scuro: una tenue sfumatura di blu che ravviva la sezione senza renderla troppo appariscente.
• Smoke #333333 — Testo secondario, riempimento della navigazione, bordi dei pulsanti: un colore neutro e versatile per bordi e icone che necessitano di un tocco più deciso rispetto a un grigio medio.
• Graphite #474747 — Testo di navigazione, bordi di navigazione, bordi dei link: occupa una posizione intermedia tra Carbonio e Fumo nella gerarchia degli elementi.
• Ash #707070 — Testo a piè di pagina, bordi degli elenchi, bordi della navigazione, testo del corpo attenuato: un grigio medio per i contenuti che devono essere presenti ma non in primo piano.

Tipografia

da 12 a 56 pixel · 8 passaggi

• SF Pro Display — sostituzione: Inter · contorni 400, 600, 700 · Titoli e testi di grandi dimensioni (40px e oltre) utilizzano un formato di visualizzazione con un'apertura più stretta e un tracciamento negativo più forte; 700 è riservato ai layout pubblicitari e 400 è per i nomi dei prodotti nei contenuti editoriali.
• SF Pro Text — sostituzione: Inter · contorni 300, 400, 600 · Testo del corpo, navigazione, pulsanti, sottotitoli: carattere di lavoro; 400 per il testo del corpo, 300 per sottotitoli ed etichette qualificate, 600 per elementi di navigazione e testo dei pulsanti; la spaziatura negativa tra le lettere diminuisce proporzionalmente alla dimensione (da -0,022em a 12px a -0,01em a 44px).

Intervalli e forma

Stili simili

• Studio — Una parete di galleria in movimento. Ogni schermo rappresenta una superficie espositiva silenziosa e grigia dove materiali tipografici e opere creative sovrapposte competono per attirare l'attenzione.
• Mollie — Un bancone in cashmere, un registro contabile scuro. Lascia ampio spazio bianco per la grafica editoriale attorno al testo nero, quindi rafforza i punti relativi al prodotto con tonalità crema calde, marroni caffè espresso e foto realistiche dei metodi di pagamento.
• Basis Theory — Terminali di pagamento nello studio di design. Carta tecnica bianca, strati di transazione traslucidi sovrapposti e un singolo elemento di controllo turchese definiscono la direzione visiva.
• CleanShot X — Uno studio con una scrivania illuminata di blu. Crea uno spazio bianco e rilassante attorno a un testo nero compatto, poi lascia che i comandi di un blu intenso e le immagini sovrapposte dei prodotti Mac siano i protagonisti.
• Modern Treasury — Un registro di tesoreria su carta millimetrata. Create pagine che assomiglino a un semplice foglio operativo bianco, dove i flussi di cassa sono visualizzati con linee sottili, nodi etichettati e precisi controlli nascosti.
• Basha-Franklin — Una griglia a galleria sotto un architrave bianco. Utilizza una calda tonalità #f4ede6, una struttura nera discreta e colonne asimmetriche ispirate a fotografie che ricordano un portfolio architettonico stampato.
• Bajgart Office — Parete dedicata alla galleria editoriale. Utilizzate un ampio spazio bianco dove caratteri serif discreti e frammenti di portfolio abbiano un impatto visivo maggiore rispetto a elementi di interfaccia cromati.
• Heptabase — Una scrivania illuminata dal sole. Superfici calde, simili alla carta, comandi color antracite e finestre fluttuanti per la ricerca creano la sensazione di uno spazio di lavoro organizzato piuttosto che di un pannello di controllo di un software.
• Bejamas — Pigiama: verde lime acido attraverso vetro nero. Crea pagine editoriali calme e grigio chiaro, interrotte da accattivanti pannelli neri dove sfocate striature di luce verde intersecano la superficie.
• Baba — Note di cura sotto la luce del sole rossa. Crea ampie strisce narrative rosse attorno a superfici informative intime bianche, rosa e crema, utilizzando fotografie di persone come centro emotivo.
• Grafana Labs — La sala di controllo della stazione di segnalazione Sunrise. Un ambiente di lavoro silenzioso, nei toni del grigio e del bianco, si combina con un ampio gradiente di colore a quattro tonalità e precisi segnali di interfaccia blu.
• Kagi — Una sala lettura separata. Create uno spazio bianco e aperto attorno a un testo in grafite audace, utilizzando delicati accenti viola e superfici dai toni pastello caldi per rompere la tranquillità.

Catalogo degli stili per categoria