Jobnet.dk designmanual. Version

Jobnet.dk designmanual Version 04.00 15.02.2013 Arbejdsmarkedsstyrelsen 2013

GENERELT 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. 2

GENERELT Typografi Stag Sans (SS) er den primære typografi på jobnet.dk. Stag Sans Thin ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Stag Sans Book Italic ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Stag Sans Light ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Stag Sans Medium - Photoshop font Stag Sans Book Bold - Web font ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Stag Sans Book ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Stag Sans Semi Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 3

GENERELT Fallback typografi Arial er fallback typografien på jobnet.dk. Fra Stag Sans til Arial Arial Regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Arial Italic ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 Stag Sans Thin Stag Sans Light Stag Sans Book Stag Sans Book Italic Stag Sans Book Bold Stag Sans Semibold = Arial Regular = Arial Italic = Arial Bold Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnoopqrstuvwxyzæøå 1234567890 4

GENERELT Typografi Specifikation Nedenfor er et eksempel på hvordan typografi vil blive specificeret løbende i designmanualen. Family Style Size Color SS Book 18/22px, #1D3847, 0.015em Line hight Letter spacing 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) 5

GENERELT Logo Logo original Logo til web med gradient RGB 202/209/28 RGB 153/183/217 Gradient RGB 0/69/120 RGB 0/69/120 6

GENERELT Logo størrelser Header 47px Footer 38px OBS! Header og footer logo fungerer som link til forsiden. 7

GENERELT Header Baggrund skal være 100% fuld bredde af viewport Ikke logget ind 22px 47px 91px 22px Logget ind OBS! Hvid baggrund med skygge, #000000 8

GENERELT Varsling Baggrund skal være 100% fuld bredde af viewport 75px 986px Gradient top, #D94848 Gradient bund, #CE4444 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. 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. OBS! Rød baggrund med skygge, #000000. 9

GENERELT Navigation - Dynamik Brugeren er ikke logget ind Brugeren er logget ind OBS! Topmenu skubber alt indhold under sig 53px ned. OBS! Topmenu felt er dynamisk i højden. 10

GENERELT Navigation - Topmenu Baggrund skal være 100% fuld bredde af viewport Mål 50px Gradient top, # 13293D Gradient bund, # 09182A States 1px streg, #FFFFFF dynamisk px 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. 11

GENERELT Footer 60px tekstfelt 229px 55px 95px 33px 52px OBS! Indhold allignes med sitets 12 kolonners grid. 12

GENERELT Footer Link hover 1px streg, #BFCFE7 Skygge, #000000 13

FORSIDE Grid 986px 73px 10px 14 OBS! Hele sitet følger et 12 kolonners grid med en bredde på 986px og 73px kolonne bredde med 10px margin.

FORSIDE Bannerbillede 1800 px Tile 504px 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. 15

FORSIDE Log ind Ikke aktiv Knapper ved hover. Inputfelt, aktivt med fokus 26px 28px Gradient top, #1f2930 16px 48px 322px 12px 115px 8px 21px 15px 23px 16px Gradient bund, #4E5B66 Gradient top, #1f2930 21px 332px 24px Gradient bund, #4E5B66 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. 16

FORSIDE Log ind fejlmeddelelse 25px 46px 25px 25px 360px 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. 17

FORSIDE Søgefelt Baggrund skal være 100% fuld bredde af viewport Inputfelt, ikke aktivt tile 490px 52px Inputfelt, aktivt med fokus 72px 494px 215px tekstfelt 300px 56px tekstfelt 156px OBS! Baggrund med gradient laves til tile. OBS! På Jobnet finder... tekst med 1px skygge, #000000. OBS! Inputfelt tekst SS Book Italic 18px, #696868. 64px Specifikationer: Inputfelt Baggrundsfill, #FFFFFF Inaktivt inputfelt med 1px border, #696868. Aktivt inputfelt rydder standardteksten, samt fokus på inputfelt med 2px outline border, #7BB8BF. 18

FORSIDE Statistik felt Baggrund skal være 100% fuld bredde af viewport slize 32px 22px 158px 38px 40px 1px streg, #FFFFFF 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. 19

FORSIDE Link bokse 10px 2 10px 270px 60px 322px 654px 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. 20

FORSIDE Link boks 10px Tekst inaktiv 10px Tekst ved hover 2 300x166px 10px 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. 21

FORSIDE Video link boks 10px Boks inaktiv 10px Boks ved hover 2 10px Hele video link boksen er klikbar. Specifikationer: Billede er 300x166px. Padding om billedet 10px. Ramme er 322x220 med 1px border, #CCCACA. 22

FORSIDE Nyheds boks Ikke aktiv Link ved hover. 40px Gradient top, #FFFFFF 100px 270px 12px 12px 12px Fill, #FFFFFF Aktiv Inaktiv Gradient bund, #E8EBEC Fill, #1D3847 Hover 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. Specifikationer: nyhedshjul knapper Inaktiv med fill, #FFFFFF og border, #264578 Aktiv med fill, #1D3847 og border, #264578 Hover med fill, #FFFFFF og border. #366092 23

FORSIDE Kampagne boks billede 40px 100px 270px billede 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: Billede er 652x268px. Ramme er 654x270px med 1px border, #CCCACA. 24

FORSIDE Kampagne boks billede 40px 100px 270px 654px Hele kampagne boksen er klikbar. Specifikationer: Billede er 652x268px. Ramme er 654x270px med 1px border, #CCCACA. 25

FORSIDE Quicklinks Hover Inaktiv 903x1px streg, #96A6AB 62px 15px 5px 63px 45px Gradient top, #FFFFFF Gradient top, #FFFFFF 18px 105px 65px 45px Gradient bund, #C8CFD2 Gradient bund, #E8EBEC 10px 239px Specifikationer: Knap SS Book 14px, #696868, 0.025em. 239x105px med 1px border, #696868. 26

GENERELT Knapper Inaktiv Hover 166px 43px 42px Gradient top, #BFD345 Gradient bund, #8C9B33 Gradient top, #E7FF4C Gradient bund, #A2B335 14px 14px 16px 16px 21px 18px Gradient top, #A3D6DB Gradient bund, #88B2B7 12px 12px Gradient top, #C4FAFF Gradient bund, #89AFB3 13px 13px 292px Disabled Gradient top, #AAA8A8 Gradient bund, #CCCACA Slize OBS! Slize består af lodret skygge og pil med 1px skygge #FFFFFF. 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. Specifikationer: knap border Grønne knapper med 1px border, #A3BC0F. Blå knapper med 1px border, #96BDC2. Grå knap med 1px border, #A8A8A8. 27

GENERELT Knapper Inaktiv Hover dynamisk 43px 42px Gradient top, #BFD345 Gradient bund, #8C9B33 Gradient top, #E7FF4C Gradient bund, #A2B335 16px 16px Gradient top, #A3D6DB Gradient bund, #88B2B7 Gradient top, #C4FAFF Gradient bund, #89AFB3 13px 13px 12px 12px 16px 16px dynamisk 13px 13px Slize 21px OBS! Slize består af lodret skygge og pil med 1px skygge #FFFFFF. 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. Specifikationer: knap border Grønne knapper med 1px border, #A3BC0F. Blå knapper med 1px border, #96BDC2. Grå knap med 1px border, #BFBFBF. 28

IKONER OPDATERES LØBENDE GENERELT Knapper Inaktiv Hover 52px 48px Gradient top, #FFFFFF Gradient bund, #BEBDBE Gradient top, #FFFFFF Gradient bund, #9A999A Specifikationer: søg knap Inner shadow på knappen. Horisontal grafisk skygge i venstre side. Loop ikon med 1px skygge, #FFFFFF. OBS! Grafisk skygge i bunden ved hover. 68px Specifikationer: play knap #FFFFFF med skygge. OBS! 50% cirkel baggrund, #182B37. 29

GENERELT Inputfelt Inaktiv Fokus 15px 15px 13px 13px 292px Fill, #FFFFFF 40px Specifikationer: Inputfelt Baggrundsfill, #FFFFFF 1px border, #696868. Inner shadow, #000000 OBS! Aktivt inputfelt rydder standardteksten. OBS! Fokus på inputfelt med 2px outline border, #7BB8BF. 30

GENERELT Inputfelt Inaktiv Fokus Fejl 34px 12px 8px 38px 13px Fill, #FFFFFF 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. 31

GENERELT Checkbox / radiobutton Checkbox Inaktiv Aktiv Fokus Fejl Radiobutton Inaktiv Aktiv Fokus Fejl 15px 19px 15px 19px Fill, #FFFFFF Fill, #FFFFFF 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. 32

IKONER OPDATERES LØBENDE GENERELT Ikoner Din status Kontakt dit jobcenter Kontakt supporten Aktuelle nyheder CV / Jobplan Post Besked fra Jobnet Møde / mødebooking Luk Fold ud / fold ind Søg loop/ knap pil Aktiv / inaktiv /hover nyhedshjul Internt /eksternt jobopslag Nyt jobopslag Del Ikke aktiv / aktiv farvorit 33

IKONER OPDATERES LØBENDE GENERELT Ikoner Rigtig god ferie! Tillykke med dit arbejde! Rigtig god bedring! Registrering / bekræftelse OBS! Fill #182B37 med 1px skygge, #FFFFFF 34

UNDERSIDE Grid 986px 73px 10px 35 OBS! Hele sitet følger et 12 kolonners grid med en bredde på 986px og 73px kolonne bredde med 10px margin.

UNDERSIDE Navigation Topmenu OBS! Ingen menupunkter er aktive i topmenuen på undersiderne. OBS! Tekst med KAPITALER, SS Book 14 px, #B9BCBF. Specifikationer: Hover, SS Book 14px, #FFFFFF, 0.025em. Brødkrumme Specifikationer: brødkrumme sti Brødkrumme tekst med Versaler, #1D3847, skal centreres vertikalt i tomrum mellem navigationsmenuen og underside containeren. Specifikationer: brødkrumme sti Inaktivt link SS Book 12 px, #1D3847. Hover ved link, underline. 36

UNDERSIDE Layout 1800 px 40px OBS! Baggrund #E6EBF2 OBS! Baggrund tile med pattern OBS! Baggrund #FFFFFF 185px 15px 15px 766px 2 Footer 100px 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. 37

UNDERSIDE Nyhed 551px 185px 16px 40px dynamisk px 40px 26px OBS! Standard tekstfarve, #1D3847. OBS! Standard datoformat, dd-mm-yy. Specifikationer: billede Billede er 551xdynamisk px. 38

UNDERSIDER Video 551px 185px 40px 40px 26px OBS! På undersiden afspilles videoen automatisk. Hele video boksen er klikbar. Specifikationer: Video er 551x343px (16:9 format). 39

UNDERSIDER Tekst 551px 185px 40px 40px 26px 1 px, #D1D6D9 OBS! Kontakt dit jobcenter er out of scope i første omgang. OBS! Standard tekstfarve, #1D3847. 40

MIN SIDE Layout 1800 px 40px OBS! Baggrund #E6EBF2 OBS! Baggrund #FFFFFF OBS! Baggrund tile med pattern OBS! Baggrund #FFFFFF 10px 10px 15px 15px 156px 610px 2 Footer 100px 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. 41

MIN SIDE Overblik 550px 18px 18px 40px 14px 14px OBS! Standard tekstfarve, #1D3847. 42

MIN SIDE Venstremenu - link Niveau 1 - link aktiv link Specifikationer: venstremenu Der tre overordnede navigationsprincipper: Link, dropdown og pageload. Specifikationer: link Ved klik på niveau 1, som ikke har dropdown funktionalitet, linkes der direkte til siden. Siden må ikke hoppe ved klik, foldind, foldud eller pageload i venstremenuen. Hele venstremenuen bliver inaktiv når et topmenupunkt vælges. 43

MIN SIDE Venstremenu - dropdown Niveau 1 - foldud Niveau 2 - foldind Automatisk transition Foldud pil flugter med bunden af teksten foldud foldind 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. 44 Specifikationer: foldind Ved klik på inaktiv menupunkt på niveau 1, foldes hele niveau 2 menuen ud ved animeret transition. Specifikationer: automatisk transition Ved klik på MIN JOBSØGNING bliver niveau 2 til GIV BESKED automatisk foldet ind. Samtidig foldes MIN JOBSØGNING niveau 2 ud.

MIN SIDE Venstremenu - pageload Niveau 2 - pageload Niveau 1 - dynamik Automatisk transition aktiv valgt Niveau 1 og 2 (skjult) forbliver aktiv/valgt indtil næste pageload Aktiveres et andet menupunkt på niveau 2, bliver de forrige menupunkter inaktive 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. 45 Specifikationer: dynamik Hvis valgt niveau 2 menu foldes ind, forbliver menupunkterne valgte indtil næste pageload. Specifikationer: automatisk transition Ved klik på MIN JOBSØGNING bliver niveau 2 til GIV BESKED automatisk foldet ind. Samtidig foldes MIN JOBSØGNING niveau 2 ud.

MIN SIDE Venstremenu - metrics Inaktiv Aktiv/valgt Hover 10px 10px 10px 156px 47px 34px Gradient top, #13293D Gradient bund, #09182B Gradient top, #647994 Gradient bund, #375275 12px 12px OBS! Baggrund #FFFFFF 18px 18px Specifikationer: tekst Niveau 1 tekst i KAPITALER. Niveau 2 tekst i Versaler. 46 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.

MIN SIDE Venstremenu - linjer og knapper Specifikationer: skygge Skyggen i venstremenuen skal ligge ovenpå menupunkter og linjer. Inaktiv Aktiv/valgt Hover linje 1px, #C4D0D0 prik linje 1px, #9DA4AB Box bottom border 1px, #FFFFFF med 1px skygge, #FFFFFF Gradient top, #13293D Gradient bund, #09182B Gradient top, #647994 Gradient bund, #375275 Skygge 10px 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. 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. 47

MIN SIDE Jobopslag Spørg teamet: Bør vi fjerne linket i brødteksten, når overskriften fungerer som link? 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... 1 15px Ikon dynamisk px 18px dynamisk px 18px Ikon Grafisk skygge #D1D6D9 Ikoner 550px 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. 48

MIN SIDE Jobopslag Inaktiv Hover / Valgt Eksternt job Grafisk skygge Inaktiv Internt job Grafisk skygge Valgt 49

MIN SIDE Genveje 265px Inaktiv dynamisk px 222px Inaktiv 18px dynamisk px Hover 550px 50

MIN SIDE Tjek jobforslag 4 Gradient top, #AFDDE2 50px 190px 16px 15px Linje #769AA2 12px 550px Gradient bund, #95BCC1 Inaktiv Gradient top, #25546D Gradient bund, #1D3948 Hover Gradient top, #2D6D90 Gradient bund, #1E3A49 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. 51

MIN SIDE Tjekket jobforslag 62px Gradient top, #AFDDE2 50px 190px 16px 15px Linje #769AA2 12px Gradient bund, #95BCC1 550px Specifikationer: Boks er 550x190px med 1px border, #9DBCBF. Specifikationer: ikon Ikon med 1px skygge, #FFFFFF. Ikon er 62x50px. 52

MIN SIDE Tjek jobforslag 4 Gradient top, #4E4E4E 110px 50px 22px Gradient bund, #C2C2C2 Slize 140px 96px Disabled 550px Gradient top, #6A6A6A Gradient bund, #888888 Specifikationer: boks Boks er 550x110px med 1px border, #C0C0C0. Tekst i versaler SS Book 18/22px, #1D3847. Specifikationer: knap Tekst i KAPITALER SS Book 18 px, #FFFFFF, 0.05EM. Knap tekst med 50% 1px tekstskygge, #OOOOOO. Knap er 420x50px med 1px border, #F1F1F1. 53

MIN SIDE Tjek jobforslag fejlmelding 4 Gradient top, #AFDDE2 110px 50px Gradient bund, #95BCC1 550px Gradient top, #A0CACF Gradient bund, #93BABF Specifikationer: Boks er 550x110px med 1px border, #9DBCBF. Specifikationer: knap Tekst altid i versaler SS Book 18 px, #FFFFFF. Knap tekst med 50% 1px tekstskygge, #FFFFFF. Knap er 420x52px med 1px border, #83ABB2. 54

IKONER OPDATERES LØBENDE MIN SIDE Notifikationer 550px dynamisk px 14px linje 1px, #A4BA29 dynamisk px 14px dynamisk px grafisk skygge 10px 10px Foldud pil flugter med bunden af teksten Specifikationer: notifikation Boks er 550xdynamisk px med 1px border, #A4BA29. Boks baggrund, #D1DE7D. Foldud/ind baggrund, #EAF3B5 Grafisk skygge i højre bund af boksen. OBS! Notifikationer kan have et link/flere link. Ved flere links er afstanden mellem hvert link. 55

IKONER OPDATERES LØBENDE MIN SIDE Notifikation 54px 10px 13px Inaktiv linje 1px, #A4BA29 Ikoner skal være centreret i en 54px container Streg, #A4BA29 17px Hover 12px 10px 10px grafisk skygge Specifikationer: notifikation Boks er 550xdynamisk px med 1px border, #A4BA29. Boks baggrund, #D1DE7D. Grafisk skygge i højre bund af boksen. Specifikationer: ikoner Ikoner skal være centreret i en 54px container Ikoner har 1px skygge, #FFFFFF. Ikonfarve er #1D3847. 56

IKONER OPDATERES LØBENDE MIN SIDE Notifikation foldud 10px 10px 10px 10px linje 1px, #A4BA29 Foldud pil flugter med bunden af teksten grafisk skygge Specifikationer: Foldud funktionalitet Ved klik på læs mere/foldud knap foldes tekstboks ud ved animeret transition, se næste side. Specifikationer: notifikation Boks er 550xdynamisk px med 1px border, #A4BA29. Boks baggrund, #D1DE7D. Foldud/ind baggrund, #EAF3B5 Grafisk skygge i højre bund af boksen. 57

IKONER OPDATERES LØBENDE MIN SIDE Notifikation foldind 10px 10px 22px linje 1px, #A4BA29 Foldind pil flugter med bunden af teksten dynamisk px 40px grafisk skygge Specifikationer: Læs mere Baggrund er #EAF3B5. Grafisk skygge i højre bund af boksen. Specifikationer: Foldind Ved klik på læs mere/foldind knap foldes tekstboks ind ved animeret transition, se forrige side. 58

IKONER OPDATERES LØBENDE MIN SIDE Bekræftelse 550px Gradient top, #AFDDE2 100px 16px Gradient bund, #95BCC1 148px 1 402px grafisk skygge SS Book 16/18px SS Book Bold 26px Specifikationer: Boks er 550x100px med 1px border, #9DBCBF. Al tekst #1D3847. Ikonerne er centreret i 120x100 container. 59

MIN SIDE Kvittering 16px #C4D0D0 dynamisk px Specifikationer: Baggrund er #FFFFFF med 1 px outline border, #C4D0D0. Grafisk skygge i højre bund af boksen. Al tekst #1D3847. 60 550px grafisk skygge

MIN SIDE Tabel 184px 108px #A4BA29 10px 12px 16px 16px linje 1px, #A4BA29 Foldud pil flugter med bunden af teksten grafisk skygge Specifikationer: tabel Baggrund er #D1DE7D med 1px outline border, #A4BA29. Al tekst #1D3847. Grafisk skygge i højre bund af boksen. 61

MIN SIDE Tabel dialog 10px linje 1px, #A4BA29 skygge border 1px, #C4D0D0 Foldud pil flugter med bunden af teksten grafisk skygge 10px Specifikationer: dialog Baggrund er #FFFFFF med 1px border, #C4D0D0. Al tekst #1D3847. 62

MIN SIDE Tabel dialog 10px linje 1px, #A4BA29 Foldud pil flugter med bunden af teksten skygge border 1px, #C4D0D0 grafisk skygge Specifikationer: dialog Baggrund er #FFFFFF med 1px outline border, #C4D0D0. Al tekst #1D3847. 63

MIN SIDE Kalender 14px 242px 14px Måned og år Dag 40px Top nav: Gradient top #AFDCE1 Gradient bund #95BCC1 Inaktiv linje Aktiv linje Aktiv dato 243px Aktiv baggrund: Gradient top #EDEDED Gradient bund #DEDEDE Valgt baggrund: Gradient top #AFDDE1 Gradient bund #95BCC1 Inaktiv dato 33px 35px Inaktiv baggrund: Gradient top #F6F6F6 Gradient bund #EFEFEF 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. 64