Analyse du design system

flourandwater.com

flourandwater.com is built on a mid-light canvas (rgb(222, 208, 199)). The system uses rgb(232, 199, 15) as the high-saturation accent for primary actions. Generously rounded CTAs (50%) suggest approachable, content-first design alongside gitan-latin as the primary typeface. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 61 keyframe animations plus transition-driven interactions.

Accent #e8c70f · police principale mrs-eaves

Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.

Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.

https://www.flourandwater.com/ ·extrait le 2026-07-12 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

Couleurs — rôles, sémantique & recensement complet

21 couleurs mesurées · clique une pastille pour copier

Canvas

#ded0c7

AAA 11.96:1

Ink

#191614

AAA 11.96:1

Accent

#e8c70f

Fail 1.11:1

Line

#555555

AA 4.95:1

États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

21 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

7 rôles · rendu live dans la vraie mrs-eaves (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl60px · 400

display lg

display-lg28px · 400 · ×2.14

body

body22px · 400 · ×1.27

body sm

body-sm25px · 400 · ×0.88

caption

caption30px · 400 · ×0.83

button

button25px · 400 · ×1.20

mono

mono48px · 400 · ×0.52

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement

xxs · 2px

xs · 10px

sm · 25px

md · 28px

base · 30px

lg · 37px

xl · 43px

2xl · 50px

3xl · 86px

Arrondis

none
0px

xs
5px

sm
10px

md
14px

lg
20px

xl
32px

full
9999px

Profondeur — l’élévation est extraite, pas inventée

3 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-1

shadow-2

shadow-3

Motion — courbes, transitions & keyframes réels

0 courbes d’easing · 61 keyframes · survole une tuile pour prévisualiser

61 animations keyframes extraites

spinning_animation

bounce_in_animation

row_bg_zoom_out

down_arrow_bounce

mouse-scroll-btn-roll-over

mouse-scroll-btn-roll-out

trackBallSlide

nudgeMouse

nectar_ltr_line_animation

nectar_ltr_line_animation_start

gradientTextHoverHover

gradientTextHoverOff

Composants — le vocabulaire fermé

8 familles de composants · 42 variantes comptées sur le DOM live

Composant	Variantes
cta Banner	×10
links	×10
buttons	×5
nav Links	×5
badges	×4
footer Links	×4
divider	×3
heading H2	×1

Specs de style des composants (§4)déplier

Inputs & Forms

Text Input

Background: #ffffff {colors.surface-2}
Text: #0a0a0a
Padding: 10px
Radius: 0px
Border: 1px solid border-color
Font: 48px weight 400
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1650px

header Height128px

sidebar Width0px

gap16px

container Padding0px 100px

Responsive — vrais breakpoints

25 points de rupture lus dans le CSS live

470px

479px

480px

481px

500px

576px

600px

690px

691px

767px

768px

782px

990px

999px

1000px

1025px

1050px

1199px

1200px

1299px

1300px

1425px

1500px

1600px

2600px

À faire / À éviter

14 règles applicables, verbatim de la spec

À faire

Use Silver (`#ded0c7`) as the page background — it's intentionally not pure white

Use Near-Black (`#191614`) for text — not pure black, it's warmer and more readable

Use mrs-eaves as the primary typeface — it defines the brand personality

Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use Gold (`#e8c70f`) as the primary accent — it's the brand's signature interactive color

Each card includes a top image — imagery is part of the card identity, not optional

Use a 4-column grid on desktop — density matters for this content type

À éviter

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't reach for weight 700 (bold) or above — 600 is the heaviest weight this design paints

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de flourandwater.com. Fond #ded0c7 · encre #191614 · accent #e8c70f. Typo : mrs-eaves — respecte l’échelle taille/graisse du §3. Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique). La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.

Chaque valeur ci-dessus est vérifiée par getComputedStyle.

$ npx prism-design add flourandwater

DESIGN.md · narrative spec tokens.json