fediversity_website/content/website/stijlgids/index.md

---
author: Michael Boelen
categories:
- website
date: 2023-05-20T23:19:44+02:00
description: "Dit is de NLUUG stijlgids voor de website en bevat de structuur en kleuren van onze huisstijl."
slug:
tags:
- kleuren
- stijl
- website
title: "Stijlgids"
---

# Stijlgids NLUUG-website

## Kleuren

We gebruiken zoveel mogelijk de kleurstelling zoals die ooit in de oude website werd toegepast.

* Donkerblauw: #1D3160
* Extra donkere versie van donkerblauw: #17274d
* Groen (voor call-to-action): #138808
* Donkergroen voor call-to-action (hover): #0F6D06
* Paars: #6A2060;
* Lichtpaars (uitgangspunt 6A2060): #EBBCE5

Nog te benoemen:

* #99AFE2
* #E3E9F7

## Headings

Binnen de website maken we vooral gebruik van H1, H2, H3, H4.

### H1

Komt maximaal eenmalig voor per pagina

### H2

De hoofdsecties van een pagina worden voorzien van H2. Op een doorsnee pagina is het gebruikelijk om meerdere H2-headings te zien.

### H3 en H4

Waar de content wat langer is kan het gebruik van H3 en zelfs H4 worden toegepast.

## Afbeeldingen

Op onze website gebruiken we een aantal verschillende type afbeeldingen:

* Foto's van personen
* Iconen
* Logo

### Iconen

Waar mogelijk gebruiken we iconen in het SVG-formaat. Deze zijn compact en relatief eenvoudig te voorzien van kleuren in de huisstijl.

Om de iconen te kleuren maken we gebruik van een CSS-filter. Aangezien hierbij het niet mogelijk om deze direct te kleuren aan de hand van de hex-waarde, worden deze omgezet.

Tool: https://isotropic.co/tool/hex-color-to-css-filter/