Design system, Édition 2026Représentation permanente

Le Chat-Pitre

Langage visuel, mid-century illustré. Chats géométriques flat color à la Charley Harper sur palette saturée jewel-tone. Newsreader (serif chaud) + Manrope (body) + JetBrains Mono.

n° 01

Palette

Cinq couleurs structurelles + quatre jewel-tones festives.

structurelles, partout

cp-paper

#FFF4D9

Fond unique, crème chaud

cp-paper-deep

#F7E7BA

Crème profond, sections alternées

cp-ink

#0A0A0A

Texte principal

cp-ink-soft

#2F2A26

Texte secondaire chaud

cp-mute

#6F6A64

Texte estompé, états passés

accents jewel-tone, les couleurs qui font la joie

cp-cobalt

#1A4B8E

Primaire institutionnel : comptes, liens

cp-paprika

#C9532E

Accent festif : CTA, alerte, focus

cp-canari

#F4C20D

Soleil : highlights, joie pure

cp-feuille

#2E7D3D

Vert vif, statuts positifs

Paprika fait l'action festive (CTA, accents). cobalt joue le rôle institutionnel (comptes, liens calmes). canari pour les highlights solaires. feuille pour les statuts positifs.

n° 02

Typographies

Une voix chaude pour les titres, une voix lisible pour le corps.

Display, Newsreader

.font-display · variable + italique

Hero, titres de section, noms de pensionnaires italiques.

Maison de villégiature

Madame Cliquot · européenne · 6 ans

Body, Manrope

.font-body · variable

Corps de texte, navigation, formulaires, étiquettes.

Le corps de texte courant : lisible, géométrique-chaleureux, sans afféterie. Manrope est un grotesque humaniste qui se lit bien aux petits corps tout en gardant du caractère aux grands.

Mono, JetBrains Mono

.font-mono · 400 / 700 + italique

Mentions catalogue, numéros, métadonnées.

N° 047, Rue de la Chartreuse, Bordeaux, Est. 2024

n° 03

Boutons

Paprika pour l'action, cobalt pour l'alternative, encre pour le danger.

n° 04

Chats géométriques

Quatre palettes × quatre poses, dérivées du nom du chat : chaque pensionnaire reçoit une combinaison stable.

quatre palettes, pose assise

cobalt
paprika
canari
feuille

quatre poses, palette cobalt

sitting
z z z
sleeping
standing
watching
n° 05

Statuts de séjour

Les six états, chacun avec sa couleur signifiante.

En attenteQuestion poséeAcceptéeRefuséeAnnuléeTerminée

Cobalt = attente sereine. Paprika = action requise du client. Feuille = confirmation joyeuse. Encre = refus net. Mute = annulé.

n° 06

Champs de formulaire

Trait noir fin, focus paprika, indication italique.

Renseignée sur votre fiche.

Le mot de passe doit faire au moins 8 caractères.

n° 07

Encadrés colorés

Variantes regular / deep / cobalt / paprika / feuille / ink.

regular, cadre encre sur paper

« Le ronron est la musique de fond de cette maison. »

cobalt, bloc institutionnel

Pour appeler à l'ouverture d'un compte ou à l'accès à une fiche.

paprika, moment fort

Pour les CTA principaux, les alertes, les moments où il faut que le regard se pose.

feuille, confirmation positive

Pour les acceptations, les validations, les « tout est bon ».

n° 08

Fiches de pensionnaires

Illustration dérivée du nom, critères d'admission en ✓/✕.

Pensionnaire n° 003

Madame Cliquot

Européenne tricolore · 6 ans

  • Stérilisé
  • Identifié
  • Vaccins à jour
  • Sociable
Pensionnaire n° 012

Maestro

Chartreux · 3 ans

  • Stérilisé
  • Identifié
  • Vaccins à jour
  • Sociable
Pensionnaire n° 024

Salami

Roux des toits · 1 an

  • Stérilisé
  • Identifié
  • Vaccins à jour
  • Sociable