Typography and colors
Typography and color rules help keeping the design consistent across pages and sections of our sites.
▸ Typography
Site
Benjamín pidió una bebida de kiwi y fresa. Noé, sin vergüenza, la más exquisita champaña del menú.
Benjamín pidió una bebida de kiwi y fresa. Noé, sin vergüenza, la más exquisita champaña del menú.
Magazine
Benjamín pidió una bebida de kiwi y fresa. Noé, sin vergüenza, la más exquisita champaña del menú.
Benjamín pidió una bebida de kiwi y fresa. Noé, sin vergüenza, la más exquisita champaña del menú.
Unless it’s justified by other reasons, the typographic fonts we use in our graphics are the same as the official fonts for the site. We want to maintain visual consistency and reduce page loading times. All fonts are open source, so they can be downloaded and and used in any site, without purchasing licenses for each user.
Normally we will use the body text fonts, in this case "Work Sans",sans-serif for the main site and Merriweather,Georgia,serif for the magazine.
Download Rubik Download Work Sans Download Source Sans Pro Download Merriweather
▸ Colours
For now the recommended color palette is the palette used by our website designers, that you can see in our page about funding. and two extra colors used in the well's infograph.
- █ #868B86 rgba(134, 139, 134, 1)
- █ #5B4A59 rgba(91, 74, 89, 1)
- █ #7ABD94 rgba(122, 189, 148, 1)
- █ #C3E0A6 rgba(195, 224, 166, 1)
- █ #8EE5BB rgba(142, 229, 187, 1)
- █ #D7D5A1 rgba(215, 213, 161, 1)
- █ #FFE19F rgba(255, 225, 159, 1)
- █ #FDF6B2 rgba(253, 246, 178, 1)
- █ #FFA000 rgba(255, 160, 0, 1)
- █ #FFC331 rgba(255, 195, 49, 1)
- █ #FFC4A7 rgba(255, 196, 167, 1)
- █ #FF7954 rgba(255, 121, 84, 1)
- █ #FF4D16 rgba(255, 77, 22, 1)
- █ #48B9E5 rgba(72, 185, 229, 1)
- █ #DAF1FA rgba(218,241,250, 1)
The site’s background color is #f6f6f6 rgb(246,246,246). Use transparent backgrounds when possible, but if it’s not possible please use this color. The site's text color is #212529 rgb(33,37,41).
Transparency
Normally the transparency value should be 1 (fully opaque), but you can use the value 0.85 to see the grid or other elements in the back.