Trois rôles : « primary » pour l'identité de marque, « ink » pour les polices et les surfaces, et « signals » pour les nuances et les bordures. Cliquez sur n'importe quel code hexadécimal ou RVB pour le copier.

Produit principal et marque

Encre et caractères

Signaux et surfaces

Une police à empattement pour les titres, une police sans empattement pour tout le reste. DM Serif Display apporte une touche chaleureuse et une prestance éditoriale ; Inter est idéale pour la lecture de textes longs et les interfaces utilisateur, sans créer de distraction.

Deux échelles. Article est destiné aux contenus détaillés, aux articles de blog et aux pages de programmes. Affichage est destiné aux sections « héros », aux pages d'accueil et aux moments clés du marketing où la typographie doit jouer un rôle plus important. Les tailles indiquées ci-dessous correspondent à la taille maximale sur ordinateur de bureau — les titres s'affichent sous la forme clamp() elles s'affichent donc en plus petit sur les téléphones.

Inter 16 / 600, padding : 1rem 2rem, rayon de 8 px, transition de couleur de 0,18 s. Les styles de liens de Squarespace s'étendent aux blocs de code, de sorte que les ancres des boutons sont toujours définies couleur et text-decoration avec !important.

Éléments réutilisables. Ceux-ci apparaissent dans les articles de blog, sur les pages consacrées aux programmes et dans les contenus destinés aux donateurs. Privilégiez un modèle existant plutôt que d’en inventer un nouveau : c’est par la répétition, et non par la nouveauté, que la marque conserve sa cohérence.

Le mouvement est une suggestion, pas une mise en scène. Tout évolue selon la même courbe brève, et rien ne bouge sans raison.

• Transitions

  de 0,18 s à 0,2 s facilité concernant la couleur, l'arrière-plan, la bordure et l'opacité. Rien de plus long, rien de trop animé.

• Survol de la carte

  La bordure est définie sur « TCF Cyan » avec un anneau assorti de 1 px (box-shadow : 0 0 0 1px #00B4DB). Non transY Mise à jour des fiches dans le nouveau système — les anciennes fiches sont supprimées au fur et à mesure de la refonte des pages.

• Survol du grand livre

  Lorsque vous passez la souris sur une ligne, ses éléments frères sont déplacés vers opacité : 0,55, met la phrase en italique en cyan et déplace la flèche de 4 px. La ligne sur laquelle se trouve le curseur conserve une opacité maximale.

• Thème principal

  Chaque élément interactif est :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Ne retirez jamais les bagues de mise au point sans les remplacer.

• Interdit

  Pas de pulsation, de lueur, de rebond, de parallaxe ni de mouvement en lecture automatique. Pas d'animation qui se répète lorsque la page est inactive.

Le site fonctionne sous Squarespace 7.1 ; ainsi, la plupart des nouveaux travaux de conception sont fournis sous la forme d'un bloc de code autonome intégré dans une section du moteur Fluid. Ces règles permettent d'éviter que ces blocs n'entrent en conflit entre eux ou avec la plateforme.

• Préfixe de classe

  Chaque nouveau bloc utilise le tcfx- préfixe. tcf- appartient à l'ancien CSS personnalisé et entraînera un conflit.

• Réinitialisation limitée au champ uniquement

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } et rien de plus large. Une largeur équivalente à celle de la page * La réinitialisation a déjà provoqué des dysfonctionnements sur le site.

• Tout classer dans des espaces de noms

  Appliquez chaque règle à la classe racine du bloc. Un bloc de code doit pouvoir être copié-collé en toute sécurité sur n'importe quelle page sans entraîner d'effets indésirables.

• Commencez par importer

  Si un <style> utilisations @import Pour les polices, cela doit figurer sur la première ligne de cette balise, sinon le navigateur l'ignore.

• Aucun commentaire

  Le code HTML et CSS de production est fourni sans commentaires. Veuillez plutôt documenter le bloc dans les notes du projet.

• Pas d'émojis comme icônes

  Texte, chiffres ou éléments SVG intégrés. Les emojis s'affichent de manière inégale selon les plateformes et sont perçus comme informels.

• Bleu marine, pas noir

  La couleur « Deep Navy » remplace le noir partout dans l'interface utilisateur. Le noir pur est réservé aux médias.

• Priorité au mobile

  Prenez la disposition de l'écran du téléphone comme base et ajoutez min-width requêtes vers le haut. Empilements sur une seule colonne, clamp() police, espacement réduit en dessous de 640 px, zones cliquables adaptées au tactile.

• Liens externes

  target="_blank" est toujours livré avec rel="noopener noreferrer".

• Le texte est reproduit mot pour mot

  Lorsque vous remaniez une page existante, veillez à conserver à l'identique les titres, le corps du texte, les URL et les paramètres UTM. Signalez toute modification plutôt que de la procéder en silence.

• Conservez le H1

  Les héros remaniés conservent exactement une balise H1 avec son libellé d'origine, pour des raisons de référencement. Évitez les balises de Squarespace texte mis en échelle par la racine carrée élément d'encadrement — sa taille en ligne peut disparaître lors de l'exécution et entraîner l'effondrement du titre.

• Reprise de la section

  Pour assombrir la section d'un bloc, sélectionnez le calque d'arrière-plan, et non la zone de la section — peinture .page-section rende les contours d'un séparateur de tracé de clip plus carrés.

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