Styleguide

Colors

Primary:
#b53737
Active:
#d83f2a
Hover Active:
#ff3c01
Black:
#333333
Grey:
#8a8a8a
Grey Half:
#dcdcdc
White Smoke:
#f9f9f9
White:
#ffffff

Typography

Aa
Aa
Aa
Muli - Google Font - using 3 weights

Heading 1 / Display

Heading 1 -- Grey

Muli - 38 - Light

Heading 2

Heading 2 -- Grey

Muli - 32 - Regular

Heading 3

Heading 3 -- Grey

Muli - 24 - Bold

Heading 4

Muli - 18 - Bold
Heading 5
Muli - 14 - Bold

Paragraph -- XL:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Muli - 22 - Regular

Paragraph -- Large:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Muli - 18 - Regular

P - Paragraph -- Default:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Muli - 16 - 400 - Regular

P - Paragraph -- Small:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Muli - 14 - 400 - Regular

Caption:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Caption -- Secondary: 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Muli - 12 - 400 - Regular

UI Elements

Buttons:

Buttons simulate lights switching on and coming forward.

  • Darker buttons - for better visibility
  • Flat, Square Style
  • All caps Type
Note ! [ On hover ]
- colour and background change
- box shadow pop
- animated transform scale x, y = 1.02
- ease and 400 ms transitions on all elements
DEFAULTSECONDARYIMPORTANTDisabledSMALL

Load Animimation

On Codepen, Click "Results" to see the embedded button, navigate to see code

See the Pen SVG SP Button Loading Animation by Csongor Horvath (@chiochi) on CodePen.

Forms:

Search:

Thank you! Your submission has been received!
! Oops! Something went wrong while submitting the form.

Thank you!

Your submission has been received!

Components

Product Cards

Led Panel 600
Novodisc XL
Novodisc M
Novodisc L
Tyfon
Retina Eyelid
Retina LED
Juno Softpro
Retina Stripe
Retina Cross

Article Cards

Innred med belysning 2 Copy 2

Så mange som 40% av oss har planer om å pusse opp, men tenker for lite på lys. Innred med belysning Så mange som 40% av oss har planer om å pusse opp, men tenker vi for mye på parkett og farger, og for lite på hvilket lys som faktisk passer til boligen vår? Mange av oss kan bruke lang tid på å vurdere den ene fargenyansen opp mot den andre. Kan det bli gulskjær i denne, har denne gråtonen nyanser av gult, eller blått. Blir det for kaldt? Blir det for hardt?

Read More...

Article 2 Innred med

Så mange som 40% av oss har planer om å pusse opp, men tenker for lite på lys. Innred med belysning Så mange som 40% av oss har planer om å pusse opp, men tenker vi for mye på parkett og farger, og for lite på hvilket lys som faktisk passer til boligen vår? Mange av oss kan bruke lang tid på å vurdere den ene fargenyansen opp mot den andre. Kan det bli gulskjær i denne, har denne gråtonen nyanser av gult, eller blått. Blir det for kaldt? Blir det for hardt?

Read More...

Innred med belysning 2

Så mange som 40% av oss har planer om å pusse opp, men tenker for lite på lys. Innred med belysning Så mange som 40% av oss har planer om å pusse opp, men tenker vi for mye på parkett og farger, og for lite på hvilket lys som faktisk passer til boligen vår? Mange av oss kan bruke lang tid på å vurdere den ene fargenyansen opp mot den andre. Kan det bli gulskjær i denne, har denne gråtonen nyanser av gult, eller blått. Blir det for kaldt? Blir det for hardt?

Read More...