Huisstijl — stijlgids

Design System v1.2

De bijgewerkte huisstijl van OranjeSteen. Aangescherpt op leesbaarheid, uitgebreid met kleurschalen en statuskleuren voor échte UI, en met verfijnde typografie — alles binnen de bestaande tonen. Een databedrijf dat toevallig vastgoed doet: rustig, betrouwbaar, scherp.

Sector

Vastgoed · NL

Versie

1.2

Datum

juni 2026

Wijziging

v1.1 → v1.2

Atmosfeer & positionering

OranjeSteen brengt de vastgoedmarkt systematisch in kaart en handelt op data. De uitstraling: professioneel en ingetogen, maar met een scherpte en moderniteit die laat zien dat wij anders werken dan een traditioneel makelaarskantoor.

Karakter

Professioneel, ingetogen, betrouwbaar. Geen decoratieve fratsen, geen makelaarspitch.

Scherpte

Datagedreven en modern. Kloppende cijfers, strakke structuur, rust in de vorm.

Densiteit

Ruimte ademen. Witruimte is een ontwerpkeuze, geen leegte.

Balans

Vernieuwend in een traditionele markt — herkenbaar voor iedereen met vastgoed op z'n naam.

De naam bevat “oranje” — de huisstijl niet. Oranje blijft verboden in alle merkuitingen. Ook niet als accent of hover.

Basiskleuren

De zeven merkkleuren blijven ongewijzigd — dit is het hart van de identiteit. Nieuw in v1.1: één leesbaar grijs erbij (gray-strong) voor kleine tekst, omdat het lichte grijs daar onder de contrastnorm zakte.

blue

#162447

22, 36, 71

Primair. Titels, body, donkere vlakken, nav.

accent

#2A3F72

42, 63, 114

Subtitels, accentlijnen, links, hover.

dgray

#4B505C

75, 80, 92

Lopende tekst op licht.

gray-strong

#5E6474 NIEUW

94, 100, 116

Kleine tekst: labels, meta, bijschriften. Haalt AA.

gray

#787D8C

120, 125, 140

Alleen non-tekst: randen, iconen, placeholders.

creme

#DDD4CB

221, 212, 203

Warme cover-achtergrond, tekst op donker.

lgray

#F5F3F0

245, 243, 240

Lichte pagina/sectie-achtergrond.

white

#FFFFFF

255, 255, 255

Tekst/logo op donker; kaartvlakken.

Kleurschalen

Voor échte UI — randen, hovers, disabled, gevulde vlakken — heb je meer nodig dan zeven losse kleuren. De oplossing: trappen binnen de drie bestaande tonen. Geen nieuwe hue's. De basiskleuren zijn gemarkeerd.

Navy / blauw — structuur & tekst

Van diepste vlak tot lichte vulling. blue en accent staan vast; de rest zijn afgeleiden voor diepte, hovers en uitgegrijsde tekst.

900#12152CDiepste vlak

BASIS800#162447blue

BASIS600#2A3F72accent

500#3D5290hover gevuld

300#8C96B4disabled

200#C8CDDCrand op donker

100#E9EBF1vulling licht

Warm neutraal — crème-familie

De warmte van het merk. Crème blijft de merkkleur; onder grote tekstvlakken pak je een lichtere trap (crème-200 of lgray) zodat de tekst rust krijgt.

700#B8A98Fdiep zand

600#CCBFA9rand op crème

BASIS500#DDD4CBcreme

300#E7E1D6zacht vlak

200#EFEBE3cover onder tekst

BASIS100#F5F3F0lgray

0#FFFFFFwhite

Koel grijs — tekst & meta

De tekst-grijstrap, met de belangrijkste correctie: gray-strong haalt wél de leesbaarheidsnorm voor kleine tekst.

BASIS700#4B505Cdgray · body

NIEUW600#5E6474meta klein ✓

BASIS500#787D8Cnon-tekst

400#9CA1ADplaceholder

300#C4C7CFrand sterk

200#E8E4E0border

100#F1EFEChover-rij

Functionele tokens & status

Voor interfaces — knoppen, velden, tabellen — en voor de interne tools (CRM, dashboards). Statuskleuren zijn gedempt en zakelijk, en leven alleen in tools, nooit in merkuitingen. Zo blijft de merk-huisstijl zuiver.

Functionele tokens

border

#E8E4E0

Standaardrand op licht

border-strong

#C4C7CF

Inputrand, scheidslijn

surface-hover

#F1EFEC

Rij/kaart hover

accent-hover

#3D5290

Knop-hover (gevuld)

disabled

#8C96B4

Inactieve tekst/knop

Statuskleuren — interne tools

success

#2F6B4F

Deal rond, akkoord, in bezit

info · accent

#2A3F72

Neutrale melding, in onderzoek

warning · oker

#8A6D2F

Let op / actie vereist

error

#9E3B36

Afgewezen, mislukt, verlopen

Beschikbaar In onderzoek Actie vereist Afgewezen

Oker (#8A6D2F) is bewust een gedempte aardetint — leest als ‘let op’ zonder signaaloranje te worden. Toegestaan, maar uitsluitend in interne tools.

Typografie — Montserrat

Eén font: Montserrat. Geen tweede letter. Montserrat is een display-letter; we temmen 'm met regels voor lange teksten en kleine maten.

Gewichten

400 · body

500 · nadruk

600 · labels/H3

700 · koppen

800 · display

De regels

Regelafstand. Body op 1,65; koppen strak op 1,05–1,15.
Regellengte. Maximaal 65–70 tekens per regel.
Tracking. Display/koppen −0,02em; kapitale labels +0,14em; body neutraal.
Ondergrenzen. Nooit kleiner dan 16px web · 10,5pt document · 12pt presentatie.
Geen gewicht 300, en nadruk via gewicht 600 in plaats van cursief.
Cijfers tabellarisch. font-variant-numeric: tabular-nums op alle data, tabellen, bedragen en coördinaten.

Maatschaal

Verfijnde web/UI-schaal met een rustige verhouding (~1,25) en vaste regelafstand + tracking per niveau. Body is opgehoogd van 15 naar 16px voor leescomfort.

Display

44px · 800 · lh 1,03 · −0,02em

Ontwikkelpotentieel

32px · 700 · lh 1,12 · −0,015em

Wij brengen de markt in kaart

25px · 700 · lh 1,2 · −0,01em

Perceel voor perceel

20px · 600 · lh 1,3

Bestemming & eigendom

Body

16px · 400 · lh 1,65 · max 65ch

We leggen datalagen over elkaar heen — bestemming, eigendom, bouwpotentieel en marktvraag. Daar waar alles samenvalt, ontstaat een ontwikkellocatie.

Small

13,5px · 500 · lh 1,5

Ondersteunende tekst en bijschriften bij velden.

Label / caps

12px · 600 · +0,14em · gray-strong

Initiatief in projectontwikkeling

Presentaties (PPTX) & documenten

Medium	Niveau	Grootte	Gewicht
Presentatie	Hero / stat	48–56pt	ExtraBold
Presentatie	Slidetitel	28pt	Bold
Presentatie	“OranjeSteen” label	18pt	Bold
Presentatie	Body / bullets	12pt (min)	Regular
Document	H1 / H2 / H3	20 / 16 / 14pt	Bold→SemiBold
Document	Body	10,5pt · lh 1,5	Regular

Componenten

Bijgewerkt naar v1.1: disabled-staten, leesbare meta-tekst en tabellarische cijfers in tabellen.

Knop — primair

blue, wit, 4px radius. Hover → accent. Disabled → #8C96B4.

Knop — secundair

Transparant, 1.5px rand. Hover → lgray.

Kaart

Bedrijfshal Almere

1.240 m² · beschikbaar voor marktbenadering.

Wit, border, 6px radius, raised. Hover → floating.

Formulierveld

Locatie

border-strong rand. Focus → 2px accent.

Badge & status

MarktbenaderingBeschikbaar

Neutrale badge (merk) + statuschip (tools).

Accentlijn-header (presentatie)

Marktbenadering 2026

OranjeSteen

Accentlijn + titel + label rechtsboven.

Tabel — met tabellarische cijfers

Locatie	Plaats	Oppervlak	Indicatie	Status
Locatie A	Almere	1.240 m²	€ 1.240.000	Beschikbaar
Locatie B	Zwolle	860 m²	€ 868.500	In onderzoek
Locatie C	Apeldoorn	2.100 m²	€ 2.115.900	Actie vereist

Cijferkolommen rechts uitgelijnd met tabular-nums — alles lijnt netjes uit.

Layout, spacing & diepte

Witruimte is een token. Spaarzame schaduwen — donkere vlakken krijgen nooit schaduw.

Spacing-schaal

xs4px · interne ruimte

sm8px · kleine gaps

md16px · standaard padding

lg24px · sectieruimte

xl40px · grote blokken

xxl64px · hero-secties

Diepte

Flat

geen schaduw

Raised

cards

Floating

modals

Overlay

drawers

Do's & don'ts

✓Doe dit

Kleine tekst op gray-strong (#5E6474), niet op #787D8C.
Trappen gebruiken voor randen/hovers — geen nieuwe hue's.
Tabular-nums aan voor alle cijfers en tabellen.
Body op 16px, regellengte max ~65 tekens.
Statuskleuren alleen in tools, nooit in merkuitingen.
Logo wit op donker, donkerblauw op licht.

✕Doe dit niet

Geen oranje — ook geen oker in merkuitingen.
Geen tweede font naast Montserrat; geen gewicht 300.
Geen kleine tekst onder 16px web / 10,5pt document.
Geen gradients of drukke patroonachtergronden.
Geen afgeronde hoeken groter dan 6px.
Geen schaduw op donkere blue-vlakken.

Imagery & hero

Echte luchtfoto's van woonwijken en locaties dragen het verhaal "ontwikkelpotentieel". Over de foto ligt een directionele navy-overlay: donker links (waar de tekst staat) → transparant rechts (de wijk schemert door). Statement in Montserrat 900, witte lede.

Initiatief in projectontwikkeling

Wij zien het ontwikkelpotentieel.

Witte lede op de foto — leesbaar over het donkere deel van de overlay.

Overlay-recept

Horizontaal: navy #162447 van 0.96 (links) → 0.50 (rechts), met mid-stops 0.90 @40% en 0.72 @70%.
Verticaal (extra demping onder de tekst): transparant @30% → 0.55 onderaan.
Lede in wit 92% — niet het grijs/crème — voor leesbaarheid op foto.
Mobiel: egale/verticale overlay 0.75–0.85 (links-donker werkt alleen bij links-uitgelijnde tekst).
Geen groene of off-brand markers op kaarten/foto's — gebruik crème of accent.

Logo

Vier elementen: wordmark (de naam), OS-monogram (favicon/avatar/app), lockup (wordmark + descriptor) en het datapunt (grafisch element). Eén merk per uiting. Montserrat 900, navy #162447. Geen oranje.

Wordmark — navy op licht (standaard)

Wordmark — wit op navy (invers)

Lockup — wordmark + descriptor

OS-monogram (badge) & datapunt