Tre categorie: "primaria" per l'identità del marchio, "inchiostro " per i caratteri e le superfici, "segnali" per le sfumature e i bordi. Clicca su qualsiasi codice esadecimale o RGB per copiarlo.

Primario e di marca

Inchiostro e caratteri

Segnali e superfici

Un carattere serif per i titoli, un sans-serif per tutto il resto. DM Serif Display conferisce calore e autorevolezza editoriale; Inter si presta alla lettura di testi lunghi e all’interfaccia utente senza creare distrazioni.

Due scale. Articolo è pensato per contenuti di lunga durata, post di blog e pagine dedicate ai programmi. Visualizza è pensato per le sezioni "hero", le landing page e i momenti di marketing in cui il testo deve svolgere un ruolo più incisivo. Le dimensioni riportate di seguito rappresentano il limite massimo per il desktop — i titoli vengono visualizzati come clamp() quindi si ridimensionano sui telefoni.

Inter 16 / 600, padding: 1rem 2rem, raggio di 8 px, transizione del colore di 0,18 s. Gli stili dei link di Squarespace si estendono ai blocchi di codice, quindi gli anchor dei pulsanti sono sempre impostati colore e text-decoration con !important.

Elementi ricorrenti. Questi compaiono nei post del blog, nelle pagine dei programmi e nei contenuti destinati ai donatori. È meglio ricorrere a uno schema già esistente piuttosto che inventarne uno nuovo: la coerenza del marchio si mantiene grazie alla ripetizione, non alla novità.

Il movimento è un accenno, non una rappresentazione. Tutto si muove lungo la stessa curva breve, e nulla si muove se non è necessario.

• Transizioni

  da 0,18 s a 0,2 s facilità per quanto riguarda il colore, lo sfondo, il bordo e l'opacità. Niente di più lungo, niente di troppo vivace.

• Al passaggio del mouse sulla scheda

  Il bordo è in TCF Cyan con un anello abbinato di 1px (box-shadow: 0 0 0 1px #00B4DB). No transY Inserimento delle schede nei nuovi lavori — i sistemi di inserimento preesistenti vengono rimossi man mano che le pagine vengono ricostruite.

• Passaggio del mouse sul registro

  Passando il mouse su una riga, le righe adiacenti vengono spostate a opacità: 0,55, trasforma la frase in corsivo in ciano e sposta la freccia di 4px. La riga su cui si passa il mouse mantiene la massima opacità.

• Focus

  Ogni elemento interattivo viene :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Non rimuovere mai le ghiere di messa a fuoco senza sostituirle.

• Non consentito

  Nessun effetto di pulsazione, bagliore, rimbalzo, parallasse o movimento in riproduzione automatica. Nessuna animazione che si ripeta mentre la pagina rimane inattiva.

Il sito funziona con Squarespace 7.1, quindi la maggior parte dei nuovi progetti grafici viene fornita sotto forma di blocco di codice autonomo inserito in una sezione del Fluid Engine. Queste regole impediscono che tali blocchi entrino in conflitto tra loro o con la piattaforma.

• Prefisso della classe

  Ogni nuovo blocco utilizza il tcfx- prefisso. tcf- appartiene al CSS personalizzato legacy e causerà un conflitto.

• Solo reset con ambito

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } e niente di più largo. Una larghezza pari a quella della pagina * Il reset ha già causato malfunzionamenti al sito in passato.

• Assegnare uno spazio dei nomi a tutto

  Verifica ogni regola presente nella classe radice del blocco. Un blocco di codice dovrebbe poter essere incollato in qualsiasi pagina senza effetti collaterali.

• Importa prima

  Se un <style> utilizzi @import Per i font, deve trovarsi nella prima riga di quel tag, altrimenti il browser lo ignora.

• Nessun commento

  I file HTML e CSS di produzione vengono forniti senza commenti. Documenta invece il blocco nelle note di progetto.

• Nessuna emoji come icona

  Testo, numeri o SVG incorporati. Le emoji vengono visualizzate in modo non uniforme sulle diverse piattaforme e sono percepite come informali.

• Blu navy, non nero

  Il colore "Deep Navy" sostituisce il nero in tutta l'interfaccia utente. Il nero puro è riservato ai contenuti multimediali.

• Mobile first

  Utilizza il layout del telefono come base e aggiungi min-width query verso l'alto. Pile a colonna singola, clamp() carattere, margini ridotti al di sotto dei 640px, aree di interazione ottimizzate per il tocco.

• Collegamenti esterni

  target="_blank" viene sempre fornito con rel="noopener noreferrer".

• Il testo è riportato alla lettera

  Quando si rimodella una pagina esistente, è necessario mantenere esattamente i titoli, il testo del corpo, gli URL e i parametri UTM. Segnalare eventuali modifiche apportate, anziché effettuarle in modo silenzioso.

• Mantieni l'H1

  Gli eroi ricostruiti mantengono esattamente un H1 con il testo originale, per motivi di SEO. Evitate Squarespace's testo con scala quadrata wrapper — la sua dimensione in linea può scomparire durante l'esecuzione e causare il collasso dell'intestazione.

• Acquisizione della sezione

  Per rendere scura la sezione di un blocco, seleziona il livello di sfondo, non il riquadro della sezione — pittura .page-section elimina qualsiasi divisore clip-path.

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}