A design system that fits inside 55 × 85 mm

I make a living from three trades most people hire separately: product design, front-end and graphics. In a meeting that takes two minutes to explain. On nine centimetres of card it does not: either you pick one and lie by omission, or you list all three and the card turns into a miniature résumé.

The card had to solve that, and a second, less obvious thing: prove the craft in the same object that advertises it. Nobody reads a case study off a business card; they look at it for three seconds and decide whether the website is worth opening. Those three seconds are the brief.

The card does not represent the design system: it is a printed instance of it. Nothing on it was invented for the occasion. The background is --ink, the accent is --accent, the three dots beside the roles are the three discipline colours the archive already uses on every tag, and the two typefaces are the ones you are reading right now.

Two decisions follow from that and order everything else. First: the card is dark, like the site, even though a dark card costs more to print and shows every fingerprint. Second: each face shows a trade at work instead of naming it — the front is a construction drawing, the back is code — and the third trade, graphics, is the object itself.

The front shows the logotype half-built: the grid left visible, registration marks in all four corners, the construction circles of the d and the G still there, and a caption giving the drawing its real measurement, 411 × 190. It is a card that shows the scaffolding instead of the building, because the scaffolding is what gets hired.

Below it, a flow diagram — Landing, login?, Onboarding, Catalogue, Product page — drawn in the front-end blue. Four boxes and two branches: enough for someone who works in product to recognise the trade before reading a single word, and enough for someone who does not to read it as a graphic pattern.

An accent rule closes the face, with the domain on the left and the year on the right. That rule is the same device that separates blocks on the website; here it works as a waterline.

The back opens with nine numbered lines of tokens.css, syntax-highlighted for real: the declaration of --ink and --accent, and below it a hero section with its h1. This is not typography dressed up as code — it is the fragment that actually opens this site's stylesheet, and the two values it declares are the two colours the card itself is printed in.

Then the rule, and from there the classic hierarchy of a business card takes over: the name large in Archivo, three roles in mono each with its coloured dot, the contact details, and an accent-green QR that opens this portfolio —edegregorio.com, the site you are on—. Name, trade, contact, way in. The experimental half is at the top; the half that has to work across a meeting table is at the bottom.

The three roles carry no icons and no colour labels invented for paper. They carry the same three colours this site's archive uses on every case, every filter chip and every breadcrumb. Someone who gets the card first and opens the site later arrives with the colour code already learnt; someone who does it the other way round, likewise.

A handsome design that reaches the printer with no bleed, no safe margin or still in RGB is not a design: it is the printer's problem. The artwork was closed with the same checks a client's job would get.

This project — my own portfolio — is split across three disciplines, and this page is one of the three. The diagnosis and the design of the system are in the product UX/UI audit; the system written and documented is in the EdG Design System page, with its 37 components and 57 tokens. This card is the third part: that same system, off the screen.

If you want to see where the #0b0b0c and the #d9ff4b printed on the back come from, they are declared — and copyable — in the library. The control on the right jumps between all three.