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 juli 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 tussen gebruikers, en gegevens van een kind zijn alleen zichtbaar voor het eigen gezin.
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. Meestal staat ze naast de naam in Nunito Black. Er is geen apart abstract logo: het personage is het merk.
Penny FamilyDe standaardcombinatie: beeldmerk links, naam rechts, verticaal gecentreerd. 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 en de favicon.
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 het app-icoon van 1024 pixels voor drukwerk en grote weergaven.
xNiet doen
- Niet uitrekken, kantelen, spiegelen of van een slagschaduw voorzien.
- Niet verkleuren: Penny is roze, altijd. Geen zwart-witversie.
- Niet op een drukke foto of een donkere kleur plaatsen zonder wit vlak eronder.
- De naam niet in een ander lettertype zetten dan Nunito Black.
Het logo downloaden
De naam is uitgetekend in Nunito Black en zit als vector in het bestand, dus die blijft scherp op elk formaat, ook zonder dat het lettertype geinstalleerd is. Penny zelf zit als afbeelding in hetzelfde bestand, zodat een logo op zichzelf werkt en niets kan kwijtraken.
De witte versie is voor donkere vlakken: daarbij wordt alleen de naam wit, Penny blijft zoals ze is. Gebruik de PNG alleen in programma's die geen vector aankunnen. Heb je Penny los nodig, dan staat ze als losse afbeelding bij de downloads hierboven.
Zo dus niet
Uitgerekt
Verkleurd
Op een druk vlak
Te weinig ruimte
Drie personagekleuren, meer niet
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), hero-accenten
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
Onze drie merkkleuren zijn vrolijk maar niet donker. Daardoor zijn ze prima voor grote koppen, knoppen en iconen, en ongeschikt voor kleine lopende tekst. 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 |
| 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 |
| Penny-roze op wit | Tekst | 3,70 op 1 | xTe licht | Mag |
| Wit op Penny-roze | Tekst | 3,70 op 1 | xTe licht | Mag |
| Penny-roze op warm creme | Tekst | 3,57 op 1 | xTe licht | Mag |
| Penny-roze op warm roze | Tekst | 3,40 op 1 | xTe licht | Mag |
- 1
Merkkleur is geen tekstkleur. Roze, blauw en groen zijn voor koppen vanaf 24 pixels, iconen en vlakken. Lopende tekst krijgt de donkere tekstkleur, die haalt ruim 10 op 1.
- 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 een gekleurde knop komt uit rond 3,7 op 1. Dat is genoeg voor een groot knoplabel, maar 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.
De header van elke mail en de knop erin.
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.
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. Staat boven een titel, altijd in een merkkleur.
Titel hero (H1)
Slim omgaan met geld begint thuis.
Alleen op de homepage. 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 gloed of harde randen.
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
Pillen, avatars, munten, balken
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. Een knop die op de website een pil is, blijft dat ook in het mobiele menu.
Knoppen
Website
- Grote acties zijn pillen met een schaduw en groeien iets bij hover.
- Knoppen in de header zijn compacter en hebben een lichte hoek.
- Donkere knoppen gebruiken altijd hetzelfde zwart als de footer.
App
- De hoofdactie is volledig breed en flink hoog, zodat kleine vingers raak tikken.
- Antwoordknoppen in spellen zijn nog een maat groter.
- De knop kleurt mee met het personage van het kind dat is ingelogd.
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, geen foto's van echte kinderen, 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. Emoji dragen hier de communicatie.
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 mogen emoji zijn, 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. De vierde fase, Luuk voor 17 tot 20 jaar, staat op de planning en is bewust nog niet gebouwd.
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 | Een missie bestaat uit 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, geen foto's van echte kinderen in marketing, en geen illustraties in een andere stijl dan de personagelijn. 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