TIME CAPSULE TAPES
Portfolio · Design study

Encode the taste once. Let AI do the repetition.

Time Capsule Tapes is a documentary photography studio in Malta. This page gathers the design work behind it in one place — the same content as the repository README, laid out on the studio's own canvas.

The through-line
One method, three pieces.

Write the taste down once, with enough precision that a machine can carry it. Then spend human attention only on the decisions that actually need a person. A photographer should be choosing pictures, not nudging the same margin across twenty files.

The method looks the same in all three pieces here. A small, strict system sits at the centre; everything else is generated from it. The website, the content tool and the editing layer were each built so that changing one rule updates everything downstream. The banners below make the point literally — they were rendered from the brand's own stylesheet, so they are not a picture of the system. They are the system, run once more.

What that buys is pace. When the rules live in one place, a new section, a new card, or a whole new colour mode is a small edit instead of a long afternoon. The studio could move quickly without the work drifting out of character.

What is inside
Four pieces, one system.
01

The website

A documentary brand that reads as a warm archive caught on film.

02

The design system

One file that holds every colour, type and motion decision, with a copy-ready standard at the end.

03

PetrusCMS

A database-free content manager built into the site, so the owner edits in place and nothing depends on a platform.

04

The card engine

A studio that turns one spreadsheet into print-ready social cards in every format the brand uses.

01 · The website — a documentary brand, built to move fast

The site is built to feel like a warm archive on film rather than a tech product. The canvas is a warm fabric gradient over a deep red, never flat black. Fine grain sits over everything at soft light. Headlines are set in Chivo, uppercase and tight. Metadata reads like a contact sheet in Chivo Mono. One oxide red does all the accenting.

The move a visitor actually feels is the background. Full-bleed photographs cross-fade from section to section as you scroll, and the type recolours with them — warm paper over the dark sections, warm ink over the limestone ones. The identity holds in both modes because only the text tokens change. The grain, the vignette and the layout stay put.

It moved quickly because the look was written down before it was built. Spacing, type scale, easing and the accent treatment were fixed once, so each new section was an assembly job, not a fresh negotiation.

The design system — one standard, every pixel accountable to it

The whole brand lives in a single page. It names the exact palette and tokens, the two type families and their scale, spacing, the signature accent, the motion easing, and the anti-patterns to avoid. At the end it carries the written standard as copyable text, so a designer or an assistant can lift the rules verbatim instead of guessing from screenshots.

This is the part that makes the pace possible. The colours and type in the banners on this page were pulled from these exact values. Change a token in the standard and the next render inherits it. The standard is the source, the rest is output.

The Time Capsule Tapes design standard, dark mode
docs/design-standard.html · dark mode

Dual by construction. Only the text tokens swap.

Most of the site is warm paper over the dark fabric gradient; the limestone sections invert to warm ink. The grain, the vignette and the layout never move — here is one section in both modes, split down the diagonal, and the written standard embedded as a copyable code window at the end of the page.

The same section in both modes, split diagonally: paper on dark, ink on limestone
paper on dark · ink on limestone
The written DESIGN.md standard, embedded as a copyable code window at the end of the page
DESIGN.md · copy or download
02 · PetrusCMS — a database-free CMS, small enough to trust

The site needed to be editable by its owner without handing the brand to a heavy platform. So the editing layer is a small content manager called Petrus, built into the site on flat files. No database, no framework, no build step.

PetrusCMS architecture: one JSON file, a read path and a write path
one JSON file · a read path and a write path

There is one content file at the centre, state.json, and it describes everything dynamic on the page. The read path is plain: a visitor asks for a page, PHP renders it on the server with the saved state already in the HTML, so there is no flash of default content. The write path is just as plain. The owner unlocks the page, edits text and photographs in place, and saves. Each save writes the JSON and files the previous version into a history folder, so rolling back is a step backward rather than a restore. Uploaded photographs are never deleted, which means any old version can always point at its images.

Keeping it this small is the point. The moving parts are few and named: the render, the in-browser editor, the handful of endpoints for saving, uploading and history, and the one JSON file they all agree on. There is nothing to provision and nothing to keep patched.

03 · The card engine — one spreadsheet in, forty on-brand cards out

Social posting is where a brand usually erodes, one off-template graphic at a time. The card engine removes that drift. It is a studio that reads one spreadsheet and lays out finished cards on the brand's real canvas.

Card engine pipeline: one spreadsheet in, forty on-brand cards out
one spreadsheet in · forty on-brand cards out

The content is a single TSV. Forty lines today, across five themes and six card types, from short quotes to questions, field notes and calls to action. The renderer draws each line on a true 1080 pixel canvas and refits the headline so it never overflows. At the render step a few controls switch the output without touching the words: five aspect ratios, seven brand backgrounds, four layouts, a vignette toggle. Export gives a single card or the whole set as a zip, with the fonts embedded so the files look right anywhere.

The same renderer drives the studio preview and the export, so what you arrange is exactly what ships. It also produced every banner on this page, which is the cleanest test of the tool that there is.

A round-robin of generated cards across themes, backgrounds and layouts
card engine · generated output
Repository
What is running.

The two live tools open without cloning: the design standard at /docs/design-standard.html and the card studio at /cards/.

time-capsule-tapes /
. ├── README.md ├── LICENSE ├── cards/ the card engine (open it in a browser) │ ├── index.html │ ├── app.js │ ├── styles.css │ ├── content.tsv the 40 lines that become cards │ └── media/ └── docs/ ├── design-standard.html the full brand standard, one file ├── petruscms.md how the editing layer is built └── assets/ rendered banners, diagrams and the card gallery

Type is Chivo and Chivo Mono. The accent is oxide red #9E2A14 on a warm fabric gradient. Every banner, diagram and gallery image on this page was rendered from the brand's own HTML and CSS. No stock art, no generated imagery.

Design and build by Pietro Impagliazzo for Time Capsule Tapes. Documentary family photography, based in Malta, available across Europe.

The code in this repository is released under the MIT License.

The Time Capsule Tapes name, logo, photographs and written brand are not covered by that licence and remain the property of the studio. Borrow the engineering, not the identity.