Jobnet.dk designmanual

(1)

Jobnet.dk

designmanual

Version 04.00 15.02.2013

© Arbejdsmarkedsstyrelsen 2013

(2)

Browser kompatibilitet

Jobnet.dk udvikles med brug af CSS3, hvilket gør det væsentligt nemmere at vedligeholde alting. CSS3 gør det meget nemmere at lave f.eks. specielle skygger eller flotte animationer, som eventuelt skal kunne ændres med tiden.

Det nye design bliver udviklet til at understørre browserne: Internet explorer 8, 9, 10, Chrome, Safari i OSX og Firefox.

Ingen specielle effekter lavet i CSS3, som box og test shadow, bliver vist, når brugeren kommer i Internet explorer 8.

(3)

Typografi

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

Stag Sans Light

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

Stag Sans Book

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

Stag Sans Medium - Photoshop font Stag Sans Book Bold - Web font

Stag Sans Semi Bold

Stag Sans Thin Stag Sans Book Italic

Stag Sans (SS) er den primære typografi på jobnet.dk.

(4)

Fallback typografi

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå

1234567890

Arial Bold

Arial Regular = Arial Regular

= Arial Italic

= Arial Bold Arial Italic

Arial er fallback typografien på jobnet.dk. Fra Stag Sans til Arial

Stag Sans Thin Stag Sans Light Stag Sans Book

Stag Sans Book Italic Stag Sans Book Bold Stag Sans Semibold

(5)

Typografi – Specifikation

Nedenfor er et eksempel på hvordan typografi vil blive specificeret løbende i designmanualen.

SS Book 18/22px, #1D3847, 0.015em

Specifikationer:

Font family – SS (Stag Sans)

Font style – Book (Thin, Light, Book, Italic, Medium, Semi Bold) Font size – 18px

Line hight – 22px (vertikal linie højde) Color – #1D3847

Letter spacing – 0.015em (horisontal bogstavs mellemrum)

Line hight Letter spacing

Size Color

Family Style

(6)

Logo

Logo original

RGB 0/69/120 RGB 202/209/28

Gradient RGB 153/183/217

RGB 0/69/120

Logo til web med gradient

(7)

47px

38px

Logo størrelser

Header

Footer

OBS! Header og footer logo fungerer som link til forsiden.

(8)

22px

91px 47px

Baggrund skal være 100% fuld bredde af viewport

Ikke logget ind

Logget ind

Header

OBS! Hvid baggrund med skygge, #000000

(9)

75px 30px 30px

Varsling felt skubber alt indhold under sig 75px ned.

Varsling felt skal horisontalt centreres i dets container.

Varsling felt er dynamisk i højden.

Specifikationer:

Al tekst med 1px tekstskygge, #FFFFFF. Med maks w på 986px.

Tekst “VARSLING!” er i KAPITALER.

OBS! Rød baggrund med skygge, #000000.

Varsling

Gradient top, #D94848

Gradient bund, #CE4444

Baggrundsbilledet skal være lyst ved > Læs højt.

Specifikationer: > Læs højt SS Book 12px, #1D3847.

Tekst med 1px tekstskygge, #FFFFFF.

Hover, underline.

986px

(10)

Navigation - Dynamik

OBS! Topmenu skubber alt indhold under sig 53px ned.

OBS! Topmenu felt er dynamisk i højden.

30px

Brugeren er logget ind Brugeren er ikke logget ind

(11)

Navigation - Topmenu

Topmenu skubber alt indhold under sig 53px ned.

Topmenu skal horisontalt centreres i dets container.

Topmenu felt er dynamisk i højden.

Specifikationer:

Tekst altid i KAPITALER.

OBS! Mørkeblå baggrund med 1px streg, #FFFFFF.

Specifikationer: states

Aktivt menupunkt, SS BOOK 14PX, #FFFFFF, 0.025em, med valgt boks.

Inaktivt menupunkt, SS BOOK 14PX, #B9BCBF, 0.025em.

Hover, SS BOOK 14PX, #FFFFFF, 0.025em

OBS! “Valgt“ boks, #FFFFFF over aktivt menupunkt er 10xdynamisk px.

20px 50px 20px

Gradient top, # 13293D

Gradient bund, # 09182A Mål

States

1px streg, #FFFFFF

dynamisk px

(12)

30px

30px 30px

95px

52px 33px 60px

55px

Footer

20px

tekstfelt 229px

OBS! Indhold allignes med sitets 12 kolonners grid.

(13)

Footer – Link hover

1px streg, #BFCFE7

Skygge, #000000

(14)

986px 73px 10px

Grid

(15)

504px 1800 px

OBS! Bannerbilledet skal horisontalt centreres i dets container.

Der er lavet en Photoshop skabelon til banner billedet, containeren er 1800px bred og skabelonen sørger for at fade billedet ud mod en blågrå baggrundstile med patern.

Bannerbillede

Tile

(16)

322px

115px

332px

28px

24px 15px21px

21px 26px

20px 20px

23px 16px 48px

16px 12px 20px8px

Log ind

Specifikationer: baggrund

Baggrund med 1px border, #FFFFFF, opacitet 15%.

OBS! Gradient farve er målt op med opacitet.

Specifikationer: inputfelt Baggrundsfill, #FFFFFF

Inaktivt, med 1px border, #696868.

Aktivt, rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF.

Knapper ved hover. Inputfelt, aktivt med fokus Ikke aktiv

Gradient top, #1f2930

Gradient bund, #4E5B66 Gradient top, #1f2930

Gradient bund, #4E5B66

(17)

360px

25px 46px

25px

Log ind – fejlmeddelelse

Fejlmeddelelse boks er dynamisk i højden.

OBS! Skygge rundt om fejlmeddelelses boks, #000000.

Specifikationer: fejl

Fejl på inputfelt med 2px outline border, #C33E3E.

Højden på fejlmeddelelsesboks er bestemt af fejlmeddelelsestekst.

(18)

215px

Inputfelt, ikke aktivt

Inputfelt, aktivt med fokus

tekstfelt 300px

tekstfelt 156px

494px 490px

52px

56px 72px

64px

Søgefelt

Specifikationer: Inputfelt Baggrundsfill, #FFFFFF

Inaktivt inputfelt med 1px border, #696868.

Aktivt inputfelt rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF.

OBS! Baggrund med gradient laves til tile.

OBS! “På Jobnet finder...“ tekst med 1px skygge, #000000.

OBS! Inputfelt tekst SS Book Italic 18px, #696868.

tile

(19)

158px

Felter og tal er dynamiske. Teksten til hver felt er statisk.

Specifikationer:

Baggrundsfarve, #7BB8BF.

Al tekst har 1px skygge, #FFFFFF.

Vertikal linie, #65838C

OBS! Lyseblå baggrund med 1px streg i bunden, #FFFFFF.

OBS! Centreret glow med 50% pattern laves til slize.

32px

22px

38px

Statistik felt

slize

1px streg, #FFFFFF 40px

(20)

20px

10px

60px 10px

270px

322px 654px

220px

Link bokse

OBS! Brødtekst fra boks til boks har samme højde, fylder maks 4 linier og afsluttes med 3 prikker (...) hvis der er mere tekst.

(21)

Når musen går over en boks skifter linkfarve samt teksten rykker 10px ind.

Hele link boksen er klikbar.

Specifikationer:

Billede er 300x166px.

Ramme er 322x220 med 1px border, #CCCACA.

Padding om billedet 10px.

Tekst ved hover Tekst inaktiv

300x166px

Link boks

10px

10px 10px

220px

(22)

Boks ved hover Boks inaktiv

Video link boks

10px

10px 10px

220px

Hele video link boksen er klikbar.

Specifikationer:

Padding om billedet 10px.

Ramme er 322x220 med 1px border, #CCCACA.

(23)

Hele nyheds boksen er klikbar. Nyhedshjul skifter hvert 15 sek. Ved hover på boks standser nyhedshjulet ved den nyhed der er fremme.

Specifikationer:

Ramme er 322x270px med 1px border, #CCCACA.

Nyhedshjul knapper er 12x12px med 2px border.

Link ved hover.

Gradient top, #FFFFFF

Gradient bund, #E8EBEC

Hover Fill, #1D3847

Ikke aktiv

Nyheds boks

20px 20px

40px

100px

30px

12px 12px

270px

12px

Specifikationer: nyhedshjul knapper

Inaktiv med fill, #FFFFFF og border, #264578 Aktiv med fill, #1D3847 og border, #264578 Hover med fill, #FFFFFF og border. #366092

Aktiv Inaktiv

Fill, #FFFFFF

(24)

Kampagne boks behøver ikke nødvendigvis altid følge de overordnede regler.

Hele kampagne boksen er klikbar, også hvis den bliver præsenteret grafisk.

Specifikationer:

Kampagne boks

20px 40px

30px 270px

100px

270px

billede

(25)

Kampagne boks

270px 270px

20px 40px

30px 100px

Hele kampagne boksen er klikbar.

Specifikationer:

654px

billede

(26)

239px 105px

65px 45px

10px 45px

15px 5px

63px 18px

Quicklinks

903x1px streg, #96A6AB

Gradient top, #FFFFFF Gradient top, #FFFFFF

Gradient bund, #E8EBEC Gradient bund, #C8CFD2

Specifikationer: Knap

SS Book 14px, #696868, 0.025em.

239x105px med 1px border, #696868.

62px

Hover Inaktiv

(27)

Hover Inaktiv

Disabled

Gradient top, #BFD345

Gradient top, #A3D6DB

Gradient top, #AAA8A8

Gradient top, #C4FAFF Gradient top, #E7FF4C

Gradient bund, #8C9B33

Gradient bund, #88B2B7

Gradient bund, #CCCACA

Gradient bund, #89AFB3 Gradient bund, #A2B335

Knapper

Specifikationer: knapper

Primære knapper der kræver handling af brugeren er grønne.

Sekundære knapper er blå.

Tekst altid i KAPITALER, SS BOOK 14PX, #1D3847.

42px

166px 43px

16px 16px

292px

12px 12px

Slize

13px 13px

14px

14px 18px

21px

OBS! Slize består af lodret skygge og pil med 1px skygge #FFFFFF.

Specifikationer: knap border

Grønne knapper med 1px border, #A3BC0F.

Blå knapper med 1px border, #96BDC2.

Grå knap med 1px border, #A8A8A8.

(28)

Hover Inaktiv

Gradient top, #BFD345

Gradient top, #A3D6DB Gradient top, #C4FAFF

Gradient top, #E7FF4C Gradient bund, #8C9B33

Gradient bund, #88B2B7 Gradient bund, #89AFB3

Gradient bund, #A2B335

Knapper

42px

dynamisk

43px

12px

21px 13px 12px

13px 13px

13px 16px

16px 16px

16px

Specifikationer: knapper

Primære knapper der kræver handling af brugeren er grønne.

Sekundære knapper er blå.

Tekst altid i KAPITALER, SS BOOK 14PX, #1D3847.

OBS! Slize består af lodret skygge og pil med 1px skygge #FFFFFF.

Specifikationer: knap border

Grønne knapper med 1px border, #A3BC0F.

Blå knapper med 1px border, #96BDC2.

Grå knap med 1px border, #BFBFBF.

Slize

(29)

Hover Inaktiv

Gradient top, #FFFFFF Gradient top, #FFFFFF

Gradient bund, #BEBDBE Gradient bund, #9A999A

Knapper

GENERELT

48px

68px

52px

Specifikationer: play knap

#FFFFFF med skygge.

OBS! 50% cirkel baggrund, #182B37.

OBS! Grafisk skygge i bunden ved hover.

Specifikationer: søg knap Inner shadow på knappen.

Horisontal grafisk skygge i venstre side.

Loop ikon med 1px skygge, #FFFFFF.

(30)

Inputfelt

13px 13px

292px 15px

15px

Specifikationer: Inputfelt Baggrundsfill, #FFFFFF 1px border, #696868.

Inner shadow, #000000

OBS! Aktivt inputfelt rydder standardteksten.

OBS! Fokus på inputfelt med 2px outline border,

#7BB8BF.

Fokus Inaktiv

40px

Fill, #FFFFFF

(31)

Inputfelt

12px

13px

8px

Specifikationer: Inputfelt Baggrundsfill, #FFFFFF 1px border, #696868.

Inner shadow, #000000.

2px outer shadow, #FFFFFF.

OBS! Aktivt inputfelt rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF.

OBS! Fejl med 2px outline border, #C33E3E. Tekst, #C33E3E.

Fokus Fejl

Inaktiv

34px 38px

Fill, #FFFFFF

(32)

Checkbox / radiobutton

Specifikationer: checkbox/radiobutton Baggrundsfill, #FFFFFF

1px border, #696868.

Inner shadow, #000000.

2px outer shodow, #FFFFFF.

OBS! Aktiv sætter check/dot.

OBS! Fokus med 2px outline border, #7BB8BF.

OBS! Fejl med 2px outline border, #C33E3E.

Inaktiv Checkbox

Aktiv Fokus Fejl

Radiobutton

Inaktiv Aktiv Fokus Fejl

15px 19px 15px 19px

Fill, #FFFFFF Fill, #FFFFFF

(33)

Ikoner

GENERELT

Kontakt dit jobcenter Din status

CV / Jobplan

Internt /eksternt jobopslag Luk

Kontakt supporten

Post

Del

Fold ud / fold ind Søg loop/ knap pil Aktiv / inaktiv /hover nyhedshjul Aktuelle nyheder

Besked fra Jobnet

Ikke aktiv / aktiv farvorit Møde / mødebooking

Nyt jobopslag

(34)

Ikoner

GENERELT

Tillykke med dit arbejde!

Registrering / bekræftelse Rigtig god ferie!

Rigtig god bedring!

OBS! Fill #182B37 med 1px skygge, #FFFFFF

(35)

986px 73px10px

Grid

(36)

Navigation

Specifikationer: brødkrumme sti Inaktivt link SS Book 12 px, #1D3847.

Hover ved link, underline.

Specifikationer:

Hover, SS Book 14px, #FFFFFF, 0.025em.

Specifikationer: brødkrumme sti

Brødkrumme tekst med Versaler, #1D3847, skal centreres vertikalt i 30px tomrum mellem navigationsmenuen og underside containeren.

Brødkrumme Topmenu

OBS! Ingen menupunkter er aktive i topmenuen på undersiderne.

OBS! Tekst med KAPITALER, SS Book 14 px, #B9BCBF.

30px

(37)

Layout

1800 px

Baggrundsbilledet skal horisontalt centreres i dets container, som er 1800px bred. Baggrundsblilledet er slicet ud med transperens i kanterne, så det fader ud mod baggrundsfarven, #E6EBF2.

30px 100px

766px 220px

30px 185px 15px 15px

40px 30px

Footer OBS! Baggrund

#E6EBF2

OBS! Baggrund tile med pattern

OBS! Baggrund

#FFFFFF

(38)

Nyhed

30px 16px

40px

40px 26px 30px dynamisk px

30px

30px 20px

20px

OBS! Standard tekstfarve, #1D3847.

OBS! Standard datoformat, dd-mm-yy.

Specifikationer: billede Billede er 551xdynamisk px.

551px

30px 185px

30px

(39)

Video

Specifikationer:

Video er 551x343px (16:9 format).

30px

30px 20px

20px 26px

40px 40px

OBS! På undersiden afspilles videoen automatisk.

Hele video boksen er klikbar.

551px

30px 185px

30px

(40)

Tekst

OBS! Kontakt dit jobcenter er out of scope i første omgang.

1 px, #D1D6D9 40px

40px 26px

30px

30px 20px

20px

551px 185px

30px

(41)

Layout

1800 px

Baggrundsbilledet skal horisontalt centreres i dets container, som er 1800px bred. Baggrundsblilledet er slicet ud med transperens i kanterne, så det fader ud mod den blågrå baggrundstile, der er på alle jobnet sider.

30px 100px

610px 220px

156px 10px

10px

30px 30px 15px 15px

40px 30px

Footer OBS! Baggrund

#E6EBF2

OBS!

Baggrund

#FFFFFF

OBS! Baggrund tile med pattern

OBS! Baggrund

#FFFFFF

(42)

Overblik

30px 18px

18px

30px 14px 14px

40px

30px 30px

20px

550px

(43)

Venstremenu - link

Niveau 1 - link

Specifikationer: link

Ved klik på niveau 1, som ikke har dropdown funktionalitet, linkes der direkte til siden.

aktiv link

Specifikationer: venstremenu

Der tre overordnede navigationsprincip- per: Link, dropdown og pageload.

Siden må ikke hoppe ved klik, foldind, foldud eller pageload i venstremenuen.

Hele venstremenuen bliver inaktiv når et topmenupunkt vælges.

(44)

Venstremenu - dropdown

Niveau 2 - foldind Automatisk transition Niveau 1 - foldud

Specifikationer: foldind

Ved klik på inaktiv menupunkt på niveau 1, foldes hele niveau 2 menu- en ud ved animeret transition.

Specifikationer: automatisk transition

Ved klik på “MIN JOBSØGNING” bliver niveau 2 til “GIV BESKED“ automatisk foldet ind. Samti- dig foldes “MIN JOBSØGNING “niveau 2 ud.

OBS! Klik på niveau 1 aktiverer foldind/foldud funktionaliteten og medfører ikke state change.

Specifikationer: foldud

Ved klik på niveau 1 - foldud foldes niveau 2 ud ved animeret transition.

foldud foldind Foldud

pil flugter med bunden af teksten

(45)

Venstremenu - pageload

Niveau 2 - pageload Niveau 1 - dynamik Automatisk transition

OBS! Klik på niveau 2 aktiverer pageload og medfører state change på begge niveauer.

Specifikationer: pageload

Ved klik på niveau 2 bliver menupunktet valgt, siden loades og niveau 1 menupunktet bliver aktivt.

Specifikationer: dynamik

Hvis valgt niveau 2 menu foldes ind, forbliver menupunkterne valgte indtil næste pageload.

valgt aktiv

Niveau 1 og 2 (skjult) forbliver aktiv/valgt indtil næste pageload

Aktiveres et andet menupunkt på niveau 2, bliver de forrige menupunkter inaktive

Specifikationer: automatisk transition

Ved klik på “MIN JOBSØGNING” bliver niveau 2 til “GIV BESKED“ automatisk foldet ind. Samti- dig foldes “MIN JOBSØGNING “niveau 2 ud.

(46)

18px 18px

Inaktiv Aktiv/valgt Hover

47px

12px 12px

10px 10px 156px

10px 20px

34px

Venstremenu - metrics

Specifikationer: tekst Niveau 1 tekst i KAPITALER.

Niveau 2 tekst i Versaler.

Gradient top, #13293D Gradient top, #647994 Gradient bund, #09182B Gradient bund, #375275

OBS!

Baggrund

#FFFFFF

Specifikationer: foldud/ind pil

Foldind fold ud pilen har samme farve som inaktiv, aktiv/valgt, og hover tekst.

OBS! Der er ikke hover state på aktiv/

valgt menupunkt.

(47)

Skygge 10px linje 1px,

#C4D0D0

prik linje 1px,

#9DA4AB

Inaktiv Aktiv/valgt Hover

Venstremenu - linjer og knapper

Gradient top, #13293D Gradient top, #647994 Gradient bund, #09182B Gradient bund, #375275 Box bottom

border 1px,

#FFFFFF med

1px skygge,

#FFFFFF

ovenpå menupunkter og linjer.

Specifikationer: menupunkt

Hele menupunktet skal fungere som en knap.

dvs. det skal være klikbart og skal kunne få synligt fokus rundt om knappens kant.

Specifikationer: linjer

Ved overgang fra aktivt til valgt menupunkt er der hvid linje. Ved valgt niveau2 som ikke grænser op til aktivt menupunkt skal der ikke være prikkede linjer.

(48)

Logo maksimum størrelse 120x80px, logoet loater left container.

Specifikationer:

Jobopslag er 550xdynamisk px.

Jobtitel er dynamisk.

Jobbeskrivelse kan være maksimum fire linjer. Hvis der bruges et link i beskrivelsen, skal det regnes med i de fire linjer.

Grafisk skygge i højre bund af boksen.

Jobopslag

MIN SIDE

20px 15px

120px

550px

Ikoner

#D1D6D9

Ikon

Ikon Grafisk skygge

20px

18px

dynamisk px dynamisk px

Vi vist at der linkes forskellige steder hen ved interne/eksterne jobopslag ved brug af mouseover.

Hvad gør vi ved jobopslag som ikke har et billede?

Hvordan håndter vi prik prik prik ...

(49)

Jobopslag

Hover / Valgt Inaktiv

Grafisk skygge Internt job Grafisk skygge Valgt

Eksternt job Inaktiv

(50)

Genveje

20px 20px

20px

265px

222px

550px

dynamisk px

dynamisk px Inaktiv

Inaktiv

Hover

20px

20px 20px

20px 18px

30px

(51)

Tjek jobforslag

30px 420px

30px

550px 30px

12px 15px 16px 190px 20px

50px

Gradient top, #2D6D90 Gradient top, #25546D

Gradient top, #AFDDE2

Gradient bund, #1E3A49 Gradient bund, #1D3948

Gradient bund, #95BCC1

Specifikationer:

Boks er 550x190px med 1px border, #9DBCBF.

Tekst i versaler SS Book 18/22px, #1D3847.

Specifikationer: knap

Tekst altid i versaler SS Book 18 px, #FFFFFF.

Knap tekst med 50% 1px tekstskygge, #OOOOOO.

Knap er 420x50px med 1px border, #BFEBF0.

Linje #769AA2

Inaktiv

Hover

(52)

Tjekket jobforslag

30px 62px

30px

550px 30px

12px 15px 16px 190px 20px

50px

Specifikationer:

Specifikationer: ikon

Ikon med 1px skygge, #FFFFFF.

Ikon er 62x50px.

Linje #769AA2

(53)

Tjek jobforslag

420px

550px 30px

20px 20px

22px 110px

50px

140px 96px

Slize

Gradient top, #4E4E4E

Gradient top, #6A6A6A Gradient bund, #C2C2C2

Gradient bund, #888888

Specifikationer: boks

Boks er 550x110px med 1px border, #C0C0C0.

Tekst i versaler SS Book 18/22px, #1D3847.

Tekst i KAPITALER SS Book 18 px, #FFFFFF, 0.05EM.

Knap tekst med 50% 1px tekstskygge, #OOOOOO.

Knap er 420x50px med 1px border, #F1F1F1.

30px 30px

Disabled

(54)

Tjek jobforslag – fejlmelding

420px

550px 30px

30px 20px

110px 50px

Gradient top, #A0CACF

Gradient bund, #93BABF

Specifikationer:

Tekst altid i versaler SS Book 18 px, #FFFFFF.

Knap tekst med 50% 1px tekstskygge, #FFFFFF.

Knap er 420x52px med 1px border, #83ABB2.

(55)

Notifikationer

MIN SIDE

550px

14px

14px dynamisk px

dynamisk px

OBS!

Notifikationer kan have et link/flere link.

Ved flere links er afstanden mellem hvert link 30px.

Specifikationer: notifikation

Boks er 550xdynamisk px med 1px border, #A4BA29.

Boks baggrund, #D1DE7D.

Foldud/ind baggrund, #EAF3B5

grafisk skygge

Foldud pil flugter med bunden af teksten 30px

10px 10px

linje 1px,

#A4BA29

(56)

MIN SIDE

10px 54px

13px Inaktiv

Hover

17px 12px10px 10px

Notifikation

Streg, #A4BA29

Specifikationer: ikoner

Ikoner skal være centreret i en 54px container Ikoner har 1px skygge, #FFFFFF.

Ikonfarve er #1D3847.

grafisk skygge Ikoner skal være centreret i en 54px container

linje 1px,

#A4BA29

(57)

MIN SIDE

10px 10px

Notifikation – foldud

Foldud pil flugter med bunden af teksten grafisk skygge

10px 10px

Specifikationer: Foldud funktionalitet

Ved klik på læs mere/foldud knap foldes tekstboks ud ved animeret transition, se næste side.

Foldud/ind baggrund, #EAF3B5

linje 1px,

#A4BA29

(58)

MIN SIDE

30px dynamisk px

30px 10px

10px 30px 22px

40px

Notifikation – foldind

Specifikationer: Læs mere Baggrund er #EAF3B5.

grafisk skygge

Foldind pil flugter med bunden af teksten

Specifikationer: Foldind

Ved klik på læs mere/foldind knap foldes tekstboks ind ved animeret transition, se forrige side.

linje 1px,

#A4BA29

(59)

Bekræftelse

MIN SIDE

550px

16px 20px

20px

148px 402px

120px 100px

Specifikationer:

Al tekst #1D3847.

Ikonerne er centreret i 120x100 container.

grafisk skygge

SS Book Bold 26px SS Book 16/18px

(60)

30px

dynamisk px

30px

30px 30px 16px 30px

Kvittering

Specifikationer:

Baggrund er #FFFFFF med 1 px outline border, #C4D0D0.

Al tekst #1D3847.

grafisk skygge

#C4D0D0

550px

(61)

10px

#A4BA29

20px

20px 20px

20px 184px 108px

20px 16px12px 16px

Tabel

grafisk skygge

Specifikationer: tabel

Baggrund er #D1DE7D med 1px outline border, #A4BA29.

Al tekst #1D3847.

Foldud pil flugter med bunden af teksten linje 1px,

#A4BA29

(62)

30px

20px 10px

10px 30px

30px

20px

30px

Tabel – dialog

Specifikationer: dialog

Baggrund er #FFFFFF med 1px border, #C4D0D0.

Al tekst #1D3847.

skygge

grafisk skygge

#A4BA29

border 1px,

#C4D0D0

(63)

Tabel – dialog

Specifikationer: dialog

Baggrund er #FFFFFF med 1px outline border, #C4D0D0.

Al tekst #1D3847.

30px 30px

30px

20px

30px

skygge

grafisk skygge

20px 10px

#A4BA29

border 1px,

#C4D0D0

(64)

30px 33px

35px

30px 14px

40px 14px

242px

243px

Inaktiv dato Dag Måned og år

Aktiv dato Aktiv linje Inaktiv linje

Top nav:

Gradient top #AFDCE1

Valgt baggrund:

Gradient top #AFDDE1 Gradient bund #95BCC1 Inaktiv baggrund:

Gradient top #F6F6F6 Gradient bund #EFEFEF Aktiv baggrund:

Gradient top #EDEDED Gradient bund #DEDEDE Gradient bund #95BCC1

Kalender

OBS! Aktiv linje, #BBBBBB. 1px skygge, #FFFFFF.

OBS! Inaktiv linje, #DDDDDD. 1px skygge, #FFFFFF.

Specifikationer: tekst

Måned og år, #1D3847. Tekst i Versaler.

Dag, SS BOOK 10PX, #1D3847. Tekst i KAPITALER.

Inaktiv dato, SS Book light 13px, #1D3847.

Aktiv dato, SS Book Bold 13px, #1D3847.

Dags dato, SS Book Bold 13px, #1D3847.

Valgt dato, SS Book Bold 13px, #1D3847.

OBS! Valgt state trumpfer dags dato.

OBS! 1px dags dato boxborder #1D3847. 1px skygge, #FFFFFF indeni box.

Specifikationer: top navigation

Ved klik på frem og tilbage pil kan man se forrige/næste måned/år.

Måned og år, #1D3847.

Top navigation boks, 1px border, #AFDCE1.

Top navigation boks, pile og tekst centreres i container.