Huddinge kommun digital styleguide. Värdeord och personlighet

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Huddinge kommun digital styleguide. Värdeord och personlighet"

Ingemar Lind
för 8 år sedan
Visningar:

2 Värdeord och personlighet

3 Logotyp

4 Logotyp storlek Desktop 1440x x64 px Language Kontakt Sök ipad 768X x50 px Language Kontakt Sök Smartphone 400x x39PX Kontakt Sök Meny

5 kommun digital styleguide Bildmanual

6 Sociala medier avatar x 1/3x 1/2x

7 Sociala medier exempel

8 Färgschema huvudwebb Webbfärger 40% 20% 40% 20% 40% 20% 40% 20% blå RGB #005CA9 turkos RGB #1B828D rosa RGB #C83C96 Svart RGB # % 20% 40% 20% 40% 20% orange RGB #FF6600 röd RGB #D43232 skogsgrön RGB # Länkfärger röd RGB #E25353 Aktiv länk RGB #B00018

9 Färgschema subwebb Tema 1 Tema 2 Tema 3 40% 20% 40% 20% 40% 20% 40% 20% blå RGB #085DA9 turkos RGB #1B828D rosa RGB #CE68A5 Svart RGB # % 20% 40% 20% 40% 20% orange RGB #FF6600 röd RGB #E25353 skogsgrön RGB #009C52 Detta är en textlänk Detta är en textlänk Detta är en textlänk Detta är en aktiv textlänk Detta är en aktiv textlänk Detta är en aktiv textlänk

10 Färger grafiskt element

11 kommun digital styleguide Bild grafiskt element

12 Grid 12 kolumnsgrid, 12 px gutter, 24 px marginal

13 kommun digital styleguide Ikoner befintliga

14 Knappar Hover Primärknapp Normal Aktiverad Öppna/Stäng Reglage Checkbox

15 Komponent Aktiv Länkpil Pil Dropdown Download

16 Komponent Hover Aktiv Dropdown Dem et qui voluptis esequodis Dem et qui voluptis esequodis Dem et qui voluptis esequodis Imintionsedis et is maiorepuda por ma nimodit vellam quiaspicte nusa dolor omnis ea cuptam Sök Hudding Sök Sök

17 Navbar Navbar Navbar Sök aktiv Sök

18 Komponent Header Header aktiv

19 Komponent Navigation Navigation aktiv

20 Komponent Puff Puff aktiv

21 Komponent Länk på färgad platta Länk på färgad platta hover

22 Komponent Textlänk Textlänk aktiv

23 Komponent Meny bottenplatta Meny bottenplatta aktiv

24 Komponent Sociala medier Sociala medier aktiv

25 Komponent Aktiv Kontaktkortsblock Namn Efternamn Ro beratum a quo volori beatiuntem qui blaudae. Poriani minvell igendit et doluptate quo quame Telefon: 08-5xx xx xx E-post: namn.efternamn@huddinge.se Namn Efternamn Ro beratum a quo volori beatiuntem qui blaudae. Poriani minvell igendit et doluptate quo quame Telefon: 08-5xx xx xx E-post: namn.efternamn@huddinge.se Länkblock Enhetsnamn Enhetsnamn

26 Text på färgplatta 100% 80% 40% 20%

27 Typografi desktop Desktop 1440x900 H1 Brando Sans Bold 48/58 H2 Brando Sans Regular 36/44 H3 Brando Sans Regular 28/36 H4 Brando Sans Regular 24/32 H5 Brando Sans Regular 20/28 Punktlista Brando Sans Regular 20/28 Numerisk lista Brando Sans Regular 20/28 Ingress Source Sans Pro Bold 20/28 Brödtext Source Sans Pro Regular 20/28 Textlänk Source Sans Pro Regular 20/28 Textlänk aktiv Source Sans Pro Regular 20/28 Det här är en huvudrubrik (H1) To et aspe es dolum dolupta sit mil maxim que officabo. Itatet latur, to blam, quia aut adita conseque sam (Ingress) Ovidersped quo blandit ibusandae omnim nosam repudam at ma dendis ad molorer orest, cus dolorem repe voluptate impora commolo remporem arum idunt. Simusci mporeperfero cum que qui (Brödtext) Punktlista: (H4) Am elit ommodis dolluptatem es ditint latus es. Detta är en textlänk In num es res ditatem facerum quae rereperum la et, sernam dit perem nihiciistrum quossun tem. Numerisk lista: (H4) 1. Bis aut quam que doluptat que paribea rib danis dollorpor at la dolorere, quuntoriore. Detta är en textlänk som aktiverats 2. Ictat utem volum estis alibuscietur sit Navigationsrubrik (H4) Puffrubrik (H3) Ut et odit ipsant odigend ebitas etur? Animin poressereius debiti consequ amendel im fuga. Sedi velluptatem non elit aut autem repedig enissit.

28 Typografi desktop

29 Typografi tablet Desktop 768X900 H1 Brando Sans Bold 36/44 H2 Brando Sans Regular 28/36 H3 Brando Sans Regular 24/32 H4 Brando Sans Regular 20/28 H5 Brando Sans Regular 20/28 Punktlista Brando Sans Regular 20/28 Numerisk lista Brando Sans Regular 20/28 Ingress Source Sans Pro Bold 20/28 Brödtext Source Sans Pro Regular 20/28 Textlänk Source Sans Pro Regular 20/28 Textlänk aktiv Source Sans Pro Regular 20/28 Det här är en huvudrubrik (H1) To et aspe es dolum dolupta sit mil maxim que officabo. Itatet latur, to blam, quia aut adita conseque sam (Ingress) Ovidersped quo blandit ibusandae omnim nosam repudam at ma dendis ad molorer orest, cus dolorem repe voluptate impora commolo remporem arum idunt. Simusci mporeperfero cum que qui (Brödtext) Punktlista: (H3) Am elit ommodis dolluptatem es ditint latus es. Detta är en textlänk In num es res ditatem facerum quae rereperum la et, sernam dit perem nihiciistrum quossun tem. Numerisk lista: (H3) 1. Bis aut quam que doluptat que paribea rib danis dollorpor at la dolorere, quuntoriore. Detta är en textlänk som aktiverats 2. Ictat utem volum estis alibuscietur sit Navigationsrubrik (H3) Puffrubrik (H3) Ut et odit ipsant odigend ebitas etur? Animin poressereius debiti consequ amendel im fuga. Sedi velluptatem non elit aut autem repedig enissit.

30 Typografi tablet

31 Typografi mobile Smartphone 375x667 H1 Brando Sans Bold 28/34 H2 Brando Sans Regular 25/30 H3 Brando Sans Regular 20/28 H4 Brando Sans Regular 18/26 Punktlista Brando Sans Regular 18/26 Numerisk lista Brando Sans Regular 18/26 Ingress Source Sans Pro Bold 18/26 Brödtext Source Sans Pro Regular 18/26 Textlänk Source Sans Pro Regular 18/24 Textlänk aktiv Source Sans Pro Regular 18/24 Innehållssida (H1) To et aspe es dolum dolupta sit mil max im que officabo. Itatet latur, to blam, quia aut adita conseque sam (Ingress) Ovidersped quo blandit ibusandae omnim nosam repudam at ma dendis ad molorer orest, cus dolorem repe voluptate impora commolo remporem arum idunt.simusci mporeperfero cum que qui (Brödtext) Punktlista: (H3) Am elit ommodis dolluptatem es ditint latus es tio. Detta är en textlänk In num es res ditatem facerum quae rereperum la et, sernam dit perem nihiciistrum quossun tem. Numerisk lista: (H3) 1. Bis aut quam que doluptat que paribea rib danis dollorpor at la dolorere, quuntoriore. 2. Ictat utem volum estis alibuscietur sit ex et, nem etur. Detta är en textlänk som aktiverats

32 Typografi mobile

Relevanta dokument

GRAFISK PROFIL. A till Ö. Vi hjälper dig få bitarna på plats!

GRAFISK PROFIL. A till Ö. Vi hjälper dig få bitarna på plats! GRAFISK PROFIL A till Ö LOGOTYP Standard logotyp I största möjliga mån används denna logotyp. Gråskala Vid tryck i gråskala används denna logotyp. Mindre logotyper Ska logotypen placeras på mindre ytor,