Styleguide

01. Typography

Primary Font - Default Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Secondary Font - Default Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Primary Font - Big Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Secondary Font - Big Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Primary Font - Small Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Secondary Font - Small Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Primary Font - Tiny Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

Secondary Font - Tiny Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis velit ultricies mauris volutpat ullamcorper. Nam commodo, orci sit amet sagittis dictum, sem ipsum consequat odio, eu vehicula augue turpis non lorem. Quisque molestie aliquam lectus, sed tempor dui hendrerit quis.

Element Properties

02. Headlines

Headline 1 - H1

Welcome to my Site

Element Properties

Headline 2 - H2

Welcome to my Site

Element Properties

Headline 3 - H3

Welcome to my Site

Element Properties

Headline 4 - H4

Welcome to my Site

Element Properties

Headline 5 - H5

Welcome to my Site
Element Properties

Headline 6 - H6

Welcome to my Site
Element Properties

03. Color Scheme

Base Color - Text color

Default color every element on the page will recieve this color by default.

  • -5%
  • -10%
  • -15%
  • -20%
  • -25%
  • -30%
  • -35%
  • -40%
  • +5%
  • +10%
  • +15%
  • +20%
  • +25%
  • +30%
  • +35%
  • +40%

Primary Color - Main action color

Main brand color use this color for those main action you want to prioritize on the site.

  • -5%
  • -10%
  • -15%
  • -20%
  • -25%
  • -30%
  • -35%
  • -40%
  • +5%
  • +10%
  • +15%
  • +20%
  • +25%
  • +30%
  • +35%
  • +40%

Secondary Color - Decorative

Secondary brand color use this color for miscellany and decorative elements.

  • -5%
  • -10%
  • -15%
  • -20%
  • -25%
  • -30%
  • -35%
  • -40%
  • +5%
  • +10%
  • +15%
  • +20%
  • +25%
  • +30%
  • +35%
  • +40%

04. Buttons

Default

Element Properties

Primary

Element Properties

Secondary

Element Properties

Link


05. Forms

Form

Element Properties

06. Responsive Breakpoints

Desktop

Laptops

Tablets

Phones

Main Navbar collapse at