Huisstijl & bestanden

Herkenbaar FinGids.

De kleuren, het lettertype en de bouwstenen van deze website. Gebruik ze voor een ontwerp dat bij FinGids past.

Bekijk het stijlvoorbeeld Lees de tekstversie

De bestanden

De CSS, gids en stijlgegevens worden bij elke build uit de actuele website-CSS gemaakt. Je kunt de links delen of de bestanden opslaan en aan je ontwerptool toevoegen.

Website-CSS Leesbare CSS met de oorspronkelijke stijlen, schermformaten en fontverwijzing.HTML-voorbeeld Een zelfstandige voorbeeldpagina die met deze CSS werkt, zonder JavaScript.Stijlgegevens (JSON) Exacte kleuren, lettertype en CSS-eigenschappen per component.Huisstijlgids (tekst) Dezelfde stijlgegevens met uitleg, leesbaar voor tekstcrawlers en AI-assistenten.Manrope-lettertype Het variabele Latin-font voor onder meer Nederlandse teksten.Lettertypelicentie De meegeleverde SIL Open Font License van Manrope.

Het kleurenpalet

Teal voor herkenning en acties, donkerblauw voor tekst en een klein koraalaccent. De rustige basis bestaat uit crème, wit en licht mint.

Achtergrond#FBFAF6
Kaartvlak#FFFFFF
Tekst#171A2E
Secundaire tekst#616778
Teal#0C6E6B
Donker teal#075754
Licht mint#E7F3F0
Koraal#E77D61
Rand#E2E4E9

Manrope, van kop tot kleine letter

Manrope Variable

Een variabel lettertype met gewichten van 200 tot 800. De website combineert stevige koppen met rustig leesbare tekst.

De precieze groottes, gewichten en regelafstanden staan hieronder en in de CSS. Groottes met clamp() veranderen met de schermbreedte. Koraalkleurige cursieve woorden worden door de browser schuin gezet; er wordt geen apart cursief font geladen.

De stijl in gebruik

Deze voorbeelden gebruiken dezelfde CSS-klassen als de website.

FinGids

Onafhankelijke uitleg

Het navigatielogo bestaat uit een witte F in een teal vlak en de naam FinGids. Het favicon is een aparte variant met een koraalkleurige stip.

Artikel 01Is het slim om mijn studieschuld zo snel mogelijk af te lossen?

Bereken jouw kwijtschelding

Hoeveel van je studieschuld wordt kwijtgescholden? Gebruik onze gratis rekentool en ontdek het in 2 minuten.

Start de rekentool

Exacte CSS per onderdeel

Dit zijn de basisregels uit de bron-CSS. Alle aanvullende regels, hover-effecten en mobiele aanpassingen staan in het volledige huisstijlbestand.

Hoofdkop

.hero h1 {
  max-width: 940px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.03;
}

Basistekst

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.65;
}

Primaire knop

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .75rem 1.1rem;
  border: 1px solid var(--teal);
  border-radius: 10px;
  background: var(--teal);
  color: white;
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

Artikeltegel

.topic-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  min-height: 180px;
  padding: 1.25rem;
  border: 1px solid #d9e2e2;
  border-radius: 12px;
  background: white;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

Bovenlabel

.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.1rem;
  color: var(--teal-dark);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

Rekentoolkaart

.hero-tool {
  width: min(100%, 920px);
  margin-top: 1.3rem;
  padding: clamp(1.25rem, 2.4vw, 1.7rem);
  border: 1px solid #b9d9d6;
  border-radius: 18px;
  background: #f5fbf9;
  box-shadow: 0 16px 42px rgba(7,87,84,.055);
}

Introductietekst

.hero__byline {
  max-width: none;
  margin: 0;
  padding: 1rem 1.35rem;
  border-left: 1px solid rgba(12,110,107,.13);
  color: var(--muted);
  font-size: .91rem;
  font-weight: 470;
  letter-spacing: -.004em;
  line-height: 1.6;
  text-wrap: pretty;
}

Logo in de navigatie

.brand span {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 11px 11px 11px 4px;
  background: var(--teal);
  color: white;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}

Informatiekader

.content-page article > div:first-of-type > div {
  margin: 1.6rem 0;
  padding: 1.2rem 1.35rem;
  border: 1px solid #b9ddda;
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  background: #eef7f6;
}

Gemarkeerde waarde

.content-page article .text-accent {
  color: var(--teal-dark);
  font-weight: 800;
}

Voor carrousels en andere ontwerpen

Gebruik Manrope, het kleurenpalet en de voorbeelden samen. Neem ook de witruimte, rustige kaders en verhouding tussen koppen en tekst mee. Het HTML-voorbeeld geeft daarvoor een visueel uitgangspunt.

Het bestaande deelbeeld is bedoeld voor linkvoorbeelden op sociale media; het is geen screenshot van de huidige site. De actuele stijl staat op deze pagina.

Een tekstcrawler laadt niet altijd CSS of afbeeldingen. Geef een AI-assistent daarom expliciet deze pagina, de tekstgids en CSS mee. Onze bronnenlijst verwijst naar de inhoudelijke artikelen.