En profil.
Samma tydlighet.
En vit, precis och avskalad identitet. Svart typografi, tunna linjer och metalliska former. Blått används där något ska få uppmärksamhet.
01. Färger
Klicka på en färg för att kopiera koden.02. Typografi
Inter Variable. Normal text i 400, rubriker i 500 och logotyp i 600. Fallback: Helvetica Neue, Arial, sans-serif. Typsnittet levereras lokalt med SIL Open Font License.
Varje sajt.
Varje bevis.
Se det som spelar roll.
Med rätt gränser.
Varje observation får belägg, betydelse och ett nästa steg. Osäkerhet ska förklaras lika tydligt som det som faktiskt observerats.
Displaytexten är 4,25 gånger brödtexten på stor skärm. På mobil används 42 px i heron och omkring 35 px i sektionsrubriker. Längre förklaringar ska ha korta rader och tydliga stycken.
03. Layout & rytm
| Del | Stor skärm | Mobil |
|---|---|---|
| Sidräls | 1124 px maxbredd vid 1440 px, cirka 78% av skärmen | 12 px från varje kant vid 390 px |
| Toppnavigering | 78 px hög, 1156 px maxbredd | Logotyp, primär handling och menyknapp |
| Hero | Start vid y=140 px, centrerad rubrik och illustration | Start vid y=120 px, illustration under texten |
| Sektionsinnehåll | 80 px inre marginal; text och illustration 1:1 | 24–25 px inre marginal; staplade block |
| Linjer | 1 px, #EFEFEF | Samma vikt och färg |
| Hörn | 6 px knappar, 6–8 px produktkort | Samma proportioner |
Centrerad berättelse
Hero, övergångsrubriker och avslut centreras. Första vyn ska bestå av ett tydligt textblock och en enda stor illustration.
Växlande produktsektioner
Text och produktvy växlar sida. På mobil kommer beskrivningen först. Tunna avdelare och luft skiljer delarna åt.
04. Komponenter
Handlingar
Svart primärknapp med mycket diskret djup. Sekundära handlingar är vita med tunn kant eller understrukna textlänkar. Inga stora pillformade knappar.
Täckning och bedömning
Status ska alltid skrivas ut i text. Kontrollerat får inte presenteras som ett generellt godkännande av webbplatsens säkerhet. Färg är ett stöd, aldrig den enda betydelsebäraren.
Egen symbol
sajtguardEn sköld med checkmark, tecknad med öppna linjer. Den metalliska varianten används i illustrationer; den platta används som logotyp och ikon. Frizon: minst halva symbolens bredd.
05. Bildspråk & rörelse
Metall. Linjer. Svart och vitt.
Illustrationer kombinerar en mörk, texturerad yta med ljusa metallkanter. Små cirkulära symboler omger en större huvudform. Produktvyer är vita med tunn grå inramning.
Det oväntade greppet är ett enda blått ljusstråk mellan sakliga sektioner. Animationer är korta och återhållna. prefers-reduced-motion tar bort rörelser och mjuk scroll.
06. Skriv som Sajtguard
Gör så här
- Beskriv det som observerats, med konkreta belägg.
- Använd korta rubriker och tydliga verb.
- Förklara betydelse och nästa steg.
- Skriv ut osäkerhet och luckor.
- Märk demoexempel som syntetiska.
Undvik detta
- Påståenden om bevisade intrång utan belägg.
- Uppdiktade kunder, certifieringar eller citat.
- Regnbågsfärger, stora färgplattor och tung glans.
- Seriftypsnitt och dekorativa rubrikfonter.
- Färg som enda sätt att förmedla status.