Compaytence
Marken-Grundlagen
Was Sie benötigen, um eine Landingpage zu erstellen, die wie unsere aussieht: ein Akzent, ein Grundton, zwei Schriftarten. Klicken Sie auf eine beliebige Farbe, um sie zu kopieren. Wo dieses Dokument keine Entscheidung abdeckt, wählen Sie die schlichtere Option.
Ein Blau, vier Aufgaben
Compaytence hat eine einzige Akzentfarbe. Sie ist das Blau in der Wortmarke, und alles andere auf der Seite ist neutral.
Das Blau erscheint in vier Stärken, und welche Sie verwenden, hängt von der Aufgabe ab, nicht vom Geschmack. Der Grund ist der Kontrast: Das Markenblau ist hell, daher wirkt es hervorragend als gefüllter Button und schlecht als Textzeile.
Setzen Sie Text auf hellem Hintergrund nicht in #33A9FF. Dort erreicht es 2.42:1, deutlich unter dem Minimum von 4.5:1, und es ist der mit Abstand häufigste Fehler auf Partnerseiten. Auf hellem Grund ist dieses Blau eine Füllfläche: Button-Hintergründe, Icon-Formen, das Logo. Wenn Sie ein blaues Wort benötigen, verwenden Sie #0077BD. Auf dunklem Grund ist dasselbe Blau als Text in Ordnung, da es dort 7.51:1 erreicht.
Die vollständige Leiter finden Sie unten, falls Sie für einen Hover-Zustand oder einen dezenten Hintergrund eine Tönung benötigen. Jede Stufe hat denselben Farbton bei anderer Helligkeit, weshalb sie nie miteinander kollidieren. Führen Sie niemals eine zweite Akzentfarbe ein: kein Violett, kein Türkis, kein Bernstein. Wenn sich etwas abheben muss, ändern Sie seine Stärke oder Größe, nicht seinen Farbton.
Ein warmer Grundton
Unsere Grautöne sind nicht grau. Sie enthalten einen kleinen Anteil Wärme, der das Blau neben ihnen kühl wirken lässt.
Verwenden Sie diese genau so. Ein Standardgrau, eine Seite in reinem #FFFFFF oder eine rein schwarze Überschrift wirkt wie eine andere Marke neben unserer Website, obwohl der Unterschied nur wenige Sättigungspunkte beträgt.
Verwenden Sie für Rahmen und Trennlinien kein Grau. Nutzen Sie die Tintenfarbe mit geringer Deckkraft; so bleiben Kanten in derselben Familie wie der Text darüber: rgba(31, 27, 22, 0.12) auf hellem Grund, rgba(233, 230, 225, 0.12) auf dunklem Grund. Schatten folgen derselben Logik und sind warm, niemals neutral schwarz.
Zwei Schriften, feste Rollen
Instrument Serif für Display-Schrift und jede Zahl. Archivo für alles, was Sie lesen. Beide sind kostenlos bei Google Fonts verfügbar.
Zahlen sind der Teil, den es richtig zu machen gilt, denn sie sind das Wiedererkennbarste an unserer Arbeit. Jede Zahl steht in der Serifenschrift, in Blau, mit tabellarischen Ziffern, damit Spalten ausgerichtet sind:
Setzen Sie dies mit font-variant-numeric: tabular-nums lining-nums. Im Fließtext steht eine Zahl wie 2.4x etwas größer als die umgebenden Wörter, sodass sie auffällt, ohne fett zu werden.
Laden Sie sie so:
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
- Fließtext um 17px, mit großzügiger Zeilenhöhe.
- Überschriften in der Serifenschrift, mit Gewicht 400.
- Kursive Serifenschrift für eine ganze Zeile, niemals ein Wort innerhalb einer Überschrift.
- Inter, Geist, Roboto, Arial oder ein System-Font-Stack.
- Eine Monospace-Schrift für Eyebrows, Labels oder Überschriften.
- Ein Farbverlauf, der irgendeinen Text füllt.
Die Wortmarke
Zwei Varianten, eine für jeden Grundton. Sie sind nicht austauschbar.
- Lassen Sie rund um das Zeichen auf jeder Seite mindestens so viel Freiraum wie die Höhe des C.
- Mindesthöhe auf dem Bildschirm: 24px. Darunter ist die Wortmarke nicht mehr lesbar.
- Färben Sie es nicht um, versehen Sie es nicht mit einer Kontur oder einem Schatten, drehen Sie es nicht und setzen Sie es nicht auf ein unruhiges Foto.
- Bauen Sie es nicht als Live-Text nach und passen Sie weder Laufweite noch Breite an, damit es in eine Lücke passt.
Schreiben Sie trevor@compaytence.com für SVG und PNG in voller Auflösung. Die beiden Bilder oben sind in diese Datei eingebettet; für ein schnelles Mockup können Sie also mit der rechten Maustaste klicken und eines speichern. Verwenden Sie für alles, was Sie ausliefern, jedoch die Originaldateien.
Form, Abstand und Bewegung
Zwei Eckenradien, ein Abstandsrhythmus und Zurückhaltung bei Bewegung.
- 14px für Container: Karten, Panels, Bilder, Modals.
- 8px für Steuerelemente: Buttons, Eingabefelder, Tags, kleine Chips.
- Nichts anderes. Keine Pillen, keine quadratischen Ecken, kein dritter Wert.
- Eine Haarlinienkontur im Ruhezustand, kein Schatten.
- Anheben und Schatten nur beim Hover.
- Nicht alles ist eine Karte. Eine Seite, die nur aus Karten besteht, wirkt wie Rauschen.
Abstände folgen einem 30px-Raster. Verwenden Sie ganze Schritte zwischen Blöcken und die kleineren Schritte innerhalb einer Komponente. Alles, was nicht auf dieser Skala liegt, wirkt neben unseren Seiten leicht falsch – auf eine Weise, die schwer zu benennen und leicht zu sehen ist.
Bei Bewegung: Einblenden und kurze Aufwärtsbewegungen, wenn ein Bereich erscheint, etwa eine halbe Sekunde lang, und sonst nichts. Kein Parallax, keine hochzählenden Zähler, kein Karussell, das sich selbst bewegt. Beachten Sie prefers-reduced-motion, und lassen Sie Inhalte niemals von einer laufenden Animation abhängen: Wenn das Skript fehlschlägt, muss alles weiterhin auf der Seite sein.
Bevor Sie es uns senden
- Fließtext erreicht vor seinem Hintergrund 4.5:1, in beiden Themes, falls Sie beide erstellt haben.
- Kein Text in #33A9FF auf hellem Hintergrund.
- Jede Zahl steht in Instrument Serif, in Blau, tabellarisch.
- Eine Akzentfarbe auf der Seite. Zählen Sie sie.
- Die Variante der Wortmarke passt zu ihrem Grundton, ist 24px oder höher und hat Freiraum.
- Der Tastaturfokus ist auf jedem Link, Button und Feld sichtbar.
- Tap-Targets sind mindestens 44px groß.
- Bei 375px Breite funktioniert sie ohne horizontales Scrollen.
Senden Sie einen Staging-Link statt Screenshots. Wir sehen ihn uns auf beiden Grundtönen und in Smartphone-Breite an und melden uns innerhalb eines Tages.