Skip to main content
Solace style guide splash artwork

Przewodnik stylu

Wspólne wzorce dla stron Solace AGI. Ta strona jest żywą referencją dla obrazów ekranu rozpoczynającego, przycisków, kart, bloków kopii i tokenów wizualnych.

Obrazki ekranu rozpoczynającego

Kanoniczny kontener obrazu bohatera: <section class="splash-image"><picture class="splash-image__asset">...</picture></section>

Bohater strony głównej

Home hero splash artwork

Bohater Software 5.0

Software 5.0 splash artwork

Obrazek po lewej, tekst po prawej

Kanoniczny podział mediów/treści w sekcjach wyjaśniających produkty. Na urządzeniach mobilnych, obraz jest umieszczony powyżej kopii i rozciąga się na pełną szerokość karty.

Forecast framework illustration

Wzorzec ramowy

Obrazek po lewej, tekst po prawej

Użyj tego dla sekcji, gdzie sztuka wyjaśnia pojęcie, ale kopia nadal zawiera szczegółowe znaczenie. Kolumna z obrazem pozostaje wizualnie kotwiczona na komputerach stacjonarnych i staje się pełną szerokością zestawionego wiersza na urządzeniach mobilnych.

Strony publiczne

Cennik

Strona cen

Karty planów, tabela porównawcza oraz przyjazne dla publiczności ramy zakupowe.

Dokumenty

Strona dokumentów

Publiczne przeredagowania, pliki źródłowe i połączone pochodzenie źródłowe.

Analiza

Strona analityczna

Nagłówkowe metryki, siatki obsługiwane przez DataTables oraz wizualizacje amWykress.

Przyciski

Karty

🧠

Karta funkcji

Użyj dla opisów korzyści produktu podstawowego, opisów funkcjonalności i sekcji poświęconych conceptom.

Karta cen

28$/miesiąc

Chmura podwójna + skarbiec OAuth3 + dowody zarchitektury zgodne z częścią 11.

Pole podświetlenia: Użyj dla przywołań prawnych TL;DR, silnych powiadomień i kompaktowych kopi niestreszczonych.

Tabele i wykresy

Przykładowy wykres

Oficjalny stos wykresów: amWykress 5, obsługiwany lokalnie.

Przykładowa tabela

Oficjalna tabela stosu: DataTables, obsługiwana lokalnie.

Powierzchnia Biblioteka Tryb
Analiza amWykress Wykres
Dokumenty DataTables Katalog
Cennik DataTables Porównanie

Typografia

Tekst treści jest podstawowym stylem czytania długich form dla wyjaśnień produktowych i technicznych.

Wprowadzenie sekcji jest przeznaczone dla szerszych podsumowań, które wymagają większej obecności niż kopia ciała, ale mniejszego ciężaru niż nagłówek.

Podtytuł bohatera jest zarezerwowany dla ram wartości pierwszegoзано pod głównym nagłówkiem.

Symbole kolorów

Niebieski `--sa-blue`
Fioletowy `--sa-purple`
Pomarańczowy `--sa-pomarańczowy`