Styleguide

Client-First-Klassennamen, Webflow-Variablen und Designer-Steuerelemente. Benutzerdefinierter Code nur für das, was der Designer nicht darstellen kann (:has, :checked, Autofill, Keyframes), im Kopf der Seite gespeichert und kommentiert.

Der vertikale Rhythmus wird durch Abstände innerhalb eines Abschnitts erzielt, niemals durch Ränder zwischen den Abschnitten. Innerhalb eines Abschnitts wird der Abstand durch „flex“ oder „grid-gap“ festgelegt, niemals durch „margin-bottom“. Jede Textklasse setzt ihren oberen und unteren Rand auf 0 zurück, da sonst die Standardränder von Webflow für Überschriften und Absätze zum Tragen kommen.

px nur für Rahmen und Schatten, die der Verzierung dienen. rem für Schrift, Innenabstände und Lücken, damit diese mit der Schriftgröße des Lesers mitwachsen. ch für die Lesemaßeinheit (max-width-text beträgt 60 ch). Buchstabenabstand in em, damit sich der Buchstabenabstand an die Schriftgröße anpasst.

Die Größen werden im Designer pro Breakpoint festgelegt (Desktop, Tablet, Mobilgerät), niemals mit `clamp()`. Was Sie in einem Breakpoint sehen, ist genau das, was ausgeliefert wird.

Textklassen verfügen über eigene Eigenschaften für Schriftart, Schriftgröße und Farbe. Ausrichtung und Breite werden vom Container vorgegeben: Die gleiche Überschrift vom Typ „h1“ wird auf der Startseite (innerhalb von „section-header.is-center“) zentriert und auf der Seite „Kontakt – Vertrieb“ linksbündig ausgerichtet.

Jede Regel ist fast schwarz, niemals grau; graue Regeln werden als fehlend interpretiert. „border/subtle“ gilt nur für die Ränder der Felder.

Eine seitenbezogene Anpassung wird zu einer Combo-Klasse, sodass die gemeinsame Klasse an allen anderen Stellen unverändert bleibt. Benennen Sie die Combo nach ihrer Funktion (is-line, is-full, is-tight) und benennen Sie sie um, wenn sich diese ändert.

Keine fixierten Abschnitte, kein Scroll-Snap und keine Scroll-Schritte. „Motion“ formatiert nur Inhalte, die normal scrollen; natives CSS-„sticky“ ist zulässig, da es weiterhin vom Reader gesteuert wird.

Ein Einleitungsabsatz, der sparsam eingesetzt wird, wenn ein Abschnitt noch stärker hervorgehoben werden soll.

Lauftext. Schwarz, niemals gedämpft oder als Sekundärfarbe. Kombinieren Sie ihn mit „max-width-text“ (60 Zeichen) für Texte, die länger als eine Zeile sind.

Nebensächliche Details: Rollen unter einem Pseudonym, Kartenbeschreibungen.

Schaltflächen, Tags, Pillen, Registerkarten und Navigationselemente behalten ihre eigene Klasse bei, binden jedoch Schriftgröße, Zeilenhöhe und Schriftfamilie an dieselben „ui/type“-Tokens. Geben Sie niemals eine reine Schriftgröße ein.

Geist-Mono-Zahlen (ui-num, ui-mono, ui-deal_num), Avatar-Initialen in 11px, das Tastenglyph (ui-key) und die Uhrzeit in der Statusleiste in Schriftstärke 600.

Überall eine einheitliche Größe: 16px, sowohl auf Desktop- als auch auf Smartphone-Bildschirmen. Das Symbol übernimmt die Farbe seines Containers; legen Sie die Farbe daher immer beim übergeordneten Element fest, niemals beim Symbol selbst. Fügen Sie niemals eine SVG-Datei direkt in eine Illustration ein: Fügen Sie das Symbol zunächst in den Ordner „Product Icons“ ein und fügen Sie es dann ein.

Die Logo-Chips „Orbit“ und „Consolidate“ behalten ihre ursprüngliche Größe bei. Drahtpfeile, Sterne, Cursor, Wellenbalken und Foto-Avatare gelten nicht als Symbole.

container-large 90 rem (1440 px), sodass Laptops mit einer Breite von 1440 bis 1728 px einen seitlichen Rand behalten. container-medium 64 rem, container-small 48 rem. Die Medienbänder liegen innerhalb des Containers und reichen nicht bis zum Rand; nur das Hero-Band reicht über den Container hinaus.

1,5 rem auf jeder Seite an jedem Breakpoint.

Oberer und unterer Abstand jedes Abschnitts. „.is-hero“ legt oben einen Abstand von 3rem fest, damit das Produktfoto auf der Startseite angezeigt wird.

Titel und Einleitung eines Abschnitts. „.is-tight“ verringert den Abstand zum Inhalt, „.is-center“ zentriert den gesamten Inhalt (Home-Hero).

In Figma gemessen: Die 5-up-Karten und die 6-up-Logo-Zeile passen nicht in ein 12-Spalten-Raster. Konstant sind die Spaltenbreite und der Abstand von 1,5 rem, sodass die Zeilen gleiche Anteile ausmachen. Zweispaltige Hero-Bereiche verwenden ein eigenes Raster (contact-hero: 1fr 1fr, 6 rem Abstand, auf Tablets gestapelt).

Desktop ab 992px (darüber 1440 und 1920), Tablet bis zu 991px, Handy im Querformat bis zu 767px, Handy im Hochformat bis zu 479px. Schriftart und Abstände ändern sich bei Tablet und Handy.

So beginnt ein Abschnitt: eine Linie quer über den Container, dann der Titel. Wird in jedem Abschnitt der Startseite nach dem Hero-Bereich sowie im Hero-Bereich „Kontakt/Vertrieb“ verwendet.

Nur die Regel, wenn der Inhalt seine eigenen Abstände festlegt (CTA in der Fußzeile).

Listen werden in jeder Zeile durch eine hauchdünne Linie oben getrennt, niemals allein durch Leerzeichen.

Überall scharfe Ecken: Karten, Felder, Bereiche, Logo-Kacheln. Die einzige Ausnahme bildet der primäre CTA, ein vollformatiges Element (Radius 999 px).

Rahmenlinien verwenden die Kontur (alle vier Langstriche), sodass sie keinen Platz im Layout beanspruchen und über den untergeordneten Elementen liegen. Alles, was einseitig ist, wie beispielsweise eine Zeilenlinie oder eine Unterstreichung, verwendet einen Rand.

Wrapper .signup-form_wrap, Formular mit data-folk-demo="contact", ein input[type=email], ein .js-select, dessen Werte 1–2, 3–9, 10–49, 50–249, 250–999 und 1000+ lauten. Das Skript sucht beim Verlassen des E-Mail-Feldes nach dem Unternehmen und leitet qualifizierte Teilnehmer mit 10+ an /demo-calendly, qualifizierte Teilnehmer mit 3–9 an /book-a-folk-demo-2 und alle anderen an die Weiterleitung für nicht qualifizierte Teilnehmer weiter.

E-Mail-Adresse, Teamgröße und Schaltfläche in einer umrandeten Zeile, 0,875 rem, 3 rem hoch.

Wenden Sie sich an den Vertrieb. Kein Rahmen, kein Hintergrund, Textgröße 1,25 rem, schwarze Unterstreichung mit 1 px, Höhe 4 rem. Der Platzhalter ist der Titel (keine Beschriftungen; jedes Feld verfügt über ein „aria-label“). Platzhalter und nicht ausgewähltes Auswahlfeld in „text/secondary“. Keine Unterstreichung bei Fokus: Das Cursorzeichen dient als Hinweis, und das Auswahlfeld zeigt nur bei Tastaturfokus eine 2-px-Linie an.

Schwarze Pille, volle Breite, 1 rem, 3,5 rem hoch.

Enge Anordnung der Felder (0,5 rem), Schaltfläche und Notenstapel (1 rem), Block (2 rem) zwischen den beiden Gruppen.

Ein natives „Select“-Element anstelle von Optionsfeldern: Die Optionsfelder benötigten ein Bridge-Skript, um das Qualifikationsskript zu erreichen, das „Select“-Element benötigt keines. Der Seitenkopf überdeckt die blaue Autovervollständigungsanzeige von Chrome und behält die Schriftart des Feldes bei den vorgeschlagenen Werten bei.

In einem Abschnitt oder Raster. „load“ interagiert mit der Seite (Heroes), zeigt die Gruppe an, sobald sie in den Bildschirm eintritt, und scrollt Element für Element nach oben, während sie erscheint. „data-reveal-at="60%"“ verzögert die Anzeige, bis der obere Rand diese Höhe erreicht hat.

up: Einblenden und um 1 rem nach oben verschieben. lines: Ein Titel, der Zeile für Zeile eingeblendet wird. fade: Nur Deckkraft; wird für hauchdünne Container verwendet, damit die Regel zusammen mit ihrem Abschnitt angezeigt wird.

Ein Attribut statt drei bei den üblichen Mustern.

Überschriften im Bereich „Above the Fold“ nutzen die rein CSS-basierte Einblendung, sodass sie sofort als gerendert gelten (LCP). Fügen Sie niemals einen JS-Fade-Effekt zu einem Container hinzu, der die H1-Überschrift enthält.

Mit reduzierten Animationen, ohne JavaScript oder im Designer ist alles ganz einfach sichtbar. Die Engine ist „reveal.js“ in der Fußzeile der Website; die Modi, die nur auf der Startseite verfügbar sind, befinden sich in „reveal-extra.js“.

Beide Bearbeitungen wirken sich auf alle Seiten aus. Die „Base“-Variante der Fußzeile enthält das CTA-Formular. Benennen Sie niemals die Elemente .nav-items-wrapper, .nav-item-wrapper, .logo-context-menu oder .sub-nav-item um, da Skripte und CSS auf diese Elemente verweisen.

Die Logo-Wand und die Reihen mit Kundenstimmen des Unternehmens, die im Direktvertrieb wiederverwendet werden.

Das Inline-Demo-Formular, das bereits mit dem Qualifizierungsskript verknüpft ist.

Illustrationen sind programmierte Webflow-Elemente, keine Bilder: Sie sind bei jeder DPI-Einstellung gestochen scharf, interaktiv und animierbar. Sie verwenden eigene UI-Klassen und Tokens und übernehmen niemals die Abstände der Seite. Jede animierte Illustration enthält eine Instanz ihrer Code-Komponente, sodass ein Skript nur einmal bearbeitet werden muss. Alle Illustrationen sind unter /illustrations aufgelistet; fügen Sie jede neue Illustration dort hinzu.

• Eine Demo erhalten
• Finden Sie heraus, welcher Tarif der richtige für Sie ist