Benjamin Creative SystemsPortfolio / 2026 / Cape Town

12 years

Amilio
Benjamin

Creative Technologist

I design brands, then build the systems that produce their work: design-token systems, builder apps and agentic pipelines. The design systems and builders on this site are the real apps, running in your browser.

Open the live lab ↓liveryos.co.za ↗

Ten years building brands by handTwo years building them as systems

Profile

Brand designer turned systems builder.

Twelve years in design. A decade as a freelance brand designer for music labels, artists, venues, law firms, sport and retail brands, then two years as Design Lead at Blacfox, a B2B tech marketing agency in Cape Town, where I started building the systems that now produce the work.

I design the brand, then I build the machine that keeps it consistent: design-token systems, agentic production pipelines, builder apps, full-stack websites and the tools that get work out the door faster without losing the craft.

Systems

Agentic production pipelines with human QA gates
Design systems and two-tier token architecture
Versioned agent instructions and correction cycles
MCP integrations across Figma and builder apps

Build

Full-stack web: HTML, CSS, JavaScript, Node build scripts
Supabase, GitHub, Cloudflare Pages
Self-service SaaS product, from onboarding to deployment
Browser and Python tools for print production

Brand

Identity systems and art direction
Publication and editorial design
Campaigns, packaging and large format
Motion, plus AI image and video direction

ToolsClaude Code, VS Code, Figma, Adobe Creative Cloud, Copilot, Ollama, Supabase, Lovable, Cloudflare, GitHub

01 Systems / Blacfox

Creative OS

A code-based production system that turns approved copy into on-brand campaign assets (ebooks, landing pages, mailers and more) from one governed design system per client.

Full funnel pack: ebook, landing page and mailer

Before9 to 11.5 hours

Nowunder 40 minutes

Includes two human QA passes. Figure kept deliberately conservative.

Pipeline per campaign

Copy files
Tagging agent
QA pass 1
Production agent
QA pass 2
Hand-off

Human checkpointAgent stepOutput

Client instances

Blacfox
Smart IT
Nymbis / Cuumulo
Power Listening

Smart IT had no brand guide: its design system was generated from scratch.

Builder apps

Ebook
Landing page
Mailer
Presentation
Webinar pack
Infographic
Social ads
Carousel

02 Systems / Live lab

Not screenshots. The real apps.

Each client instance runs on its own design system: the tokens, foundations and components every builder and agent reads from. Pick an instance, open its design system or any builder, then type, swap components and export.

Instance 04 · privatePower Listening

Open ↗

Loading the live app

Every one of these was built by hand, one client at a time. Livery does it for any brand: upload the identity and it generates the design system and a full set of on-brand builders.

Get Livery for your brand

03 Product / Independent

livery

A self-service, universal creative OS. A brand uploads its identity, and Livery generates its design system and a full set of on-brand builder apps. Teams enter copy and export finished assets themselves. Live at liveryos.co.za.

Live now liveryos.co.za ↗ Built and launched independently Start your brand's OS

1
Upload the brand
Logo, colours, fonts, corner radii and icon style through an onboarding wizard.
2
Design system generated
Tokens and universal components resolve to the brand automatically.
3
Builders reskinned
Eight builder apps appear in the brand, with no manual setup.
4
Build and export
Teams enter copy and export finished assets themselves.

One universal component, three brands

The same component, resolved through three sets of brand tokens: colour, corner radius, weight and style.

Brand headline

Call to actionradius 2px

Brand headline

Call to actionradius 10px

Brand headline

Call to actionradius 18px

Shipped end to endProduct, website, onboarding and deployment, on Cloudflare Pages.

AI-free coreThe builders run on tokens and components. AI connects afterwards through an MCP layer.

Eight buildersEbook, landing page, mailer, presentation, webinar pack, infographic, social ads and carousel.

04 Build / Blacfox

Blacfox website

The agency's full-stack website with a custom CMS, designed and built end to end. Live at blacfox.com.

Front endCustom design and build. Shared head, nav and footer partials assembled by a Node build script. Two layout variants.
CMSPage tree and routing, navigation management, draft and publish states, per-page meta fields.
Back endSupabase database for content, Supabase Auth for editor login.
Access and deployPrivate GitHub repo. Scoped, expiring access tokens for editors. Content edits ship straight; structural changes go through branches.

No vendor CMS. The agency owns its code, its content and its hosting choices.

blacfox.com6 views

blacfox.com home page hero: We listen. You close. — Home: hero.

blacfox.com home page section with founder quote. — Home: listening section.

blacfox.com How we work page. — How we work.

blacfox.com article page: The Ghost Lead. — Article page.

05 Tooling / HCA

HCA press production

Ninety management course booklets needed press-ready files in A4 and A5, with and without bleed and crop marks, and the original covers were too narrow. I built the tools to clear it.

90 booklets × 4 print formats = 360 press-ready files

A4 with bleed and marksA4 trimmedA5 with bleed and marksA5 trimmed

Crop and register impose tool

Adds or strips printer's marks and fits pages to true A4. Verified on 220 and 242-page batch files.

Cover builder

Rebuilds booklet covers to the correct width from the HCA artwork set.

Batch press app

In progress: pulls cover copy from each booklet, rebuilds covers and exports the chosen formats in one run.

Before the systems

Ten years building
brands by hand.

Freelance brand design across music, entertainment, hospitality, legal, sport and retail: identities, publications, campaigns, packaging and release artwork.

06 Freelance / Music