De huisstijl van Penny Family
Het complete naslagwerk: beeldmerk, kleuren met codes, achtergronden, de typografische schaal met exacte maten, vormentaal, knoppen, personages en hoe we schrijven. Bedoeld voor pers, partners, scholen en iedereen die iets over ons maakt.
Laatst bijgewerkt in oktober 2026
Waar Penny Family voor staat
De Nederlandse app waarin kinderen van 4 tot 16 met geld leren omgaan door het zelf te doen, met hun ouders ernaast.
De tagline
Financieel leren voor het gezin
Deze zin staat onder de naam. Nooit een variant erop, nooit vertaald.
Merkwaarden
Warm, nuchter, betrouwbaar en speels. In die volgorde als het schuurt: liever saai en eerlijk dan flitsend en hol.
Harde beloften
Reclamevrij, geen aankopen in de app, geen chat voor kinderen, en gegevens van een kind zijn alleen zichtbaar voor het eigen gezin, tenzij een ouder zelf contact met een coach aanzet.
De naam schrijf je altijd als Penny Family: twee woorden, beide met een hoofdletter, nooit PennyFamily of Penny family. In lopende tekst gebruik je de volledige naam bij de eerste vermelding, daarna mag Penny Family kortweg terugkomen.
Het spaarvarkentje en de naam
Penny is het beeldmerk. Ze staat naast de naam: Penny donkergrijs met een lange y, FAMILY in logo-roze eronder. Er is geen apart abstract logo: het personage is het merk.
Het logo: Penny links, precies even hoog als het letterblok ernaast. "Penny" donkergrijs met een lange y, daaronder "FAMILY" in logo-roze. Op smalle plekken mag Penny los staan, zolang de naam ergens anders in de uiting voorkomt. Hieronder staat Penny als losse afbeelding op 800 pixels, plus het app-icoon (met achtergrond, zoals Apple dat vraagt) en de favicon (Penny zonder achtergrond).
Wel doen
- Laat rondom het beeldmerk minstens de hoogte van Penny's oor aan witruimte vrij.
- Plaats het op een rustige, lichte achtergrond of op het eigen roze sectievlak.
- Schaal altijd verhoudingsgewijs, minimaal 32 pixels hoog.
- Gebruik voor drukwerk het grote logobestand; het kleine is voor schermen en mail.
xNiet doen
- Niet uitrekken, kantelen, spiegelen of van een slagschaduw voorzien.
- Niet verkleuren: op een scherm is Penny altijd roze. De eenkleurige en zwart-witte versies hieronder zijn alleen voor bedrukking.
- Niet op een drukke foto. Op een donker vlak alleen de versie met witte letters.
- De naam niet zelf natypen als logo: gebruik altijd het logobestand. Het woord "Penny" in het logo is getekend, het is geen lettertype.
Het logo downloaden
Het logo als PNG met een doorzichtige achtergrond, in twee maten: groot (1878 pixels breed) voor drukwerk en presentaties, klein (700 pixels) voor schermen en mail. De versie met witte letters is voor donkere vlakken; Penny blijft daarbij zoals ze is.
Voor bedrukking
Voor t-shirts, tassen, stempels en gravure: het logo in een kleur, in zwart-wit, en de naam of Penny los. In de eenkleurige versie zijn Penny's ogen, snuit en mond uitgespaard, zodat ze in de kleur van de stof doorschijnen. Het zijn PNG's van 1878 pixels breed, genoeg voor een borstlogo. Vraagt een drukker om een vectorbestand, mail ons dan.
Zo dus niet
Uitgerekt
Verkleurd
Op een druk vlak
Te weinig ruimte
Drie personagekleuren en het logo-roze
Elke leeftijdsgroep heeft een eigen kleur. Die drie zijn de enige accentkleuren; lichtere tinten maak je met transparantie, nooit met een nieuwe kleur. Klik op een waarde om hem te kopieren.
Penny-roze
Merk-primair, jongste groep (4 tot 7): de hoofdknop en roze tekst
Logo-roze
Vlakken: tabbladen, balkjes, labels, tellers, prijskaartjes. Altijd met donkerroze letters (#5C1A2B), nooit wit
Timo-blauw
Middengroep (8 tot 11), ouder-accenten op de site
Mila-groen
Tienergroep (12 tot 16), vertrouwen en veiligheid
Tinten maken met dekking
Een lichtere variant is altijd dezelfde kleur met minder dekking. Zo blijft het palet klein en klopt elke tint automatisch bij de personagekleur.
5 procent
Heel zachte vulling achter een blok
10 tot 15 procent
Kaartvlak, icoon-tegel, badge
25 tot 30 procent
Ring om een kaart, actieve rand
100 procent
Knop, icoon-tegel, kicker-tekst
Functionele kleuren
Deze kleuren zeggen iets over de status, niet over het merk. Fout en succes staan nooit alleen: er hoort altijd tekst bij, anders mist iemand die kleuren niet goed ziet de boodschap.
Succes
Goed antwoord, gelukt-status, vinkjes
Fout
Fout antwoord en foutmeldingen, altijd samen met tekst
Info
Zachte info-kaders, labels als op de planning
Donker
Footer, sticky balk, App Store-knop
Beloningsgoud
Alleen voor muntjes, dagbonus en vieringen. Goud is exclusief voor beloningsmomenten en nooit een gewone accentkleur.
Wat we nooit doen
- Geen generieke paletten voor accenten, zoals een willekeurig roze of paars.
- Geen paars-blauw-roze verlopen.
- Geen vaste hex-codes voor personagekleuren in de app zelf, daar staan variabelen.
- Geen goud buiten een beloningsmoment.
Welke kleur mag waarvoor
Penny-roze is donker genoeg voor kleine tekst. Timo-blauw, Mila-groen en het logo-roze niet: die zijn voor grote koppen, knoppen, iconen en vlakken. Hieronder staat per combinatie de gemeten verhouding.
| Combinatie | Voorbeeld | Verhouding | Kleine tekst | Groot en iconen |
|---|---|---|---|---|
| Donkere tekstkleur op wit | Tekst | 10,21 op 1 | Mag | Mag |
| Donkere tekstkleur op warm creme | Tekst | 9,87 op 1 | Mag | Mag |
| Donkere tekstkleur op warm roze | Tekst | 9,39 op 1 | Mag | Mag |
| Wit op donker | Tekst | 20,13 op 1 | Mag | Mag |
| Penny-roze op wit | Tekst | 5,44 op 1 | Mag | Mag |
| Wit op Penny-roze | Tekst | 5,44 op 1 | Mag | Mag |
| Donkerroze op logo-roze | Tekst | 5,31 op 1 | Mag | Mag |
| Penny-roze op warm creme | Tekst | 5,26 op 1 | Mag | Mag |
| Penny-roze op warm roze | Tekst | 5,00 op 1 | Mag | Mag |
| Gedempte tekst op wit | Tekst | 4,65 op 1 | Mag | Mag |
| Gedempte tekst op warm creme | Tekst | 4,49 op 1 | xTe licht | Mag |
| Mila-groen op wit | Tekst | 4,19 op 1 | xTe licht | Mag |
| Wit op Mila-groen | Tekst | 4,19 op 1 | xTe licht | Mag |
| Mila-groen op warm roze | Tekst | 3,85 op 1 | xTe licht | Mag |
| Timo-blauw op wit | Tekst | 3,71 op 1 | xTe licht | Mag |
| Wit op Timo-blauw | Tekst | 3,71 op 1 | xTe licht | Mag |
| Wit op logo-roze | Tekst | 2,42 op 1 | xTe licht | xTe licht |
- 1
Lopende tekst is donker. Lopende tekst krijgt de donkere tekstkleur, die haalt ruim 10 op 1. Een los woord of een link mag Penny-roze zijn. Blauw en groen alleen vanaf 24 pixels, en logo-roze nooit als tekst.
- 2
Kleur zegt het nooit alleen. Goed of fout, gelukt of mislukt: er staat altijd een woord of icoon bij. Wie kleuren slecht onderscheidt, mag niets missen.
- 3
Alles wat je aantikt is minstens 44 bij 44 pixels. In de spellen nog groter, want kleine vingers mikken minder precies.
Wit op de Penny-roze knop haalt 5,4 op 1. Op Timo-blauw en Mila-groen is dat 3,7 en 4,2: genoeg voor een groot knoplabel, krap voor kleine letters. Houd knopteksten daarom stevig: vet en minstens 16 pixels.
Twee tinten die elkaar afwisselen
De website ademt in een vast ritme: warm roze en warm creme wisselen elkaar af, sectie na sectie. Twee gelijke tinten mogen nooit naast elkaar staan, want dan lopen de secties visueel in elkaar over.
Warm roze
Sectievlak op de website. Wisselt altijd af met warm creme.
Warm creme
Het tweede sectievlak. Twee gelijke tinten staan nooit naast elkaar.
Wit
Alleen voor kaarten en de header, nooit als sectievlak.
Splash-roze
Het laadscherm van de app, zit in de animatie gebakken.
Het sectieritme van de homepage
Voeg je een sectie toe, neem dan de tegenovergestelde tint van de buren. Wit is nooit een sectievlak: dat is voorbehouden aan kaarten en de header.
Verlopen met een vaste plek
Artikelkop
De kop van elke gidsenpagina: roze dat naar creme zakt.
Inlogscherm app
Het inlogscherm in de native app.
Beloningsgoud
Alleen muntjes, dagbonus en vieringen. Nooit als gewone kleur.
Nunito, en niets anders
Een lettertype door de hele app en website heen: Nunito. Rond, vriendelijk en goed leesbaar, ook voor kinderen die net leren lezen. Gratis te gebruiken via Google Fonts. Een tweede lettertype introduceren we nooit; het woord Penny in het logo is een tekening, geen lettertype.
Letterproef
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 EUR , . ? !
De schaal op de website
Elke tekstsoort heeft een vaste maat. Staan er twee maten, dan is de eerste voor telefoons en de tweede vanaf tabletbreedte.
Kicker
Voor ouders
Letterafstand 0,1em. Alleen als label boven een blok of kaart, niet boven een paginatitel.
Titel hero (H1)
Slim omgaan met geld begint thuis.
Een per pagina, op elke publieke pagina. Mag een hele zin zijn en krijgt dan wel een punt.
Sectietitel (H2)
Slim sparen voor later
Nooit groter dan 36 px, en zonder punt erachter.
Kaarttitel (H3)
Zo werkt de spaarpot
De kop binnen een kaart of blok, ook zonder punt.
Intro onder een titel
Praktische antwoorden op de vragen die elke ouder een keer googelt.
Bij een gecentreerde kop maximaal 36 rem breed, anders leest het lastig.
Lopende tekst
Goed met geld omgaan is een vaardigheid, geen talent. Die leer je thuis, door het te doen.
Regelafstand 1,625 voor rustig lezen. Kleur op 70 procent dekking.
Micro-tekst
Reclamevrij en zonder aankopen in de app
Vertrouwensregels, meta-informatie en labels onder een kaart.
Gewichten die we gebruiken
Nunito heeft meer gewichten dan deze vijf, maar alles daarbuiten laten we ongebruikt. Zo blijft het beeld rustig.
Aa
Medium 500
Body in de app
Aa
Semibold 600
Labels en micro-tekst
Aa
Bold 700
Knoppen en kickers
Aa
Extrabold 800
Nadruk in een kaart
Aa
Black 900
Alle koppen
De schaal in de app
In de app is alles een maatje compacter dan op de website, omdat een telefoonscherm minder ruimte heeft en kinderen dichter bij het scherm zitten.
| Element | Maat | Gewicht | Klassen |
|---|---|---|---|
| Paginatitel | 24 px | 700 | text-2xl font-bold |
| Sectietitel | 18 px | 700 | text-lg font-bold |
| Kaarttitel | 14 px | 900 | text-sm font-black |
| Body en instructie | 14 px | 500 | text-sm font-medium |
| Sublabel | 12 px | 400 | text-xs text-muted-foreground |
| Micro-label | 10 px | 400 | text-[10px] text-muted-foreground |
Regels voor koppen
- Zinskapitalen: alleen het eerste woord krijgt een hoofdletter.
- Een sectietitel eindigt niet op een punt; de hero-kop mag dat wel.
- Regelafstand krap bij koppen, ruim bij lopende tekst.
- Letterafstand iets krapper bij grote koppen, ruim bij de kicker.
Nunito ophalen
Nunito staat onder de Open Font License en is gratis te gebruiken, ook commercieel. Voor e-mail vallen we terug op Arial, omdat mailprogramma's geen eigen lettertype laden.
Nunito op Google FontsRond, zacht en met rust eromheen
Alles heeft ronde hoeken, schaduwen blijven subtiel en er zit royaal lucht tussen de blokken. Diepte suggereren we met een lichte schaduw, nooit met harde randen. Een zachte gloed hoort alleen achter een personage, onder de Penny-knop en bij een beloning, nooit rond tekst.
Hoekafronding
rounded-lg
16 px
Knoppen, badges, chips
rounded-2xl
16 px
Kaarten, dialogen, icoon-tegels
rounded-3xl
24 px
Grote kaarten en panelen op de site
rounded-full
rond
Avatars, munten, voortgangsbalken, kleine chips (geen grote knoppen)
Schaduwen
shadow-sm
Kaart in rust
shadow-md
Kaart bij hover, met een halve pixel lift
shadow-lg
Zwevende actieknop en het sticky balkje
shadow-xl
Personages en grote panelen
Ruimte en maatvoering
| Situatie | Waarde |
|---|---|
| Sectie op de website | py-16 md:py-24, px-6 md:px-12 |
| Ruimte tussen tekst- en beeldblokken | space-y-16 md:space-y-24 |
| Breedte content-sectie | max-w-6xl |
| Breedte smal blok (FAQ, eind-CTA) | max-w-2xl |
| Pagina in de app | px-4 py-6 |
| Kaart-padding compact / ruim | p-4 / p-5 of p-6 |
Beweging
Animaties gebruiken alleen verplaatsing en doorzichtigheid, want dat blijft vloeiend op oudere telefoons. Een kaart komt bij hover een halve pixel omhoog met iets meer schaduw. Zwevende accenten bewegen langzaam, en wie in zijn toestel heeft ingesteld dat beweging beperkt moet blijven, krijgt een stilstaand beeld.
De bouwstenen in de praktijk
Dezelfde actie ziet er overal hetzelfde uit, op elk schermformaat. Op de website en in de app is het dezelfde knop: een zacht verloop, een licht randje bovenin en een dunne onderkant die je indrukt.
Knoppen
Website
InloggenBegin nu- De Penny Family-knop: Penny-roze (#BE3752) met een zacht verloop, een licht randje bovenin, een dunne onderkant en een zachte roze gloed. Bij een tik zakt hij precies zijn onderkant in. Geen donkere rand: die voelde retro.
- De snuit-knop (met Penny's snuit, de neusgaatjes snuffelen bij hover) staat alleen bij de grote "Begin nu" op de homepagina.
- De witte versie is de tweede keuze naast een roze knop, zoals Inloggen. In de balk bovenaan staan de kleine versies.
- Voor de App Store altijd de officiële badge van Apple, nooit een nagemaakte knop. Zolang de Android-app er niet is, staat ernaast een omlijnd "Binnenkort Android".
App
- Alles wat je kunt indrukken heeft een dunne onderkant die wegzakt bij een tik, een licht randje bovenin en een zachte gloed, zonder donkere rand. Vijf soorten: de hoofdknop, de witte keuzeknop, het ronde knopje, de glazen knop op een gekleurde achtergrond en het actieve vak in een menu.
- Een antwoord kleurt licht groen als het goed is en licht rood als het fout is; een gekozen antwoord krijgt de themakleur.
- De knoppen kleuren mee met het thema van het kind. Nagebootste apps in een spel (bankapp, chat, kassabon) houden hun eigen echte uiterlijk.
Kaarten
Witte kaart
De standaard op de website: wit, dunne rand, zachte schaduw.
Voor gewone inhoud op een gekleurd sectievlak.
Getinte kaart
Vlak en rand in dezelfde merkkleur, met lage dekking.
Voor stappen, tips en alles wat bij een personage hoort.
Zachte band
Gedempt vlak zonder schaduw, voor een terzijde.
Voor uitleg die ondersteunend is, niet leidend.
Drie gidsen, drie leeftijden
Elk personage hoort bij een leeftijdsgroep, een kleur en een eigen toon. Het zijn eigen 3D-illustraties: geen stockbeeld en geen illustraties in een andere stijl.
Penny
4 tot 7 jaar
Het roze spaarvarkentje en het gezicht van het hele merk. Draait om doen alsof, verzamelen en herhalen: winkeltje spelen, munten sorteren, een pot die zichtbaar voller wordt.
Toon: Kort, warm en voorlezend. Beeldjes dragen hier de communicatie, altijd als eigen tekening.
Download
Timo Tientje
8 tot 11 jaar
De zakgeld-fase. Timo is de nieuwsgierige uitzoeker: wat is de beste deal, wat krijg ik voor mijn tientje? Hier leert een kind de kernles veilig ervaren: op is op.
Toon: Nieuwsgierig en concreet. Spelobjecten zijn eigen tekeningen, de tekst blijft kaal.
Download
Mila Munt
12 tot 16 jaar
Tieners zitten al in het echte systeem: betaalpas, online kopen, bijbaantje. Haar vorm is het nabootsen van echte interfaces, zoals een loonstrook of een webshop.
Toon: Respectvol en droog, nooit kinderachtig. Emoji alleen als ze iets betekenen.
DownloadEen personage staat nooit los in de lucht: geef het altijd een grondschaduw eronder en een zachte gloed in de eigen kleur erachter. Maximaal een groot personage per compositie, behalve in de hero waar ze met z'n drieen staan. Penny Family gaat tot 16 jaar: er komt geen vierde personage.
Hoe Penny Family klinkt
Warm en nuchter, zonder jubel. En met een harde regel: de app mag er nooit uitzien of klinken alsof een computer hem heeft geschreven.
Altijd
- Nederlands, warm en nuchter: schrijf zoals een goede juf of meester praat.
- Concreet boven abstract: op is op, in plaats van budgetbeheer.
- Eerlijk over wat de app wel en niet is: een oefenbaan, geen vervanging van echt zakgeld.
- Maximaal een uitroepteken per tekstblok.
- Zinskapitalen in koppen: Slim sparen voor later, niet Slim Sparen Voor Later.
xNooit
- Gedachtestreepjes in lopende tekst.
- Openingen als Laten we, Ontdek de magie van, of Til je X naar een hoger niveau.
- Overdreven meeleven in teksten voor ouders.
- Fonkel-iconen, raketten en andere versiering die niets betekent.
- Paars-blauw-roze gradients of abstracte blob-achtergronden.
Zo niet, zo wel
Ontdek de magie van financieel bewustzijn voor jouw kind!
Je kind leert wat geld waard is, door het zelf uit te geven.
Til de financiele opvoeding van je gezin naar een hoger niveau.
Zakgeld afspreken, sparen en samen terugkijken. Meer is het niet.
Laten we samen starten met deze geweldige leerreis!
Maak een profiel voor je kind en kies de eerste missie.
Zo noemen we de dingen
Consistente woorden schelen verwarring, zeker bij kinderen die nog leren lezen. Dit zijn de termen die we in de app en op de site aanhouden.
| Dit zeggen we | Dit niet | Waarom |
|---|---|---|
| Penny Family | PennyFamily, Penny family | Twee woorden, allebei een hoofdletter. |
| missie | opdracht, les, oefening | Een missie is een spel of verhaal in de app. |
| level | ronde, niveau, stage | De meeste spellen hebben tien levels. |
| spaarpot | spaarvarken, kluis | Waar een kind zijn muntjes bewaart. |
| muntjes | punten, coins, XP | De beloning heet altijd muntjes, nooit punten. |
| je kind | de gebruiker, de speler | We schrijven tegen een ouder over zijn kind. |
| ouder | beheerder, accounthouder | Ook in schermen over instellingen. |
Emoji per doelgroep
Penny (4 tot 7)
Emoji dragen de communicatie, ruim toegestaan
Timo (8 tot 11)
Spelobjecten plus hooguit een accent bij de beloning
Mila (12 tot 16)
Streng: alleen functionele emoji, droge toon
Ouders en website
Geen decoratieve emoji, accenten via iconen en kleur
Alles is eigen artwork
Geen stockfoto's en geen illustraties in een andere stijl dan de personagelijn. Echte foto's van kinderen alleen als wij ze zelf aanleveren, met toestemming van de ouders, bij voorkeur zonder herkenbaar gezicht en nooit met een naam. Ook de spelobjecten zijn getekend in plaats van uit de emoji-set van het toestel gehaald.
- Iconen
- Lijniconen uit de Lucide-set, meestal wit op een gekleurde tegel van 48 bij 48 pixels. Kleine iconen in lopende tekst zijn 16 pixels en krijgen de vertrouwenskleur groen.
- Geld in beeld
- Altijd herkenbaar Europees geld. Munten bij de basisschoolleeftijd en weekzakgeld, biljetten bij tieners en maandbedragen.
- Spelobjecten
- Producten, klusjes en dieren zijn eigen illustraties in plaats van de emoji van het toestel, zodat het beeld overal hetzelfde is.
Iets nodig wat hier niet staat
Zoek je een ander formaat, een specifieke pose van een personage of wil je het merk in een uiting gebruiken? Stuur een mail, dan kijken we mee.
info@pennyfamily.nl