JelleDesignSystem — het visuele fundament
Kleuren, typografie, logo-patroon en componenten — het design system achter JelleBuilds en alle apps.
JelleDesignSystem is geen aparte app, maar het visuele fundament onder JelleBuilds en alle experimenten. Het groeide mee met de site: warme cream-tinten, koraal als accent, en het herkenbare { icoon }-logo bij elke Jelle-app.
Op deze pagina leg ik de bouwstenen uit — met afbeeldingen per onderdeel, zodat je kunt zien hoe alles samenhangt.
Kleurenpalet
Zes merkkleuren vormen de basis. Espresso voor tekst, cream voor achtergronden, coral voor acties en accenten. Amber, sage en taupe geven status en hiërarchie aan — groen voor live, oranje voor prototypes, grijs voor ideeën.
Typografie
Inter is het werkpaard: headings, body, knoppen en UI. Serif komt alleen terug in de koraalkleurige accolades van het logo — bewust spaarzaam, zodat het accent blijft.
Logo-patroon
Elke Jelle-app volgt hetzelfde patroon: koraalkleurige { }-accolades, een icoon dat de app beschrijft, en een wordmark Jelle + descriptor in taupe. Zo voelt alles als één familie, ook als de apps technisch verschillend zijn.
UI-componenten
Knoppen, kaarten, taal-toggle en instructiepanelen delen dezelfde radius (12–16px), borders in line-kleur en cream card-achtergronden. Primary actions zijn coral pills; secundair is outline.
Status & principes
Experimenten communiceren hun status via kleur: live (sage), prototype (coral), idee (taupe). Daaronder ligt de filosofie van JelleBuilds: Build, Learn, Share, Repeat — de cyclus die je op de site terugziet.
Updates
v1.0.1
17 juli 202617 juli (avond) — Site accessibility
- Skip link + #main-content focus target op alle site-pagina's
- .sr-only utility en :focus-visible outlines in globals.css
- Incrementeel uitgerold na Vercel 500-scare
v1.0.0
16 juli 2026Documentatie live
- Experimentpagina met uitleg per onderdeel
- Visuele referenties: palette, type, logo, components, status
- Verankerd in globals.css en app-scoped CSS