Skip to content

Visual identity

Giveth Design Guide

A detailed guide on how Giveth branding should be implemented, as well as ideas on how to play with Giveth assets to achieve good visual consistency in official design assets.


Giveth Design Assets

A collection of links and assets

Logo and Typelogo assets

All assets can be downloaded from the website repo:

https://github.com/Giveth/giveth-design-assets

Typeface

We use Google Fonts API to grab our fonts

Body-text: 'Raleway' - weight: 400 - size: 18px

Headlines: 'Raleway' - weight: 600

[Legacy Color palette]

#39510e
RGB 57 81 14
CMYK 72 34 100 42
#2A6813
RGB 41 115 13
CMYK 83 31 100 20
#5CA43F
RGB 92 164 63
CMYK 69 13 100 1
#95d114
RGB 149 209 20
CMYK 47 0 100 0
#1e0e58
RGB 30 14 88
CMYK 100 100 27 34
#1a1588
RGB 26 21 136
CMYK 100 100 11 7
#6b75a7
RGB 107 117 167
CMYK 65 54 11 1
#5066cf
RGB 80 102 207
CMYK 75 64 0 0
#0e2958
RGB 14 81 88
CMYK 100 90 36 32
#155388
RGB 21 83 136
CMYK 97 72 22 6
#6b98a7
RGB 107 152 167
CMYK 61 29 29 1
#50b0cf
RGB 80 176 207
CMYK 64 13 12 0
#2c0d54
RGB 44 13 83
CMYK 94 100 29 36
#604a7d
RGB 96 74 125
CMYK 72 80 24 8
#836c9e
RGB 131 108 158
CMYK 55 63 14 1
#76318f
RGB 118 49 143
CMYK 66 97 2 0

CSS

This template code can be used with Bootstrap4 websites and web-apps to set button, navbar styling and specify body and headline fonts:

.navbar {
    background-color: #2c0d54 !important;
    filter: alpha(opacity=70);
    opacity: 0.9;
  }

* {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .logo-font {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  text-align: center;
  color: #2c0d53;
}

.btn {
  background-color: #2c0d54;
  border-color: #2c0d54;
}