Het Yellowgrape-team voor het kantoor aan de Herengracht in Amsterdam

AI-driven e‑commerce agency

Brand book

De visuele identiteit en het design system van Yellowgrape op één plek. Kleur, typografie, componenten en tone of voice, klaar om mee te werken.

Versie 1.0 Amsterdam & Berlijn
01 · Het merk

Strategisch slim,
onverslaanbaar in uitvoering

Yellowgrape laat e‑commerce-organisaties groeien door data, technologie en marketing te combineren tot één schaalbaar groeisysteem. AI-driven, meetbaar en genadeloos in uitvoering.

"Predictable growth door synergie van data en creativiteit."

De vijf kernwaarden
01

Yellowfamily

Goede sfeer is geen bijzaak. Het is de basis waarop we bouwen. People-first.

02

Virtuoso

E‑commerce is geen trucje, het is een vak. Vakmanschap en technische excellentie.

03

Pioneer

De status quo uitdagen en zelf bouwen waar technologie nog geen antwoord heeft.

04

Kraakhelder

Datagedreven transparantie. Iedere klant kijkt met ons mee in de cockpit.

05

Verwonderd

Nieuwsgierigheid en verwondering als motor voor innovatie en continu leren.

02 · Tone of voice

Direct. Onderbouwd.
Genadeloos in uitvoering.

"Geen ruis, geen riedel, wél duurzame groei."

"Geen aannames, maar resultaat."

"Klaar voor next-level groei?"

Wel doen

  • Korte, stellige zinnen. Kom snel tot de kern.
  • Elke claim dekken met data of resultaat: "46% meer omzet in 12 maanden".
  • Nederlands met natuurlijke Engelse vaktermen (AI-driven, full-funnel).
  • Mensentaal. Vakinhoud helder uitgelegd met tastbare metaforen.

Niet doen

  • Wollige zinnen die maar doorlopen met vier bijzinnen.
  • Vage beloftes: "sterke groei gerealiseerd", "wij ontzorgen volledig".
  • "AI" als losse buzzword zonder concreet resultaat eraan.
  • Afstandelijk corporate jargon of schreeuwerige bluf.
04 · Kleur

Een bewust minimaal palet

Eén primaire kleur, zwart en wit. De kracht zit in het hoge contrast en de moed om puur geel te gebruiken. Klik op een staal om de hex-code te kopiëren.

Merkkleuren

Kopieer
Yellow
#FFFF00
Primaire merkkleur. Volvlak-secties, accenten, cirkels, CTA-blokken.
Kopieer
Black
#000000
Primaire tekst, buttons en koppen.
Kopieer
White
#FFFFFF
Achtergrond en tekst op zwart of foto.

Tinten & oppervlakken

Kopieer
Yellow Soft
#FFEA99
Zachte gele tint voor subtiele highlights en hover-vlakken.
Kopieer
Surface
#FAFAFA
Lichtgrijs oppervlak voor secties en kaarten.
Kopieer
Surface Alt
#F3F3F3
Alternatief licht oppervlak voor contrast tussen secties.

Neutralen voor tekst en lijnen

Kopieer
Ink
#000000
Bodytekst.
Kopieer
Ink 600
#333333
Secundaire tekst.
Kopieer
Ink 400
#6B6B6B
Tertiaire tekst, captions.
Kopieer
Border
#E2E2E2
Hairline-randen en scheidingslijnen.
Contrastregel: tekst op geel is altijd zwart. Geel is een achtergrond- en accentkleur, nooit een tekstkleur op licht.
Zwart op geel · 19.6:1 · AAA Wit op zwart · 21:1 · AAA Wit op geel · 1.07:1 · FAIL
05 · Typografie

Poppins voert de stem,
Inter draagt de tekst

Medium-gewicht Poppins-koppen boven lichte Inter-body (weight 300). Dat geeft het merk een luchtige, premium en moderne uitstraling.

Aa
Poppins
Display, koppen, UI-labels, buttons en navigatie.
Regular 400Medium 500SemiBold 600
Aa
Inter
Bodytekst, paragrafen en lange links.
ExtraLight 200Light 300Regular 400

Type-schaal

Display XLPoppins SemiBold 600
90 / 105 px
Predictable growth
Display LPoppins Medium 500
62 / 68 px
Genadeloos in uitvoering
Heading 1Poppins SemiBold 600
52 / 60 px
E‑commerce dominantie
Heading 2Poppins Medium 500
44 / 52 px
Data, technologie & marketing
Heading 3Poppins Medium 500
32 / 36 px
Eén schaalbaar groeisysteem
Heading 5 / LeadPoppins Medium 500
22 / 38 px
Strategisch slim en onverslaanbaar in uitvoering.
Body LInter Light 300
18 / 32 px · standaard
Yellowgrape vertaalt ambities naar schaalbare groeistrategieën met meetbaar resultaat over de hele customer journey. Geen ruis, geen riedel, wél duurzame groei.
Label / OverlinePoppins Medium 500
14 px · uppercase · +2px
AI Acceleration
SmallInter Regular 400
12 px
Captions, meta-informatie en juridische tekst.
06 · Spacing & vorm

Ritme & vormtaal

Een ritmische 20px-basisschaal. Secties ademen ruim: 140px verticale padding is de vaste maat. De vormtaal is tweeledig, met strakke rechte vlakken naast volledig ronde elementen.

Spacing-schaal (px)

2XS · 10
XS · 20
SM · 40
MD · 60
LG · 80
XL · 100
2XL · 140 ★
3XL · 200

Radius en vormtaal

0

None

Grote blokken
6

Small

Utility-kaarten
10

Medium

Media, kaarten
100

Pill

Buttons
50%

Circle

Accenten, avatars
07 · Expertise-vormen

Acht expertises,
acht vormen

Elke expertise, oftewel elke afdeling, heeft een eigen abstracte SVG-vorm als visueel merkteken. Geometrisch, één kleur (zwart) en dunne outline-lijnen op een vierkant canvas (~500×500), één-op-één afgeleid van de iconen op yellowgrape.io. Samen vormen ze het iconensysteem van het merk. Klik een expertise aan voor de kernbelofte, aanpak en deliverables.

Strategie die technologie, data, creativiteit en business operations verbindt tot een uitvoerbare groeirichting.

Wat we doen
  • Groeistrategie ontwikkelen
  • Markt- en klantinzichten vertalen naar keuzes
  • Innovatiekansen identificeren
  • Businessdoelen koppelen aan marketing, data en technologie
  • Roadmap en prioriteiten bepalen
Deliverables
  • Groeistrategie
  • Roadmap
  • Strategisch framework
  • Kanaal- en marktadvies
  • Innovatieplan
  • Workshop of strategische sessie
Bekijk de servicepagina →

Data verzamelen, verenigen en activeren als decision engine voor e‑commerce groei.

Wat we doen
  • Data-infrastructuur analyseren
  • Databronnen verbinden
  • Dashboards en rapportages opzetten
  • Inzichten vertalen naar actie
  • Performance meetbaar maken
  • Datakwaliteit verbeteren
Deliverables
  • Data-audit
  • Dashboard
  • Meetplan
  • Trackingadvies
  • Rapportagestructuur
  • Datamodel of intelligence-framework
Bekijk de servicepagina →

Predictieve en persoonlijke customer journeys bouwen op basis van klantdata, automation en lifecycle-denken.

Wat we doen
  • Klantsegmenten definiëren
  • Lifecycle flows opzetten
  • Email- en marketing automation verbeteren
  • Personalisatie activeren
  • Customer 360-denken toepassen
  • Klantwaarde en retentie verhogen
Deliverables
  • Lifecycle mapping
  • Automation flows
  • Segmentatiestructuur
  • Personalisatieplan
  • Emailstrategie
  • Customer 360-aanpak
Bekijk de servicepagina →

Kanaalsturing, media buying, attributie en performance verbinden tot één schaalbare marketingmachine.

Wat we doen
  • Full-funnel strategie ontwikkelen
  • Media buying optimaliseren
  • Kanaalrollen bepalen
  • Performance analyseren
  • Attributie verbeteren
  • Campagnes structureren op groei en rendement
Deliverables
  • Full-funnel plan
  • Kanaalstrategie
  • Campagneframework
  • Performance-analyse
  • Media roadmap
  • Optimalisatieplan
Bekijk de servicepagina →

Conversie structureel verbeteren door klantgedrag te begrijpen, hypotheses te testen en ervaringen te optimaliseren.

Wat we doen
  • Gedragsonderzoek uitvoeren
  • CRO-kansen identificeren
  • A/B-tests ontwerpen
  • Hypotheses valideren
  • UX-flows verbeteren
  • Learnings vertalen naar structurele optimalisatie
Deliverables
  • CRO-audit
  • Experiment backlog
  • Testplan
  • UX-analyse
  • Optimalisatieadvies
  • Learningsrapport
Bekijk de servicepagina →

Duurzame vindbaarheid en contentstructuur bouwen via SEO, content, keyword clustering en technische optimalisatie.

Wat we doen
  • SEO-strategie ontwikkelen
  • Keyword clusters bepalen
  • Contentstructuur verbeteren
  • Technische SEO analyseren
  • Video SEO en AI-search kansen onderzoeken
  • Organische groei meetbaar maken
Deliverables
  • SEO-audit
  • Contentstrategie
  • Keyword clustering
  • Technische SEO-roadmap
  • Metadata-richtlijnen
  • Organische groeianalyse
Bekijk de servicepagina →

Merkvoorkeur, internationale herkenning en upper-funnel groei versterken met strategische brand marketing.

Wat we doen
  • Merkpositionering vertalen naar campagnes
  • Upper-funnel strategie ontwikkelen
  • DACH-localisatie ondersteunen
  • Creatieve campagnes structureren
  • Merk en performance verbinden
Deliverables
  • Brand marketing strategie
  • Campagneconcept
  • Localisatieadvies
  • Upper-funnel plan
  • Creatieve richtlijn
  • Merkboodschap
Bekijk de servicepagina →

AI praktisch integreren in processen, content, klantinteractie en optimalisatie.

Wat we doen
  • AI-kansen identificeren
  • Processen versnellen
  • Contentproductie verbeteren
  • Productcopy en visuals ondersteunen
  • Klantinteractie personaliseren
  • AI-workflows ontwerpen en testen
Deliverables
  • AI-opportunity scan
  • AI-roadmap
  • Workflowontwerp
  • Promptstructuren
  • Content- of visual automation
  • Implementatieadvies
Bekijk de servicepagina →
Gebruik: de vorm hoort altijd bij zijn expertise of afdeling. Gebruik hem als icoon op servicepagina's, presentaties en interne communicatie. Eén kleur, geen verlopen of schaduwen. Plaats op wit, --yg-surface of geel.
08 · Componenten

Bouwstenen

Herbruikbare UI-elementen op basis van de tokens. Beweeg over de buttons om de states te zien.

Button · varianten
Button · op donker
Button · states
Default
Hover
Disabled
Badge / Overline-label
Data & Intelligence Insights
200×200
09 · Klanten

Merken die kiezen
voor groei met ons

Een selectie van e‑commerce-merken waarmee Yellowgrape werkt. Klantlogo's worden in het merk altijd monochroom en op gelijke optische grootte getoond, op een rustig raster en nooit met de eigen merkkleuren.

Ace & Tate
Amac
Civas
Delta
Floris van Bommel
HelloTV
Kamera Express
Kees Smit
Nikkie
Norah
PME Legend
Pretty Orange
Protest
Soap
Studio Anneloes
Swapfiets
Tegeldepot
Topbloemen
Traveldeal
Ventilatieshop
XXL Nutrition
Zorgkiezer
Logo-wall regels: de logo-wall staat op zwart; alle klantlogo's monochroom wit (filter: brightness(0) invert(1)), optisch even groot uitgelijnd en ruim omkaderd. Nooit door elkaar met merkkleuren: consistentie weegt zwaarder dan herkenbaarheid per logo.

Klaar voor next-level groei?

Hex-code gekopieerd