Brand & Systems

A Brand Team of One

Concept: a brand team usually needs six people. I built the systems to run one alone, and tested them on Porta, a delivery brand I made up.

Client
Self-initiated
Year
2026
Role
Voice, design system, website and image system, built with AI
What I did
  • Brand system
  • Tone of voice
  • Design system
  • Image system
  • Website
  • AI workflow

One person, five parts. Voice writes, Spine designs, Hands builds, Eyes makes the pictures, Heart chooses. A year ago I wrote that this was coming. Here it is at work.

04 · EYES01 · VOICE03 · HANDS02 · SPINE05 · HEART

Four systems and a heart

01

Voice

Writes in Porta’s tone. This page was written with it. The rules come from ten lines that set the bar.

Site
Here today. At your door by five.
Product
You pick the hour. We knock inside it. If we can’t, you hear first.
Film
Door 2,000 this year. Same knock.
Long form
We started with one van and one street. The street told us what to fix.

Five files hold the tone. Every edit I make becomes a rule. The files are in the repo.

FIVE FILESVOICEDRAFT · MY EDITNEW RULE
  • tone.mdnine rules, one line each
  • lexicon.mdwords to use, words banned
  • standard.mdten lines that set the bar
  • writers.mdfive writers, why each
  • log.mdevery edit, dated. Six so far

02

Spine

A design system is a skeleton. The famous ones are built and every AI model knows them, so the base is not worth reinventing. Porta’s site will run on one. What it will not have is a soul: the parts only Porta can own. That’s what the heart will build, with AI.

Base · keep
shadcn · Tailwind · Lucide · Next.jsKnown to every AI model. Whatever it gives is kept.
Soul · to design
  • Iconswhat Lucide cannot name5 built
  • Illustrationhand drawings become finished illustrations. Claude briefs, Quiver drawsnext
  • ColourPorta’s own, every value namednext
  • Typea scale with names and rolesnext
  • Motionone guideline for how everything movesnext
  • Patternsdesigned in Figma, then coded with a spec a model readsnext
  • Templatesslide, document, post, wall. Same waynext

Icon system · 5 examples built for this case study

Link
Pick up
Stock
Signal
Service bell
  • Lucide’s rules as a spec: 24 grid, 2 px line, round caps.
  • A script that drafts on the grid and refuses what is off it.

Lucide’s sixteen and Porta’s five. No seam.

The library · a glimpse

82 shown · hundreds to come · hover to pause

GUTTER 24 · 32 · 6412 COLUMNS FROM 1024
Grid
Hero
Section
Statement
Figures
Listing
Milestones
Team
Article
Form
Footer
Navigation
Cards
HEROSECTIONFIGURESSTATEMENTLISTINGFOOTER
Home
HEROFIGURESSECTIONSECTIONSTATEMENTFOOTER
Product
SECTIONMEDIATEAMLISTINGFOOTER
Careers
STATEMENTSECTIONFIGURESMEDIASTATEMENT
Deck
Phone
Tablet
porta
Web
porta
Slide
porta
Square
porta
Story
porta
A4
Deck · title
Deck · split
Deck · figures
Deck · media
Poster
Badge
Email
Signage
Wall
Document
# hero
media   full bleed · 16:9 · render or film · always captioned
line    one · six words or fewer · display · bottom left
caption mono · bottom right · says what the media is
nav     on top · cream on media
never   a second line · a button · text over a face
hero.md
ASPEKTA 300 · GEIST MONO 400
Type · pairing
60 CHARACTERS, NO MORE
Type · measure
DISPLAY −2%BODY 0
Type · tracking
300 · HEADLINES400 · BODY500 · BUTTONS
Type · weights
LABEL · HEADLINE · BODY
Type · hierarchy
17:00NUMERALS · A UNIT · A DATE OR A PLACE
Type · numerals
Colour · pairs
INK 100INK 70 · TEXTINK 10 · LINES
Colour · tints
CREAM ON INK
Colour · cream
4848
Space · rhythm
GUTTER 24 · 32 · 64
Space · gutter
350 MS · WHAT YOU DID1 S · FILM
Motion · durations
ONE LINE · INK 10% · NO SHADOW
Shape · hairline
16202432
Icons · sizes
Media · scrim
RESTHOVERPRESSEDOFF
Button · states
Hover · lift
Hover · underline
Hover · arrow
Hover · fill
Hover · caption
Hover · open
Button · hover
Input · focus
Location
Limassol
Select
Section one

Two lines of text under the heading, no more.

Section two

Two lines of text under the heading, no more.

Section three

Two lines of text under the heading, no more.

Accordion · hover opens
Card · hover
Tags · click
NameSiteStatus
Item oneNicosiaOpen
Item twoLimassolOpen
Item threeLarnacaClosed
Table · row hover

Delete this draft?

You cannot undo this.

Dialog
Saved.Undo
Toast
Pagination · hover
Tabs · hover
Breadcrumb
Caption, mono, says what the media is
Figure · hover

12

Vans

3

Cities

Figures
One line, quoted, with the source under it.
Source · 2026
Quote
Switch · click
Checkbox · click
Search · focus
Uploading60%
Progress
  1. Brief
  2. Draft
  3. Review
  4. Ship
Stepper

Nothing here yet.

Add the first
Empty state
Hover meA short note
Tooltip · hover
AKLMJT+9
Avatars
Loading
Mobile sheet

Every piece is built the same way. A spec a model can read. A script that drafts to it. A check that refuses what breaks it. Me, choosing.

03

Hands

Ships the website. I am not a developer. AI writes the code, I direct it, check it and ship it.

Pages
From Spine’s patterns and Voice’s words, with Claude Code, in the brand’s own stack.
Content
Sanity holds the words and the images. AI and I can edit them. No developer needed.
Checks
Nine widths, light and dark, before every push. Scripts check the page. I check the design.
Proof
This page. Built in one day. The check is in the repo.

AI builds it. The checks run. I look. Then it goes live.

04

Eyes

Makes the pictures and the films. The look is written down once, so every image AI makes comes out in Porta’s style. Six prompts, six images, one look.

The doorstep
The doorstep · 50 mm
The shop
The shop · 35 mm
Five o’clock
Five o’clock · 50 mm
The dock
The dock · 35 mm
The key
The key · 85 mm
Breakfast
Breakfast · 50 mm
PaletteC3B5A4A0988C8579696F63532A2122A092874840390A0809B8302A
LightNatural · one direction · 4:1Early or late. Deep warm shadows, clean highlights.
Camera35 · 50 · 85 mmf/2 to f/2.8, eye level, handheld.
Grade#141110 to #F2EDE4 · 4500 K · fine grain
Read the system prompt
PORTA IMAGE SYSTEM · v1.1 · lifestyle

ROLE
You are the photographer and colourist for Porta, a same-day delivery company. You shoot the people Porta works for: the customers, their staff, their mornings and evenings, the life that goes on while the work gets done. Documentary, not advertising. Every image looks like one photographer shot it on one long assignment: same eye, same light, same grade. The user gives you the moment. You never change the look.

0 · FEEL
Alive. Warm, honest, awake. A real moment with intent in it: someone mid-action, mid-sentence, mid-step. Not posed, not sleepy. Nobody performs for the camera, but something is happening. The frame breathes, and it has depth: real blacks, real light, real colour.

1 · PALETTE (sampled from the reference library)
Warm greys           #C3B5A4 light · #A0988C mid · #857969 deep · #6F6353 corner
Shadow core          #2A2122
Oat                  #A09287 · shade #7A6E64
Charcoal             #484039 · shade #2E2825
Black                #0A0809
Cardboard            kraft brown
Concrete, steel, pale timber: pulled toward the warm greys above.
Rule: the frame leans warm grey, oat and charcoal. Real colour stays real inside that: skin, timber, bread, a sky at the edge of a street. Nothing is desaturated into dust. No colour casts. No strong colour on clothing, signage or packaging. One accent is allowed on the brand, the red of Porta’s parcel tape, #B8302A, only when it is in the scene.

2 · LIGHT
Natural light, one clear direction, with shape. Early morning or late afternoon sun through a window, a door, a street. Highlights bright and clean, shadows deep and warm, a real ratio between them, around 4:1. Overcast only when the scene needs it, and even then the light comes from one side.
Indoors: daylight from one side, interior lamps allowed as warm points behind.
Outdoors: low sun, long shadows, a bright edge on hair and shoulders.
Banned: flash, mixed white balance, coloured gels, neon, flare, haze, rays, bloom, HDR, flat shadowless light.

3 · CAMERA
Full-frame. 35 mm for places, 50 mm for scenes with people, 85 mm for hands and faces.
f/2 to f/2.8. Shallow depth of field, backgrounds melt, foregrounds sometimes soft.
Eye level, or the height of a person standing beside the subject. Handheld, a little imperfect, never tilted for effect.
Focus on the nearest meaningful thing: a hand, a shoulder, an edge. A little motion blur on moving hands or feet is welcome.
Modern neutral lens, no vignetting, no distortion.

4 · GRADE
Black point #141110, real and deep. White point #F2EDE4, clean, never clipped.
Contrast full, a confident S-curve, midtones warm.
Colour balance warm, 4500 K, tint neutral. Saturation natural, 100 percent, never pushed, never pulled. Skin natural and alive.
Fine uniform grain, like 400 ISO colour negative film. No vignette added, no halation, no split toning, no faded film look, no matte blacks.

5 · PLACES
Where the clients live and work: a doorstep at breakfast, a kitchen, a corner shop at opening time, a bakery counter, a café, a small office at five in the afternoon, a train platform, a quiet street in the old town, a garden, a balcony, a pharmacy, a hotel lobby, a hospital corridor.
Real and lived in: a parcel on a step, a coat on a chair, bread on a counter. Clean enough, never staged. No clutter, no mess.

6 · PEOPLE
The clients and the people they serve: a shop owner, an operations manager, a nurse, a hotel receptionist, a parent, a grandparent, a delivery customer. Mixed ages, mixed backgrounds. Doing ordinary things: opening up, having breakfast, signing for a parcel, leaving on time, talking to a customer, walking home. Faces allowed but natural: turned away, in profile, or looking at what they are doing. Never at the lens. No smiles for the camera.
Clothes: plain, in the palette: oat, grey, charcoal, black, white, soft denim. No logos, no slogans, no jewellery, no watches.
One or two people per frame. Three at most, and only one sharp.

7 · COMPOSITION
Subject occupies 20 to 40 percent of the frame. The rest is place and air.
Off centre, lower or outer third. Decisive crops: cut a person at the shoulder rather than shrink them.
Low, soft horizon. Lines of shelving, beams and floors lead but never dominate.
No props added. No text, labels, screens, logos, watermarks or UI readable anywhere.

8 · OUTPUT
Photorealistic. It looks shot, not rendered. 16:9 for web, 4:5 for social, 1:1 when asked. If any instruction conflicts with sections 1 to 7, follow this document and quietly adapt the moment.

The look is one file. Each picture is one line on top of it. GPT Image makes three versions, I keep one. For film, Seedance 2.5 turns the kept image into a clip, and I cut the clips together.

05

Heart

Me. The part that does not run on its own. I write the rules, I look at every output, and every miss becomes a rule.

Picks
Three of everything, one kept. Taste is not automated.
Learns
Better on Friday than on Monday.
First ninety days
Listen, then build, then run. Thirty days each.

A year ago I said one designer with the right systems could do a team’s work. This page was built in one day.

More work

More like this

All work