Book An Appointment

Design Kit For The Pure Healing with Homeopathy Website

A set of assets and guidelines for building a consistent and positive user experience across the website.

Version:

2023.05.29

  • Foundation
  • Colors
Brand Colors
Primary Tones

This color is used for all Headings and Icons

80%

100%

120%

140%

160%

180%

Secondary Tones

Secondary colors come from alternative brand colors. This color is used for variation

80%

100%

120%

140%

160%

180%

Accent

This color is used for all important interactive elements like Buttons, CTAs, links

Normal

Hover

Neutral
Greyscale

Gray tones are the essence of the UI. Used for text or cards, etc

90%

70%

50%

30%

10%

System
Alert

Alerts are four colors used to indicate certain situations

Success

Danger

Warning

Info

Base
Background

Base color used for the background color of sections, cards

Main Background

Variant Background

Offset Background

Border

Base color used for divider, border, etc

Border

  • Foundation
  • Typography

Flexible typography scale works perfectly for all breakpoints – desktop, tablet and mobile. 

Josefin Sans

Heading 1 - REM 4.375 - 700

Pack my box with five dozen liquor jugs.

Heading 2 - REM 3.125 - 700

Bright vixens jump; dozy fowl quack.

Heading 3- REM 2.375 - 600

John quickly extemporized five tow bags.

Heading 4- REM 1.75 - 600

Viewing quizzical abstracts mixed up hefty jocks.

Heading 5 - REM 1.312 - 600

My girl wove six dozen plaid jackets before she quit.

Heading 6 - REM 1 - 600

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf

Verdana

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque tellus vitae lorem laoreet, nec dapibus ex vehicula. Etiam malesuada justo non molestie sollicitudin

Caption

Vivamus finibus congue arcu et ullamcorper. Sed eget condimentum neque.

Sub Title

Alve bazige

Quote

Curabitur non est sed urna facilisis aliquam. Pellentesque vel commodo ex, eget tristique augue. Quisque pharetra bibendum elit eget commodo. Ut eu imperdiet massa
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Huge

Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!

Tiny

Nulla nec ante nec enim maximus cursus sit amet vel nunc. Cras eu massa nisl. Donec ac elementum tortor

Label

Qualche notizia

Placeholder

Enter your email

Nav Menu

Homepage

About Us

Service

  • Foundation
  • Components

A collection of widgets used as sample of the use of color and typography. 

Button

Collection of buttons used in website ui design with variations

Button Size Variant

Extra Large
Large
Medium
Small
Extra Small

Button Icon

Leading
Trailing
Counter

Counting numbers that rotate and stop at a certain value to show an achievement in numbers

Design Decisions
0 K
Home Builds
0 +
Home Values
0 M
Awards
0 +
Quote

Highlighted special sentences that form a series as an expression or statement

Sooner has helped us incredibly with her knowledge of homeopathy. She is caring, helpful, and supportive. I highly recommend her for anyone who is seeking alternative solutions to their health.

~ Kimberly