# OranjeSteen — Huisstijl (basisdocument)

> **Versie 1.3, juli 2026.** Eén bron van waarheid voor het hele merk. Dit bestand is
> bedoeld voor de GitHub-repo: lees dit eerst, dan kun je (Claude Code) elke uiting
> maken in exact de juiste stijl. Het bundelt de merkregels, de kleur- en typografietokens,
> de kleurmodi, de vormtaal en de documentregels.
>
> **CANON sinds 28-07-2026.** Dit bestand vervangt `bedrijf/context/huisstijl-team.md` v1.2
> als bron van waarheid. Die blijft bestaan als team-leesbare samenvatting en verwijst hierheen.
>
> **Bijbehorende bestanden, alle aanwezig in deze map:**
> `tokens.css` + `tokens/` (alle CSS-variabelen — importeer, hardcode geen hex) ·
> `tokens.json` (machine-leesbaar, voor scripts en validatie) ·
> `DOCUMENTEN.md` (paginasysteem, ritme en recept per documenttype, inclusief Word) ·
> `EXCEL-STIJLGIDS.md` (rekenbladen) · `logo/` (definitieve logo-set) ·
> `templates/` (levende HTML-templates, print rechtstreeks naar PDF) ·
> `handoff/v1.3-merkfundament-2026-07-23/` (de ruwe Claude Design-bundel, onaangeroerd).
>
> **Waar het visuele vandaan komt:** Claude Design is master voor tokens en componenten
> (design system "OranjeSteen"). Wijzig daar, haal op met `/design-sync`, commit naar main.
> De regels in dít bestand zijn handwerk van de Vormgever en komen niet uit de sync.
> Zie `SYNC-WERKWIJZE.md`.
>
> **Bij twijfel: kies de ingetogen, rustige optie.** Rust en ritme gaan boven expressie.

---

## 1. Wat is OranjeSteen
Een datagedreven specialist in locatieverwerving: "een databedrijf dat toevallig vastgoed doet". Brengt de markt systematisch in kaart (perceel voor perceel, eigenaar voor eigenaar)
en sluit namens projectontwikkelaars deals in de initiatieffase.

**Naam.** OranjeSteen, altijd als één woord met een hoofdletter O en S. Nooit "Oranje Steen".
**Ondertitel / tagline.** Initiatief in Projectontwikkeling.
**Uitstraling.** Professioneel, ingetogen, betrouwbaar, scherp en modern. Vernieuwend in een
traditionele markt.
**Ondertekenaar standaard.** Dax Ravestein, Directeur en oprichter.

---

## 2. De gouden regels
1. **GEEN ORANJE.** De naam bevat "oranje", de huisstijl niet. Nooit, in geen enkele
   merkuiting, ook niet als accent of hover. (Enige uitzondering: gedempte oker `#8A6D2F`
   als "let op"-status binnen interne tools, nooit op website of in merkuitingen.)
2. **Eén font: Montserrat.** Geen tweede letter, geen gewicht 300.
3. **Radius nooit groter dan 6px.**
4. **Kleuren via `tokens.css`.** Verzin geen nieuwe hue; gebruik een bestaande trap.
5. **Laat het ademen.** Witruimte is een ontwerpkeuze, geen restruimte.
6. **Geen AI-opmaak** (zie §7). Rust en ritme boven decoratie.

---

## 3. Kleur
Basiskleuren (7, het ongewijzigde hart van de identiteit):

| Token | Hex | Gebruik |
|---|---|---|
| `--os-blue` | `#162447` | Primair: titels, body, donkere vlakken, nav (merk-navy) |
| `--os-accent` | `#2A3F72` | Subtitels, accentlijnen, links, hover |
| `--os-dgray` | `#4B505C` | Lopende tekst op licht |
| `--os-gray` | `#787D8C` | **Alleen non-tekst**: randen, iconen, placeholders |
| `--os-creme` | `#DDD4CB` | Warme cover-achtergrond, tekst op donker |
| `--os-lgray` | `#F5F3F0` | Lichte pagina/sectie-achtergrond |
| `--os-white` | `#FFFFFF` | Tekst/logo op donker, kaartvlakken |

**Contrast.** Kleine tekst (labels, meta, bijschriften) → `--os-gray-strong #5E6474`, nooit
`--os-gray` (dat zakt onder WCAG AA). Trappen (`--os-navy-*`, `--os-creme-*`, `--os-gray-*`)
zijn voor randen, hovers, disabled en gevulde vlakken.

**Status (alleen interne tools, nooit merk/website):**
`--os-success #2F6B4F`, `--os-info #2A3F72`, `--os-warning #8A6D2F`, `--os-error #9E3B36`.

---

## 4. Kleurmodi als vaste regel
Drie modi, elk met een vaste rol. De keuze volgt uit het soort uiting, niet uit smaak.

### Navy-modus — covers, hero's, statements
Donkere navy vlakken. Vlak `#162447`. Tekst wit (koppen) en crème (meta). Meta- en placeholdertekst op navy: `#C8CDDC` (navy-200). Logo wit of crème.
Gebruik voor: documentcovers, openings- en slotslides, hero's, social statements, wallpapers,
banners.

### Licht-modus — documenten en binnenwerk
Wit of `#F5F3F0`. Tekst navy (koppen) en `#4B505C` (body). Logo navy. Gebruik voor:
documenten (A4), binnenpagina's, e-mail, tabellen, Excel, webcontent, contentslides.

### Crème-modus — de warme uitzondering
Vlak `#EFEBE3` of `#DDD4CB`. Tekst navy, meta `#5E6474`. Logo navy. Dunne scheidingslijnen in
`#CCBFA9`. Uitsluitend voor mensgerichte en feestelijke uitingen: brandboek-cover,
uitnodigingen, eindejaarsgroet, teamgerichte posts, quote-cards. **Nooit** voor juridische of
financiële documenten.

### Regels
1. **Navy opent, licht draagt.** Elke meerpaginauiting opent in navy en schakelt voor de
   inhoud naar licht. Het slot mag terug naar navy.
2. **Crème is de warme uitzondering** (zie hierboven).
3. **Maximaal twee modi per uiting** (navy + licht, of navy + crème). Nooit alle drie.
4. **Eén logo-regel per modus.** Navy-vlak: wit of crème logo. Licht en crème vlak: navy logo.
5. **Eén toegestane gradient.** Uitsluitend het subtiele navy-verloop `#162447` → `#12152C`,
   lineair (180 graden), uitsluitend op covers, hero's en wallpapers/achtergronden. Alle andere
   vlakken zijn effen. Geen radiale verlopen, geen tussentinten, geen crème-verlopen. Dit is de
   enige uitzondering op de geen-gradients-regel.

---

## 5. Typografie
**Montserrat**, via Google Fonts (400 tot 800). Gewicht 900 is de vastgelegde uitzondering, uitsluitend voor het woordmerk.

- **Body web** 16px, regelafstand 1,65, max 65–70 tekens per regel.
- **Koppen** strak: lh 1,05–1,15, tracking −0,02em (display) tot −0,01em (H2).
- **Kapitale labels**: tracking +0,14em, gewicht 600, ≤12px.
- **Ondergrenzen**: nooit kleiner dan **16px web, 10,5pt document, 24px (bij 1920×1080) presentatie**.
- **Nadruk via gewicht 600**, niet cursief.
- **Cijfers**: altijd `font-variant-numeric: tabular-nums` op data, bedragen, oppervlakten, coördinaten.

**Webschaal:** Display 44, H1 32, H2 25, H3 20, Body 16, Small 13,5, Label 12.

**Documentschaal (Word-punten):** Documenttitel 31–32pt/800, H1 20pt/800, H2 11pt/800,
Body 10,5–11pt/400, Eyebrow 9–11pt/600 caps, Meta 8–9pt/500–700.

> **Open punt (28-07-2026).** De gebouwde templates zitten onder deze meta-band: labels op
> 7,9pt en eyebrows op 7,1pt, in het briefpapier zelfs 6,4pt. Óf de templates gaan omhoog,
> óf deze regel gaat omlaag naar 7pt. Nu klopt geen van beide. Broodtekst zit wél goed op
> exact 10,5pt. Zie `DOCUMENTEN.md` §7.

---

## 6. Vormtaal
Eén verhaal in twee vaste elementen: **de locatie (datapunt)** en **de potentie (puls)**.
Geen andere decoratieve vormen.

### Datapunt (`logo/merk-datapunt.svg`)
Grafisch element, nooit een tweede logo naast de wordmark. Drie gebruiksvormen, max één per pagina:
- **Textuur** — groot en deels uit beeld op covers: 12–13 cm, opacity 5–8%. Uitsluitend op navy-vlakken (motief alleen op navy).
- **Voetmerk** — klein en gedempt in voetregels: 0,9–1,2 cm, opacity 40–50%, rechts naast het
  paginanummer. Alle modi.
- **Kaartmarker** — stip + één ring in crème, markeert dé locatie. Alleen op navy.

### Locatie-puls (de bewegende kaartmarker)
- **Alleen digitaal** (web, dashboards, video) en **alleen op navy**.
- Beweging via **schaal + afnemende lijndikte** (uitdijende ring). **Geen opacity-fade.**
- Maximaal één pulserende locatie per scherm.
- **In print** wordt de puls de statische marker: stip + twee ringen (buitenste lichter).
  Deze statische vorm mag in alle modi (navy wit-op-donker, licht/crème navy).

### Perceel-grid — vervallen als vast element
Het kadastrale lijnenmotief is **geen** zelfstandig motief meer. Het blijft alleen staan in
bestaand materiaal (banners, wallpapers) tot dat wordt herzien. Gebruik het niet in nieuwe
uitingen; de kaartmarker mag wel op een subtiele lijnondergrond waar context nodig is.

---

## 7. Wat we NIET doen (anti-AI-opmaak)
Deze opmaak verraadt "AI-vormgeving" en is verboden:
- **Geen interpunct-scheidingstekens** (`·`) tussen woorden in koppen, labels of voetregels.
  Gebruik een gewone spatie, een nieuwe regel of een echte scheiding in de layout.
- **Geen em-dashes** (`—`) in lopende tekst. Gebruik een komma, dubbele punt of nieuwe zin.
- **Geen emoji.**
- **Geen decoratieve accentstreepjes** onder titels als vulling. Uitzondering: de vaste accentstreep als kopelement (documenten: navy accentbalk bovenaan de pagina; presentaties: korte accentstreep boven de slidetitel).
- **Geen kaarten met linker-accentrand.**
- **Geen drie-kolommen-met-icoontjes** als standaard-invulling.
- **Geen gradient-knoppen**, geen overdadige badges/labels, geen drukke patronen.
- **Geen schaduw op donkere navy-vlakken.**
- Eén accentvlak per pagina is genoeg; niet stapelen.

---

## 8. Documenten (A4, Word-haalbaar)
Volledige Word-recepten per type staan in **`DOCUMENTEN.md`**. Kern:

**Paginasysteem.** A4. Vaste merkelementen in volgorde van rust: (1) dunne navy-accentbalk
tegen de bovenrand, (2) wordmark linksboven, (3) datapunt als textuur/voetmerk, (4) voet met
bedrijfsgegevens of paginanummer achter een hairline.

**Verticaal ritme (vast over alle documenten).** Content start 44px onder de kopbanner ·
H1 met 20px eronder, elke H2 met 32px erboven en 12px eronder, lijstrijen 12px per rij ·
kop- en voetbanner symmetrisch 20px. Zelfde afstanden in elk document.

**Documentbibliotheek en status:**

| Document | Modus | Route | Status | Template in `templates/` |
|---|---|---|---|---|
| Indicatieve bieding | Navy cover + licht | Sjabloon | Template klaar, inhoud concept (ter juridische toetsing) | `Indicatieve bieding - template.html` |
| Biedingsdocument (formeel) | Navy cover + licht | Sjabloon, kan naar Word | Template klaar, inhoud concept (ter juridische toetsing) | `Biedingsdocument - template.html` |
| Koopbevestiging | Navy cover + licht | Word | Template klaar, inhoud concept (ter juridische toetsing) | `Koopbevestiging - template.html` |
| Arbeidsovereenkomst | Licht | Word | Template klaar, inhoud concept (ter juridische toetsing) | `Arbeidsovereenkomst - template.html` |
| Briefpapier | Licht | Sjabloon | Template klaar (vensterpositie + perceelbijlage) | `Briefpapier - template.html` |
| Excel-rekenblad | Licht | Sjabloon | Template klaar | `Excel-rekenblad - template.html` |
| Locatie-QuickScan | Navy cover + licht | Sjabloon | Deck klaar (presentatie, niet A4) | nog te porten uit de bundel |

**Route** = wat er daarna met het bestand gebeurt: een sjabloon vul je in en print je naar PDF,
een Word-document gaat naar de tegenpartij met wijzigingen bijhouden aan. Zie `DOCUMENTEN.md` §1.

**Structuur indicatieve bieding** (referentie): cover, inleiding + proces in 5 stappen ·
uitgangspunten (bieding als navy kader) + voorbehouden, indicatieve planning + afsluiting ·
FAQ. Alle dealgegevens als grijze `[plaatshouders]`.

---

## 9. Logo (`logo/`)
- **Wordmark** "OranjeSteen" — Montserrat 900, tracking −0,04em. `wordmark-navy.svg` (op licht),
  `wordmark-wit.svg` (op donker). SVG-tekst; voor pixel-vaste export een ge-outlinede variant.
- **Beeldmerk** — OS-monogram waarin de O het datapunt is. `beeldmerk-os.svg` / `-wit.svg`.
  Voor favicon, avatar, kopbanner binnenpagina.
- **Datapunt** — `merk-datapunt.svg` / `-wit.svg`. Grafisch element (zie §6), geen tweede merk.
- **Favicon** — `favicon.svg` + PNG's in `logo/png/`.
Eén merk per uiting. Geen oranje in of rond het logo. Wordmark minimaal ~24px / 0,9cm hoog.

---

## 10. Componentpatronen (web/UI)
- **Knop primair**: `--os-blue` bg, witte tekst, radius 4px, padding 12×24. Hover → `--os-accent`.
- **Knop secundair**: transparant, 1,5px rand `--os-blue`. Hover → `--os-lgray`.
- **Kaart**: wit, 1px `--os-border`, radius 6px, `--os-shadow-raised`. Hover → floating.
- **Input**: 1px `--os-border-strong`, radius 4px. Focus → 2px `--os-accent` + focus-ring.
- **Tabel**: header `--os-blue`/wit, rijen wit/`--os-lgray`, cijferkolommen rechts + tabular-nums.
- **Diepte**: raised (cards) → floating (modals) → overlay (drawers). Nooit op donker.

---

## 11. Bedrijfsgegevens (voor voetregels en brief)
- **Adres:** Schiekade 189, 3013 BR Rotterdam
- **Telefoon:** 085 060 1823, **Mobiel:** 06 18 28 64 54
- **E-mail:** Welkom@OranjeSteen.nl (algemeen), Dax@OranjeSteen.nl (persoonlijk)
- **Web:** oranjesteen.nl
- **KvK / IBAN:** *nog aanleveren* — zet als `[nummer]` tot bekend.

---

## 12. Checklist vóór oplevering
- [ ] Geen oranje, ook niet als accent.
- [ ] Eén font (Montserrat); geen gewicht 300; nadruk via gewicht 600/700.
- [ ] Geen interpunct-scheiding, geen em-dashes, geen emoji.
- [ ] Broodtekst ≥ 10,5pt document / 16px web; kleine tekst op `--os-gray-strong`.
- [ ] `tabular-nums` op alle cijfers en bedragen.
- [ ] Juiste kleurmodus; max twee modi per uiting; één logo-regel per modus.
- [ ] Vormtaal: alleen datapunt en locatie-puls; puls alleen digitaal via schaal; geen perceel-grid in nieuw werk.
- [ ] Eén accentvlak per pagina; verticaal ritme consistent; document oogt rustig.
- [ ] Kleuren via `tokens.css`, niet hardcoded.
- [ ] Radius ≤ 6px; geen schaduw op donker.

---
*OranjeSteen Huisstijl-basisdocument v1.3, juli 2026. Vervangt de losse leidraad in
CLAUDE.md/DOCUMENTEN.md als centrale ingang; die blijven bestaan als detailbestanden.
Wijzig niet los van de stijlgids; werk de stijlgids bij en exporteer opnieuw.*