Merkgids Bij Tante Roos
“Alles om iets moois te maken, met het advies van iemand die zelf haakt en breit.”
Gemaakt met Brandyzr voor Bij Tante Roos, gepubliceerd met akkoord van de klant.
Bij Tante Roos
Uitgewerkt op het nieuwe logo zoals het nu op bijtanteroos.sityzr.com staat. Drie richtingen; de eerste blijft dicht bij het logo en is het advies.
- Branche
- Garenwinkel en haak- en breiatelier, webshop + atelier in Waarland
- Tone of voice
- Persoonlijk, concreet, nuchter met een knipoog
- Gekozen richting
- Nog niet gekozen · advies: 1 Atelier
Een atelier dat ook een webshop is
Bij Tante Roos “begon aan de keukentafel in Waarland en groeide uit tot een webshop met ruim 900 producten: wol en garen van 20 merken, naalden, boeken, patronen en complete pakketten” (/over-ons). Aan de Slootgaardweg zit het atelier: daar worden bestellingen gepakt, staan de workshoptafels en draait de borduurmachine van Atelier Citroen.
Alles om iets moois te maken, met het advies van iemand die zelf haakt en breit.
Warm en vakkundig, zonder franje. Het logo is een etiket: ovaal, kapitalen, een gouden lijn.
Ruim 900 producten van 20 merken · verzending dinsdag en donderdag · gratis afhalen in Waarland · workshops met zes tot acht plekken.
Het logo als systeem
Crème grond, atelier-groen als drager en goud alleen waar het logo het ook gebruikt: in lijnen, punten en de kleine kapitalen van “Haken · Breien · Atelier”. Lora voor koppen, Work Sans voor tekst. Dit is in de kern wat nu live staat, met de laatste afwijkingen van het logo eruit.
Het nieuwe logo heeft precies drie kleuren: groen #25362A (90% van de pixels), goud #C3934B en crème #F9F5F0. De site gebruikt die al, plus salie #8FAE97 als accent op donkere banden, een kleur die nergens in het logo staat. Deze variant zet daar goud voor in de plaats (#D0A565, 5,6:1 op groen), zodat elke donkere band leest als het logo zelf. Verder: de middenpunt uit de tagline als kruimelpadteken, en een donkerdere waarschuwingskleur (de huidige haalt 4,1:1 op crème). Indeling, knoppen en hoeken blijven zoals ze nu op de site staan. Weinig risico, direct laadbaar.
Missie en visie staan niet op de site en zijn hier niet bedacht.
Het etiket blijft zoals het is
Een donkergroene ovaal met een gouden binnenrand, een gouden punt boven twee lijnen, het woordmerk BIJ TANTE ROOS in crème schreefkapitalen met ruime spatiëring, en de tagline HAKEN · BREIEN · ATELIER in goud. Het logo verandert niet; deze gids regelt alleen de context eromheen. Er zijn twee versies: groen en crème, beide 1440 × 800 px PNG.
Groen op witGroen op crème · de standaardDiapositief: crème op diepgroenGroen op zandRondom minimaal 1/6 van de logohoogte vrij (gearceerd), ook van de rand van een foto.
- Header: 56 px hoog, mobiel 40 px (zo staat het live)
- Onder ±120 px hoog is de tagline niet meer leesbaar; dat is in de header acceptabel
- Print: minimaal 30 mm breed
Het logo is een PNG zonder fontinformatie; de letter is niet vastgesteld. Het is een stevige schreef met lage contrasten en ruime spatiëring. Uit de presetlijst komen Lora 700 en Libre Baskerville 700 het dichtst in de buurt. Gebruik het woordmerk nooit nagezet in een font.
Het groene logo op crème, wit of zand; het crème logo op diepgroen of een donkere foto. Altijd de hele ovaal.
De ovaal bijsnijden, uitrekken of draaien, het woordmerk los gebruiken, het goud vervangen door een andere kleur, of het groene logo op de groene band zetten (dan verdwijnt de ovaal).
Groen, crème en een draad goud
Gemeten op 16 oktober: de pixels van het logo zijn voor 90% groen #25362A, 5% goud #C3934B en 3% crème #F9F5F0. De overige kleuren komen uit de live theme-CSS van de site; drie goudtinten zijn in OKLCH afgeleid (zelfde tint en verzadiging, alleen lichter of donkerder) zodat goud ook als tekst, icoon en accentwoord op donker het contrast haalt. Elk vak noemt het theme-veld, de rol, de bron en het contrast op zijn eigen ondergrond.
Verhouding op een pagina
Goud is geen tekstkleur op licht
Logogoud #C3934B op crème: 2,55:1. Alleen voor lijnen, punten en vlakken.
Goud als tekst #946617 op crème: 4,6:1. Voor eyebrows en labels op licht.
Goud op donker #D0A565 op groen: 5,6:1. Het accentwoord in koppen.
Status
Statuskleuren zijn de live waarden; alleen waarschuwing is donkerder gemaakt (#A56A0F → #9C6304), omdat de live tint als tekst op crème 4,14:1 haalt.
Lora voor koppen, Work Sans voor tekst
Zo staat het nu live. Lora is een schreef met zachte overgangen; in 700 sluit hij aan bij het stevige kapitaal van het woordmerk. Work Sans is een rustige grotesk voor lange productteksten. Labels in kleine kapitalen met ruime spatiëring, net als de tagline.
700 · -0.01emAlles om iets moois te maken
700Waar wil je aan beginnen?
| Letter | Gebruik | Licentie | Op het platform |
|---|---|---|---|
| Lora | Koppen in 1 Atelier (live) | SIL OFL 1.1 · Cyreal · Google Fonts | Preset, zelf gehost (/fonts) |
| Work Sans | Tekst in 1 Atelier (live) | SIL OFL 1.1 · Wei Huang · Google Fonts | Preset, zelf gehost |
| Libre Baskerville | Koppen in 2 Etiket | SIL OFL 1.1 · Impallari Type · Google Fonts | Preset, zelf gehost |
| Source Sans 3 | Tekst in 2 Etiket | SIL OFL 1.1 · Adobe · Google Fonts | Preset, zelf gehost |
| Playfair Display | Koppen in 3 Wolmand | SIL OFL 1.1 · Claus Eggers Sørensen · Google Fonts | Preset, zelf gehost |
| Nunito | Tekst in 3 Wolmand | SIL OFL 1.1 · Vernon Adams e.a. · Google Fonts | Preset, zelf gehost |
Alle zes staan in de presetlijst van het platform; deze gids laadt dezelfde bestanden die de site zelf serveert (latin-subset, ingebed). Richting 2 en 3 laten twee alternatieve tekstletters (Source Sans 3 en Nunito) in context zien.
Een punt, twee lijnen en de middenpunt
Wat het logo onderscheidt is niet de ovaal maar het ornament: een gouden punt boven twee lijnen van ongelijke lengte, en de middenpunt tussen haken, breien en atelier. Dat is het enige element dat de gids terug laat komen. Spaarzaam: één keer per scherm.
Workshops in het atelier
Uit sectionDivider*. De stijl solid tekent in --color-primary (groen); goud kan alleen via customCSS en is daarom niet ingesteld.
crumbSeparator: dot — de middenpunt uit de tagline (live: chevron).
Acht iconen, het aanbod van de site
Per onderwerp gekozen uit meerdere ontwerpen (beoordeeld op 200 px en 24 px) en daarna genormaliseerd naar vier tokens: groen #25362A, goud-icoon #B3833B (3,1:1 op crème), linnen #F2EBE0 en wit. Onderwerpen komen uit het aanbod op de site.
Wol en garen
Haak- en breipakketten
Naalden en haaknaalden
Patronen en boeken
Workshops in het atelier
Atelier Citroen: borduren en bedrukken
Persoonlijk advies via WhatsApp
Verzending di en do, gratis afhalen- Groen draagt de vorm, goud één detail. Nooit andersom bij kleine maten
- Het icoon vult ongeveer de helft van zijn vlak; plaats het op 64–96 px, altijd op een licht vlak; geen tekst, schaduw of verloop in een icoon
- Een andere tint dan deze vier is een fout
Echt garen, echte tafel
De belangrijkste beelden zijn foto’s van eigen producten, kleuren garen naast elkaar en de grote tafel in het atelier, “kleine groepen aan de grote tafel” (/workshops). Daglicht, crème of hout als ondergrond, geen stockfoto’s van modellen.
Voor banners en sociale media zijn drie abstracte achtergronden gemaakt: rijen punten en draden, als steken op een naald. Per cluster in één tokenkleur gezet (goud, groen, bosgroen #44634D) op crème.
Eén groene knop per scherm
Groen zit overal (logo, header, banden), maar op de lichte grond is groen op crème 11,8:1 en de enige gevulde knop. Op donker is de actieknop crème met groene tekst: letterlijk het logo omgekeerd. Goud is nooit een knopvlak met crème tekst. De klassenamen hieronder zijn die van het platform.
.btn-primary · .btn-secondary · .btn-outline-primary · .btn-ghost
.btn-light-primary (seed: style 'light') · .btn-ghost-dark
De rand van .btn-ghost-dark is 50% groen en valt op diepgroen weg; de knop leest als tekstlink. Goed als tweede actie, niet als enige.
.btn-accent zet btnPrimaryText (crème) op goud: 2,55:1. .btn-outline-light zet goud op crème: ook 2,55:1. Beide zakken door AA. In de seed dus nooit buttons[].style = 'accent' of 'outline-light'.
Knophoek 6px, kaarthoek 12px. Kleine hoeken: het logo is een ovaal, maar de lijnen erin zijn recht. Schaduwen zacht en getint met groen, nooit grijs.
De site, de nieuwsbrief, een banner
Hieronder de homepage in miniatuur, opgebouwd uit dezelfde tokens als het theme. Teksten komen letterlijk van de site. Wissel de richting bovenaan en de hele pagina, ook dit voorbeeld, kleurt mee.
Alles om iets moois te maken
Ruim 900 soorten wol, garen, naalden en pakketten van 20 merken — met het persoonlijke advies van een echt atelier. Vandaag besteld, dinsdag of donderdag verzonden. Of haal ’m gratis op in Waarland.
Wol & garen
Ruim 900 soorten van 20 merken, met zorg gekozen.
Pakketten
Garen, patroon en alles wat je nodig hebt — je hoeft alleen nog te beginnen.
Atelier Citroen
Geborduurd of bedrukt, met jouw tekst.
Workshops in het atelier
Kleine groepen, alle materialen inbegrepen, en je gaat naar huis met iets dat af is — of bijna af.
Eerst zien wat er nieuw binnen is?
Nieuwe garens, gratis patronen en workshopdata. Eén mail per maand, niet vaker.
Wol, garen en workshops uit Waarland
Profielbanner 1584 × 396 px (Facebook/LinkedIn). Links ruimte voor de profielfoto, rechts de steken.
Zoals iemand die zelf haakt en breit
Afgeleid van wat de site nu zegt. De toon is goed; deze gids legt hem vast zodat nieuwe teksten (productteksten, mails, social) hetzelfde klinken.
“Alles om iets moois te maken”
“Wat niet veranderde: je krijgt antwoord van iemand die zelf haakt en breit.”
“Zes tot acht plekken per keer — vol is vol.”
“Eén mail per maand, niet vaker.”
“…je gaat naar huis met iets dat af is — of bijna af.”
“Voor kraamcadeaus, verenigingen of gewoon omdat het kan.”
| Principe | Zo wel (van de site) | Zo niet (voorbeeld, niet van de site) |
|---|---|---|
| Persoonlijk · je-vorm, een mens aan het woord | “overleggen over lettertype of kleur kan gewoon even via WhatsApp.” | “Wij streven ernaar u zo spoedig mogelijk een passend antwoord te bieden.” |
| Concreet · dagen, aantallen, plaatsen | “Vandaag besteld, dinsdag of donderdag verzonden. Of haal ’m gratis op in Waarland.” | “Snelle levering en de beste service.” |
| Nuchter met een knipoog | “Zes tot acht plekken per keer — vol is vol.” | “Mis het niet!!! Laatste kans op een plekje!” |
| Belofte die je houdt | “Eén mail per maand, niet vaker.” | “Blijf op de hoogte van al onze acties en aanbiedingen.” |
| Vakwoorden, geen marketingwoorden | garen, pakket, patroon, haaknaald, amigurumi, borduren | premium, exclusief, handwerkbehoeften, ultiem |
- Je, niet u
- Korte zinnen; een gedachtestreepje voor de knipoog
- Feiten van de site: 900 producten, 20 merken, di/do, Waarland
- Merknamen zoals ze heten: Scheepjes, Lammy Yarns, Durable, Lang Yarns
- Uitroeptekens en hoofdletters voor nadruk
- Beloftes die de site niet waarmaakt (gratis verzending vanaf een bedrag, reviews) zolang ze niet bestaan
- Emoji in koppen
Van gids naar live in drie stappen
Richting kiezen
De eigenaar kiest 1, 2 of 3. Daarna wordt de keuze hier als “Gekozen” gemarkeerd en de uitleg van de andere twee herschreven.
Theme laden
De theme-global van de gekozen richting wordt in de sityzr-omgeving geladen, daarna één keer opgeslagen in de theme-instellingen zodat de e-mailtemplates opnieuw renderen.
Content bijwerken
Knoppen op donker op style: 'light', nergens 'accent' of 'outline-light'. Geen nieuwe pagina’s nodig.
Richting 1 · Atelier: 151 van de 151 theme-velden gevuld; 14 velden wijken af van wat nu live staat (gemarkeerd met een gouden streep). Hieronder de merkvelden met de CSS-variabele die eruit rolt; de volledige set staat in het JSON-bestand.
| theme-veld | waarde | CSS-var | t.o.v. live |
|---|---|---|---|
| primaryColor | #25362A | --color-primary | gelijk |
| primaryLight | #D0A565 | --color-primary-light | gewijzigd |
| primaryGlow | rgba(37,54,42,0.12) | --color-primary-glow | gelijk |
| primaryDark | #1B2720 | --color-primary-dark | gelijk |
| secondaryColor | #1B2720 | --color-secondary | gelijk |
| secondaryLight | #2E4536 | --color-secondary-light | gelijk |
| accentColor | #C3934B | --color-accent | gelijk |
| backgroundColor | #F9F5F0 | --color-background | gelijk |
| surfaceColor | #FFFFFF | --color-surface | gelijk |
| borderColor | #E3D9C9 | --color-border | gelijk |
| greyLight | #F2EBE0 | --color-grey-light | gelijk |
| greyMid | #8A8177 | --color-grey-mid | gelijk |
| greyDark | #6A6459 | --color-grey-dark | gelijk |
| textPrimary | #25362A | --color-text-primary | gelijk |
| textSecondary | #55605A | --color-text-secondary | gelijk |
| textMuted | #6B736A | --color-text-muted | gelijk |
| bandBg | #1B2720 | --band-bg | gelijk |
| labelBg | #C3934B | --label-bg | gelijk |
| cardSurface | #F9F5F0 | --card-surface | gelijk |
| rating | #B3833B | --color-rating | gewijzigd |
| successColor | #2F6F4F | --color-success | gelijk |
| warningColor | #9C6304 | --color-warning | gewijzigd |
| errorColor | #B3261E | --color-error | gelijk |
| infoColor | #25362A | --color-info | gelijk |
| headingFont | Lora, Georgia, serif | --font-display · --font-heading | gelijk |
| bodyFont | Work Sans, system-ui, sans-serif | --font · --font-body | gelijk |
| labelFontFamily | body | --font-label | gelijk |
| btnFontFamily | body | --btn-font-family | gelijk |
| primaryGradient | linear-gradient(135deg, #25362A 0%, #44634D 100%) | --gradient-primary | gelijk |
| secondaryGradient | linear-gradient(165deg, #1B2720 0%, #25362A 45%, #2E4536 100%) | --gradient-secondary | gelijk |
| heroGradient | linear-gradient(165deg, #F9F5F0 0%, #F2E7D6 55%, #EBD9BD 100%) | --gradient-hero | gelijk |
| accentGradient | linear-gradient(135deg, #C3934B 0%, #D0A565 100%) | --gradient-accent | gewijzigd |
| radiusSm | 4 | --r-sm | gelijk |
| radiusMd | 8 | --r-md | gelijk |
| radiusLg | 12 | --r-lg | gelijk |
| radiusXl | 16 | --r-xl | gelijk |
| btnBorderRadius | 6px | --btn-border-radius | gelijk |
| btnLetterSpacing | 0.02em | --btn-letter-spacing | gelijk |
| btnPrimaryBg | #25362A | --btn-primary-bg | gelijk |
| btnPrimaryText | #F9F5F0 | --btn-primary-text | gelijk |
| btnPrimaryHoverBg | #1B2720 | --btn-primary-hover | gelijk |
| btnSecondaryBg | #EBD9BD | --btn-secondary-bg | gelijk |
| btnSecondaryText | #25362A | --btn-secondary-text | gelijk |
| btnSecondaryHoverBg | #E0CBA8 | --btn-secondary-hover | gelijk |
| btnHoverEffect | lift | (hover-klasse) | gelijk |
| shadowSm | 0 1px 3px rgba(37,54,42,0.08) | --sh-sm | gelijk |
| shadowMd | 0 4px 16px rgba(37,54,42,0.10) | --sh-md | gelijk |
| shadowLg | 0 12px 36px rgba(37,54,42,0.14) | --sh-lg | gelijk |
| sectionDividerWidth | 56 | --section-divider-width | gelijk |
| sectionDividerHeight | 2 | --section-divider-height | gelijk |
| sectionDividerRadius | 2 | --section-divider-radius | gelijk |
| sectionDividerStyle | solid | --section-divider-bg | gelijk |
| designPreset | modern | data-design | gelijk |
| crumbSeparator | dot | (kruimelpad) | gewijzigd |
| pageBackground | background | (paginagrond) | gelijk |
| headingLetterSpacing | -0.01em | --heading-letter-spacing | gelijk |
Contrast, getoetst op de eigen ondergrond
| Paar | Voor | Achter | Ratio | Norm |
|---|---|---|---|---|
| tekst op achtergrond | #25362A | #F9F5F0 | 11,80:1 | 4,5:1 (AA) |
| secundaire tekst op achtergrond | #55605A | #F9F5F0 | 6,03:1 | 4,5:1 (AA) |
| gedimde tekst op achtergrond | #6B736A | #F9F5F0 | 4,51:1 | 4,5:1 (AA) |
| gedimde tekst op surface | #6B736A | #FFFFFF | 4,90:1 | 4,5:1 (AA) |
| primaire knop | #F9F5F0 | #25362A | 11,80:1 | 4,5:1 (AA) |
| primaire knop hover | #F9F5F0 | #1B2720 | 14,25:1 | 4,5:1 (AA) |
| secundaire knop | #25362A | #EBD9BD | 9,26:1 | 4,5:1 (AA) |
| secundaire knop hover | #25362A | #E0CBA8 | 8,10:1 | 4,5:1 (AA) |
| primary als link op achtergrond | #25362A | #F9F5F0 | 11,80:1 | 4,5:1 (AA) |
| crème tekst op band | #F9F5F0 | #1B2720 | 14,25:1 | 4,5:1 (AA) |
| witte tekst op band | #FFFFFF | #1B2720 | 15,47:1 | 4,5:1 (AA) |
| primaryLight (accentwoord) op secondary | #D0A565 | #1B2720 | 6,81:1 | 4,5:1 (AA) |
| primaryLight (accentwoord) op primary | #D0A565 | #25362A | 5,64:1 | 4,5:1 (AA) |
| goud (accent) op primary — logo-tagline | #C3934B | #25362A | 4,63:1 | 4,5:1 (AA) |
| danger-knop | #FFFFFF | #B3261E | 6,54:1 | 4,5:1 (AA) |
| success-knop | #FFFFFF | #2F6F4F | 5,99:1 | 4,5:1 (AA) |
| succes op successLight | #1E4A34 | #E7F0E9 | 8,65:1 | 4,5:1 (AA) |
| waarschuwing op warningLight | #6B4407 | #F8EEDC | 7,44:1 | 4,5:1 (AA) |
| fout op errorLight | #7A1A15 | #F7E7E5 | 8,82:1 | 4,5:1 (AA) |
| info op infoLight | #14201A | #E9EFE9 | 14,38:1 | 4,5:1 (AA) |
| fout als tekst op achtergrond | #B3261E | #F9F5F0 | 6,02:1 | 4,5:1 (AA) |
| waarschuwing als tekst op achtergrond | #9C6304 | #F9F5F0 | 4,61:1 | 4,5:1 (AA) |
| succes als tekst op achtergrond | #2F6F4F | #F9F5F0 | 5,52:1 | 4,5:1 (AA) |
| iconen (greyMid) op wit | #8A8177 | #FFFFFF | 3,83:1 | 3:1 (UI) |
| iconen (greyMid) op achtergrond | #8A8177 | #F9F5F0 | 3,53:1 | 3:1 (UI) |
| beoordelingssterren op wit | #B3833B | #FFFFFF | 3,37:1 | 3:1 (UI) |
Zo’n merkgids voor jouw merk?
Logo, kleur, typografie, iconen, beeld, interface en tone of voice in één gids, met tokens die je website direct kan gebruiken.