Analyse du design system

lasemilla.kitchen

lasemilla.kitchen is built on a warm, off-white canvas (rgb(252, 247, 242)). The system uses rgb(245, 173, 139) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside sp blunt as the primary typeface. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Accent #f5ad8b · police principale minerva-modern

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://lasemilla.kitchen ·extrait le 2026-08-11 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

27 couleurs mesurées · clique une pastille pour copier

Canvas

#fcf7f2

AAA 9.32:1

Ink

#2c4938

AAA 9.32:1

Accent

#f5ad8b

Fail 1.76:1

Line

#2c4938

AAA 9.32: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.

27 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

8 rôles · rendu live dans la vraie Inter (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl34px · 400

display lg

display-lg34px · 400 · ×1.00

display md

display-md16px · 700 · ×2.13

body

body11px · 400 · ×1.45

body sm

body-sm13px · 700 · ×0.85

caption

caption14.3px · 400 · ×0.91

button

button16.5px · 400 · ×0.87

mono

mono15px · 100 · ×1.10

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 3px

sm · 8px

md · 13px

base · 17px

lg · 23px

xl · 31px

2xl · 46px

3xl · 59px

Arrondis

none
0px

xs
5px

sm
150px

md
158px

lg
166px

xl
174px

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

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-1ease-out

transition-2cubic-bezier(0.55, 0, 0.1, 1)

2 animations keyframes extraites

fonts-loading

_gm3679

Composants — le vocabulaire fermé

18 familles de composants · 70 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
nav Links	×10
links	×10
cards	×7
eyebrow Labels	×7
captions	×7
badges	×4
heading H3	×3
footer Links	×2
heading H2	×2
inputs	×1
status Badge	×1
testimonial	×1
heading H1	×1
divider	×1
code Block	×1
breadcrumb	×1
price Tag	×1

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

Buttons

Ghost

Background: transparent
Text: #2c4938 {colors.hairline}
Padding: 8px
Radius: 0px
Font: 18px weight 400
Use: Subtle action, toolbar, nav button

Primary Brand

Background: #c3b172 {colors.primary-hover}
Text: #2d4a39
Padding: 4.2px 27px
Radius: 0px
Font: 15px weight 700
Use: Primary CTA / brand action

Primary Brand

Background: #ff462d
Text: #2c4938 {colors.hairline}
Padding: 0px
Radius: 5px
Font: 18px weight 400
Use: Primary CTA / brand action

Ghost

Background: transparent
Text: #2c4938 {colors.hairline}
Padding: 0px 0px 564.984px
Radius: 0px
Font: 18px weight 400
Use: Subtle action, toolbar, nav button

Primary Brand

Background: #c16e2f
Text: #f7f2ed
Padding: 10.89px 29.7px
Radius: 0px
Font: 16.5px weight 400
Use: Primary CTA / brand action

Primary Brand

Background: #edc37c
Text: #2d4a39
Padding: 10.89px 29.7px
Radius: 0px
Font: 16.5px weight 400
Use: Primary CTA / brand action

Primary Brand

Background: #f5ad8b {colors.primary}
Text: #2d4a39
Padding: 14.3px 35.75px
Radius: 0px
Font: 14.3px weight 400
Use: Primary CTA / brand action

Inputs & Forms

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height94px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

4 points de rupture lus dans le CSS live

767px

799px

1200px

1201px

À faire / À éviter

18 règles applicables, verbatim de la spec

À faire

Use Off-White (`#fcf7f2`) as the page background — it's intentionally not pure white

Use minerva-modern as the primary typeface — it defines the brand personality

Keep font weights between 100-400 — 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 Tangerine (`#f5ad8b`) as the primary accent — it's the brand's signature interactive color

Respect the 3px–31px spacing range — the design uses a wide scale for visual breathing room

Build the hero as a split layout with media on the right — text and visual share equal weight

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

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

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

Show company logos with testimonials — social proof relies on brand recognition, not avatars

Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

À éviter

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

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

Don't reach for weight 700 (bold) or above — 400 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

Don't over-build the footer — this design keeps it minimal (1 cols, 4 links)

Guide agent & export

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

Construis une UI dans le design system de lasemilla.kitchen. Fond #fcf7f2 · encre #2c4938 · accent #f5ad8b. Typo : minerva-modern — 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 lasemilla

Repeindre ce design · éditeur live DESIGN.md · narrative spec tokens.json