Brand & styleguide
v1.0 — 2026
Het merk
Luuk Gille.
De bouwstenen van mijn persoonlijke merk: logo, kleur, typografie, componenten en motion. Diepzwart, warm papier en één rood accent dat altijd het laatste woord heeft.
(01) — Logo
Woordmerk + punt.
Het logo is een woordmerk in Archivo Black met een rode punt: het einde van de zin, het moment dat iets af is. Houd rondom altijd minimaal de hoogte van de punt × 4 vrij. De punt is altijd rood, behalve op een rode achtergrond.
LUUK GILLE
Primair — op Ink
LUUK GILLE
Op Paper
LUUK GILLE
Op Signal Red
Logo-mark — favicon, app-icoon & avatar
(02) — Kleur
Donker, warm, één accent.
Ink domineert, Paper zorgt voor ritme tussen secties en Signal Red is schaars: alleen voor de belangrijkste actie of het woord dat moet knallen.
Ink 60%
Paper 30%
Red 10%
Ink
#0B0B0C · --lg-ink
Achtergronden, primaire tekst op licht
Ink 2
#151517 · --lg-ink-2
Kaarten en verhoogde vlakken
Line
#2A2A2E · --lg-line
Randen, scheidingslijnen
Mute
#9C9AA3 · --lg-mute
Bodytekst op donker
Paper
#F4F1EC · --lg-paper
Koppen op donker, lichte secties
White
#FFFFFF · --lg-white
Tekst op rood
Signal Red
#E31D24 · --lg-red
CTA's, accenten, de punt
Deep Red
#9E0F14 · --lg-red-deep
Gloed en gradients
(03) — Typografie
Drie fonts, één stem.
Aa
Archivo Black
Display & koppen — altijd uppercase, strak gespatieerd (-0.04em), line-height 0.86.
Aa
Manrope
Bodytekst & leads — 300 voor grote intro's, 400 voor lopende tekst, line-height 1.7.
Aa
JetBrains Mono
Labels, eyebrows, knoppen — uppercase met ruime letterspatie (0.12–0.18em).
Display · 156 / 112 / 54
Websites
H2 · 96 / 68 / 44
Werk dat live staat
H3 · 34 / 26
Ontwerpen & bouwen
Lead · 30 / 21
Ik vertaal merken naar websites die je voelt.
Body · 18 / 16
Snel geladen, SEO-proof en meetbaar. Na de livegang blijf ik testen en optimaliseren.
Eyebrow · 13
(02) — Geselecteerd werk
(04) — Componenten
Bouwblokken.
Knoppen — lg-btn / lg-btn-ghost
Chips — lg-chip
HubSpot CMS
Elementor
React
Kaart — lg-card (hover = lift + rode rand)
01
Ontdekken
Kaarten liften 10px op bij hover en krijgen een rode rand.
Lijst-rij — hover vult rood
Nu
JEX
(05) — Motion & toon
Alles beweegt. Met reden.
1:1
Scroll-linked
Reveals zijn direct gekoppeld aan je scrollpositie. Niets komt te laat: alles beweegt mee met je duim of muiswiel.
1.1s
Intro
Koppen onthullen zich regel voor regel uit een masker, van blur naar scherp, met 120ms stagger.
0.35s
Hover
Knoppen schalen naar 1.04, kaarten liften, rijen vullen rood. Direct en tastbaar.
0kb
Geen JS-libs
Native CSS scroll-driven animations en Elementor: geen zware libraries, dus razendsnel.
Tone of voice