Define ALL colors which are used in the project. Choose clear descriptive names and try to keep the amount manageable.

Primary Colors

Primary colors are the most frequently displayed colors across your pages and components. They fashion the look & feel of the website.

Content Colors

Text and background colors. Content colors might or not utilize primary colors.

Functional Colors

All other functional colors. Functional colors might or not utilize primary colors.

Check the client's brand guidelines for web font rules. Try to keep the usage of font families and weights to a minimum.

Implement all non-web safe fonts as external webfonts. Always add a web safe backup font for externally loaded webfonts.

Primary font: Roboto, backup: sans-serif

Secondary font: Roboto Slab, backup: serif

Text and heading styles

Only use headings if they are semantically in place. If not, use text styles. Headings and text styles are responsive.

Set font family, size, line height and weight for each text style, for both small and big screens.

Links can contain a label and/or icon. Links inherit their style from the parent paragraph, and are therefore responsive.

Both default and monochrome links have different colors if the website uses light and dark surfaces.

Default link

Monochrome link

Icon link

Lists are responsive.

Set font family, size, line height and weight for lists, for both small and big screens.

Unordered list

• lorem ipsum
  dolor sit amet
• lorem ipsum
  dolor sit amet
• lorem ipsum
  dolor sit amet

Ordered list

1. lorem ipsum
   dolor sit amet
2. lorem ipsum
   dolor sit amet
3. lorem ipsum
   dolor sit amet

Use tables to organize and display and arange data in rows and columns

Check the client's brand guidelines for specific logo usage rules. Include a different logo for dark and light surfaces if available and needed.

Logo's are preferably svg or transparent bitmap files. Use the file format which suits the logo best.

Logo sizes are variable and dependent on the parent container.

SVG Icons should be embedded inline so they can be colorized.

Use icomoon to create an icon set.

Icon sizes

Default Icon Set

Button types

Button content

Button sizes

Only one collapsible in the same group can be opend at the same time.

Collapsibles can be opened or closed by default.

Labels

A label is used by several form elements: radio buttons, checkboxes, input fields, text area's, selects and others.

It shows a description or error message about the linked element

Radio Buttons

Checkboxes

Text Inputs

Text inputs come in sizes small, normal and large, or 100% of the parent's container.

Text area

Text areas come in sizes small, normal and large, or 100% of the parent's container.

Select

Selects come in sizes small, normal and large, or 100% of the parent's container.

The responsive slider is created with the Tiny Slider component.

See the Tiny Slider GitHub page for more information about options and possibilities.

A page header is visible on top of the page. It can be fixed to stay visible when scrolling

The header usually includes a logo which links to the home page, and the main menu.

A page footer is visible at the bottom of the page.

The footer typically includes legal information, contact information and/or social links.

A hero image is a large image, usually between the main header and the rest of the webpage content.

It mostly covers the full width of the website, and quite often also the full height of the viewport.

A hero image may or be covered by other content, like text, links or buttons.

A media panel is a section with an image and content, like a title, text and a button.

On mobile devices, the image is placed above the content.

On desktop devices, the image and content are placed side by side.