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
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
`1234567890-=[]\;',./
~!@#$%^&*()_+{}|:"<>?
Rotis Sans Serif W01 - Bold font-weight: bold/700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
`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)
- list item 1
- list item 2
- list item 2a
- list item 2b
- list item 2bI
- list item 2bII
- list item 2c
- list item 2d
- list item 3
- 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
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
Figure
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 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
examplenested quotation
inside
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 yrsSome sort of famous witty quote marked up with a <blockquote> and a child <p> element.
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