Drei Funktionen: „Primary“ für die Markenidentität, „Ink“ für Schrift und Oberflächen, „Signals“ für Farbtöne und Rahmen. Klicken Sie auf einen beliebigen Hex- oder RGB-Code, um ihn zu kopieren.

Primärmarkt & Marke

Tinte & Schrift

Signale & Oberflächen

Eine Serifenschrift für Überschriften, eine serifenlose Schrift für alles andere. DM Serif Display vermittelt Wärme und redaktionelle Aussagekraft; Inter eignet sich für längere Texte und Benutzeroberflächen, ohne vom Wesentlichen abzulenken.

Zwei Skalen. Artikel ist für längere Inhalte, Blogbeiträge und Programmseiten vorgesehen. Anzeige ist für Hero-Bereiche, Landingpages und Marketingmaßnahmen gedacht, bei denen die Schrift eine größere Rolle spielen muss. Die unten aufgeführten Größen stellen die Obergrenze für den Desktop-Bereich dar – Überschriften werden als clamp() Daher werden sie auf Mobiltelefonen verkleinert.

Inter 16 / 600, padding: 1rem 2rem, Radius 8 px, Farbübergang 0,18 s. Die Linkstile von Squarespace greifen in Code-Blöcke über, sodass die Anker der Schaltflächen stets wie folgt festgelegt sind Farbe und text-decoration mit !important.

Wiederverwendbare Bausteine. Diese kommen in Blogbeiträgen, auf Programmseiten und in Inhalten für Spender zum Einsatz. Greifen Sie auf ein bestehendes Muster zurück, bevor Sie ein neues entwickeln – die Markenkonsistenz wird durch Wiederholung gewährleistet, nicht durch Neuartigkeit.

Bewegung ist ein Hinweis, keine Darbietung. Alles bewegt sich auf derselben kurzen Kurve, und nichts bewegt sich, was nicht unbedingt muss.

• Übergänge

  0,18 s bis 0,2 s Leichtigkeit in Bezug auf Farbe, Hintergrund, Rahmen und Deckkraft. Nichts Längeres, nichts Sprunghaftes.

• Mauszeiger über Karte

  Die Umrandung wird auf „TCF Cyan“ gesetzt, ergänzt durch einen passenden 1px-Ring (box-shadow: 0 0 0 1px #00B4DB). Nein transY Karten-Lift im neuen Projekt – die alten Lifts werden im Zuge der Neugestaltung der Seiten entfernt.

• Ledger-Hover

  Wenn Sie mit der Maus über eine Zeile fahren, werden deren untergeordnete Elemente auf Deckkraft: 0,55, färbt den kursiv gedruckten Ausdruck cyan ein und verschiebt den Pfeil um 4px. Die Zeile, über der sich der Mauszeiger befindet, behält ihre volle Deckkraft bei.

• Schwerpunkt

  Jedes interaktive Element erhält :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Entfernen Sie Fokussierringe niemals, ohne sie zu ersetzen.

• Nicht zulässig

  Keine Puls-, Leucht-, Sprungg-, Parallax- oder automatisch abspielbaren Bewegungen. Keine Animationen, die sich wiederholen, während die Seite im Ruhezustand ist.

Die Website läuft auf Squarespace 7.1, daher werden die meisten neuen Designelemente als eigenständiger Code-Block bereitgestellt, der in einen „Fluid-Engine“-Abschnitt eingefügt wird. Diese Regeln verhindern, dass diese Blöcke miteinander oder mit der Plattform in Konflikt geraten.

• Klassenpräfix

  Jeder neue Block verwendet den tcfx- Präfix. tcf- gehört zum veralteten benutzerdefinierten CSS und führt zu Konflikten.

• Nur bereichsbezogene Rücksetzung

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } und nichts Breiteres. Ein seitenbreiter * Ein Reset hat die Website bereits einmal lahmgelegt.

• Alles in Namespaces einordnen

  Überprüfen Sie jede Regel unterhalb der Stammklasse des Blocks. Ein Codeblock sollte sich ohne Nebenwirkungen auf jede Seite einfügen lassen.

• Zuerst importieren

  Falls ein <style> Verwendungszwecke @import Bei Schriftarten muss dies die erste Zeile innerhalb dieses Tags sein, andernfalls wird sie vom Browser ignoriert.

• Keine Kommentare

  Der Produktions-HTML- und CSS-Code wird ohne Kommentare ausgeliefert. Dokumentieren Sie den Block stattdessen in den Projektnotizen.

• Keine Emojis als Symbole

  Text, Ziffern oder Inline-SVG. Emojis werden plattformübergreifend uneinheitlich dargestellt und wirken informell.

• Marineblau, nicht schwarz

  „Deep Navy“ wird in der gesamten Benutzeroberfläche anstelle von Schwarz verwendet. Reines Schwarz ist für Medien reserviert.

• „Mobile First“

  Legen Sie das Telefonlayout als Grundlage fest und fügen Sie Folgendes hinzu: min-width Abfragen nach oben. Einreihige Stapel, clamp() Schriftart, reduzierte Abstände bei einer Breite unter 640px, tippfreundliche Bedienelemente.

• Externe Links

  target="_blank" wird stets mitgeliefert rel="noopener noreferrer".

• Der Text ist wörtlich übernommen

  Behalten Sie bei der Neugestaltung einer bestehenden Seite Überschriften, Fließtext, URLs und UTM-Parameter genau bei. Kennzeichnen Sie etwaige Änderungen, anstatt diese stillschweigend vorzunehmen.

• Behalten Sie die H1 bei

  Bei den überarbeiteten Helden wird aus SEO-Gründen genau ein H1-Tag mit dem ursprünglichen Wortlaut beibehalten. Vermeiden Sie die Verwendung von Squarespace’s sqsrte-scaled-text wrapper – Seine Inline-Größe kann zur Laufzeit verschwinden und die Überschrift zusammenfallen lassen.

• Übernahme des Abschnitts

  Um einen Abschnitt eines Blocks dunkel zu gestalten, wählen Sie die Hintergrundebene aus, nicht den Abschnittsrahmen – Malen .page-section gleicht etwaige Abweichungen bei der Clip-Path-Trennlinie aus.

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