Geen toegang
Deze pagina is beveiligd. U heeft een geldige toegangscode nodig om de brand guidelines te bekijken.
Terug naar de website
Deze pagina is beveiligd. U heeft een geldige toegangscode nodig om de brand guidelines te bekijken.
Terug naar de websiteBrand Guidelines
Dit document beschrijft de visuele en verbale identiteit van Urna Unica. Het dient als referentie voor iedereen die met het merk werkt — van ontwerpers en drukkers tot partners en leveranciers.
Versie 24-09-2026 · gelijk aan design-system.css van de website
Urna Unica maakt gepersonaliseerde keramische urnen, ontworpen door vooraanstaande Nederlandse kunstenaars. Het merk combineert ambachtelijk vakmanschap met moderne 3D-technologie. De visuele identiteit weerspiegelt dezelfde waarden: rust, waardigheid en aandacht voor detail.
Elk ontwerp is gemaakt door een erkend kunstenaar. De esthetische kwaliteit staat nooit ter discussie — het is de kern van wat wij doen.
Onze urnen worden met de hand gegoten, gedroogd en gebakken in een Nederlands atelier. Traditionele giettechnieken gecombineerd met moderne precisie.
Iedere urn draagt de tekst die u zelf kiest — niet als opgedrukt label, maar gebakken in het keramiek zelf. Integraal onderdeel van de vorm.
Elk aspect van ons product en onze communicatie is doordacht op waardigheid. Het verdriet verdient een omgeving van rust en respect.
Wij maken geen massaproduct. Elk object is op bestelling vervaardigd, met volle aandacht voor detail en kwaliteit.
We communiceren met kalmte en zorgvuldigheid. Nooit urgent, nooit opdringerig. De beslissingen die u neemt, neemt u op uw eigen tempo.
Het logo van Urna Unica is een woordmerk in een aangepaste geometrische letter. Het is beschikbaar in twee varianten: standaard (donkergrijs op licht) en invers (wit op donker).
Standaard — op lichte achtergrond
Invers — op donkere achtergrond
Gepersonaliseerde design urnen
Gepersonaliseerde design urnen (invers)
Houd rondom het logo altijd een vrije ruimte aan van minimaal de hoogte van de letter “U” in het woordmerk. Geen andere elementen mogen deze zone betreden.
Het logo mag niet kleiner worden weergegeven dan 80px breed (digitaal) of 25mm breed (print). Onder dit formaat wordt het woordmerk onleesbaar.
Gebruik het standaardlogo op lichte achtergronden (#FFFFFF of #F8F8F6). Gebruik het inverse logo uitsluitend op de merkkleur #1d1d1b of donkerder.
Download de logo-bestanden:
Het kleurenpalet is bewust beperkt en neutraal. Geen felle accenten — het merk ademt rust door een zorgvuldige gradatie van warm grijs, van bijna-zwart tot bijna-wit.
Zwart
--zwart: #1d1d1b
Grijs 1
--grijs-1: #575756
Wit
--wit: #FFFFFF
Achtergrond
--achtergrond: #F8F8F6
Grijs 2 (bodytekst)
--grijs-2: #696968
Grijs 3 (meta)
--grijs-3: #636362
Grijs 4 (borders)
--grijs-4: #D4D4D0
Grijs 5 (subtiel)
--grijs-5: #EFEFED
| Token | Waarde | Gebruik |
|---|---|---|
| --zwart | #1d1d1b | Primaire merkkleur, footer, hover- en actieve staten |
| --wit | #FFFFFF | Achtergrond body, kaarten |
| --achtergrond | #F8F8F6 | Secundaire achtergrond, grijze secties, reviews |
| --grijs-1 | #575756 | Logo, koppen, primaire knop |
| --grijs-2 | #696968 | Bodytekst, navigatielinks |
| --grijs-3 | #636362 | Labels, meta, footerlinks |
| --grijs-4 | #D4D4D0 | Borders, scheidingslijnen |
| --grijs-5 | #EFEFED | Subtiele achtergronden, hover states |
| --accent | #1d1d1b | Accent (gelijk aan --zwart) |
Grijs 2 en grijs 3 zijn donkerder gezet dan in de oorspronkelijke huisstijl, zodat alle tekst op wit en op de lichte achtergrond voldoet aan WCAG AA (contrast minimaal 4,5:1).
Urna Unica gebruikt Open Sans als enige letterfamilie. De lichte gewichten (300, 400) creëren de rustige, elegante uitstraling. Zwaardere gewichten (500, 600) worden spaarzaam ingezet voor labels en nadruk.
Urna Unica
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & — © €
Licht 300
font-weight: 300
Koppen, bodytekst, hero
Regulier 400
font-weight: 400
Navigatie, knoppen, links
Medium 500
font-weight: 500
Labels, CAPS elementen
Semibold 600
font-weight: 600
Intro-paragrafen (p.intro)
| Token | Waarde | Gebruik |
|---|---|---|
| --tekst-xs | 0.75rem (13,5px) | Labels, captions, breadcrumb |
| --tekst-sm | 0.875rem (15,75px) | Meta, navigatie, knoppen |
| --tekst-basis | 1rem (18px) | Bodytekst, formulieren |
| --tekst-md | 1.125rem (20,25px) | Leads, intro-paragrafen |
| --tekst-lg | 1.5rem (27px) | H3 koppen |
| --tekst-xl | 2rem (36px) | H2 koppen |
| --tekst-2xl | 3rem (54px) | H1 koppen |
| --tekst-3xl | 4.5rem (81px) | Display, hero-koppen |
De basisgrootte is 18px op desktop en tablet en 16px op mobiel (≤767px). De pixelwaarden hierboven gelden voor desktop. Koppen staan in grijs 1, lopende tekst in grijs 2.
Witruimte is een bewust onderdeel van het ontwerp. De ruimteschaal is opgebouwd uit een consistente reeks waarden die overal in het systeem worden hergebruikt.
| Token | Waarde | Gebruik |
|---|---|---|
| --max-breedte | 1320px | Container maximumbreedte |
| --tekst-breedte | 620px | Maximale breedte lopende tekst |
| --zijmarge | 2rem | Horizontale padding container (1.25rem op mobiel) |
| --nav-hoogte | 68px | Hoogte navigatiebalk (60px op mobiel) |
| --radius | 0px | Border-radius (geen afronding) |
| --overgang | 180ms ease | Standaard transitieduur |
Onderstaande componenten vormen de bouwstenen van de interface. Elk component maakt gebruik van de hierboven beschreven tokens.
<a class="btn btn--primair">Primair</a>
<a class="btn btn--outline">Outline</a>
<a class="btn btn--primair btn--groot">Groot</a>
<span class="label">Label tekst</span>
<div class="veld">
<label>Naam</label>
<input type="text" placeholder="Uw naam" />
</div>
<nav class="breadcrumb">
<a href="#">Home</a>
<span>·</span>
<span>Pagina</span>
</nav>
<div class="kaart">
<div class="kaart__beeld">...</div>
<div class="kaart__body">
<span class="kaart__designer">Ontwerper</span>
<span class="kaart__naam">Naam</span>
<span class="kaart__prijs">Prijs</span>
</div>
</div>
Het gridsysteem is opgebouwd uit CSS Grid utility-klassen. De container heeft een maximumbreedte van 1320px met 2rem zijmarge. Secties gebruiken consistente verticale padding.
.grid-2
.grid-3
.grid-4
| Klasse | Beschrijving |
|---|---|
| .container | Gecentreerde wrapper, max-width: 1320px, padding: 0 2rem (1.5rem vanaf 1049px, 1rem op mobiel) |
| .sectie | Verticale padding: 8rem (var(--ruimte-32)), 4rem vanaf 1049px, 3rem op mobiel |
| .sectie--sm | Verticale padding: 4rem (var(--ruimte-16)), 2rem op mobiel |
| .sectie--grijs | Achtergrondkleur: var(--achtergrond) |
| .sectie--zwart | Achtergrond zwart, tekst wit |
De stem van Urna Unica is rustig, respectvol en zelfverzekerd. We spreken de bezoeker aan met “u” en vermijden commerciële urgentie. De toon is die van een vertrouwde adviseur, niet van een verkoper.
Korte zinnen, veel witruimte. Geen uitroeptekens, geen capitals. We laten het product spreken.
Neem de tijd. Wij zijn er wanneer u er klaar voor bent.
We erkennen de context waarbinnen ons product wordt aangeschaft. We zijn nooit opdringerig of triviaal.
Een urn die de schoonheid draagt die een bijzonder leven verdient.
We kennen de kwaliteit van ons product. We hoeven niet te overtuigen — we presenteren.
Handgemaakt keramiek, ontworpen door erkende kunstenaars.
| Richtlijn | Voorbeeld |
|---|---|
| Gebruik "u", niet "je" | "Uw tekst wordt gebakken in het keramiek." |
| Geen urgentie-woorden | Niet: "Bestel nu!" Wel: "Ontdek de collectie." |
| Geen superlatieven | Niet: "De mooiste urn." Wel: "Een urn met karakter." |
| Actieve zinnen | Niet: "Er wordt geleverd." Wel: "Wij leveren aan huis." |
| Korte zinnen | Max. 20 woorden per zin. Liever twee korte dan een lange. |
Het design system gebruikt drie breakpoints: 1199px, 1049px en 767px, met een vangnet onder 375px. Alle componenten passen zich geleidelijk aan, zonder abrupte veranderingen en zonder verborgen content.
| Breakpoint | Breedte | Gedrag |
|---|---|---|
| Desktop | > 1199px | Volledig grid, alle navigatie zichtbaar |
| Tablet | ≤ 1199px | .grid-4 en footer naar 2 kolommen, koppen worden kleiner |
| Kleine tablet | ≤ 1049px | Navigatie wordt een hamburgermenu, taalkeuze in het midden, twee-koloms lay-outs stapelen |
| Mobiel | ≤ 767px | Enkel-kolom layout, basisgrootte 16px, knoppen over de volle breedte, compacte spacing |
| Klein mobiel | ≤ 374px | Kleinere koppen en logo, stappenbalk verticaal |
| Token | Desktop | ≤1199px | ≤1049px | Mobiel (≤767px) |
|---|---|---|---|---|
| Basisgrootte (html) | 18px | 18px | 18px | 16px |
| --tekst-2xl (H1) | 3rem | 2.5rem | 2.5rem | 1.75rem |
| --tekst-3xl (display) | 4.5rem | 3.5rem | 3.5rem | 2rem |
| --nav-hoogte | 68px | 68px | 68px | 60px |
| .container padding | 2rem | 2rem | 1.5rem | 1rem |
| .sectie padding | 8rem | 6rem | 4rem | 3rem |
| .grid-2, .grid-3 | 2/3 kolommen | 2/3 kolommen | 2/3 kolommen | 1 kolom |
| .grid-4 | 4 kolommen | 2 kolommen | 2 kolommen | 1 kolom |
| .nav__links | Zichtbaar | Zichtbaar | Hamburgermenu | Hamburgermenu |
| Richtlijn | Uitwerking |
|---|---|
| Contrast | Alle tekstkleuren halen WCAG AA (minimaal 4,5:1) op wit en op #F8F8F6 |
| Focus | Knoppen, kaarten en kleurstalen tonen bij toetsenbordbediening een zwarte rand van 2px; navigatielinks krijgen hun onderstreping |
| Aanraakdoelen | Knoppen en formuliervelden zijn op mobiel minimaal 44px hoog |
| Formulieren | Invoervelden gebruiken op mobiel 16px, zodat telefoons niet inzoomen |
| Navigatie | Een verborgen link “naar de inhoud” verschijnt bij de eerste Tab-toets |
| Beweging | Overgangen duren 180ms; animaties zijn subtiel en nooit nodig om inhoud te begrijpen |
De volgende richtlijnen helpen het merk consistent te houden in alle uitingen — van website tot drukwerk, van e-mail tot social media.
Do
Don’t
Do
Don’t