# OranjeSteen — Documenten-skill voor Claude Code > **Wat dit is.** De huisstijl voor alle **standaarddocumenten** van OranjeSteen: > documentcovers, briefpapier, binnenpagina's en de Locatie-QuickScan. Lees dit samen > met `CLAUDE.md` (de merkregels) en gebruik `tokens.css` voor kleur/type. Doel: jij > (Claude Code) kunt nieuwe documenten maken — als HTML-referentie én als bruikbare > Word-sjablonen (`.dotx`) — in **exact** dezelfde vormgeving. > > **Gouden regel (uit CLAUDE.md):** geen oranje, één font (Montserrat), laat het ademen. > Bij twijfel: kies de **ingetogen, rustige** optie. Documenten moeten **rust** uitstralen. --- ## 1 · De bron van waarheid De ontwerpomgeving is leidend. De levende templates staan in `templates/`: | Bestand | Inhoud | |---|---| | `templates/Word voorkanten.html` | Covers (crème + wit, staand + liggend), binnenpagina's, briefpapier, QuickScan-pagina — elk met een "Word-recept". Open in browser; het is een pan/zoom-canvas. | | `templates/QuickScan verfijnd.html` | De volledige Locatie-QuickScan als 4-pagina liggend deck, met sleepbare beeldvakken. | | `templates/assets/*.svg` | De merk-SVG's die de templates gebruiken (zie §7). | Wijzigt de huisstijl? Pas het in de ontwerpomgeving aan en vraag een **nieuwe export** van dit pakket. Niet andersom; bewerk deze bestanden niet los. --- ## 2 · Het paginasysteem (geldt voor álle documenten) **Formaat.** A4. In HTML-referentie op 96 dpi: **staand 794 × 1123 px**, **liggend 1123 × 794 px** (= 210 × 297 mm). In Word reken je in cm/pt — zie per template. **Vaste merkelementen** — altijd in deze volgorde van rust: 1. **Navy-accent** bovenaan: een dunne volle balk (`--os-blue`, 0,16–0,2 cm hoog) tegen de paginarand. Het familiekenmerk dat covers, binnenpagina's en brief verbindt. 2. **Wordmark** linksboven (`wordmark-navy.svg` op licht, `wordmark-wit.svg` op donker). Minimaal ~24 px / 0,9 cm hoog, ruime marge. 3. **Datapunt** (`merk-datapunt.svg`) als **subtiele textuur of klein voetmerk** — nooit als tweede logo. Op covers groot en zeer transparant (5–8 %); in voetregels klein (0,9–1,2 cm) en gedempt (opacity 40–50 %). 4. **Voet**: bedrijfsgegevens of paginanummer, gescheiden door een hairline (`--os-border`). **Documenttypografie** (Word-punten — dit zijn de normen, niet de px uit de HTML-mockup): | Rol | Grootte | Gewicht | Detail | |---|---|---|---| | Documenttitel (cover) | 31–32 pt | 800 ExtraBold | `--os-blue`, lh 1,06–1,12, tracking −0,02em | | H1 binnenpagina | 20 pt | 800 | `--os-blue` | | H2 / kop | 11 pt | 800 | `--os-blue`, tracking −0,01em | | Broodtekst | **10,5–11 pt** | 400 | `--os-dgray`, regelafstand 1,6–1,7, max ~70 tekens | | Eyebrow / kapitaal label | 9–11 pt | 600 | tracking **+0,16em**, UPPERCASE, `--os-accent` | | Meta / bijschrift | 8–9 pt | 500–700 | `--os-gray-strong` (nooit `--os-gray`) | - **Ondergrens document: 10,5 pt.** Ga daar niet onder voor leestekst. - **Cijfers** (bedragen, oppervlakten, data): altijd `tabular-nums`. - **Geen** gewicht 300, geen tweede font, geen cursief voor nadruk (gebruik gewicht). **Rust-richtlijnen** (waarom de documenten zijn zoals ze zijn): - Eyebrows zijn **kalm**: gewicht 600 en tracking +0,16em — niet zwaar of wijd gespatieerd. - Accentlijnen zijn **dun en kort** (≈1 cm × 2 pt, lichte opacity), nooit dominant. - Geef de titel **lucht**: ruime marges, regelafstand ≥ 1,1. - Eén accentvlak per pagina is genoeg. Niet stapelen. --- ## 3 · Covers (documentvoorkanten) Twee registers. Kies op context: ### 3a · Crème — vlaggenschip (intern & gebrand) Warme crème pagina met een **volle navy voetbalk** als anker. - Achtergrond `--os-creme` (#DDD4CB). - Wordmark-navy linksboven, ~6,9 cm breed. - Datapunt rechtsboven, ±12,5 cm, **uit beeld**, transparantie ~93 % (opacity .07). - Titelblok laag op de pagina, net boven de balk: eyebrow + titel (32 pt ExtraBold) + ondertitel + dunne accentlijn. - **Voetbalk**: rechthoek volle breedte × ±3 cm, `--os-blue`, tegen de onderrand. Daarin 3 kolommen meta (Datum / Versie / Auteur): labels 7 pt caps crème 70 %, waarden 10 pt Bold wit. Rechts "oranjesteen.nl" 8 pt + datapunt-wit 1 cm. ### 3b · Wit — formeel & extern Clean witte pagina, ingetogen. - Achtergrond wit; smalle **navy bovenbalk** (0,2 cm) tegen de rand. - Wordmark-navy linksboven (~6,9 cm). Titelblok **hoog** op de pagina. - Datapunt rechtsonder, zeer subtiel (opacity ~.05). - **Voetregel** (geen balk): hairline `--os-border-strong` 20 % + meta in 3 kolommen navy + datapunt 0,9 cm rechts. Beide bestaan **staand** (210 × 297) en **liggend** (297 × 210). Liggend crème = navy **zijpaneel** links (≈40 % breed) met wordmark-wit + meta; titel rechts, verticaal gecentreerd. --- ## 4 · Binnenpagina's (doorlopende inhoud) Voor alle pagina's ná de cover. Vaste kop- en voetbanner zodat lange documenten rustig ogen. - **Kopbanner**: navy-accent 0,18 cm → daaronder `beeldmerk-os.svg` (0,85 cm) + documenttitel 8 pt caps `--os-gray-strong`, rechts "oranjesteen.nl". Hairline eronder. - **Inhoud**: H1 20 pt / H2 11 pt ExtraBold navy; broodtekst 11 pt Regular `--os-dgray` lh 1,7; opsommingen met accentstip `--os-accent`; kaders in `--os-creme-200` (geen rand, label 7 pt caps accent); tabellen met navy koprij + hairline-rijen + tabular-nums. - **Voetbanner**: hairline + "OranjeSteen · [documenttype]" 7 pt caps links · paginanummer + datapunt 0,5 cm rechts. --- ## 5 · Briefpapier A4-brief in huisstijl. Kop- en voettekst zet je in Word als **Koptekst/Voettekst**, zodat ze op elke pagina herhalen. - **Marges**: boven 3,4 cm · onder 3,2 cm · links/rechts 2,2 cm. - **Kop**: navy-accent 0,16 cm → wordmark-navy 5,5 cm links; rechts "WONINGONTWIKKELING" 7 pt caps accent + adres 8 pt `--os-gray-strong`. Hairline eronder. - **Adresblok**: geadresseerde 11 pt links; "Rotterdam, [datum]" 10 pt rechts. - **Betreft**: 11 pt Bold `--os-blue`. - **Body**: 10,5 pt Regular `--os-dgray` lh 1,6; tussenkoppen 11 pt ExtraBold navy. - **Afsluiting**: "Met vriendelijke groet," → naam Bold + functie in `--os-gray-strong`. - **Voet** (3 kolommen, 8 pt): **Adres** (Schiekade 189 · 3013 BR Rotterdam) · **Contact** (085 060 1823 · Welkom@OranjeSteen.nl) · **Administratie** (oranjesteen.nl · KvK · IBAN). Datapunt 0,6 cm rechts. **KvK/IBAN nog invullen.** De standaard "interesse in locatie"-brieftekst staat als voorbeeld in `templates/Word voorkanten.html` (sectie Briefpapier). **Word-recept (platte tekst — exacte vertaling voor `.dotx`).** Pagina A4 staand · contentbreedte = 21 − 2,2 − 2,2 = **16,6 cm**. ``` PAGINA Marges: boven 3,4 cm · onder 3,2 cm · links 2,2 cm · rechts 2,2 cm Accentbalk: rechthoek volle breedte (21 cm) × 0,16 cm hoog, vulling RGB 22·36·71, bovenaan tegen de paginarand (achter de koptekst). KOPTEKST (herhaalt op elke pagina) Tab-stops: links 0 cm · RECHTS-uitlijning op 16,6 cm Regel 1: [links] wordmark-navy.svg, breedte 5,5 cm [tab→rechts] "WONINGONTWIKKELING" Montserrat 7 pt, 600, +0,16em caps, RGB 42·63·114 Regel 2: [tab→rechts] "Schiekade 189 · 3013 BR Rotterdam" Montserrat 8 pt, RGB 94·100·116 Onderrand koptekst: hairline 0,5 pt RGB 232·228·224 (border-bottom), 0,5 cm onder de tekst BODY Adresblok: tab-stops links 0 cm · RECHTS op 16,6 cm [links] geadresseerde 11 pt · [tab→rechts] "Rotterdam, [datum]" 10 pt RGB 94·100·116 Betreft: Montserrat 11 pt Bold RGB 22·36·71 (1 witregel ervoor en erna) Aanhef: "Beste heer [naam]," 11 pt Tussenkop: Montserrat 11 pt ExtraBold RGB 22·36·71, 10 pt ruimte erboven Broodtekst: Montserrat 10,5 pt Regular RGB 75·80·92, regelafstand 1,6, uitlijning links Afsluiting: "Met vriendelijke groet," → 2 witregels → naam Bold + functie RGB 94·100·116 VOETTEKST (herhaalt op elke pagina) Bovenrand: hairline 0,5 pt RGB 232·228·224, volle contentbreedte Tab-stops: kolom-links 0 cm · 5,6 cm · 11,1 cm · RECHTS op 16,6 cm 3 kolommen, elk: label 8 pt, 700, +0,16em caps RGB 42·63·114 + waarde(n) 8 pt RGB 94·100·116 • ADRES Schiekade 189 / 3013 BR Rotterdam • CONTACT 085 060 1823 / Welkom@OranjeSteen.nl • ADMINISTRATIE oranjesteen.nl / KvK [nummer] · IBAN [nummer] [tab→rechts] merk-datapunt.svg 0,6 cm, opacity ~45 % ``` --- ## 6 · Locatie-QuickScan (liggend, informatiedicht) Doel: **zoveel mogelijk over één locatie** op weinig pagina's. Volgorde: 1. **Cover** (navy): wordmark-wit + eyebrow "Locatie QuickScan" + adres als titel. Links onderaan "In opdracht van" + **logo opdrachtgever** (sleepvak — wit/transparant logo). Rechts beeldvakken (ligging, perceel) + fase-blok. 2. **QuickScan-data**: 4 datakolommen (1 Objectinformatie · 2 Ontwikkelpotentieel · 3 Financiële analyse · 4 Eigendomssituatie) + perceelbeeld. Labels `--os-gray-strong`, waarden navy Bold met tabular-nums. 3. **Omgeving — ligging**: kaartbeeld met sleepbare label-chips (Weg / Station) en een navy "Betreffende locatie"-marker. 4. **Locatie**: wereldbol-kaart + Street View-beelden. **Opdrachtgever-logo's.** Elke QuickScan draagt het logo van de opdrachtgever (bv. The Hub). Gebruik een wit/transparant logo op de navy cover. In de ontwerpomgeving is dit een sleepvak; in de praktijk plaats je het PNG/SVG-logo van de klant. Footer: "QuickScan · in opdracht van [opdrachtgever]". --- ## 7 · Assets In `templates/assets/` (en de definitieve set in `../logo/`): | Bestand | Gebruik | |---|---| | `wordmark-navy.svg` | Wordmark op lichte achtergrond (covers licht, brief, binnenpagina). | | `wordmark-wit.svg` | Wordmark op donker (navy cover/zijpaneel, QuickScan-cover). | | `beeldmerk-os.svg` / `beeldmerk-os-wit.svg` | OS-monogram — kopbanner binnenpagina, favicon/avatar. | | `merk-datapunt.svg` / `merk-datapunt-wit.svg` | Datapunt — textuur op covers, voetmerk. | Kleuren/type: **altijd via `tokens.css`** (`--os-blue`, `--os-accent`, `--os-creme`, `--os-creme-200`, `--os-dgray`, `--os-gray-strong`, `--os-border`, …). Hardcode geen hex. --- ## 8 · Documenten produceren ### Route A — Tekstdocumenten → native Word `.dotx` (brief, binnenpagina, rapport) Deze worden door mensen getypt; bouw ze als **bewerkbaar** Word-sjabloon. 1. Stel **paginakleur, marges en de navy-accentbalk** in (Route-specs in §4/§5). 2. Maak **Koptekst/Voettekst** met wordmark + bedrijfsgegevens (herhaalt op elke pagina). 3. Definieer **Word-stijlen** die 1-op-1 de tabel in §2 volgen: Titel, Kop 1, Kop 2, Standaard (body), Eyebrow, Meta. Zo blijft alles consistent en aanpasbaar. 4. Bewaar als `.dotx`. Programmatisch kan dit met **`docx` (Node)** of **`python-docx`**: genereer de stijlen, header/footer en placeholders uit de specs hierboven. 5. Lever met `[plaatshouders]` (bv. `[datum]`, `[onderwerp]`, `[naam]`) in een grijstint. ### Route B — Covers & QuickScan → beeld + PDF (vormgeving is leidend) Hier telt pixel-exacte vormgeving boven los bewerkbare tekst. 1. Render de HTML-template (uit `templates/`) op **300 dpi** naar PNG/PDF. 2. **Cover** in Word: plaats de PNG als **paginavullende koptekst-afbeelding**; typ titel/meta desgewenst in tekstvakken eroverheen (Montserrat, kleuren uit §2). 3. **QuickScan**: exporteer het deck naar **PDF** (1 pagina per slide) en/of lever de HTML waarin beelden en velden worden ingevuld. > Tip: voor het OneDrive-team lever je per template één `.dotx` (Route A) of een > cover-`.dotx` met ingebedde PNG (Route B), zodat "Nieuw → OranjeSteen-…" meteen goed start. --- ## 9 · Bedrijfsgegevens (voor voetregels & 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 ze bekend zijn. - **Ondertekenaar standaard:** Dax — Directeur & oprichter. --- ## 10 · Checklist vóór oplevering - [ ] Geen oranje, ook niet als accent. - [ ] Eén font (Montserrat); geen gewicht 300; nadruk via gewicht 600/700. - [ ] Broodtekst ≥ 10,5 pt; kleine tekst op `--os-gray-strong`. - [ ] `tabular-nums` op alle cijfers, bedragen en oppervlakten. - [ ] Navy-accentbalk + wordmark + datapunt-voetmerk aanwezig en consistent geplaatst. - [ ] Eén accentvlak per pagina; titel heeft lucht; document oogt rustig. - [ ] Kleuren via `tokens.css`, niet hardcoded. - [ ] Logo wit-op-donker / navy-op-licht. QuickScan draagt het opdrachtgever-logo. --- *OranjeSteen · documenten-skill · hoort bij design system v1.2 · juni 2026. Bron = de ontwerpomgeving. Wijzig niet los; vraag een nieuwe export bij huisstijlwijziging.*