Hello,
moi c'est Pierre. I'm Pierre.

Me connaîtreAbout me

Comment je travailleHow I work

Je pense en systèmesI think in systems

Plutôt qu'empiler des écrans isolés, je construis des design systems cohérents et scalables. Ce qui tient dans le temps prime sur l'effet immédiat.Rather than stacking isolated screens, I build coherent, scalable design systems. What lasts matters more than the quick effect.

Je conçois pour le codeI design for the code

Une maquette qui ne tient pas à l'intégration ne m'intéresse pas : je conçois des interfaces réalisables, parce que je sais ce qu'il y a derrière.A mockup that won't survive implementation doesn't interest me: I design interfaces that can actually be built, because I know what's behind them.

L'humain avant l'écranPeople before pixels

Ma formation en psychologie m'a laissé un réflexe : chercher le biais cognitif, le vrai besoin, la façon dont les gens pensent — avant de poser le premier pixel.My psychology background left me a reflex: look for the cognitive bias, the real need, the way people think — before placing the first pixel.

Le déclencheurThe trigger

J'ai passé trop de temps à me battre contre les frameworks CSS. Tailwind me demandait d'apprendre une syntaxe pour exprimer des choses que je savais déjà écrire en CSS ; Bootstrap imposait son esthétique avant même que j'aie posé un token. Dans les deux cas, le framework arrivait avec ses décisions, et mon design system devait s'y plier. J'ai voulu inverser le rapport : un socle qui part de mes tokens, pas des siens. Nanabrook est né de cette frustration, en mars 2026.I spent too much time fighting CSS frameworks. Tailwind asked me to learn a syntax for things I already knew how to write in plain CSS; Bootstrap imposed its aesthetic before I had even defined a token. In both cases the framework arrived with its own decisions, and my design system had to bend to them. I wanted to reverse that relationship: a foundation that starts from my tokens, not its own. Nanabrook was born from that frustration, in March 2026.

Une couleur, tout le systèmeOne color, the whole system

Le principe tient en une ligne : on déclare --brand-primary, et Nanabrook dérive le reste. La palette complète, les surfaces, les contrastes de texte, le mode sombre et les 35 composants s'alignent automatiquement. La couleur secondaire elle-même est calculée si on ne la fournit pas — un décalage de 150° sur la roue chromatique. Tout repose sur l'espace colorimétrique oklch, qui permet de faire varier luminosité et teinte sans produire les couleurs ternes qu'on obtient en dérivant du HSL.The principle fits on one line: declare --brand-primary, and Nanabrook derives the rest. The full palette, surfaces, text contrasts, dark mode and all 35 components align automatically. The secondary color is computed if you don't supply one — a 150° shift on the color wheel. It all rests on the oklch color space, which lets you vary lightness and hue without producing the muddy colors you get when deriving from HSL.

Le nomThe name

Nanabrook doit son nom à Brookesia nana, le plus petit caméléon du monde : vingt-neuf millimètres. Le parallèle s'est imposé — un framework minuscule, 188 Ko une fois minifié, qui change de couleur pour s'adapter à son environnement.Nanabrook is named after Brookesia nana, the world's smallest chameleon: twenty-nine millimetres. The parallel was hard to resist — a tiny framework, 188 KB minified, that changes color to match its environment.

En conditions réellesIn production

Le site que vous parcourez tourne sur Nanabrook. C'est la meilleure façon que j'ai trouvée d'éprouver un design system : l'utiliser en production, buter sur ses angles morts, corriger. Publié sous licence MIT sur npm et distribué via jsDelivr, il dépasse aujourd'hui les 1 900 téléchargements.The site you are browsing runs on Nanabrook. It is the best way I have found to stress-test a design system: use it in production, hit its blind spots, fix them. Published under the MIT license on npm and distributed through jsDelivr, it has now passed 1,900 downloads.

ContexteContext

Pour répondre aux besoins croissants en matière de cohérence et de performance des applications métiers de l'UPJV, j'ai conçu un Design System complet et documenté. L'objectif : créer un cadre de référence commun pour garantir une expérience utilisateur fluide et homogène, tout en optimisant les processus de design et de développement. En tant qu'UX/UI designer, j'ai piloté ce projet en réalisant un audit des interfaces existantes, en recueillant les besoins des équipes et en définissant les styles fondamentaux — couleurs, typographies, grilles — avant de concevoir une bibliothèque de composants modulaires et réutilisables.To address the growing need for consistency and performance across UPJV's internal applications, I designed a comprehensive, documented Design System. The goal: create a shared reference framework ensuring a smooth, homogeneous user experience while streamlining design and development workflows. As UX/UI designer, I led this project by auditing existing interfaces, gathering team requirements, and defining core styles — colors, typography, grids — before designing a modular, reusable component library.

Les stylesStyles

J'ai travaillé sur l'unification des styles visuels : palette de couleurs structurée et accessible, hiérarchie typographique précise, et système de grilles basé sur des multiples de 8 points. Ces fondations garantissent une expérience cohérente à travers toutes les applications métiers tout en véhiculant l'identité de l'UPJV.I worked on unifying visual styles: a structured, accessible color palette, precise typographic hierarchy, and a grid system based on 8-point multiples. These foundations ensure a consistent experience across all internal applications while expressing UPJV's identity.

Les composantsComponents

J'ai conçu une bibliothèque de composants réutilisables et modulaires couvrant les besoins essentiels : boutons, champs de formulaire, cartes, barres de navigation. Chaque composant a été pensé pour s'adapter à une variété de contextes tout en restant cohérent avec les styles définis, avec une attention particulière à l'ergonomie et à l'accessibilité.I designed a reusable, modular component library covering essential needs: buttons, form fields, cards, navigation bars. Each component was designed to adapt to a variety of contexts while remaining consistent with the defined styles, with particular attention to ergonomics and accessibility.

Une signature pour chaque projetA signature for each project

Le logo est souvent le premier contact entre une marque et son public — une forme, une couleur, un caractère typographique qui doit tout dire en un instant. Cette collection réunit des identités visuelles conçues pour des clients aux univers très différents : restauration, prêt-à-porter, édition, tech, institution. Chaque projet a démarré par une phase d'exploration approfondie — moodboards, recherches sémantiques, esquisses — avant d'aboutir à une forme épurée, distinctive et pérenne.A logo is often the first contact between a brand and its audience — a shape, a color, a typeface that must say everything in an instant. This collection brings together visual identities designed for clients from very different worlds: food, fashion, publishing, tech, institutions. Each project started with an in-depth exploration phase — moodboards, semantic research, sketches — before arriving at a refined, distinctive and lasting mark.

MéthodeMethod

Chaque logo naît d'une question simple : qu'est-ce que cette marque veut faire ressentir ? La réponse guide chaque décision — le choix d'une typographie serif ou sans-serif, d'une forme géométrique ou organique, d'une palette sobre ou affirmée. Le processus inclut systématiquement des tests de lisibilité à toutes les tailles et sur tous les supports, du favicon au panneau grand format.Each logo starts from a simple question: what should this brand make people feel? The answer guides every decision — serif or sans-serif, geometric or organic forms, a restrained or bold palette. The process systematically includes legibility tests at all sizes and across all media, from favicon to large-format signage.

ContexteContext

De 2021 à 2022, j'ai intégré Cimentub en alternance en tant qu'UI designer. Spécialisée dans la fabrication de produits en béton préfabriqué pour les infrastructures VRD (voirie et réseaux divers), l'entreprise souhaitait moderniser son image pour mieux refléter son savoir-faire et se différencier sur un marché concurrentiel. Ma mission : refondre intégralement l'identité visuelle, créer les supports de communication associés, et concevoir un site web à la hauteur de cette nouvelle image.From 2021 to 2022, I joined Cimentub as an apprentice UI designer. Specializing in the manufacture of precast concrete products for civil engineering infrastructure, the company wanted to modernize its image to better reflect its expertise and stand out in a competitive market. My mission: completely redesign the visual identity, create all associated communication materials, and design a website worthy of this new image.

Refonte de l'identité visuelleVisual identity redesign

Le chantier a débuté par une refonte totale du logo. L'objectif était de moderniser la marque tout en conservant ses valeurs historiques — solidité, fiabilité, ancrage territorial. Le nouveau signe graphique joue sur la géométrie du matériau béton, avec une typographie affirmée et une palette de couleurs plus contemporaine. Ce logo est ensuite décliné sur l'ensemble des supports, print et digital.The project started with a complete logo redesign. The goal was to modernize the brand while preserving its core values — solidity, reliability, territorial roots. The new graphic mark plays on the geometry of concrete as a material, with assertive typography and a more contemporary color palette. This logo was then rolled out across all print and digital materials.

Charte graphique & supports printBrand guidelines & print materials

Une charte graphique complète a été élaborée pour garantir la cohérence visuelle sur tous les canaux. Elle définit les couleurs, les typographies, les règles d'utilisation du logo et les éléments graphiques secondaires. Dans la foulée, j'ai produit plusieurs supports print : cartes de visite, panneau de chantier, étiquettes produits et brochures commerciales.A comprehensive brand guidelines document was developed to ensure visual consistency across all channels. It defines colors, typography, logo usage rules and secondary graphic elements. I then produced several print materials: business cards, construction site sign, product labels and commercial brochures.

Site webWebsite

Le projet s'est conclu par la conception d'un site web moderne et entièrement responsive. Pensé pour répondre aux besoins des clients BTP, le site valorise les gammes produits, les références chantiers et l'expertise technique de Cimentub. L'accent a été mis sur la clarté de navigation, la hiérarchie de l'information et la cohérence avec la nouvelle identité visuelle.The project concluded with the design of a modern, fully responsive website. Built to serve construction industry clients, the site showcases Cimentub's product ranges, project references and technical expertise. The focus was on clear navigation, information hierarchy and consistency with the new visual identity.

ContexteContext

Aerostat Palace est un groupe de rock français, formé à Amiens en 2023. Leur univers musical fusionne les mélodies pop avec l'énergie brute du rock, une dualité qui devait se retrouver dans leur identité visuelle. Ma mission : concevoir un logo fort et une esthétique cohérente qui accompagne leur communication sur tous les supports — pochettes, affiches, merchandising.Aerostat Palace is a French rock band formed in Amiens in 2023. Their musical universe fuses pop melodies with the raw energy of rock — a duality that needed to come through in their visual identity. My mission: design a strong logo and a cohesive aesthetic to support their communication across all materials — covers, posters, merchandise.

Conception du logoLogo design

Le logo s'articule autour d'une forme distinctive qui évoque l'esthétique des amplificateurs des années 60 — les Vox, les Fender, ces objets qui ont façonné le son du rock. La typographie joue sur le contraste entre la solidité de la structure et la légèreté des courbes, reflétant l'équilibre entre puissance et mélodie qui caractérise le groupe.The logo is built around a distinctive shape evoking the aesthetic of 1960s amplifiers — the Vox, the Fender, objects that shaped the sound of rock. The typography plays on contrast between the solidity of the structure and the lightness of curves, reflecting the balance between power and melody that defines the band.

DéclinaisonsVariations

L'identité a été déclinée sur l'ensemble des supports de communication du groupe : pochettes de singles, affiches de concerts, médiators personnalisés et dossier de diffusion. Chaque support respecte la cohérence graphique établie tout en s'adaptant aux contraintes spécifiques du format — de la petite surface d'un médiator à la grande lisibilité d'une affiche.The identity was rolled out across all of the band's communication materials: single covers, concert posters, custom picks and a press kit. Each material maintains the established visual consistency while adapting to the specific constraints of the format — from the small surface of a pick to the large legibility of a poster.

ContexteContext

Le CSIESR (Comité des Services Informatiques de l'Enseignement Supérieur et de la Recherche) organise chaque année ses Assises, un congrès réunissant les professionnels des systèmes d'information de l'enseignement supérieur français. Pour l'édition 2026, accueillie au Club Med de La Palmyre sur la côte atlantique, j'ai été chargé de concevoir l'identité visuelle événementielle : un système de badges par profil de participant et un modèle de présentation PowerPoint à destination des intervenants.The CSIESR (Committee of Information Services for Higher Education and Research) organizes its annual conference bringing together IT professionals from French higher education institutions. For the 2026 edition, held at the Club Med in La Palmyre on the Atlantic coast, I was tasked with designing the event visual identity: a badge system by participant profile and a PowerPoint presentation template for speakers.

Direction artistiqueArt direction

La direction artistique s'est construite autour du lieu : La Palmyre, ses dunes, son phare et l'Atlantique. Le moodboard a orienté les choix vers une palette bleu marine / bleu ciel / jaune ocre, des motifs vagues en arrière-plan et une illustration du phare local en élément graphique signature. L'identité existante du CSIESR — son logo pixellisé coloré — a été intégrée comme point d'ancrage institutionnel.The art direction was built around the venue: La Palmyre, its dunes, its lighthouse and the Atlantic ocean. The moodboard guided the choices towards a navy / sky blue / ochre yellow palette, wave patterns as background and an illustration of the local lighthouse as a signature graphic element. The existing CSIESR identity — its colorful pixelated logo — was integrated as an institutional anchor.

Système de badgesBadge system

Trois profils de participants, trois variantes de badges : Administrateur (rose), Partenaire (vert), Congressiste (bleu ciel). Chaque badge reprend la même structure — logo, nom, organisation, lieu et dates — avec une bande de couleur en pied de badge pour différencier visuellement les accès et statuts. Le fond ondulé bleu assure la cohérence visuelle de l'ensemble.Three participant profiles, three badge variants: Administrator (pink), Partner (green), Congress attendee (light blue). Each badge follows the same structure — logo, name, organization, venue and dates — with a color band at the bottom to visually differentiate access levels and statuses. The blue wavy background ensures visual consistency throughout.

Modèle PowerPointPowerPoint template

Un modèle de présentation a été conçu pour les intervenants du congrès. Il reprend les codes graphiques de l'événement : fond blanc épuré, illustration du phare en élément décoratif, typographie structurée et bandeau de couleur pour les informations contextuelles. Le modèle est pensé pour être simple à utiliser tout en garantissant une cohérence visuelle entre toutes les présentations.A presentation template was designed for conference speakers. It carries the event's graphic codes: clean white background, lighthouse illustration as decorative element, structured typography and color banner for contextual information. The template is designed to be simple to use while ensuring visual consistency across all presentations.