Light, not empty
White and panel grey carry almost everything. One true-black moment per page, and one field accent at a time, do the work three colours used to do.
A personal interface for making, noticing and connecting.
Jakob List.
A living place for work in progress, useful tools, curious experiments and the ideas that connect them.
- Mode
- Personal / public
- Base
- Italy x Germany
- State
- In motion
One person.
Many instruments.
Jakob List is not a portfolio archive. It is a readable surface for a person who moves between design, technology, business and curiosity.
The site should make the person legible before it makes the work impressive. Visitors should quickly understand how Jakob thinks, what he is exploring now and where a useful conversation might begin.
The site's interaction language remains available: spatial navigation, live scenes, tools and evidence. The difference is tone. This system is quieter, more restrained and more considered.
Personal,
with structure.
- 01
Presence before polish
Show the current point of view, not only finished outcomes.
- 02
Evidence before claims
Let projects, prototypes and tools demonstrate capability.
- 03
Useful curiosity
Experiments should invite participation or leave the visitor with a new question.
- 04
Simple doors
Every layer of the site should make the next meaningful action obvious.
- 05
Keep the human edge
Specific language, small observations and visible judgment create trust.
Quiet field.
Clear light.
Brandmark / usage
A separate piece, used on purpose
The JL badge is a signature, not a headline graphic. It never fills a hero, never repeats as pattern, and always keeps its own fixed relationship to the wordmark next to it. This is its neutral rendering — no colour, tone only.
- WhereHeader lockup, browser tab, footer credit. Not the hero, not a bullet or divider.
- Minimum size22px badge. Below that, drop the mark and use the wordmark alone.
- BackgroundWorks on white, panel grey or true black. Never on a mid-grey — contrast drops too far.
- Don'tRecolor it, stretch its proportions, rotate it, or pair it with a second mark.
Paper
Grey
Graphite
Field accents · Kelvin
One accent per field, from warm gold to cool silver — like light measured in Kelvin. Only the active field is ever coloured; greyscale carries the rest.
light.Light & Space · 2200 K
#E8B24F#9A6E17 on whitemotion.Motion · 3200 K
#F0CD8E#8E6A2C on whiteinterfaces.Interfaces · 5600 K
#FFFFFF#1D1D1F on white3D.Real-time 3D · 8500 K
#CFD9E6#51647A on whiteAI.AI Technology · 12000 K
#AFC0D6#405674 on white- UseHero word, active field dot, links, focus ring. Never large surfaces or backgrounds.
- One at a timeOnly the selected field's colour is on screen. Never combine two field colours in one view — except the Kelvin bar itself.
- On whiteUse the darker on-white value for text and icons; the light value is for dark surfaces only.
One typeface, said clearly
The system face at a few confident weights — no pairing to choose, no voice to retune. Restraint is the decision.
Reveal the thought
Use transitions to expose relationships, states and process. Avoid motion that turns a personal site into a showroom.
Type specimen / voice
Ideas become useful when they meet a real person.
San Francisco / system sans — regular & semiboldCarried,
not just shown.
The mark and voice held to real material — letterhead and business cards — built from the same tokens as the live site, so Billing's invoices and this page never drift apart.
Invoice letterhead
The real R-00010 invoice, full page — DIN 5008 Form A, logo and discipline line full width, sender eyebrow and recipient in the Anschriftfeld for a C6/5 window envelope.
See it live in Billing
Jakob ListExperience Design · UX/UI Design · 3D Motion Design
Business card — front
Name and discipline only — same two-line pattern as the footer credit, same 5px rhythm between the lines.
Konrad-Broßwitz-Straße 45
60487 Frankfurt am Main
+49 176 85634904
info@jakoblist.com
jakoblist.com
Business card — back
Contact only, left-aligned, no mark — the front already signed it.
A site that
keeps moving.
Current signal
What Jakob is thinking, making or looking for right now.
Start with the personSelected work
Projects as stories, with decisions and outcomes visible.
Evidence over archiveExperiments
Interactive prototypes, tools and unfinished questions.
Participation is proofNotes and signals
Short observations, references and useful connections.
Small but specificContext
A compact human profile, capabilities and ways to work together.
Make contact easyPrivate workspace
Planning, finance, imagery, projects and operational systems.
Private by defaultFunctional,
with feeling.
Live surface / 01Listening
Current signal
Open the page with a thought, a question or a piece of work. Let visitors choose their depth.
From direction
to website.
01
Approve the voice
Confirm the personal positioning, palette and type relationship.
Design review02
Build the shell
Translate the navigation, rail, responsive rules and accessibility states.
Interaction prototype03
Place real material
Bring in projects, experiments, tools and current signals.
Content pass04
Release in layers
Launch the personal surface first, then expose deeper tools deliberately.
Production rollout