Allaway styleguide
The purpose of this guide is to provide instructions and guides needed in creating different visuals under Allaway brand.
Typography
Used font is Acumin Pro Semi Condensed, available on Typekit. Used styles are Extra Light (200), Regular (400) and Bold (700) and their italic versions.
Example
H1 Headline
Ingress. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis massa eleifend, cursus velit sit amet, dictum libero. Aliquam erat volutpat. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ornare porta. Mauris nec augue interdum, ullamcorper purus sit amet, elementum enim. Nulla eu erat velit. Fusce lobortis ligula ante, vel tincidunt arcu rhoncus eu. Suspendisse potenti. Nunc posuere neque sed tellus aliquet congue. Praesent varius sapien ex, quis consectetur nisi cursus quis. Aliquam dignissim tellus vel massa dictum ultricies. Maecenas et interdum purus, vel condimentum erat. Integer nec felis dui. Nam in efficitur mi. Nam mi orci, elementum id vestibulum vel, sodales nec erat. Aliquam venenatis ultrices quam quis sollicitudin.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Donec varius bibendum ultricies. Proin nec risus eu metus tincidunt eleifend. Donec feugiat hendrerit sem, in rutrum magna elementum sed. Quisque accumsan nibh tellus, vitae malesuada sem gravida non. Nullam id turpis in diam pellentesque ultrices. Duis maximus vel nulla at suscipit. Sed nunc lacus, laoreet vel nulla ac, varius scelerisque ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu mauris non elit cursus tincidunt quis sed arcu. Donec eu dui dolor. Vivamus aliquet faucibus arcu eu condimentum. Nullam maximus egestas lorem vitae ornare. Aenean ac turpis quam. Donec venenatis leo at nibh vehicula, in pharetra felis tincidunt. Quisque sed leo sed tortor vehicula dictum id nec ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Donec varius bibendum ultricies. Proin nec risus eu metus tincidunt eleifend. Donec feugiat hendrerit sem, in rutrum magna elementum sed. Quisque accumsan nibh tellus, vitae malesuada sem gravida non. Nullam id turpis in diam pellentesque ultrices. Duis maximus vel nulla at suscipit. Sed nunc lacus, laoreet vel nulla ac, varius scelerisque ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu mauris non elit cursus tincidunt quis sed arcu. Donec eu dui dolor. Vivamus aliquet faucibus arcu eu condimentum. Nullam maximus egestas lorem vitae ornare. Aenean ac turpis quam. Donec venenatis leo at nibh vehicula, in pharetra felis tincidunt. Quisque sed leo sed tortor vehicula dictum id nec ipsum.
Headings
H1 Headline
H2 Headline
H3 Headline
H4 Headline
H5 Headline
H6 Headline
Colors
Used brand colours and colour values.
Primary colors
Greens
Green
RGB 0, 210, 87
Light green
RGB 26, 226, 106
Dark green
RGB 42, 173, 70
Green with 85% opacity (only on backgrounds)
Oranges product related action and hilite -colors
Orange
RGB 255, 103, 31
Light orange
RGB 255, 163, 87
Dark orange
RGB 245, 83, 7
Blacks and Whites
Black
RGB 45, 41, 42
Richblack
RGB 0, 0, 0
White
RGB 240, 240, 240
Purewhite
RGB 255, 255, 255
Greys
Grey-10
RGB 246, 246, 246
Grey-20
RGB 218, 218, 218
Grey-40
RGB 178, 178, 178
Grey-60
RGB 135, 135, 135
Grey-80
RGB 86, 86, 86
Grey-90
RGB 60, 60, 60
Gradients
White gradient (on header, used on elements positioned on top of background images)
Grey gradient (on footer)
Icons
UI icons are from Font Awesome icon-library. In addition custom Allaway icons to be added alongside with content.
Examples of the visual style of Allaway icons
Images
Used images should be bright, pure and airy. They should contain people and have a sense of everyday life in them.
The look and feel of Allaway images
Misc
Breadcrumbs
Pagination
Lift from right always attached browser windows edge!
Lift from left always attached browser windows edge!
Elements
Diffirent content elements used to create Allaway brands style on web based applications.
Headline
Content
