Brand guide RuterReise - Ver. 01 mai RuterReise. Brand guide

Størrelse: px

Begynne med side:

Download "Brand guide RuterReise - Ver. 01 mai RuterReise. Brand guide"

Gunvor Dahlen
4 år siden
Visninger:

1 RuterReise Brand guide Dette er en overordnet brand guide som angir visuelle innslag i RuterReise appen. Da native designspråk følges er ikke dette ment som en detaljert utredning av formspråket da premisset for det til stor grad er styrt av respektive ios og Android. Bruk dette dokumentet som referanse til appens visuelle profil. ios: Side 2-12 Android: Side 13-21

3 om: srgb Antrasitt R51 G57 B65 # Link R0 G107 B179 #006bb3 Link highlighted R77 G184 B255 #4db8ff Ruter yellow R255 G204 B0 #ffc800 Dette dokumentet er produsert i srgb. Fargene vil ikke fremstå autentiske ved printing. Seperator Placeholder Highlighted cell Selected cell R200 G200 B200 #c8c8c8 R204 G204 B204 #cccccc R215 G215 B215 #d7d7d7 R255 G204 B0 #006bb3 5% 3

4 om: srgb Canvas R245 G245 B245 #f5f5f5 Text primary Text secondary R37 G37 B37 # R117 G117 B117 # White R255 G255 B255 #ffffff Call to action Call to action pressed Call to action disabled Black R117 G163 B0 #75a300 R80 G125 B0 #507d00 R200 G218 B153 #c8da99 R0 G0 B0 #

5 om: srgb Action R65 G72 B81 # Action pressed R51 G57 B65 # Action button disabled R227 G230 B236 #e3e6ec Neutral button R205 G211 B220 #cdd3dc Neutral button pressed R164 G173 B185 #a4adb9 Neutral button disabled R227 G230 B236 #e3e6ec 5

6 om: srgb Context line R148 G148 B148 # Selected map marker R89 G207 B252 #59cffc Link deviation R0 G82 B154 #e3e6ec Dark ruter yellow R215 G170 B0 #d7aa00 Dark ruter red R205 G0 B0 #cd0000 6

7 San Francisco (SF) er systemfonten i ios. Det opereres med dynamiske størrelser i hvert OS men på design nivå benyttes px. San Francisco ABDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abdefghijklmnopqrstuvwxyzæøå !#$%&/? # #ffffff Large title Title Headline Callout Body Caption Subtitle 24 Semi-bold 17 Semi-bold 17 Regular 15 Semi-bold 15 Regular 13 Regular 11 Regular 7

8 Det finnes en serie symboler / ikoner i appen. Disse er både native og custom. De sistnevnte er ikke basert på et felles bestillingsverk men er laget underveis i prosjektet basert på spontane behov. Arrow down Arrow up Arrow right Check Check leftside Context menu disclosure-indicator Filter Go back Help and contact Live Map path circle 8

9 My position My position dark Search Switch Uncheck Bus and boat Bus and tram Double carriage Low entry Single carriage Departure times Departure times active Departure times active updates Departure times updated Favourites Favourites active 9

10 Favourites active updated Favourites updated Map Map active Map active updated Map updated Plan journey Plan journey active Plan journey active updated Refresh Reminder Reminder on Settings Settings outline Settings outline updated Settings updated 10

Crisis Deviation Deviation huge Remark Email Facebook Fill

11 Crisis Deviation Deviation huge Remark Facebook Fill form Phone Twitter Address POI Home Work Boat Bus City bike 11

12 City bike lock City bike notice Metro Puck Subway Train Tram Walk Travel from 12

14 om: srgb Antrasitt R51 G57 B65 # Link R0 G107 B179 #006bb3 Link highlighted R77 G184 B255 #4db8ff Ruter yellow R255 G204 B0 #ffc800 App color Disabled Seperator Background R65 G72 B81 # R158 G158 B158 #9e9e9e R224 G224 B224 #e0e0e0 R245 G245 B245 #f5f5f5 38% 12% Tints fra 100% svart 14

15 om: srgb Text primary Text secondary R33 G33 B33 # R117 G117 B117 # Disabled button R205 G211 B220 #cdd3dc Neutral button R206 G211 B220 #ced3dc 87% 54% Tints fra 100% svart Call to action Call to action pressed Call to action disabled Black R117 G163 B0 #75a300 R80 G125 B0 #507d00 R200 G218 B153 #c8da99 R0 G0 B0 #

16 om: srgb White R255 G255 B255 #ffffff Selected cell R250 G250 B250 #fafafa Link deviation R0 G82 B154 #e3e6ec Dark ruter yellow R215 G170 B0 #d7aa00 Dark ruter red R205 G0 B0 #cd0000 Action R65 G72 B81 # Action pressed R51 G57 B65 # Action button disabled R227 G230 B236 #e3e6ec 16

17 Roboto er systemfonten i Android Material Design. Det opereres med dynamiske størrelser i hvert OS men på design nivå benyttes px. Tekstfargene på AND er implementert som tints av 100% svart (#000000) Roboto ABDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abdefghijklmnopqrstuvwxyzæøå !#$%&/? # #ffffff # og # angir direkte hva prosentgradene blir som hexkode. De to aktuelle prosentgradene er 87% og 54%. Headline Title Subheader Body 2 / menu / label Body 1 Primary / secondary Caption Link 24 Regular 87% # Medium 87% 16 Regular 87% 14 Regular 87% 14 Regular 54% # Regular 54% 14 Regular #006BB3 17

18 Arrow down Arrow up Clock Delete Edit Error Filter Live More Refresh (hvit uten boks) Replay Save Search Settings Star Star outline 18

19 Switch X On Off Down Up Facebook Form fill Phone Twitter Location default Found Not found Searching On Off 19

20 Disabled Off On Bell (hvit uten boks) Bell-on (hvit uten boks) Chevron right Crisis-icon Deviation-circle Deviation-huge Deviation-icon Direction opposite Directions Low-entry Map Puck Remark 20

21 Star small Long (carriage) Short Home House Work POI Boat Bus Subway Subway 2 Train Tram Walk 21

22 RuterReise

Like dokumenter

User Guide

User Guide Micro USB port Back up new data Restore previously backed up data More settings Enable or disable a SIM card Select 4G/3G SIM Select default SIM for data services Configure SIM