UI/UX

typography

Headline 1 - H1

class: title-mega

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headline 2 - H2

class: title-big

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headline 3 - H3

class: title-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headline 4 - H4

class: title-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headline 4.1 - H4

class: title-small bold heavy

Lorem ipsum dolor sit amet, consectetur adipiscing elit.(bold)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.(heavy)

Headline 5 - H5

class: title-extra-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headline 5.5 - H5

class: title-extra-small bold heavy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (bold)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. (heavy)

Headline 6 - H6

class: title-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Headline 7/6.1 - H6

class: super-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Body copy / Paragraph

Default/Paragraph 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

Paragraph 1.2

class: type-1-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

Paragraph 2

class: type-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

Paragraph 2-1

class: type-2-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

Paragraph 3

class: type-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

Paragraph 3.1

class: type-3-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

Paragraph 4

class: type-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.

 

Helpers

Futura PT Light - this can be applied to any text container

class: futura-pt-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Futura PT Book - this can be applied to any text container

class: futura-pt-book

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Futura PT Heavy - this can be applied to any text container

class: futura-pt-heavy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Futura PT Bold - this can be applied to any text container

class: futura-pt-Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Text align left - this can be applied to any text container

class: text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Text align center - this can be applied to any text container

class: text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Text align right - this can be applied to any text container

class: text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

Text dark - this can be applied to any text container

class: text-dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

You can also apply this background color by adding a div with a class background-light around your content

Text ligh - this can be applied to any text container

class: text-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper libero lectus, vel malesuada nisl vestibulum eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vitae vehicula purus.
Nam tellus lectus, suscipit vel volutpat vitae, blandit in quam. Phasellus vestibulum leo ut erat interdum pellentesque.

You can also apply this background color by adding a div with a class background-light around your content

Lists

  • Curabitur in consequat dui, quis rhoncus augue.
  • Nunc tristique ligula mauris, a malesuada ligula pulvinar at.
  • Integer tincidunt, tellus in varius fringilla, neque nibh ultrices felis, non fringilla nisi sem quis ex.
  • Vestibulum convallis eros metus, ac fringilla nunc volutpat at.
  • Praesent vitae turpis faucibus, laoreet ligula et, maximus tellus.

Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Icons

 
 
 
 
 
 

 

Buttons Primary

button and input class: primary

anchor tag class: btn primary



Add to basket Remove from basket Remove from basket

Buttons Secondary

button and input class: secondary

anchor tag class: btn secondary



Add to basket Remove from basket Remove from basket

 

Form Fields





 

Form Fields Dark Theme