Hoppa till innehåll

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.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. 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)

Buttons and Forms

Form example
We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.


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

Headline

Ingress

Content

Link

Headline

Ingress

Content

Link

Newest references View all
Nainen imuroi

Reference - Kategory

Headline

PClass aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed quis orci volutpat massa convallis pretium luctus quis tmagna. Maecenas quis quam a justo egestas mollis vulputate ac arcu. Cras eget facilisis magna. Aliquam at justo sed ante dapibus accumsan. Integer aliquet porta dolor, commodo interdum sem malesuada fermentum.

Read more

Keskuspölynimurit

Kaikki keskusyksiköt

DUO

Pieni keskuspölynimuri kerros-, rivitaloihin ja vapaa-ajan asuntoihin.

DUO Musta/hopea
DUO Valkoinen/hopea


C-Sarja

C-Sarjan keskuspölynimuri jopa siivouskomeroon tai kosteisiin tiloihin.

C 30 Premium
C 40 Premium
C 40 Premium LCD
C 40 Sonis

A-Sarja

Pitkäikäinen, käytännöllinen ja tehokas keskusyksikkö kodin siivoukseen.

A 30
A 40
A 40 LCD
A 60

DV-30

DV 30 on vähän energiaa kuluttava, tehokas ja edullinen keskuspölynimuri.

DV 30



We use cookies to improve user experience. By your continued use of this site you accept such use. Read more about our cookie policy and privacy policy.
Close
Ta kontakt