Skip to main content
Solace style guide splash artwork

Guide til stilstiller

Denne siden er den levende referansen til splashbilder, knapper, kort, kopierblokker og visuelle tokener.

Splash-Bilder

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

Hjemhelte

Home hero splash artwork

Software 5.0 Held

Software 5.0 splash artwork

Bildet til venstre, teksten til høyre

På mobil, stapler bildet over kopien og utvider til hele kortets bredde.

Forecast framework illustration

Pattern Framework

Bildet til venstre, teksten til høyre

Bruk dette for seksjoner der kunstverket forklarer konseptet, men kopien fortsatt bærer den detaljerte betydningen. Bildekolumnen forblir visuelt forankret på skrivebordet og blir en fullbredde staplet rad på mobil.

Offentlig side

Priser

Pris side

Plankort, sammenligningstabel og offentlig-vennlig kjøpraming.

Artikler

Artikler side

Offentlig omskrevet, lokale kildedata og koblet kildedata.

Knapper

Kortene

🧠

Karte med funktionshinder

Bruk for kjernedeltekst, funksjonsbeskrivelser og konseptuelle seksjoner.

Priskortet

28 dollar/mån $28/mån

Twin Cloud + OAuth3 vault + Part 11 Architected evidence.

Høyheft: Bruk for TL;DR juridiske kallouts, sterke meldinger og kompakte vektkopi.

Tabeller og diagrammer

Et eksempel på diagrammet

Officiell diagramstack: amChart Charts 5, servert lokalt.

Et eksempel på et utvalg av bord

Officiell bordstack: DataTables, servert lokalt.

Overflaten Biblioteket er et bibliotek. Modus
Analyser er en del av analysen. amChart Charts Chart Chart
Artikler DataTables Katalog
Priser DataTables Sammenligning

Typografi

Innholdtekst Det er den grunnleggende lange-form-lesestilen for produkt- og teknisk forklaring.

Introduksjonsseksjon er for bredere oppsummeringer som trenger mer tilstedeværelse enn en kroppskopi, men mindre vekt enn en overskrift.

Hero-undertekst er forbeholdt førstefaldig verdiramming under hovedoverskriften.

Farge tokener

Blå Blå `--sa-blue`
Paars `--sa-purple`
Orange Orange `--sa-orange`