Huisstijl · Fase 1
De no-nonsense webshop voor garages en autoschadebedrijven. Gereedschap, handschoenen, reinigingsmiddelen en kleine onderdelen — snel besteld, direct op voorraad, zakelijk afgerekend.
Garage-Online brengt de werkplaats online zonder ruis. We bedienen professionals die weten wat ze zoeken: heldere productinformatie, eerlijke voorraad, en een bestelproces dat niet in de weg loopt. Ons merk is modern-technisch — geïnspireerd op gereedschap, precisie en de geometrie van een moer. Graphite als basis, Garage Orange als signaal. Geen poespas, wel vakmanschap.
Een zeshoek (moer/bout) met een geometrische G en een subtiele garagedeur-inkeping. Het woordmerk staat in Space Grotesk; het koppelteken draagt het accent.
Minimale vrije ruimte rondom = de hoogte van het icoon (1×). Minimummaat woordmerk: 120 px breed op scherm. Icoon solo: nooit kleiner dan 24 px.
Graphite en steel dragen de interface. Garage Orange is het signaal — spaarzaam inzetten voor acties en nadruk. Tech Blue is de secundaire accent voor links en informatie. Alle tekstcombinaties halen WCAG-AA.
Display in Space Grotesk voor karakter, Inter voor comfortabele UI en tekst, JetBrains Mono voor technische labels, SKU's en onderdeelnummers.
Iconen zijn strak en lijngebaseerd: 2 px stroke, afgeronde uiteinden, 24px-grid, één accentkleur. Fotografie is technisch en helder — product op neutrale achtergrond of in de werkplaats, koel licht, geen stockgevoel.
Knoppen, chips, invoer en de productkaart — met hover-states. Deze componenten vormen straks de basis van de Next.js + Tailwind shop.
Alle maatvoering volgt een 8px-ritme (met 4px halve stap). Weinig radii, subtiele schaduwen — strak en premium.
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
De huisstijl in de praktijk. Deze voorbeeldpagina's bouwen op dezelfde tokens en componenten uit dit document — de geliefde productkaart, knoppen en kleuren keren overal terug. Drie homepage-concepten plus een categorie- en productpagina.
Krachtige flagship-homepage met zoekhero, categorietegels en een oranje actiebanner.
Bekijk pagina → Homepage · concept 2Rustige split-hero met redactionele toon, deals van de week en een licht verhaalblok.
Bekijk pagina → Homepage · concept 3Conversiegerichte marktplaatslook met promotegels, topcategorieën en veel producten.
Bekijk pagina → CategoriepaginaOverzichtspagina met filters, sorteren, raster-/lijstweergave en paginering.
Bekijk pagina → ProductpaginaProductdetail met gallerij, koopblok, specificaties en gerelateerde producten.
Bekijk pagina →