Skip to main content
Solace style guide splash artwork

Styleguide

Diese Seite ist die Live-Verweis für Splash-Bilder, Knopfchen, Karten, Kopierblöcke und visuelle Token.

Splash-Bilder

Canonieke hero-afbeeldingcontainer: <section class="splash-image"><picture class="splash-image__asset">...</picture></section>

Start Hero

Home hero splash artwork

Software 5.0 Held

Software 5.0 splash artwork

Bild links, Text rechts

Canonical Media/Text split für Produkt-Erläuterung Abschnitte. auf Mobiltelefonen stapelt das Bild über dem Kopien und erweitert sich auf die volle Kartenbreite.

Forecast framework illustration

Das Muster Framework

Bild links, Text rechts

Verwenden Sie dies für Abschnitte, in denen das Kunstwerk das Konzept erklärt, aber die Kopie immer noch die detaillierte Bedeutung trägt.Die Bildspalte bleibt visuell verankert auf dem Desktop und wird zu einer vollbreiten gestapelten Zeile auf dem Handy.

Öffentliche Seiten

Preise

Preis-Page

Plankarten, Vergleichstabelle und öffentlich freundliche Einkaufsrahmen.

Dokumente

Die Papierseite

Öffentliche Umschriften, lokale Quelldateien und verknüpfte Quell provenance.

Analytiken

SeiteAnalytiken

Headline-Metriken, Datentabellen-gestützte Grids und amChart Charts-Visuals.

Knopfchen

Karten

🧠

Functiekaart

Nutzen Sie für die Kernprodukte, die Beschreibungen von Fähigkeiten und die Konzeptbereiche.

Preiskarte

$28/Monat

Twin Cloud + OAuth3 vault + Teil 11 Architektenaussage.

Hoogtepunt: Verwenden Sie TL;DR-Rechtsrufe, starke Hinweise und eine kompakte Betonungskopie.

Tabellen und Chart Charts

Beispiel-Chart Chart

Offizieller Chart Chartstack: amChart Charts 5, lokal serviert.

Beispieltabelle

Offizieller Tischstack: DataTables, lokal serviert.

Oberfläche Bibliothek Bibliothek Modus
Analytiken amChart Charts Chart Chart
Dokumente DataTables Der Katalog ist ein sehr guter Ausgangspunkt.
Preise DataTables Vergleich

Typografie

Inhaltsteks ist der Basis-Langform-Lese-Stil für Produkt- und technische Erläuterungen.

Der Abschnitt "Intro" ist für breitere Zusammenfassungen gedacht, die mehr Präsenz als Körperkopie benötigen, aber weniger Gewicht als eine Überschrift.

Der Titel "Hero" ist für die erste Wertvorgabe unter der Hauptüberschrift reserviert.

Farbtoken

Blau Blau `--sa-blue`
Paars `--sa-purple`
Orange Orange `--sa-orange`