Styleguide för pensionsmyndigheten.se

Base

Base innehåller basgenskaper så som färger, responsivitet, ikoner och typsnitt.
Allt som ligger här byggs in i ps-styleguide.css och finns därför inbyggt i alla våra sidor

Color

Instruktion

För att använda en färg använder vi variablerna från _theme.scss.

Färgarna från _color-palette.scss är mappade i _theme.scss och bör inte användas direkt i stylingen.

Black

black--100

#332A2A

black--100

#332A2A

black--75

#665f5f

black--50

#999494

black--25

#cccaca

black--10

#ebeaea

black--5

#f5f4f4

Blue

blue--dark

#0b4774

blue--100

#156198

blue--75

#4f88b2

blue--50

#8ab0cb

blue--25

#c2d7e5

blue--10

#e8eff5

blue--5

#f3f7fa

Light Orange

light-orange--dark

#be450f

light-orange--100

#e37700

light-orange--75

#ea9940

light-orange--50

#f1bb80

light-orange--25

#f8ddbf

light-orange--10

#fcf1e5

light-orange--5

#fef8f2

Dark Orange

dark-orange--dark

#a21e00

dark-orange--100

#cc4202

dark-orange--75

#d97141

dark-orange--50

#e5a080

dark-orange--25

#f2d0c0

dark-orange--10

#faece6

dark-orange--5

#fcf6f2

Green

green--dark

#4f5c14

green--100

#889925

green--75

#a6b35c

green--50

#c3cc92

green--25

#e1e5c9

green--10

#f3f5e9

green--5

#f9faf4

Warm Gray

warm-gray--23

#d9d1c8

warm-gray--17

#e4ddd7

warm-gray--12

#ebe7e2

warm-gray--8

#f1efec

warm-gray--5

#f7f5f3

Signal Colors

signal--dark-green

#55772b

signal--light-green

#b4be25

signal--yellow

#f8be00

signal--orange

#ef7c00

signal--red

#d52f2a

Sociala Medier-färger

social-media--facebook-blue

#3b5998

social-media--linkedin-blue

#0077b5

social-media--twitter-blue

#55acee

social-media--google-plus-red

#c53929

Udda Färger

headline-orange

#BF3D01

pink

#b9348a

white

#ffffff

pink--dark

#86004f

black--overlay

#00000066

header-orange--dark

#8d2e02

header-orange--dark-contrast

#702401

Deprecated Färger

4__DEPRECATED

#125687

#ebf5fb

#cbe3f5

Unmapped

Blue

Orange

Dark Orange

Green

Unmapped

Blue

Light Orange

Green

Unmapped

Blue

Light Orange

Green

Instruktion

För att använda en färg använder vi variablerna från _theme.scss.

Färgarna från _color-palette.scss är mappade i _theme.scss

Color palette

Designa mörkare eller ljusare färg

SASS funktionaliten gör det möjligt som följande exemple

$darker-version: darken($s_color-border-3, 10%);
$lighter-version: lighten($s_color-border-9, 50%);

Typography

Examples

h1 | Pensionens alla delar

h2 | Din pensionspyramid kan se annorlunda ut

h3 med klass s_font-normal | Din allmänna pension kommer från staten

h3 med klass s_font-bold | Bostadsform

h4 | Fyll i uppgifter om din bostad

legend | Hur bor du?

label med klass s_font-bold | Adressuppgifter

preamble | Tilläggspensionen är en del av den allmänna pensionen

paragraph med klass s_font-large | Tilläggspensionen är en inkomstgrundad pension som

paragraph | Alerts, tooltip

paragraph med klass s_font-bold s_font-small | Postkod:

paragraph med klass s_font-small | Din anmälan registreras och du kommer få ett brev

paragraph med klass s_font-readable | Varje år får du som bor i ett annat land och får pension från Sverige.

Code

h1 | Pensio Sans Normal

h1 style:ad som en h2 | Pensio Sans Normal

h2 | Pensio Sans Normal

h2 style:ad som en h3 | Pensio Sans Normal

h3 | Pensio Sans Normal

h3 style:ad som en h4 | Pensio Sans Normal

h3 med klass s_font-medium

h4 med klass s_font-medium

legend | Pensio Sans Normal

paragraph | Pensio Sans Normal

label med klass s_font-medium | Pensio Sans Medium

preamble | Pensio Sans Normal

paragraph med klass s_font-large

paragraph

paragraph med klass s_font-small

paragraph med klass s_font-medium s_font-small

Centrerad paragraph med klass s_font-center

Space

Examples

En "unit" kan användas tillsammans med en margin eller padding css-klass oavsett riktning, som till exempel

s_margin-1 s_margin-top-2 s_padding-right-3 s_padding-bottom-4

Spacing unit

Examples

Vid utveckling av en css-klass används variabler som till exempel

$s_space-

White space

White Space

Formulär med många inmatningsfält blir tydligare och enklare att förstå om man delar upp dem i flera delar. Whitespace hjälper oss med att

Betona vissa element
Skapa en känsla av elegans
Att klargöra relationer mellan objekt
Dela element utan att använda synliga avdelare
Luftigheten i texten påverkar webbplatsens läsbarhet

Vilka mått ska användas?

"s_margin-top-8": legend & på dolda element som togglas fram.
"s_margin-top-4": label, rubrik med radio buttons & annat.
"s_margin-top-1": Text under rubrik, micro whitespace.

Element och komponenter från Styleguide är redan designade och anpassade med white space. Det är framförd allt i våra tjänster och formulär eller vid nyutveckling som vi ska anpassa efter de tre olika måtten som vi beslutat.

På vilket element ska man lägga klassen?

Koda en ny div runt elementet eller gör på annat sätt för att åstadkomma samma resultat.

Styleguide för pensionsmyndigheten.se

Base

Color

Instruktion

COLOR PALETTE

Black

Blue

Light Orange

Dark Orange

Green

Warm Gray

Signal Colors

Sociala Medier-färger

Udda Färger

Deprecated Färger

BACKGROUNDS

Unmapped

Blue

Orange

Dark Orange

Green

TEXT

Unmapped

Blue

Light Orange

Green

BORDER

Unmapped

Blue

Light Orange

Green

ICON BACKGROUND

LINK

BUTTON BACKGROUND

ALERT TEXT

ALERT BACKGROUND

ALERT BORDER

RISK

CAMPAIGN CARD

SOCIAL MEDIA

Instruktion

Designa mörkare eller ljusare färg

Typography

Examples

h1 | Pensionens alla delar

h2 | Din pensionspyramid kan se annorlunda ut

h3 med klass s_font-normal | Din allmänna pension kommer från staten

h3 med klass s_font-bold | Bostadsform

h4 | Fyll i uppgifter om din bostad

Code

h1 | Pensio Sans Normal

h1 style:ad som en h2 | Pensio Sans Normal

h2 | Pensio Sans Normal

h2 style:ad som en h3 | Pensio Sans Normal

h3 | Pensio Sans Normal

h3 style:ad som en h4 | Pensio Sans Normal

h3 med klass s_font-medium

h4 med klass s_font-medium

Space

Examples

Examples

White space

White Space

Vilka mått ska användas?

På vilket element ska man lägga klassen?

Exempel på anpassning från ett flödestjänst

Code

Icons

Main

Code