Editorial clarity
Large type introduces the personality, then compact sections keep technical information easy to scan.
Bonjour
Portfolio system
A compact reference for the visual language, interface rules and accessibility standards behind this portfolio.
Version/June 2026
Production ready
01/Foundations
June 2026
The portfolio keeps a strong editorial personality while staying direct and recruiter-friendly.
Large type introduces the personality, then compact sections keep technical information easy to scan.
Animations support orientation and feedback. They should never hide content or make navigation slower.
Every page must make the role, work quality, stack and contact path obvious in a few seconds.
02/Typography
June 2026
Type carries the system: practical text first, expressive identity in controlled moments.
Body, interface and dense information
Full-stack developer crafting sharp, reliable interfaces.
Expressive accents and portfolio identity
Thomas Gassmann
Decorative highlights used with restraint
Selected works
03/Colors
June 2026
The palette stays narrow, neutral and high contrast, with alpha variations reserved for interface states.
| HEX | #d1d1c7 |
| TOKEN | oklch(85.79% 0.0136 106.68deg) |
Backgrounds, surfaces and large type highlights.
80%
50%
25%
| HEX | #6e645a |
| TOKEN | oklch(50.96% 0.02 67.35deg) |
Secondary labels, borders and quiet interface states.
80%
50%
25%
| HEX | #383632 |
| TOKEN | oklch(33.35% 0.0074 84.59deg) |
Dark sections, contrast blocks and supporting panels.
80%
50%
25%
| HEX | #0a0a0a |
| TOKEN | #0a0a0a |
Main text color and high contrast UI elements.
80%
50%
25%
04/Components
June 2026
Components should stay clear, compact and accessible without fighting the visual identity.
Use clear labels for actions. Icon-only buttons need accessible labels and strong focus states.
Cards should expose the work title, tags and destination quickly. Tags stay compact and readable.
Contact inputs keep visible labels, explicit errors and enough spacing for mobile users.
05/Motion
June 2026
Motion gives orientation and response. It should stay short, readable and optional.