32.1 KB36 paths
groups Avatar, Flame, Text, Underlinepng padding 5 %
All four groups. Site header, print, anywhere with room.
Opa Haardhout — brand kit
Five vector variants cut from four independent groups, with raster sizes, icons and the palette. Every SVG stands alone: none of them is a crop of another.
Variants
18.2 KB24 paths
groups Avatarpng padding 5 %
A finished portrait — his shoulder closes round behind where the wordmark sits. Social avatar, hero art, stickers.
14.0 KB12 paths
groups Text, Underline, Flamepng padding 5 %
Text + Underline + Flame — the whole type lockup without the mascot. The usual choice when the grandpa is already on the page.
11.6 KB9 paths
groups Text, Underlinepng padding 5 %
Text + Underline, no flame, for when the flame animates separately.
2.6 KB3 paths
groups Flamepng padding 6 %
Complete standalone, no letter-shaped cutouts. 2.6 KB — cheap to inline and animate.
18.2 KB24 paths
groups Avatarpng padding full bleed
Head and hat, cropped square and pruned of everything off-canvas. The only variant that still reads at 16 px.
Icons
Favicons are full-bleed — at 16 px any margin is wasted. App icons sit at
85 % of a transparent square; the maskable one is full-bleed cream with the mark
inside the central 65 %, so a circular crop cannot clip the hat.
apple-touch-icon is an opaque cream tile because iOS ignores transparency.
Palette
#1e120aKeyline and every dark shape.#f4ecd8The brand white. Never substitute #fff.#f15e0cHat, piping, flame, underline.#f6c193Face and hands only.#04635fThe jacket.#ffffffEyes and the flame's hot core. Nothing else.Rules
- Clear space: at least the height of the "O" in OPA on every side. The SVG viewBoxes are tight by design, so you control it in CSS; the PNGs ship with 5 % padding (6 % on the flame) so the mark never touches the image edge.
- Never rebuild a variant by cropping another. Each file has its own closed silhouette; a crop would show a cut edge.
- Never recolour the cream to pure white.
#f4ecd8is the brand white. - The four groups keep their ids in every SVG, so
#Avatar,#Flame,#Textand#Underlineare animatable straight out of the file.