Pergola’s, overkappingen, tuinhuizen, carports, tuinkassen en tuinkamers van duurzaam aluminium, als compleet bouwpakket. Online en in de showroom van 4.000 m² in Someren.
Pratt & Söhne Verona aluminium pergola met lamellen 6 x 4 m elektrisch
Productkaart Het belangrijkste component van de winkel.
De bever met tuinhoed en plantschepje en het woordmerk JIMMY AT WORK vormen samen het logo. Het staat altijd op een lichte achtergrond, links in de header.
Het rood van de bloem is het salerood van de winkel. De andere kleuren bestaan alleen in het logo: limoen, geel en het groen van de tuinbroek zijn geen interfacekleuren.
Terracotta draagt het merk en trekt aandacht. Groen betekent actie en bevestiging. Turkooisgroen kleurt de koppen, de navigatiebalk en de footer, de rest is wit en crème.
Klik op een hexwaarde om hem te kopiëren.
Beeld 14%
Turkooisgroen 10%
Hoofdknop, zoekknop, promolabel en links. Spaarzaam, zodat het blijft opvallen.
In winkelwagen, naar afrekenen, op voorraad en de vinkjes van de USP’s.
Warm bijna-zwart voor tekst en de basisknop, nooit puur zwart. Turkooisgroen voor koppen, titels, de navigatiebalk, de footer en het label “Nieuw”.
| Kleur | Token | Hex | RGB | Gebruik | Op de pagina |
|---|---|---|---|---|---|
| Merk en aandacht | |||||
| Terracotta | primary | 170 92 49 | Hoofdknop, zoekknop, tellers, tekstselectie | 0,1% | |
| Terracotta ingedrukt | primary-strong | 135 73 39 | Hover en ingedrukt | hover | |
| Bloemrood | accent | 227 6 19 | Elk kortingslabel (sale), onderstreping in de navigatie bij hover en een open menu (de huidige categorie onderstreept wit), actief hartje, het icoon van een melding Fout. Het rood van de bloem in het logo | <0,1% | |
| Leesterracotta | link | 150 81 43 | Links, actieve staat, nadruk in tekst | <0,1% | |
| Terracottatint | primary-tint | 248 237 231 | Actieve zoeksuggestie, huidige pagina, vlak van een melding Fout | <0,1% | |
| Actie en status | |||||
| Actiegroen | positive | 25 118 95 | In winkelwagen, naar afrekenen, op voorraad | 0,4% | |
| Actiegroen ingedrukt | positive-strong | 20 93 74 | Hover en ingedrukt | hover | |
| Groentint | positive-tint | 230 244 241 | Vlak voor succes en voorraad | <0,1% | |
| Oker | warning | 148 98 0 | Icoon van een melding Let op en het productlabel “Bestseller”. 5,2:1 op wit | <0,1% | |
| Geeltint | warning-tint | 255 246 214 | Vlak van een melding Let op: het sterrengeel op 17% | melding | |
| Sterrengeel | rating | 255 203 0 | De sterren van Trusted Shops en van de productreviews. Nooit tekst of een knop: 1,5:1 op wit | <0,1% | |
| Tekst en structuur | |||||
| Inkt | ink | 46 43 38 | Tekst, producttitels, basisknop, focusring | 0,6% | |
| Inkt ingedrukt | ink-strong | 31 29 26 | Hover en ingedrukt | hover | |
| Turkooisgroen | title | 12 57 46 | Koppen en titels, navigatiebalk en footer (bar), het label “Nieuw” (dark) en het verloop op de merktegels en de overzichtsfoto (shade) | 9,6% | |
| Taupe | neutral | 74 71 67 | Neutrale knop, het productlabel “Outlet” | 0,4% | |
| Taupe ingedrukt | neutral-strong | 59 56 53 | Hover en ingedrukt | hover | |
| Gedempt | muted | 97 93 85 | Secundaire tekst, oude prijs | 0,2% | |
| Secundair | faint | 118 113 105 | Meta, prijs excl. btw, hulptekst | 0,1% | |
| Vlakken en lijnen | |||||
| Wit | white | 255 255 255 | Pagina en kaarten | 46,5% | |
| Crème | panel | 249 247 244 | Banden over de volle breedte, fototegels en het besteloverzicht in de winkelwagen en de checkout | 26,5% | |
| Crème verdiept | panel-strong | 242 237 230 | Einde van het verloop op lichte promotegels | 0,2% | |
| Haarlijn | line | 230 224 216 | Kaartranden en scheidingen, en het vlak van het label Grote vrachtwagen levering | 0,7% | |
| Rand sterk | line-strong | 145 142 142 | Invoervelden, hover-rand, inactieve iconen, carrouselstippen. 3,3:1 op wit | 0,2% | |
Twee letters, drie varianten. Figtree Regular en Bold dragen de winkel, Fira Sans Bold Italic geeft de koppen van pagina’s, secties en actieblokken meer gevoel.
Meer dan drie varianten komen niet voor: geen Medium, geen Semibold, geen ander cursief en geen andere letters. Hiërarchie komt uit maat, kleur en ruimte.
Figtree en Fira Sans
Google Fonts, drie varianten
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 € × % , .
Tekst: Figtree, "Segoe UI", "Helvetica Neue", Arial, sans-serif
Display: "Fira Sans", Figtree, "Segoe UI", "Helvetica Neue", Arial, sans-serif
De cijfers zijn tabulair: elk cijfer is even breed. Prijzen en maten staan recht onder elkaar.
| Kweekrek | 99 × 40 cm | € 75,00 |
| Porto 200 | 232 × 254 cm | € 1.225,00 |
| Verona | 574,8 × 400,5 cm | € 7.425,00 |
Productpagina: 30 px vet, centen 20 px. Op de kaart 20 px en 16 px. Oude prijs doorgehaald, prijs excl. btw grijs.
Bij het maken van een blok kies je de letter van de kop: Figtree of Fira Sans. Standaard is dat Fira Sans voor paginatitels, sectiekoppen en actieblokken. Fira Sans bestaat hier alleen in Bold Italic en alleen voor koppen. Hieronder twee keer de hero van de homepage, met dezelfde maat en hetzelfde blok.
Nazomer Deals
Tuinhuizen, pergola’s, accessoires en meer
Nazomer Deals
Tuinhuizen, pergola’s, accessoires en meer
Rechthoekig en rustig. Lijnen ordenen, schaduw hoort bij interactie.
Eén kleine en één basisradius. Geen bolle app-kaarten en geen zwevende panelen.
De hoeken hieronder zijn vier keer vergroot.
2 px
Details: checkbox, markering
4 px
Invoer, tags, fototegels
6 px
Knoppen, kaarten, panelen
Rond
Alleen icoonknoppen en tellers
Beweeg over de kaarten.
shadow-sm
Knoppen en kaarten in rust.
shadow-md
Hover, menu’s en zwevende knoppen.
shadow-card
Hover van product- en lijnkaarten. De kaart verdiept, maar komt niet omhoog.
max-w-pagepx-gutterpy-sectionDe bouwstenen van de winkel, in hun echte vorm.
Elk voorbeeld gebruikt het gedeelde component van de pagina’s. Beweeg, klik en typ om de states te zien.
Minimaal 44 px hoog, 14 px vet, radius 6 px. De kleur bepaalt de rol, vorm en maat blijven voorspelbaar. Hover maakt elke knop één stap donkerder, met een iets grotere schaduw. In inhoudsblokken, zoals de showroom en de servicekaarten, en op crème banden is de taupe knop de standaard.
Primair, de hoofdactie van een pagina. Hover #874927. .btn-primary
Actie, kopen en doorgaan. Hover #145D4A. .btn-positive
Basis, in inkt. Hover #1F1D1A. .btn
Neutraal, in taupe: de standaard in inhoudsblokken en op crème banden. Hover #3B3835. .btn-neutral
Licht, op donker en op beeld. Hover crème. .btn-light
Secundair, wit met rand. Hover: rand in inkt. .btn-secondary
Standaard
Hover, #145D4A
Focus, 2 px inkt op 2 px
Uitgeschakeld
14 px, 12 × 16
18 px, 16 × 40. De laatste stap: naar afrekenen en bestellen.
Witte velden, grijze rand, radius 4 px en minimaal 44 px hoog. Focus is een ring van 2 px in inkt op 2 px afstand. De velden zijn echt: klik en typ.
Zes weergaven van filters, zoals de Tweakwise-module voor Hyvä ze toont, met onze aanpassingen voor toegankelijkheid erop. Op de categoriepagina staan ze in de filterkolom, op de telefoon in de filterlade. Elk filter is een groep met een kop die open- en dichtklapt, met de aantallen rechts. Klik, sleep en typ om de states te zien.
Tweakwise: checkbox. Meer waarden tegelijk. Het getekende vakje van 18 px, in inkt als het gekozen is, met het aantal producten rechts. Wat niet past staat achter Meer tonen; hoeveel waarden eerst zichtbaar zijn, stel je per filter in.
Tweakwise: color. De module toont tegels. Wij tonen de kleuren als lijst met vakjes: het vakje van 18 px, een rond bolletje in de kleur van het product naast de naam en rechts het aantal (keuze van Tjitse, 16 oktober 2026). Een lichte kleur krijgt een rand in rand sterk, zodat het bolletje zichtbaar blijft. De naam staat er altijd bij, zodat een kleur nooit alleen aan de kleur te herkennen is. In de bouw wordt dit een template-override van de swatch-template van de module.
Tweakwise: slider. Een bereik, zoals breedte of gewicht. Twee grepen van 24 px die ook met de pijltjestoetsen werken; onder de balk de gekozen grenzen en de velden Van en Tot om een waarde te typen.
Tweakwise: slider met klikpunten en buckets. Als de slider, met boven de balk grijze staafjes: hoeveel producten elk deel van het bereik heeft. Een klik op een staafje kiest dat deel; dat gaat alleen met de muis, de grepen en de velden doen hetzelfde met het toetsenbord. Daaronder vaste punten op de schaal, als tekst met een pijltje. Vooral voor de prijs.
Tweakwise: link. Eén waarde tegelijk, als link met het aantal producten. De gekozen waarde is vet; nog eens kiezen haalt hem weg. Voor een merk of een ja-of-nee-filter.
Tweakwise: tree. Alleen voor het categoriefilter, op een pagina zonder de pillen “Ga snel naar”: een zoekresultatenpagina of een hoofdcategorie. De categorieën als geneste lijst van links, altijd open, met het aantal producten; de huidige categorie is vet. Op de categoriepagina’s staat hij niet: daar zijn de pillen de navigatie.
Het belangrijkste component van de winkel. Echte producten, echte foto’s en gemeten gegevens. Beweeg over een kaart voor de hover.
Wat op de kaart echt status aangeeft. Korting staat op de kaart als doorgehaalde oude prijs, met op de foto een kortingslabel (Productlabels).
Op de productpagina staat bij een product dat met een grote vrachtwagen komt ook het bezorgtype: een label in haarlijngrijs met het icoon Levering, de tekst in inkt en een infoknop, met de onderstreepte link naar de bezorgpagina erachter. De infoknop toont de uitleg bij hover, bij focus en na een tik, in een wit vlak met een haarlijn en de schaduw van een menu. Escape sluit het.
Je bestelling wordt geleverd met een extra grote oplegger van max 13,2 m.
Eén rood voor elke korting: bloemrood. De live site zet korting als afbeelding op de productfoto, in een eigen rood. Als label in HTML:
De labels van de module Product labels van Vendic. Ze staan linksboven op de productfoto, onder elkaar: op elke productkaart in een grid of slider en op de eerste foto van de productpagina. Hoogstens drie per product, in deze volgorde. De witte tekst haalt op elk label minstens 4,5:1.
Pratt & Söhne Verona aluminium pergola met lamellen 6 x 4 m elektrisch
Pratt & Söhne Verona aluminium pergola met lamellen 6 x 4 m elektrisch
Een label komt nooit over het hartje en is geen knop: een klik gaat naar het product, zoals op de foto. Op de kaart staan de labels in de code na de titel, zodat een schermlezer ze bij het product voorleest; op de productpagina staan ze bij de foto’s.
De vier meldingen van Magento. Rechtsboven onder de kop, over de pagina heen: 400 px breed, op de telefoon over de volle breedte. Een lichte tint per soort, het icoon in zijn kleur, tekst in inkt, een haarlijn, radius 6 px en de schaduw van een menu. Gelukt en info verdwijnen na 5 seconden, behalve met een link; let op en fout blijven staan tot je ze sluit, met het kruisje of met Escape.
Gelukt: Rockford Lagos 200 metalen tuinhuis grijs is toegevoegd aan je verlanglijst.
Info: De prijzen in je winkelwagen zijn bijgewerkt.
Let op: Eén product in je winkelwagen is pas over 3 tot 4 weken leverbaar.
Fout: Er zijn nog 3 stuks op voorraad. Pas het aantal aan en probeer het opnieuw.
De terugkerende bouwstenen van winkelen.
De beoordeling van Trusted Shops staat voorop. Op de telefoon schuift de balk: één voordeel tegelijk, elke vijf seconden het volgende van rechts, met links een pauzeknop.
Op de telefoon, onder 1024 px, drie knoppen op één regel:
Sortering opent een paneel van rechts, zoals Filters. Een keuze sorteert meteen; Toon producten sluit het paneel.
Huidige pagina: leesterracotta op terracottatint.
Vragen die openklappen, op de categorie- en productpagina en in de klantenservice. Een haarlijn tussen de vragen, geen kader per vraag. De vraag is vet in inkt en kleurt bij hover leesterracotta, het antwoord is lopende tekst in gedempt. Elk antwoord staat in de pagina, ook als de vraag dicht is.
Helaas bieden wij geen opbouwservice. Onze producten worden geleverd in kant-en-klare pakketten en kunnen met behulp van de bijgeleverde handleidingen zelf worden opgebouwd of gemonteerd. Daarnaast zijn alle onderdelen gemarkeerd.
Een tuinkas of tuinkamer is nooit 100% waterdicht en heeft altijd speling in het frame nodig om krimp of uitzetting op te vangen.
Voor een bestelling onder de € 250 betaal je € 9,95. Vanaf € 250 is de levering gratis.
Het reviewblok op de productpagina, met de productreviews die Trusted Shops verzamelt. Naast het gemiddelde staat het keurmerk van Trusted Shops: wie de reviews verzamelt, dat ze gecontroleerd worden en een link naar meer informatie. Het cijfer van 1 tot 10 staat als tekst naast vijf sterren: één ster is twee punten. De gevulde sterren hebben het geel van de Trusted Shops-sterren, de lege de kleur rand sterk. Geel haalt 1,5:1 op wit, dus het cijfer staat er altijd naast. Alle reviews staan in één lijst, de nieuwste eerst, met een haarlijn ertussen en geen kaarten. Een review uit de Duitse of de Franse winkel is eerst een witte knop, die de originele tekst toont; de regel eronder noemt de winkel. Foto’s van de klant staan onder de tekst als vierkantjes van 72 px, zoals de kleine foto’s van de productgalerij, en openen groot. Zes reviews zijn zichtbaar. De taupe knop, met de chevron voor de tekst, toont alle reviews en heet dan “Toon minder reviews”, met de chevron omhoog; die gaat terug naar de eerste zes. Op de telefoon opent de knop alle reviews in een lade van rechts, dezelfde als de filterlade, zodat de pagina niet langer wordt. Er is geen knop om een review te schrijven: Trusted Shops vraagt de koper per e-mail om een review.
8,6 van 10, 27 reviews
Reviews verzameld door Trusted Shops Een onafhankelijke dienst die maatregelen neemt tegen nepreviews. Meer informatie over de reviews bij Trusted Shops
9 van 10
“De RGB-verlichting in het dak gebruiken we bijna elke avond. Meestal op warm wit, maar op een verjaardag mag er kleur bij.”
Geplaatst op door Ilse
9 van 10
Geplaatst op door Klaus via jimmyatwork.de
6 van 27 reviews
De tweede servicekaart op de homepage. De foto vult de linkerhelft van rand tot rand. Rechts staan de kop in de displayletter, één regel, de voordelen als USP-lijst en het formulier: het e-mailveld van de checkout met een zichtbaar label, een hint over afmelden met de privacyverklaring, en de taupe knop. Een fout staat onder de hint in leesterracotta. Na het inschrijven vervangt de groene melding van de checkout het formulier. Probeer het: een fout adres geeft de foutmelding, een goed adres de bevestiging.
Schrijf je in voor onze nieuwsbrief.
Eén YouTube-video in de tekst van een categorie- of productpagina. De marketeer zet hem met een widget tussen de alinea’s en vult alleen de YouTube-link in. De video krijgt de breedte van de tekst, in 16:9, met 6 px afronding en een haarlijn. Tot de klik is hij één foto, de HD-afbeelding van YouTube, met de afspeelknop van de productgalerij: rond, terracotta, met schaduw. De klik start de video in hetzelfde vak. Het bijschrift staat onder de foto, nooit erop: de titel vet, de duur gedempt.
Onder 768 px is de vraagbalk een lijst: bellen, chatten, mailen en de klantenservice, elk met één korte regel eronder. De collega’s staan ernaast op de bovenlijn van de footer. De USP-balk en de beoordeling staan op de telefoon al in de topbalk, dus niet in de vraagbalk.
Onder 768 px klappen de groepen van de footer in, met een dunne lijn ertussen. Klantenservice staat open, zodat de belangrijkste links meteen te zien zijn. Vanaf 768 px zijn het open kolommen.
Heroicons in de outline-stijl: getekend op 24 px, lijndikte 2, ronde uiteinden. Ze volgen de tekstkleur currentColor.
Het product staat centraal, in een tuin die echt is.
Bij daglicht in echte tuinen, of in de showroom in Someren. Dit hoofdstuk is een voorstel op basis van de bestaande fotografie.
Vriendelijk, deskundig en concreet. Je helpt iemand kiezen voor meer buitenleven, je verkoopt geen lucht.
Nederlands, met je in plaats van u. Wat hieronder live staat, is zo gemarkeerd.
Actief en concreet. Live.
Live.
Geen resultaten.
Pas je filters aan of zoek anders.
Voorstel. Live staat hier “Uw zoekopdracht heeft geen resultaten opgeleverd.”: u in plaats van je, en geen volgende stap.
Dit merkboek bouwt voort op jimmyatwork.nl. Het karakter blijft, het systeem wordt consistenter.
Eerst wat versie 3 verandert na de feedback op versie 2, daarna alles wat het merkboek vastlegt of verandert ten opzichte van de live site.
| Onderwerp | Versie 2 | Versie 3 |
|---|---|---|
| Displayletter | Versie 2Geen displayletter. Een hero blijft Figtree Bold. | Versie 3Fira Sans Bold Italic voor paginatitels, sectiekoppen en koppen in actieblokken, per blok te kiezen naast Figtree. |
| Lettervarianten | Versie 2Figtree in vier gewichten en cursief, DM Mono in de documentatie. | Versie 3Maximaal drie: Figtree Regular, Figtree Bold en Fira Sans Bold Italic. Medium, Semibold, Figtree cursief en DM Mono vervallen. |
| Koppen | Versie 2In inkt #2E2B26, net als de tekst. | Versie 3Koppen en titels in turkooisgroen #0C392E. Tekst en producttitels blijven inkt. |
| Navigatiebalk en footer | Versie 2Leisteen #313E48, net als de footer. | Versie 3Turkooisgroen #0C392E, voor allebei. Leisteen vervalt. |
| Verloop op beeld | Versie 2Leisteenzwart #151A1E achter tekst op foto’s. | Versie 3In de hero en de campagnebanners leisteenzwart #151A1E, schuin (125°) en vloeiend uitlopend, de instelling van 15 oktober 2026. Op de beeldband hetzelfde verloop van onderen naar boven. Turkooisgroen #0C392E op de merktegels en de overzichtsfoto. |
| Productlabels | Versie 2Geen labels op de productfoto. | Versie 3Linksboven op de productfoto, onder elkaar, hoogstens drie: korting in bloemrood (alleen op de kaart), “Nieuw” in turkooisgroen, “Bestseller” in oker, “Outlet” in taupe. Nooit over het hartje. Voorstel |
| Kortingslabels | Versie 2Eén rood: bloemrood #E30613. | Versie 3Ongewijzigd: elke korting in bloemrood #E30613. |
| Randen | Versie 2Rand sterk #B2AFB0, 2,2:1 op wit, zoals de zoekbalk van de live site. Te licht voor de rand van een invoerveld. | Versie 3Rand sterk #918E8E, 3,3:1 op wit. Invoervelden, carrouselstippen en het hartje halen de 3:1 voor bedieningselementen (WCAG 1.4.11). |
| Meldingen | Versie 2Een donkere toast onderaan in het midden, alleen voor een bevestiging, 2,4 seconden. | Versie 3Vier soorten rechtsboven onder de kop: gelukt in groentint, info wit, let op in geeltint met een oker icoon, fout in terracottatint met een bloemrood icoon. Gelukt en info verdwijnen na 5 seconden, let op en fout blijven staan. Oker en geeltint zijn nieuw. |
| Filters | Versie 2Een vakje om aan te vinken, een bolletje met de kleur naast het vakje, en een slider met twee grepen. | Versie 3Zes weergaven van Tweakwise: checkbox, kleur (tegels met de kleur, de naam en het aantal), slider, slider met klikpunten en de verdeling erboven, lijst (één keuze, als link) en boom (de categorieën, alleen waar geen pillen staan). Voorstel |
| Besteloverzicht | Versie 2Een witte kaart in de checkout, met vette labels en een groene knop van 16 px. | Versie 3Een crème vlak in de winkelwagen en de checkout. Het label staat gedempt, het bedrag in inkt. De laatste stap is de grote knop: 18 px, over de hele breedte. Voorstel |
| Onderwerp | Live site | Merkboek |
|---|---|---|
| Logo | Live siteAlleen op wit en crème. Vrije ruimte, minimumformaat en een versie voor donkere vlakken zijn niet vastgelegd. | MerkboekVrije ruimte rondom minimaal de hoogte van het logo. Een aparte lichte versie voor donkere vlakken. Voorstel |
| Terracotta | Live siteTerracotta #AA5C31 voor links, de hover in de navigatie en de nadruk in de USP-balk. De hoofdknop is groen. | MerkboekTerracotta wordt de merkkleur: hoofdknop, zoekknop, tellers en promolabels. Links krijgen een diepere terracotta, #96512B, zodat ze ook op crème goed leesbaar zijn (5,6:1). |
| Groen | Live siteEén groen, #1E8E72, voor de hoofdknop, in winkelwagen en de levertijd. Witte tekst op dit groen haalt 4,1:1, onder de norm van 4,5:1. | MerkboekActiegroen #19765F: dezelfde tint, donkerder, 5,5:1 met wit. Alleen voor kopen, doorgaan en bevestigen. |
| Rood | Live siteKortingslabels in #D22A37, aangevinkte filters in #BF5A5A. | MerkboekEén rood: het rood van de bloem in het logo, #E30613. Voor korting, de onderstreping in de navigatie en het actieve hartje. |
| Donker en grijs | Live siteLeisteen #313E48 voor de navigatie en de basisknop, een los bruin paneel (#5C4E43), een losse donkere tint in het mobiele menu (#293133), grijze tekst #9A9A9A (2,8:1) en standaardgrijzen van Tailwind. | MerkboekDrie donkere tinten met elk een taak: inkt #2E2B26 voor tekst, turkooisgroen #0C392E voor koppen, de navigatiebalk, de footer en het label “Nieuw”, en taupe #4A4743 voor de neutrale knop. Secundaire tekst #767169 haalt 4,8:1. Eén warme reeks neutrale tinten bij de crème. Limoen en geel horen alleen bij het logo. |
| Letter | Live siteNoto Sans staat in de stylesheet, maar het lettertype wordt nooit geladen. Bezoekers zien Helvetica, Arial of Segoe UI. | MerkboekFigtree in Regular en Bold: ronde, vriendelijke vormen en tabulaire cijfers. Fira Sans Bold Italic als displayletter voor paginatitels, sectiekoppen en koppen in actieblokken, per blok te kiezen. Samen drie varianten, meer niet. |
| Vorm | Live siteRadii van 0 tot 16 px, schaduw op knoppen en een gestippelde rand bij hover op productkaarten. | Merkboek6 px voor kaarten, knoppen en panelen, 4 px voor invoer, tags en kleine labels, 2 px voor details. Schaduw alleen voor interactieve elementen en overlays, statische vlakken krijgen een haarlijn. Ruimte in stappen van 8, 12, 16, 24 en 48 px. |
| Knoppen | Live siteDe hoofdknop en in winkelwagen delen hetzelfde groen. De basisknop is leisteen, de radius wisselt tussen 4 en 6 px en focus is de blauwe standaardring van de browser. | MerkboekEén primaire knop en die is terracotta. Kopen en bevestigen in actiegroen, de basisknop in inkt, de neutrale knop in taupe. Alle knoppen radius 6 px en minimaal 44 px hoog, met dezelfde focusring van 2 px in inkt. |
| Formulieren | Live siteVierkante checkboxen met een grijze rand, aangevinkt in een los rood. Zoekveld en aantal tonen bij focus alleen een andere randkleur. | MerkboekFilters gebruiken de getekende .checkbox van 18 px in inkt, de combideal de groene .checkbox-positive van 22 px. De checkout houdt native checkboxen en radioknoppen in actiegroen. Invoer en selects delen hoogte en rand, zonder schaduw, met de focusring van 2 px in inkt. |
| Labels | Live siteKortingslabels als afbeelding op de productfoto (-25%), promoties als afbeelding in banners. | MerkboekLabels als HTML-component: bloemrood voor elke korting, terracotta voor promoties, turkooisgroen voor “Nieuw”, oker voor “Bestseller” en taupe voor “Outlet”. Productlabels staan linksboven op de productfoto. Voorstel |
| Bezorgtype | Live siteEen grijs label “Grote vrachtwagen levering” met een gevulde vrachtwagen en een i, en een link naar de bezorgpagina. De uitleg verschijnt alleen als je de muis op de i houdt of erheen tabt. | MerkboekHetzelfde label in haarlijngrijs met het icoon Levering. De infoknop toont de uitleg ook na een tik op de telefoon, je kunt met de muis op de uitleg komen en Escape sluit hem. |
| Beeld en taal | Live siteHoofdproducten tonen op de kaart een gerenderde tuin, merkbanners hebben tekst en logo in de foto en detailfoto’s ontbreken. Systeemteksten gebruiken u, de rest je. | MerkboekOp de kaart het product vrijstaand, sfeer in echte tuinen bij daglicht, overal je. De richtlijnen staan in de hoofdstukken Beeld en Taal. Voorstel |
| Meldingen | Live siteDe standaard van Hyvä: een balk over de volle breedte onder de kop, in de pagina, met een rand en een tint in de kleuren van Tailwind (groen, blauw, oranje, rood), halfvette tekst en een sluitknop die “Close message” heet. | MerkboekRechtsboven onder de kop, over de pagina, in de kleuren van het merk. Alleen gelukt en info verdwijnen vanzelf. De sluitknop heet “Melding sluiten”. |
| Sorteren op de telefoon | Live siteEen knop Filters en een keuzelijst met de vijf sorteringen naast elkaar, onder de introtekst en het keuzehulpblok. Op de telefoon staan de producten daardoor pas onder het eerste scherm. | MerkboekOnder 1024 px geen introtekst en geen keuzehulpblok boven de producten. Filters, Sortering en Keuzehulp staan als drie knoppen op één regel, het icoon voor de tekst. Sortering opent een paneel van rechts met de vijf sorteringen als keuzerondjes in inkt; een keuze sorteert meteen. Vanaf 1024 px dezelfde keuzelijst als live, zonder pijlknop. |