Référence
Les composants et les jetons utilisés sur le site, à reporter tels quels dans Figma.
Couleurs
Typographie
Le roi de la chips belge
Titres H1/H2, noms de produits, prix et bandeau défilant. Capitales, interlettrage resserré à −0,012 em. Jamais en corps de texte.
La police de référence est Burbank Big Condensed Black (House Industries, sous licence). Elle n'est pas fournie : déposer assets/fonts/burbank-big-cd-bk.woff2 pour l'activer. Sans elle, le site affiche Passion One Black (SIL OFL), très proche.
Boutons · badges · labels
Boutons, badges, étiquettes de champs, navigation. Capitales, interlettrage 0,08–0,2 em.
Paragraphes, descriptions produits et contenus éditoriaux. Interlignage 1,65 et largeur de ligne limitée à 62 caractères pour rester confortable à lire.
Conservée pour le mot-symbole du logo et le lettrage des sachets, afin de ne pas toucher au packaging existant. Elle ne sert plus dans l'interface.
Fluide en clamp() : 0,85 / 1,06 / 1,35 / 2,1 / 3,4 / 6 / 8,4 rem aux tailles maximales.
Composants
Le filet reprend les vraies couleurs du drapeau belge, qui ne se modifient jamais. Sur les fonds sombres, c'est le fond qui change : le drapeau est posé sur une plaque crème arrondie, ce qui rend la bande noire lisible. Même principe sur logo-nav-blanc, logo-blanc, monogramme et embleme.
États : survol (translation de 2 px + inversion), focus clavier (contour jaune 3 px, décalé de 3 px), actif (retour à la position initiale). Hauteur minimale de 44 px sur mobile.
Composants
La sauce de la mitraillette : tomate, poivron, une pointe de piment. Celle qui met tout le monde d'accord à la friterie.
Composants
Grille
Conteneur 1280 px, gouttière 48 px, grille produits en 3 colonnes.
Grille produits en 2 colonnes, hero empilé (3D au-dessus du texte), menu en burger dès 900 px.
Une colonne, gouttière 20 px, boutons pleine largeur dans le menu, cibles tactiles de 44 px minimum.
Sections : 56 → 116 px. Gouttière : 20 → 48 px. Rayons : 10 / 18 / 28 px.