Design System

Color Tokens

--bg #F7F4EE
--ink #1A1A18
--muted #6B6860
--sage #3D5A3E
--white #FFFFFF
--border #E8E3D8
--accent #C9865B

Recipe Accent Colors

--color-green #0A9A4A
--color-pink #D01860
--color-gold #CF7C00
--color-orange #E04810

Typography

site-logo
recipe__title

Mojito

recipe__subtitle

Tropical et sain

recipe-card__title

Mojito sans alcool

recipe__section-label + recipe__rule

Section label — muted (fridge-section__title)

Spiritueux sans alcool

Body — weight 300

50 ml de Rhum Sober Spirits 0,0 %

Body — weight 400

Mocktails et cocktails sans alcool

Body — weight 500

Mon frigo

Flavor Pills

Default (unchecked)
Checked

Fridge Items

Default (unchecked)
Checked

Buttons

fridge-btn (dot hidden) Mon frigo
fridge-btn (dot visible) Mon frigo
close (default)
close (hover)
back (default)
back (hover)
site-github (default)
site-github (hover)

Recipe — Ustensiles


Rocks glass
Highball
Mule mug

Recipe Card

Filter Summary

Footer

Default (homepage / prose page)
Recipe page (with source credit)

Social Links

Default
Hover (sage)

Glass Icons

rocks
highball
collins
mule-mug
coupette
martini
margarita
vin

Recipe — Ingredients


  • Rhum Sober Spirits 0,0 % 50 ml
  • Citron vert pressé ½
  • Sirop d'agave 10 ml
  • Menthe fraîche
  • Eau pétillante 100 ml

Recipe — Steps


  1. Versez le jus de citron dans le verre

    Pressez le demi-citron directement au-dessus du verre.

  2. Ajoutez le sirop d'agave et les feuilles de menthe
  3. Complétez avec l'eau pétillante et mélangez délicatement

    Ajoutez de la glace pilée et décorez d'une feuille de menthe.

Recipe — Tips


Pour un mojito plus intense, laissez infuser les feuilles de menthe quelques minutes avant d'ajouter les glaçons. Évitez d'écraser la menthe pour ne pas libérer d'amertume.

App Icon

Default (140px, border-radius 22%) Icône Kanpai Ø
Small (64px) Icône Kanpai Ø

Content Card

Default (.about-card)

Pour l'invité

Se laisser guider par les goûts

Les pilules de saveurs filtrent les recettes sans savoir ce qu'on cherche.

Grid 2 colonnes (.about-duo)

Pour l'invité

Se laisser guider

Parcourir comme un menu de bar.

Pour l'hôte

Partir du frigo

Voir ce qu'on peut faire avec ce qu'on a.

Bordered List

Default (.about-tech-list)
  • Deploy first Infrastructure validée en production avant la première feature.
  • Sobriété technique Hugo seul, zéro framework CSS, zéro npm en production.
  • CSS comme machine d'état Le panneau frigo fonctionne via :has(), sans JavaScript.