04 — Self-initiated brief · FJELO, 2026

FJELO.
The city, folded.

Self-initiated brief / Fictional brand

Brief
Launch campaign for FJELO F1, a fictional European folding e-bike. One idea rolled out to eight formats in four languages — without hand-resizing a single banner.
My role
Concept, art direction, identity, key visual, modular grid, copy & localisation (EN/FR/DE/ES), template and batch-export scripts, automated QA, motion.
Outcome
Self-initiated — not a client commission. One JSON file and one template generate 36 QA-checked renders, an 8-second film and a GIF.
A commuter carrying a folded FJELO e-bike outside a city station
Year — 2026 · Personal project · Fictional brand

Key visual & identity

FJELO master key visual, 16:9: ‘The city, folded.’
Key visual (master 16:9)
FJELO 6-sheet poster on a metro corridor wall
6-sheet in a metro corridor. The poster is the 1200×1800 template output, perspective-warped onto an AI-generated blank panel.

Identity

Wordmark in Archivo Expanded with a ‘fold mark’: a square whose corner folds over in Volt — the product idea as a symbol.

  • Fog#E8EBED
  • Graphite#1D2125
  • Volt#C6F432
  • Steel#8C949C
  • Archivo Expanded — (width 112, weight 820) — headlines
  • IBM Plex Mono — specs, legal, data
FJELO wordmark with the fold mark

Key visual (master 16:9) · OOH · Identity — bike and metro wall are AI-generated concept renders

One source of truth

8 formats × 4 languages, generated, not resized.

"de": {
  "headline": ["Die Stadt,", "gefaltet."],
  "spec": "14 kg · 80 km · in 10 s gefaltet",
  "price": "Ab 1.890 €",
  "cta": "Vorbestellen"
}

A modular grid (unit = short side ÷ 24) with three archetypes — tall, square, wide — reflows every element per format. Headlines auto-fit by binary search; the 9:16 format keeps clear of Story UI zones; banners drop copy by priority.

Automated QA

Every render is checked for overflow, minimum type size (9 px on banners, 12 px on social), safe margins and text collisions. Run 1: 24/32 passed — CTAs shrinking below 9 px, a headline/spec clash on the billboard, and the long French price colliding on OOH. Fixed in the template; final run: 36/36 (incl. the 16:9 master).

Overview of all FJELO renders: rows in English, French, German and Spanish across eight formats
Rows: EN · FR · DE · ES — OOH 2:3, 9:16, 4:5, 1:1, 160×600, 300×250, 970×250, 728×90 · bike is an AI-generated render

Process & motion

  1. 01Brief Product truths, audience, 4 markets, 8 placements.
  2. 02AI concepting Product, scene and blank-panel renders generated, then selected and retouched.
  3. 03Art direction Idea, fold mark, palette, type, master key visual.
  4. 04Template Modular grid + 3 layout archetypes in HTML/CSS; copy in one JSON file.
  5. 05Batch export Python + Playwright render 36 PNGs (1× and 2×) in ~15 s.
  6. 06QA Overflow, legibility, safe zones, collisions → qa_report.json.
8-second launch film, 1080×1350 (no sound)

8-second launch film (1080×1350, MP4 + GIF preview), built entirely in code. The same JSON drives the motion: the Volt band wipes in, the bike rolls on, the headline folds in and refolds through EN → FR → DE → ES, spec chips pop in, and the end card shows all four lines. Frames rendered with Playwright, encoded with FFmpeg.

Motion still at 0:01.5, English headline
0:01.5 · EN
Motion still at 0:02.9, French headline
0:02.9 · FR
Motion still at 0:04.9, Spanish headline
0:04.9 · ES
Motion end card at 0:07.5 on graphite
0:07.5 · end card

Process diagram · motion stills — bike is an AI-generated render