Schaltflächen

Ein Bauteil, drei Gründe. Die Füllung schiebt sich beim Hover über die Fläche, der Pfeil tauscht sich in seinem Feld aus. Auf dunkel ist die Fläche deckend — Alabaster 8 % in Valentino gemischt —, damit keine Linienwolke durchscheint. Zwei Höhen: 3.5rem im Fluss der Seite (--control-h), 5.25rem für die eine Handlung auf einem CTA-Band (--control-h-lg). Unter 800 Pixel 3 und 3.5rem.

Eingabefeld

Nur auf Valentino, in CTA.Newsletter: Alabaster 8 % als Fläche, 25 % als Kontur, Text und Cursor in Alabaster. Feld und Schaltfläche daneben teilen immer die Höhe ihres Bandes — auf dem CTA-Band also 5.25rem, dieselbe Höhe wie die Schaltfläche von CTA.Default.

Textlink

Für Verweise, die keine Schaltfläche sein sollen — Unterstrich wächst von links.

Link im Fliesstext

Innerhalb eines Absatzes trägt der Link von Anfang an einen feinen Unterstrich — sonst wäre er im Fliesstext nicht zu erkennen. Beim Überfahren wird er kräftiger.

Für eine erste Einschätzung genügt ein Telefonat unter +41 71 227 35 35.

Kicker, Chip und Index

Der Kicker der Module trägt eine Linienmarke (siehe Linien).

Filterzeile

Ab 800 Pixel als Reiterzeile, darunter als Auswahlfeld.

Sprachschalter

Im Menü und im Footer, jeweils auf Valentino. Die gewählte Sprache steht in 600; alle Schalter einer Seite teilen denselben Zustand.

Karten

Beiträge und Insights: Tönung Valentino 1 %, jede Haarlinie nur einmal — das Raster zeichnet oben und links, jede Karte rechts und unten. Beim Hover schiebt sich Mint von links über die Karte, die Texte werden Valentino; so verhält sich auch die Beitragskarte im Menü. Teaser.Default reagiert nur über seine Schaltfläche; Bild und Haarlinie bleiben ruhig.

Kopfzeile

Marke, Kontakt und Menü heben sich vom Grund ab, sobald die Seite scrollt; am Seitenanfang stehen sie hell, die Marke frei. Gemessen wird einmal auf der Mittellinie der Kopfzeile — unter der Marke, in der Mitte und unter dem Menü, die Mehrheit gilt —, alle Felder wechseln zusammen. Abschnitte nennen ihren Grund mit data-ground; ein Bild zählt als Valentino, wenn sein Rahmen nichts anderes sagt. Das Wort «Kontakt» hat kein Feld und folgt immer dem Grund direkt dahinter. Beim Scrollen faltet sich die Marke zu einer Linie in der Grösse eines Menübalkens; sie neigt sich mit dem Tempo des Scrollens und kommt flach zur Ruhe, Hover entfaltet sie. Die Haarlinie unter der Kopfzeile verschwindet mit dem ersten Scrollen.

Haarlinie

Ein Pixel, Valentino 10 % auf hellem Grund, Alabaster 15 % auf Valentino. Sie zeichnet sich beim Erscheinen in einem kräftigeren Ton von links oder von oben ein und setzt sich dann. In Rastern wie Karten und Referenzen gibt es jede Linie nur einmal. Die Linien des Footers laufen über die ganze Breite; die Haarlinie unter der Kopfzeile verschwindet mit dem ersten Scrollen. In Header.Text-Media setzen ein Horizont über die ganze Breite und eine Senkrechte bis zur Kopfzeile das Bild ins Raster, in Teaser.Default die Oberkante des Bildes, weitergezogen über die Textspalte bis zum Seitenrand — so wie in diesen beiden Feldern.

Linienmarke

Ersetzt alle Quadrate: in den Menüzeilen, vor den Kickern der Module, in Aufzählungen und bei Bestätigungen. 0.75rem lang, 1.5 Pixel stark. In Ruhe pendelt und driftet jede Marke leicht, in eigenem Tempo. Sie ordnet sich, sobald der Zeiger ihren Bereich erreicht — und das ist nie die Marke selbst: beim Kicker das ganze Modul, in einer Aufzählung die Zeile, im Menü der Eintrag. Dann legt sie sich flach, steht still und nimmt die Akzentfarbe an: Clover auf hellem Grund, Mint auf Valentino, Valentino auf Mint. Auf Touch-Geräten ordnet sie sich in der Mitte des Bildschirms. Zum Ausprobieren über die Felder fahren.

Linienwolke

Kurze Haarlinien in einer Wolke, nur dort, wo kein Text steht: in Header.Hero über dem Absatz, in Header.Text neben und über dem Titel, in CTA.Default über der Schaltfläche. In Unordnung liegt jede Linie neben ihrem Rasterplatz, pendelt und driftet. Nähert sich der Zeiger der Mitte, gleiten die Linien heim und legen sich flach zu gestrichelten Reihen; die Ordnung breitet sich von der Mitte aus, die Unordnung kehrt vom Rand zurück. Über der Schaltfläche des Moduls ist die Wolke ganz geordnet, auf Touch-Geräten ordnet sie sich beim Scrollen. Farben: Valentino in drei Stärken und ein Viertel Clover auf hellem Grund, Alabaster und Mint auf Valentino. Ein Kopf trägt als zweites Element entweder ein Bild oder eine Wolke, nie beides. Beispiel: der Kopf dieser Seite.

Bild-Reveal

So erscheint ein Bild, einmal: Kurze Linien streuen über eine Abdeckung im Seitengrund, fallen in Reihen und räumen sich Reihe für Reihe diagonal von links oben nach rechts unten weg. Danach steht das Bild allein. Nur Valentino, ohne Akzent — hier ist die Linie Vorhang, nicht Farbe. Im Einsatz beim Bild von Header.Text-Media und bei den Porträts von Content.Team und Teaser.Team; dort läuft der Effekt als Welle über das Feld, von der Karte links oben zur Karte rechts unten.

Bild-Reveal, leise

Dieselbe Bewegung ohne die Linien: Die Abdeckung räumt sich Reihe für Reihe diagonal weg, sonst nichts. Für Bilder, die auf ein Modul folgen, das den vollen Effekt schon gespielt hat — zweimal hintereinander ist zu viel. Teaser.Default nutzt diese Fassung.

Werte

Zwei Werte tragen die ganze Seite. Sie stehen als Variablen in styles.css; ändert man sie dort, ändert sich der Rhythmus überall.

Standard

15rem · Small 7rem — zwischen zwei unverwandten Modulen

Kompakt

7.5rem · Small 3.5rem — ein Modul, das das vorige fortsetzt

Kicker → Titel

1.25rem · in den grossen Köpfen 2rem

Titel → Text

2rem · in den grossen Köpfen 2.5rem

Text → Schaltfläche

2rem · in den grossen Köpfen 2.5rem

Der Einzug ist Innenabstand, wenn das Modul auf dem Seitengrund steht, und Aussenabstand, wenn es seinen eigenen Grund mitbringt: In einem farbigen Band oder unter einem randabfallenden Bild würde die Fläche den Abstand verschlucken. Das betrifft Content.Testimonial, Teaser.Default, CTA.Default, CTA.Newsletter und den Footer.

Reihenfolge der Regeln

Erstens der gemeinsame Standard. Zweitens die Gruppenregel: Ein Modul der Gruppe «Fliesstext» — Content.Text und Content.Media-Assets — rückt kompakt auf, wenn direkt davor ein Modul derselben Gruppe steht. Drittens Ausnahmen für ein geordnetes Paar; bei mehreren gewinnt die spätere. Ausnahmen gibt es zwei, dazu eine dokumentierte Sonderstelle:

Erstes Modul

Kein Einzug. Der Seitenkopf baut die Falte selbst und sitzt unter der fixen Kopfzeile.

CTA → Footer

Kein Abstand. Zwei dunkle Flächen schliessen die Seite gemeinsam; getrennt werden sie von der hellen Linie des Footers.

Startseite

Header.Hero → Statement → Stationen bleiben ausserhalb des Systems: Das Statement schiebt sich über das angeheftete Bild, die Stationen setzen seine Fläche fort. Eine Choreografie, kein Stapel.

Massgeblich ist, was wirklich steht: Der Seitenbauer legt nur für Module einen Platz an, die etwas rendern — ein leeres Modul kann weder Abstand erzeugen noch eine Folge zerreissen. Und die Paare sind gerichtet: Text vor Bild sagt nichts über Bild vor Text.

Zwei unverwandte Module

Beide nehmen den Standardabstand. Die Beispiele laufen mit demselben Stylesheet und denselben Modulen wie die Seiten, auf 35 % verkleinert; die Zahlen in den Chips sind die echten (Taste G).

Eine Folge: Text → Text → Bild

Das erste Modul der Folge behält den Standard, die folgenden rücken kompakt auf.

Fliesstext

Das erste Modul einer Folge steht im Standardabstand.

Fliesstext

Das zweite folgt kompakt — es setzt denselben Gedanken fort.

Folge, unterbrochen

Ein fremdes Modul beendet den Zusammenhang; danach beginnt der Standard von vorn.

Ausnahme für ein Paar: CTA → Footer

Zwischen den beiden dunklen Bändern steht nichts.

Fehlende Felder

Dasselbe Modul viermal: mit allen Feldern, ohne Titel, ohne Lead und nur mit dem, was es braucht. Das erste sichtbare Element beginnt immer auf dem Einzug — für ein Feld, das fehlt, wird keine Regel wirksam.

Rhythmus im Fliesstext

Innerhalb von Content.Text ist der Abstand eine eigene Schicht: Absätze, Zwischentitel und Listen haben ihren Rhythmus, oben und unten schliesst der Text bündig ab — kein zusätzlicher Abstand über dem ersten und unter dem letzten Element.