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.
Urna Unica maakt gepersonaliseerde keramische urnen
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
Iedere urn draagt de tekst die u zelf kiest — niet als opgedrukt label
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
We communiceren met kalmte en zorgvuldigheid. Nooit urgent
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
Zwart
--zwart: #1d1d1b
Grijs 1
--grijs-1: #575756
Wit
--wit: #FFFFFF
Achtergrond
--achtergrond: #F8F8F6
Grijs 2 (bodytekst)
--grijs-2: #575756
Grijs 3 (meta)
--grijs-3: #8C8C8C
Grijs 4 (borders)
--grijs-4: #D4D4D0
Grijs 5 (subtiel)
--grijs-5: #EFEFED
| Token | Waarde | Gebruik |
|---|---|---|
| --zwart | #1d1d1b | Primaire merkkleur, koppen, knoppen |
| --wit | #FFFFFF | Achtergrond body, kaarten |
| --achtergrond | #F8F8F6 | Secundaire achtergrond, hero's |
| --grijs-1 | #575756 | Logo, koppen secundair |
| --grijs-2 | #575756 | Bodytekst, links |
| --grijs-3 | #8C8C8C | Labels, meta, placeholders |
| --grijs-4 | #D4D4D0 | Borders, scheidingslijnen |
| --grijs-5 | #EFEFED | Subtiele achtergronden, hover states |
| --accent | #1d1d1b | Accent (gelijk aan --zwart) |
Urna Unica gebruikt Open Sans als enige letterfamilie. De lichte gewichten (300
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 (12px) | Labels, captions, breadcrumb |
| --tekst-sm | 0.875rem (14px) | Meta, navigatie, secondair |
| --tekst-basis | 1rem (16px) | Bodytekst, formulieren |
| --tekst-md | 1.125rem (18px) | Leads, intro-paragrafen |
| --tekst-lg | 1.5rem (24px) | H3 koppen |
| --tekst-xl | 2rem (32px) | H2 koppen |
| --tekst-2xl | 3rem (48px) | H1 koppen |
| --tekst-3xl | 4.5rem (72px) | Display, hero-koppen |
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 |
| --nav-hoogte | 64px | Hoogte navigatiebalk |
| --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 |
| .sectie | Verticale padding: 8rem (var(--ruimte-32)) |
| .sectie--sm | Verticale padding: 4rem (var(--ruimte-16)) |
| .sectie--grijs | Achtergrondkleur: var(--achtergrond) |
| .sectie--zwart | Achtergrond zwart, tekst wit |
De stem van Urna Unica is rustig
Korte zinnen
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 twee breakpoints. Alle componenten passen zich geleidelijk aan — geen abrupte veranderingen
| Breakpoint | Breedte | Gedrag |
|---|---|---|
| Desktop | > 1199px | Volledig grid, alle navigatie zichtbaar |
| Tablet | ≤ 1199px | Grid collapst naar 2 kolommen, koppen worden kleiner |
| Mobiel | ≤ 767px | Enkel-kolom layout, navigatie-links verborgen, compacte spacing |
| Token | Desktop | Tablet (≤1199px) | Mobiel (≤767px) |
|---|---|---|---|
| --tekst-2xl (H1) | 3rem | 2.5rem | 2rem |
| --tekst-3xl (display) | 4.5rem | 3.5rem | 2.75rem |
| --zijmarge | 2rem | 2rem | 1.25rem |
| --ruimte-32 (sectie) | 8rem | 6rem | 4rem |
| --ruimte-16 | 4rem | 4rem | 3rem |
| .grid-2, .grid-3 | 2/3 kolommen | 2 kolommen | 1 kolom |
| .nav__links | Zichtbaar | Zichtbaar | Verborgen |
De volgende richtlijnen helpen het merk consistent te houden in alle uitingen — van website tot drukwerk
Do
Don’t
Do
Don’t