Grid system

Colors

Primary color

#2a78c1
Brand blue
#000f36
Dark blue

Badge color

#c7669e
Lilac
#4a6fc9
Purple
#2392d6
Light blue
#2cb498
Green
#f46645
Carrot
#ee9b36
Orange

Gradient color

#fe7242 - #e0274b
Orange gradient
#fff - #f9fafd
Gray gradient

Gray colors

#0c1a3d
Black
#0c1a3d
Dark gray
#9aa0af
Gray
#dadada
Smooth gray
#f6f9ff
Light gray

Message color

#2cb498
Success
#f44545
Danger
#f9db29
Warning
#2392d6
Info

Typography

Font family

Raleway Regular
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$
Raleway Medium
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$
Raleway Semi Bold
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$
Raleway Bold
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$
Raleway Extra Bold
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$
Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$
Open Sans Bold
ABCDEFGHIJKLMNOPQRSTUVXYZ
abcdefghijklmnopqrstuvxyz
123456789/-@£€$

Headings

Heading 1

Font family: Raleway bold
Size & line-height: 48px/1.2em 28px/1.2em
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 2

Font family: Raleway bold
Size & line-height: 32px/1.4em 22px/1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 3

Font family: Raleway bold
Size & line-height: 46px/0.8em 20px/1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 4

Font family: Raleway bold
Size & line-height: 28px/1.2em 20px/1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 5

Font family: Raleway bold
Size & line-height: 24px/1.4em 18px/1.4em
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Heading 6

Font family: Raleway regular/bold
Size & line-height: 20px/1.5em 16px/1.5em
Lorem ipsum dolor sit amet, consectetur adipiscing elit

Paragraphs

Paragraph 1

Font family: Raleway regular
Size & line-height: 20px/1.5em 16px/1.5em
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci magnam mollitia numquam odio optio, repellat sequi tempora temporibus? Aliquid assumenda harum iusto molestiae natus, neque nesciunt porro quos repellendus reprehenderit.

Paragraph 2

Font family: Raleway regular
Size & line-height: 20px/1.5em 16px/1.5em
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci magnam mollitia numquam odio optio, repellat sequi tempora temporibus? Aliquid assumenda harum iusto molestiae natus, neque nesciunt porro quos repellendus reprehenderit.

Buttons

Donation buttons

Primary buttons

Form elements

twoline label text field

Please enter a valid data.

Normal text field

Please enter a valid data.

Gravity text field

No disabled state.
  • Please enter a valid data.

Textarea

Please enter a valid data.

Select field

Please enter a valid data.

Checkbox

Radio button

Filters

Dropdown

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3

Navigations

Pagination

Navigation dots

Navigation arrows

Icons

Monochrome icons

chevron-down

chevron-up

chevron-right

chevron-left

close

search

information

donation

text

youtube

instagram

facebook

play

hand-heart-1

hand-heart-2

hand-heart-3

flower

home

abroad

other

location

plus

minus

Colored icons

view

view

donation-heart

donation-heart

collecting

collecting

warning

warning

warning-2

warning-2

heart

heart

quote-outline

quote-outline

star

star

phone

phone

support

support

voluntary

voluntary

donation-text

donation-text

payment-mode

payment-mode

donation-online

donation-online

offering

offering

kpmg

kpmg