De bouwstenen van Swapped.
Logo, kleur, letters, iconen en vormtaal — alles wat je nodig hebt om iets te maken dat er als Swapped uitziet. Geen PDF die verstoft, maar een levende pagina: wat je hieronder ziet zijn de echte componenten uit onze site.
Versie 0.1 — oktober 2026
Op deze pagina
Logo
Twee uitvoeringen
Het woordmerk SWAPPED zit altijd in een pill. Donker voor lichte ondergronden, wit voor donker en foto. De pill laat je nooit weg — die zorgt voor het contrast waar de ondergrond dat niet doet.
Op foto: altijd met overlay
Zo wel
- Op cream (#F7F5F3), wit, beige (#F4EDE1) of mint — daar gebruik je het primaire logo.
- Op donker, op mint-donker en op foto — daar gebruik je de witte variant.
- Op foto alleen met een donkere overlay of een rustig vlak eronder.
- In de navigatie 36 px hoog op mobiel, 44 px vanaf desktop; in de voettekst 32 px.
Zo niet
- Uitrekken, samendrukken of roteren.
- Herkleuren — het logo bestaat in zwart en in wit, verder niets.
- Schaduw, gloed, outline of verloop toevoegen.
- Het woordmerk losknippen van de pill.
- Kleiner afbeelden dan 24 px hoog (digitaal) of 12 mm (print).
- Op een onrustige foto zonder overlay plaatsen.
Vrije ruimte
Rondom het logo blijft minimaal de helft van de pill-hoogte leeg. Niets steekt daar overheen — geen tekst, geen rand, geen beeld.
Minimale maat
24 px hoog op scherm, 12 mm in druk. Daaronder loopt het woordmerk dicht.
Alles in één zip
swapped-logo.zip 656 kBDrie uitvoeringen als SVG, de PNG's in drie breedtes en een bijsluiter met de afspraken.
Kleur
Mint op warm grijs
Een klein palet met opzet: een warme neutrale basis, één felle merkkleur en een warm zwart. Werk je in onze codebase, gebruik dan de token en niet de hex.
Basis
Het palet van de website: een warme neutrale basis, mint als merkkleur en een warm zwart.
#01E99C
hsl(160 99% 46%)
bg-primary · text-primary
Dé merkkleur. Knoppen, accenten, iconen, hele vlakken. Zuinig gebruiken: hij werkt doordat hij opvalt.
#D6F5EB
hsl(160 60% 90%)
bg-mint-light
Achtergrond van icoontegels en labels. Nooit als groot vlak — dan wordt het flets.
#1F1A14
hsl(30 20% 10%)
section-dark
Warm zwart met een bruine ondertoon. Footer, donkere secties, de knop "Plan een demo".
#F7F5F3
hsl(40 20% 96%)
bg-background
De standaardachtergrond van de site. Warmer dan wit, en dat is bewust.
#F4EDE1
—
section-beige
Tweede achtergrond. Zet secties uit elkaar zonder een harde lijn te trekken.
#2A2622
hsl(30 10% 15%)
text-foreground
Alle lopende tekst op licht. Geen puur zwart — dat is te hard op cream.
#FBFAF9
hsl(40 20% 98%)
bg-card
Vlak van kaarten op cream. Net iets lichter dan de achtergrond.
#DED9D3
hsl(30 15% 85%)
border-border
Randen van kaarten, velden en scheidslijnen. Eén rand is genoeg.
#EF4444
hsl(0 84.2% 60.2%)
bg-destructive
Alleen voor foutmeldingen en onomkeerbare acties. Nooit decoratief.
Presentatie
Gegroeid uit onze decks. Donkergroen en lime vormen daar het paar dat mint en zwart op het web vormen; papier en zand zijn de rustige vlakken eronder. Ze staan als echte tokens in de stylesheet, dus je mag ze ook op het web gebruiken.
#1B3525
hsl(143 32.5% 15.7%)
bg-forest · text-forest
Het donkere vlak in presentaties: kop- en voetbalk, en kaarten die eruit moeten springen. Dieper en groener dan surface dark.
#DDFE1F
hsl(68.9 99.1% 55.9%)
bg-lime · text-lime
De aandachtskleur op donkergroen: één cijfer, één blok, één opsommingsteken per slide. Op licht werkt hij niet.
#EFEDE2
hsl(50.8 28.9% 91.2%)
bg-paper
De achtergrond van een slide. Iets warmer en geler dan cream, zodat donkergroen er dieper op staat.
#E5E1D2
hsl(47.4 26.8% 86.1%)
bg-sand
Kaarten en cijferblokken op papier. Eén stap donkerder, net genoeg om een vlak af te bakenen zonder rand.
Contrast
Gemeten volgens WCAG. Lopende tekst heeft minimaal 4,5 : 1 nodig.
13,8 : 1
De standaard voor alle lopende tekst.
12,9 : 1
Prima, ook voor kleine tekst.
17,3 : 1
Donkere secties en de voettekst.
10,8 : 1
Zo hoort mint als tekstkleur gebruikt te worden.
10,8 : 1
De primaire knop: mint vlak, bijna-zwarte letter.
1,5 : 1
Ruim onder de norm. Mint is op licht een vlakkleur, geen letterkleur.
1,6 : 1
Nooit doen. Gebruik de donkere letter op mint.
11,6 : 1
Het paar uit de presentaties: lime cijfer op een donkergroen vlak.
11,6 : 1
Andersom werkt net zo goed: het limeblok met donkergroene tekst.
11,3 : 1
De standaard voor tekst op een slide.
1,0 : 1
Vrijwel onzichtbaar. Lime hoort op donkergroen, nergens anders.
Ritme van de pagina
Secties wisselen van achtergrond, met een golvende overgang op elke wissel. Twee keer dezelfde achtergrond achter elkaar leest als één eindeloos blok.
bg-background
section-beige
section-green
section-dark
Mint als volledige sectie gebruik je hooguit één keer per pagina.
Het palet als CSS-variabelenTypografie
CHANEY voor de kop, Manrope voor de rest
CHANEY Wide staat breed en zwaar en kent alleen kapitalen — dezelfde familie als het woordmerk in ons logo. Daaronder doet Manrope rustig en leesbaar al het werk. Dat verschil is het halve gezicht van de site.
CHANEY Wide
KoppenHergebruik slim en schaalbaar — 0123456789
font-heading · één gewicht · alleen kapitalen
Kent alleen kapitalen: wat je ook intikt, er komen hoofdletters uit. Eén echt gewicht, dat van zichzelf al zwaar staat — zet er nooit een vetter gewicht overheen, dat wordt nep-vet. Tekenafstand iets negatief (-0.02em), want de letter staat breed.
Commerciële licentie (atipo foundry)
Manrope
Body & UIHergebruik slim en schaalbaar — 0123456789
font-body · gewichten 400/500/600/700, plus 800 voor presentaties
Basisgrootte 17 px. Knoppen en labels in 600; benadrukte tekst in 700. In presentaties doet Manrope ook de koppen — zie hieronder.
SIL Open Font License 1.1 — vrij te gebruiken
Gloria Hallelujah
Handgeschreven accentHergebruik slim en schaalbaar — 0123456789
Los aangeroepen, alleen voor citaten
Uitsluitend voor korte citaten van gebruikers, in mint en cursief. Maximaal één per sectie.
Gratis via Google Fonts
Presentaties
Geen CHANEY? Dan Manrope.
CHANEY is een commerciële letter en zit niet standaard in presentatiesoftware. Staat hij er niet, dan zet je de koppen in Manrope — dezelfde letter als de bodytekst, maar zwaarder. Dat is een bewuste uitwijk en geen noodgreep: een deck in twee gewichten Manrope ziet er rustiger uit dan een deck met een geleende display-letter.
Eerste keus
Duurzaamheid die je ziet.
CHANEY Wide · één gewicht
Als CHANEY ontbreekt
Duurzaamheid die je ziet.
Manrope ExtraBold · 800
- Slidetitels in Manrope ExtraBold (800). Is 800 er niet, dan Bold (700).
- Laat de kapitalen dan los: CHANEY staat in hoofdletters omdat hij niet anders kan, Manrope in hoofdletters leest als schreeuwen. Gewoon in zinsvorm zetten.
- Tussenkoppen en kaartkoppen in Bold (700), bodytekst blijft Regular (400).
- Houd de regelafstand krap en de letterafstand iets negatief, net als bij CHANEY.
- Eén deck, één koptekstletter. Wissel niet halverwege terug naar CHANEY.
- Vervang CHANEY nooit door een willekeurige display- of schreefletter — geen Impact, Georgia of Playfair.
font-heading text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.1] tracking-tight
Wij maken hergebruik de standaard.
font-heading text-3xl md:text-4xl lg:text-5xl font-bold leading-tight
Duurzaamheid die je ziet.
font-heading text-2xl font-bold
Wat is het Regieplatform?
text-xl font-bold
Impact gedreven
text-lg md:text-xl text-muted-foreground leading-relaxed
Het hart van Swapped. Regie, beheer en inzicht — op één plek.
(standaard — 17 px Manrope) leading-relaxed
Door inzicht en slimme sturing worden gebruikte producten hergebruikt in plaats van vernietigd.
text-primary font-semibold text-sm uppercase tracking-wider
ONZE WAARDEN
Regellengte
Lopende tekst in max-w-3xl, ongeveer 70 tekens per regel. Breder leest niemand nog.
Hoofdletters
Koppen staan in kapitalen omdat CHANEY niet anders kan. Tik ze toch in zinsvorm: voorleessoftware en het klembord leveren dan nog leesbare tekst op. Buiten koppen gebruik je kapitalen alleen in het eyebrow-label.
Benadrukken
In lopende tekst vetgedrukt, niet cursief en niet onderstreept; onderstreping is voorbehouden aan links. In een kop kan het niet — CHANEY heeft maar één gewicht.
Iconen
Lucide, altijd lijnstijl
126 iconen, gegroepeerd op wat ze bij ons betekenen. Het grootste deel komt uit Lucide; de iconen met een mintrand tekenden we zelf, omdat Lucide geen pallet, matras of kraakperswagen heeft. Ze zijn in dezelfde maat en lijndikte gezet, dus je kunt ze door elkaar gebruiken. Klik een icoon aan om het als SVG op te halen.
Circulaire route
De stappen van het platform en de vier bestemmingen op de R-ladder. Hergebruik is de twee-pijlen-cirkel; de driehoek is recycling en betekent iets anders.
Logistiek en locaties
Het vervoer en de plekken waar een stroom langskomt. De kraakperswagen en de afzetcontainer tekenden we zelf — die bestaan niet in Lucide.
Productstromen
De stromen die we beoordelen en doorzetten. Meubels, witgoed en de stromen daarnaast; de houtachtige zijn van ons.
Waarde en verantwoording
Wat het oplevert en hoe je het aantoont: kosten, CO₂, kilo's en rapportage.
Richting en navigatie
Pijlen en interfacetekens.
Platform en data
Het Regieplatform, de koppelingen en de rapportages.
Mensen en organisaties
Wie er in de keten zit.
Vertrouwen en status
Bevestiging, waarschuwing en wat niet mag.
Contact en planning
Bereikbaarheid en tijd.
Formaat
Op een kaart 28 px in een mint-tegel van 56 px. In lopende tekst en knoppen 16 tot 20 px, zonder tegel.
Kleur
Inkt op licht, wit op donker, mint alleen op donker. In de mint-tegel staat het icoon in inkt.
Betekenis
Eén icoon per begrip, op de hele site hetzelfde. Een icoon vervangt nooit een label waar de betekenis niet vanzelf spreekt.
Sectie-overgang
De gescheurde rand
Waar twee achtergrondkleuren elkaar raken, staat nooit een rechte lijn maar een golvende SVG. Die overgang zie je op elke pagina terug — ook direct boven dit blok, in de gescheurde variant. Twee varianten, verder niets.
Subtiel
variant="subtle" · 32 → 40 px
De standaard. Tussen twee lichte vlakken, en overal waar de overgang niet de aandacht hoeft te trekken.
SVGGescheurd
variant="jagged" · 64 → 128 px
Voor een harde overgang, meestal van licht naar donker. Hooguit één keer per pagina.
SVGHoe je hem inzet
<x-section-divider variant="subtle" bg-class="bg-background" fill-class="fill-[#f4ede1]" />
De twee kleuren
bg-class is de kleur van de sectie erboven,
fill-class die van de sectie eronder. Verwissel je ze, dan valt er
een rand om.
Spiegelen
Met :flip="true" draait de vorm om. Gebruik dat als twee overgangen
vlak na elkaar komen, zodat ze niet identiek zijn.
Vormtaal
Rond, rustig, ruim
Alles heeft een ronding, niets heeft een harde hoek, en er zit veel lucht omheen. De knoppen hieronder zijn de echte knoppen — kopieer de klassen gerust.
Knoppen
De belangrijkste actie. Eén per scherm.
inline-flex items-center gap-2 bg-primary text-primary-foreground px-7 py-3.5 rounded-full font-semibold hover:opacity-90 transition-opacity
De vaste "Plan een demo" in de navigatie.
inline-flex items-center gap-2 bg-surface-dark text-surface-dark-foreground px-7 py-3.5 rounded-full font-semibold hover:opacity-90 transition-opacity
De alternatieve route naast de primaire knop.
inline-flex items-center gap-2 border-2 border-foreground/25 text-foreground px-7 py-3.5 rounded-full font-semibold hover:border-foreground/60 transition-colors
Accentstreep
Hergebruik slim en schaalbaar.
.underline-accent
Mint-verloop
Een tweede leven.
.text-gradient-mint
Blob
.blob-shape 1 t/m 4
Hoekradius
--radius: 0.75rem
Kaarten rounded-2xl (16 px), knoppen en pills rounded-full, icoontegels rounded-xl. Nooit scherpe hoeken.
Kaart
bg-card border border-border rounded-2xl p-8
De standaardkaart op cream. Op beige wordt het bg-white.
Icoontegel
w-14 h-14 bg-mint-light rounded-xl
Lucide-icoon van 28 px, gecentreerd in een mint-tegel.
Schaduw
shadow-[0_30px_80px_-15px_rgba(0,0,0,0.35)]
Alleen de zwevende navigatie en hero-kaarten. Gewone kaarten krijgen geen schaduw.
Sectieruimte
.section-padding
px-6 → px-20 horizontaal, py-28 → py-52 verticaal. Alle secties gebruiken dit.
Sectie-overgang
<x-section-divider />
Golvende SVG tussen twee achtergrondkleuren, in de varianten "subtle" en "jagged".
Blob
.blob-shape (1 t/m 4)
Organische maskervorm voor beeld. Per pagina hooguit twee verschillende.
Accentstreep
.underline-accent
Mint streep onder een woord in een kop. Maximaal twee woorden per kop.
Mint-verloop
.text-gradient-mint
Alleen in hero-koppen, op één regel. Niet in lopende tekst.
Beweging
- Verschijnen
- data-reveal="up" | up-lg | left | right | fade
- Duur & curve
- 0,55s · cubic-bezier(0.22, 1, 0.36, 1)
- Vertraging
- --reveal-delay in stappen van 100 tot 150 ms per kaart
- Hover
- Beeld scale-105 over 500 ms; knoppen opacity-90 of een pijl die 4 px opschuift
- Respect
- Bij prefers-reduced-motion staat alles direct stil en zichtbaar
Beweging mag opvallen zodra je scrolt, maar nooit storen. Eén animatie per element, één keer.
Beeld
Echte spullen, echte mensen
Onze foto's gaan over een bankstel aan de stoeprand en een bus die stilstaat. Dat is niet mooi bedoeld, dat is eerlijk bedoeld — en daardoor valt het op tussen de groene stockbeelden. Hieronder staat de hele bank: 32 foto's, los of in één keer te downloaden.
Of klik een foto aan om hem los op te halen.
Op straat
Waar het mee begint: bruikbare spullen die aan de stoep staan. Dit is het beeld dat het probleem vertelt zonder dat er een woord bij hoeft.
Download
Download
Download
Download
Download
Download
Download
Ophalen
Mensen aan het werk: tillen, dragen, inladen. Nooit poserend, altijd midden in de handeling.
Partners en operatie
De ketenpartners die het werk doen: kringlopen, ophaaldiensten en verwerkers, en de mensen op locatie.
Download
Download
Download
Download
Download
Download
App en platform
Het product in gebruik: een telefoon in iemands handen, een dashboard op een bureau. Altijd in context, nooit los uitgeknipt.
Download
Download
Download
Download
Download
Download
Download
Thuis en showroom
De plek waar een meubel vandaan komt en waar het volgende vandaan komt. Gewone huizen, geen stylingfoto.
Verwerking en omgeving
Wat er gebeurt als het misgaat, en waar het uiteindelijk om draait. Spaarzaam gebruiken: dit beeld is bedoeld om te confronteren.
Team en campagne
Wijzelf. Gebruik dit beeld alleen voor communicatie over Swapped, niet als algemene sfeerfoto — er staan herkenbare collega's op.
Wel fotograferen
- Echte situaties: meubels aan de straat, een bezorger met een oude bank, de milieustraat, het team.
- Daglicht, warme tonen, een beetje rommeligheid. Het mag eruitzien als een gewone dinsdag.
- Mensen in actie en herkenbaar aan het werk — niet poserend.
- Productschermen van het platform in context, niet los uitgeknipt.
Nooit gebruiken
- Stockfoto's met glimlachende modellen in pak.
- Handen die een wereldbol of een plantje vasthouden.
- Groene vinkjes, recyclingpijlen als decoratie, 3D-renders.
- Zwaar bewerkte kleuren of felle filters.
- Beeld waarop mensen herkenbaar zijn zonder dat ze toestemming gaven.
Hero
Liggend, minimaal 1920 × 1080
Donkere overlay bg-black/30 (rustige foto) tot bg-black/55 (drukke foto), plus een verloop van links.
Kaart / thumbnail
4:3
rounded-2xl, verloop van onder voor de witte tekst.
Teamportret
1:1
Vierkant uitgesneden, hover scale-105.
Social card
1200 × 630
Gegenereerd met php artisan swapped:og-images.
Bestandstype
jpg · png · avif
Foto als jpg, schermafbeeldingen als png, avif waar het kan. Altijd loading="lazy" behalve de hero.
Downloads
Alles om mee te werken
In elk pakket zit een bijsluiter met de afspraken, zodat je ook zonder deze pagina weet wat wel en niet mag. Weet je niet welk bestand je nodig hebt, pak dan het volledige pakket.
Over de letters en het logo
CHANEY Wide zit bewust niet in de pakketten: dat is een commerciële letter van atipo waarvan wij de licentie hebben en die we niet mogen doorgeven. Heb je hem nodig voor werk voor ons, laat het weten. De logobestanden zijn omgetrokken uit ons primaire bestand — heb je het originele vectorbestand nodig, vraag het dan even op.
Gegevens
Altijd zo opschrijven
De naam is Swapped: hoofdletter S, verder klein. Het volledig gekapitaliseerde SWAPPED bestaat alleen in het logo, nooit in lopende tekst.
- Statutaire naam
- Swapped B.V.
- Merknaam
- Swapped
- Vestiging
- Apeldoorn, Nederland
- Werkgebied
- Nederland en België
- Website
- swapped.nl
- Algemeen e-mail
- [email protected]
- Vacatures
- [email protected]
- Telefoon
- +31 85 303 9300
Iets nodig dat hier niet staat?
Een logo in een ander formaat, een kleur die je niet terugvindt, of twijfel je of iets mag? Stel de vraag even — dat kost ons een minuut en jou een herziening.