# FinGids — exacte huisstijl van de website

Website: https://studieschuldinfo.nl/
Taal: Nederlands
Bron: app/globals.css; SHA-256: 3179c83c4c2fa27ea66a9ba1df3f66005df6a9200755184f316ee0e5bd90ce1e
Dit bestand wordt samen met de CSS en JSON gegenereerd uit de actuele broncode.

## Bronnen en gebruik

- Visuele huisstijlpagina: https://studieschuldinfo.nl/huisstijl/
- Volledige leesbare, zelfgeschreven website-CSS: https://studieschuldinfo.nl/brand.css
- Exacte tokens en representatieve basisdeclaraties: https://studieschuldinfo.nl/brand-tokens.json
- Zelfstandig HTML-voorbeeld: https://studieschuldinfo.nl/brand/example.html
- Lettertypebestand: https://studieschuldinfo.nl/brand/manrope-latin-wght-normal.woff2
- Lettertypelicentie: https://studieschuldinfo.nl/brand/OFL.txt
- Favicon: https://studieschuldinfo.nl/favicon.svg
- Sociale voorbeeldkaart: https://studieschuldinfo.nl/og.png

Lees eerst de CSS en het HTML-voorbeeld voor een nauwkeurige reconstructie.
brand.css bevat alle zelfgeschreven regels uit app/globals.css, inclusief mediaqueries,
hover- en focusregels. De build-imports voor Tailwind en frameworks zijn verwijderd;
gegenereerde utilityklassen en JavaScriptgedrag van de interactieve rekentool zijn niet inbegrepen.
De componentwaarden in de JSON zijn basisregels, geen berekende browserstijlen.
De cascade, overerving, specifieke varianten en mediaqueries uit brand.css blijven gelden.

## Kleuren, lettertype en algemene tokens

```css
:root {
  --background: #fbfaf6;
  --surface: #ffffff;
  --ink: #171a2e;
  --muted: #616778;
  --teal: #0c6e6b;
  --teal-dark: #075754;
  --teal-soft: #e7f3f0;
  --coral: #e77d61;
  --border: #e2e4e9;
  --radius: 16px;
  --font-sans: "Manrope Variable", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Manrope Variable", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}
```

Gebruik de hexwaarden precies zoals hierboven. --muted is #616778; --border is
#e2e4e9. Lichtgroene kaders kunnen eigen exacte achtergrond- en randkleuren
hebben; die staan bij de componenten en zijn niet automatisch gelijk aan --teal-soft.

Het lettertype is Manrope Variable, een variabel normaal lettertype met gewichten
200 800. Het vaste publieke bestand bevat de Latin-tekenset. De volledige
website importeert ook de overige tekensets uit hetzelfde Manrope-pakket.
De font-face gebruikt font-display: swap. Licentie: SIL Open Font License 1.1.
De CSS bevat soms aangevraagde gewichten boven 800; deze declaraties zijn letterlijk
behouden. De beschikbare variabele font-face eindigt bij 800 en de browser bepaalt de weergave.
De body stelt geen font-weight of font-size in: deze volgen de browser en overerving.
Het gewicht 470 hoort specifiek bij .hero__byline, niet bij alle lopende tekst.

## Exacte componentregels

### Grote homepaginakop

```css
.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

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

### Primaire knop

```css
.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;
}
```

### Onderwerpkaart

```css
.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

```css
.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;
}
```

### Rekentooloproep op de homepage

```css
.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);
}
```

### Toelichtende tekst in de hero

```css
.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;
}
```

### Letterteken in het hoofdlogo

```css
.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 in een artikel

```css
.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;
}
```

### Benadrukt gegeven in een artikel

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

## Relatieve maten, mobiele weergave en cursief

Bewaar rem, em, vw, percentages, min() en clamp() als relatieve CSS-waarden.
Zet ze niet zonder context om naar vaste pixels: rem volgt de root-lettergrootte,
em de lokale lettergrootte en vw de viewportbreedte. Line-height zonder eenheid
is een verhouding. De desktopkop gebruikt clamp(2.75rem, 5vw, 4.25rem).
Bij maximaal 760px wordt de kop clamp(2.15rem, 10vw, 3rem).
Alle verdere mobiele wijzigingen staan ongewijzigd in brand.css. De mediaquery
prefers-reduced-motion respecteert de bewegingsvoorkeur van de bezoeker.

```css
.hero h1 em {
  color: var(--coral);
  font-style: italic;
}
.eyebrow span {
  width: 28px;
  height: 2px;
  background: var(--coral);
}
```

Voor cursief gebruikt de bron font-style: italic.
Er is geen apart cursief Manrope-bestand meegeleverd; de browser kan de schuine
vorm synthetiseren. Maak dit bij een vertaling naar een ander medium expliciet.

## Hoofdlogo, favicon en sociale kaart

Het primaire hoofdlogo is echte HTML: een letter F in een afgerond teal vlak,
gevolgd door de tekst FinGids. Het vlak gebruikt de regel .brand span hierboven.
Het hoofdlogo heeft geen koraalkleurige stip. De woordmerkregel is:

```css
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--teal-dark);
  text-decoration: none;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
```

Het afzonderlijke favicon.svg heeft wel een koraalkleurige stip. Het is een eigen
pictogramvariant en geen vervanging voor de exacte HTML- en CSS-weergave van de header.
og.png is een sociale deelkaart; het is geen exacte schermafbeelding van de website.
Gebruik het niet als bron voor maten, tekstgewichten of componentkleuren.

## HTML-voorbeeld en inhoud

Het HTML-voorbeeld werkt zonder JavaScript en gebruikt de echte websiteklassen.
Open het via een webserver met /brand.css en /brand/ op dezelfde oorsprong; de
absolute webpaden zijn bewust dezelfde als op de website. Voor lokaal offline
gebruik moeten deze bestanden samen vanaf de root van een lokale server beschikbaar zijn.
De links zijn gewone ankers. Het voorbeeld is een visuele referentie en voert
geen berekening uit. Voor inhoudelijke claims en financiële bedragen blijft de
bijbehorende actuele bronpagina nodig; deze huisstijlbestanden geven geen financiële cijfers.
Sociale formaten en vaste pixelgroottes voor carrousels volgen niet uit de website-CSS.