Végé
Bowl quinoa & légumes rôtis
4 personnes · 25 min
520 kcal · 600 g
It fixes the decisions that are no longer up for debate: colour, type, space, grid, shape, motion, accessibility. Every value exists in dark and light — flip the theme and everything you see re-renders from the real tokens.
Dark by default. The near-black ground lets the lime carry the action; light is a mirror, not a second system.
Food first. The UI stays neutral so the dish photos are the only uncontrolled colour.
One accent per view. Lime = action, mint = progress, coral = alert. Never two roles for one colour.
The original system is mobile. The web adds a 4/8/12-column grid with a 1240px container, two extra type steps for large screens, hover and keyboard focus states, and an elevation scale.
Nothing is removed from the existing mobile system.
Step 500 is the flat brand colour, identical in both themes. The dark steps carry text on light grounds (the *-ink tokens); the light steps are used as grounds.
500 is the flat brand colour in both themes (CTA, active tab, progress ring). 900 is --lime-ink: lime text and borders in light mode (6.9:1).
500 is progress, links and the focus ring. 800 is --mint-ink (6.1:1). 100–200 are positive alert grounds.
500 is alerts, badges and notifications. 800 is --coral-ink (6.9:1). Never used for body text.
500 is secondary text, field borders and inactive states. Steps 700–1000 are dark-mode surfaces, 100–200 light-mode ones.
A component never hardcodes a hex — it uses the token. That is what lets the light theme exist without duplicating a single component.
| Token | Dark | Light | Usage |
|---|---|---|---|
| --bg | #121212 | #F7F5EF | Page ground |
| --bg-raised | #191919 | #FFFFFF | Cards, panels, nav bar |
| --bg-raised-2 | #212121 | #ECE9DF | Fields, inactive chips, tracks |
| --text | #F5F5F0 | #15150F | Primary text |
| --text-dim | #B9B9B4 | #5B5A50 | Descriptions, metadata |
| --gray | #6B7280 | #64635A | Labels, inactive icons, borders |
| --line | rgba(…,.08) | rgba(…,.12) | Separators and card outlines |
| --lime | #C4F135 | #C4F135 | Primary action (flat) |
| --lime-ink | #C4F135 | #4B5E12 | Lime as text or border |
| --mint | #2DD4BF | #2DD4BF | Progress, focus (flat) |
| --mint-ink | #2DD4BF | #0E6B5F | Mint as text or link |
| --coral | #FF6B4A | #FF6B4A | Alert, badge (flat) |
| --coral-ink | #FF6B4A | #9C321B | Coral as text or border |
Poppins ExtraBold for the brand voice and headings, Manrope for everything else, JetBrains Mono for quantities and units — tabular figures stop the text jumping when a value changes.
Manrope in a heading with Poppins in the body: the hierarchy flattens. Titles in Poppins, descriptions in Manrope, quantities in mono.
No value off the scale. If a spacing 'doesn't quite land', it's the composition to revisit, not the scale.
A card never mixes two surface radii.
In dark, elevation reads through the surface; in light, through the shadow.
Nothing lasts longer than 240ms: a cooking app gets read with dirty hands.
Six variants, one role each. Only one primary per view. Hover, focus, pressed, loading and disabled are shown for every variant.
Seven states. The focus ring is mint and appears instantly; error and success carry both a border and a hint, never colour alone.
Empty state uses the placeholder in gray
Adresse incomplète
Foyer rejoint
Géré par l'admin du foyer
Recipe cards lift 3px and zoom the photo 1.04 on hover. Selected carries an accent border and a check; unavailable drops to 55% and stops responding.
4 personnes · 25 min
520 kcal · 600 g
2 personnes · 30 min
640 kcal · 450 g
6 personnes · 40 min
480 kcal · 900 g
1 personne · 10 min
510 kcal · 320 g
The generic card takes the same hover elevation when it is clickable. It uses the medium radius; panels use the large one.
Panels carry more padding and the 20px radius. They group cards and controls rather than content of their own.
Three tones, because the system gives one meaning per colour. Errors take role=alert and interrupt; the rest wait their turn. `position="fixed"` pins one to the bottom of the viewport for something wrong with the page as a whole.
Cette page ne répond pas
Ajoute des recettes au planning et les ingrédients arriveront ici automatiquement.
La connexion a été interrompue. Tes recettes enregistrées restent disponibles hors ligne.
Cette page ne répond pas