Styleguide

Typography, buttons, icons and more

Typography

Futura PT for headings and buttons. Univers for body text

  • Heading One

    50px / 60px
    Futura PT Demi
  • Heading Two

    40px / 48px
    Futura PT Demi
  • Heading Three

    26px / 28px
    Futura PT Demi
  • Body

    17px / 28px
    Univers Regular
  • Body Large

    19px / 30px
    Univers Regular
  • Body Small

    13px / 24px / 0.2px
    Univers Regular

Paragraph

For optimum reading the paragraph width is capped at 550px

Heading Two

You can confidently leave the descaling of your pipes to our reliable water softener. More than 100,000 satisfied customers have preceded you. You no longer need to bother with white-washed showerheads and replacing expensive filters.

Subheading

Various media have already given attention to the Amfa4000 water softener. In this item, Julio Rosier explains why limescale costs a lot of money every year and how our Amfa4000 water softener prevents limescale. This video also shows you how to install the Amfa4000 yourself within five minutes.

Spacing

Spacing methods use baseline grids, keylines, padding, and incremental spacing to adjust ratios

  • padding 1
    8px
    .p-1
  • padding 2
    16px
    .p-2
  • padding 3
    24px
    .p-3
  • padding 4
    32px
    .p-4
  • padding 5
    40px
    .p-5

Important notes

  • This example is about padding. This also applies to margins
  • There are 2 big spacer for the section padding/margin.
    small 88px and large 128px

Colors

For optimal reading the paragraph width is capped at 500px

Backgrounds

Finland blue

#003580

Strasbourg blue

#009fe3

Winter Wedding Dress

#e8eef7

Bright Gray

#f5f5f5

Text

Body color
Heading color
Accent/link color

Additional colors

Succes / CTA
Reviews / Extra

Buttons

Futura PT Heavy (all uppercase) is the typography for all buttons

Button green - call to action - max 1 per page

Button text

Button normal

Button text

Button with icon

Add to wishlist

Button tiny

Button text

Text button

Button text

Cards

Cards contain content and actions about a single subject.

Card medium long title

Separated they live in Bookmarks right at the coast of the famous Semantics.

Button text

Card with light shadow

Separated they live in Bookmarks right at the coast of the famous Semantics.

Button text

Icons - Large

Multi colored line icons

  • 64x64 pixel
  • 2px stroke width
icon-wallet
icon-time
icon-leaf
icon-science
icon-creditcards
icon-no-tools
icon-coin-back
icon-piggy-bank
icon-magnet
icon-award
icon-laundry
icon-hair-check
icon-fast-install
icon-delivery
icon-badge
icon-push-button
icon-support
icon-dolphin
icon-house
icon-package

Icons - Usage examples

A couple examples

Pay with Mastercard

Amfa4000 Studies show that when you reduce limescale your expensive appliances, pipes, and water heater will last years longer, saving you money on replacement and costly repairs

Not only will this save you a lot of money, but it will help make the world a little bit greener.

Appliances that last

Amfa4000 Studies show that when you reduce limescale your expensive appliances, pipes, and water heater will last years longer, saving you money on replacement and costly repairs

Icons - Interface

Common interface iconography

Icons - Usage examples

A couple examples

3
Klanten beoordelen ons met een 4,6
Voor 23.59 uur besteld, morgen gratis bezorgd

Icons - Small

single colored line icons

  • 40x40 pixel
  • 1.5px stroke width
icon-badge10
icon-card-small
icon-checklist_1
icon-checklist
icon-cooker
icon-drop
icon-laundry-small
icon-magnet-small
icon-play-screen
icon-review
icon-shower
icon-tros

Icons - Usage examples

A couple examples

De werking

Vooruitstrevende techniek

Wasmachine

ontkalken

Snelle Installatie

eenvoudige montage

Forms

Input fields and more

Short title

Please get in touch and our expert support team will answer all your questions.

Short title

Please get in touch and our expert support team will answer all your questions.

This is not an email adress

Coupon code

The coupon code will be applied on the product checkout page

Amfa4000 is added to your cart
Date is not available

Components

Input fields and more

Wat een top product

De prijs/kwaliteit verhouding is naar mijn mening bijzonder goed!

Jessie
Geverifieerde gebruiker

Medium long headline

Amfa4000 Studies show that when you reduce limescale your expensive appliances, pipes, and water heater will last years longer.

Button text