1560 Styleguide

Phonak | Styleguide

Grid Layout

12-column fluid grid (constrained to page wrapper)

Column 1/2 + 1/2

Column 1/2 (offset to the right)

Column 1/3 + 1/3 + 1/3

12-column fluid grid (full window width)

Column Grid 1/2 + 1/2 (full window width)

Color Palette

  • white #ffffff
  • lighter-gray #f2f2f2
  • light-gray #c2c2c2
  • gray #83837f
  • dark-gray #626b73
  • darker-gray #403f38
  • black #000000
  • light-blue #ebf2f5
  • blue #387c9e
  • dark-blue #004466
  • green #8bbc07
  • mint #c2c3a4
  • teal #9baaab
  • light-teal #f5f6f6
  • plum #8d2d43
  • salmon #b57a6e
  • ochre #d9b47e

Typography

Fonts

Rotis Sans Serif W01 - Regular font-weight: normal/400

ABCDEFGHIJKLM­NOPQRSTUVWXYZ
abcdefghijklm­nopqrstuvwxyz
`1234567890-=[]\;',./
~!@#$%^&*()_+{}|:"<>?

Rotis Sans Serif W01 - Bold font-weight: bold/700

ABCDEFGHIJKLM­NOPQRSTUVWXYZ
abcdefghijklm­nopqrstuvwxyz
`1234567890-=[]\;',./
~!@#$%^&*()_+{}|:"<>?

Elements

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Intro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam nunc, commodo eget auctor et, cursus non metus. Nullam interdum eros ac est placerat faucibus. Nunc vel dolor orci, at euismod nibh.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam nunc, commodo eget auctor et, cursus non metus. Nullam interdum eros ac est placerat faucibus. Nunc vel dolor orci, at euismod nibh. Curabitur ornare lobortis purus, hendrerit mollis arcu semper congue. Cras a enim lacus. Vestibulum quis elit in metus elementum pretium. Duis sit amet augue orci.

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam nunc, commodo eget auctor et, cursus non metus. Nullam interdum eros ac est placerat faucibus. Nunc vel dolor orci, at euismod nibh.

Ordered lists (nested)

  1. list item 1
  2. list item 2
    1. list item 2a
    2. list item 2b
      1. list item 2bI
      2. list item 2bII
    3. list item 2c
    4. list item 2d
  3. list item 3
  4. list item 4

Unordered lists (nested)

  • list item level 1
  • list item level 1
    • list item level 2
    • list item level 2
      • list item level 3
      • list item level 3
    • list item level 2
    • list item level 2
  • list item level 1
  • list item level 1

Definition list

Definition title
Definition data
Definition title
Definition data
Definition data
Definition title
Definition data
Definition title
Definition data

Tabular data

Jimi Hendrix - albums
No. Album Year Price
      (Excl. tax)
#1 Are You Experienced 1967 $10.00
#2 Axis: Bold as Love 1967 $12.00
#3 Electric Ladyland 1968 $10.00
#4 Band of Gypsys 1970 $12.00

Image

visual description

Figure

visual
Figcaption content

Button round
Button round primary
Button primary
Button secondary
Button default
Button disabled
Button disabled

The <a> element, an anchor example
The <abbr> element, an abbr. example
The <b> element, a bold text example
The <cite> element, a citation example
The <code> element, a computer code example
The <del> element, a deleted text example
The <dfn> element, a defined term example
The <em> element, an emphasis example
The <i> element, an italic text example
The <img> element, an inline image visual example
The <ins> element, a inserted text example
The <kbd> element, a text to be input example
The <q> element, a short quotation with a nested quotation inside example
The <s> element, a strike-through text example
The <samp> element, a sample output example
The <small> element, a small text example
The <span> element, a generic inline container example
The <strong> element, a strong emphasis example
The <sub> element, a subscript example
The <sup> element, a superscript example
The <u element>, an underlined text example
The <var> element, a variable example

John Doe, 58 yrs

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Icons

Icon Name Character Unicode
arrow-down ∨ \2228
arrow-left ‹ \2039
arrow-right › \203a
arrow-up ∧ \2227
chat b \62
checkmark √ \221a
child c \63
close x \78
facebook F \46
file f \66
file-pdf d \64
googleplus G \47
hamburger h \68
instagram I \49
linkedin L \4c
location l \6c
lyric y \79
myself p \70
parent ½ \bd
partner 2 \32
play > \3e
plus + \2d
profile w \77
quotes-left “ \201c
radio-checked · \b7
radio-unchecked ° \b0
telephone t \74
twitter T \54
someone-else s \73
search ( \28

Naming conventions

Blocks
postfix "-block"
Titles
postfix "-title"
Links
postfix "-link"
Visuals
postfix "-visual"
Icons
prefix "icon-"

Visual sizes and aspect ratios

Aspect ratio 1:1 (1.000)

Background Image block visual:
1200 x 1200 px
Background Image Footer block visual:
1200 x 1200 px (split in to two halfs of 1200 x 600 px)
Combined Products block visuals:
300 (max. 470) x 300 px
Product Color block visual:
300 x 300 px
Product Models block visual:
300 x 300 px
Teaser Large block visual:
600 x 600 px
Title block visual:
600 x 600 px
Visual block visual:
1200 x 1200 px
Wizard block visual:
600 x 600 px

Aspect ratio 4:3 (1.333)

Accessory block visual:
600 x 450 px
Benefits block visual:
1200 x 900 px
Teaser Small block visual:
900 x 675 px

Aspect ratio 16:9 (1.777)

Quote block visual:
600 x 338 px
Wizard block target visual:
300 x 169 px

Aspect ratio 32:9 (3.555)

Contact Teaser block visual:
1200 x 338 px
Product Title block visual:
1200 x 338 px
0