Chez Yin — Styleguide

Restaurant chinois de quartier à Renens (VD) — cuisine authentique (Sichuan, canard laqué, raviolis maison), salle simple et pleine, prix doux. 4.9/5 sur Google.

Greenfield brand build — no existing site, no known logo. Every token below is derived from the Google place photos in brand/inspiration/ (rationale per token in the Color section). To be confirmed with the owner at first contact.

Brand DNA

• Atmosphere: authentique, généreux, sans chichis, familial, animé
• Audience: locals deciding where to eat tonight (mobile, from Google Maps), EPFL/UNIL crowd, Chinese community of the Lausanne area (the room is full of them — the strongest authenticity signal there is)
• Inspirations: the room itself — burgundy leather chairs, blue-and-white porcelain plates, magenta dish placards with Chinese characters on the walls, cream stone, light wood tables, red lantern
• Differentiators: real regional Chinese cooking (Sichuan pepper beef, Peking duck, hand-made dumplings) at canteen prices; 4.9★ over 230+ reviews; portions guests joke about taking home
• Anti-references: NOT the red-and-gold dragon-clipart takeaway template; NOT a minimal-luxe fusion place; NOT SaaS-startup Inter on white

Voice

• Register: fr-CH, «vous». Second locale EN.
• Tone: direct, appétissant, concret — on nomme les plats, pas «un voyage culinaire».
• Do say: «raviolis faits maison», «bœuf au poivre du Sichuan», «canard laqué», «portions généreuses», «petit parking derrière le restaurant»
• Don't say: «voyage culinaire», «expérience unique», «saveurs d'ailleurs», «délices asiatiques», any invented provenance claim («bio», «local») the owner never stated
• Good/bad pair: ✅ «Les raviolis sont pliés à la main, le matin même.» / ❌ «Embarquez pour un voyage culinaire authentique au cœur de la Chine.»
• Reading level: 8th–10th grade.

Color

Derived, not chosen from vibes:

| Token | Hex | Source | Use |

|---|---|---|---|

| primary | #7C2B2C | burgundy leather chairs | primary CTA, headings accents, footer |

| primary-ink | #FCF7EE | — | text on primary |

| accent | #31508F | blue-and-white porcelain plates | links, section eyebrows, porcelain pattern borders |

| accent-2 | #C9366B | magenta dish placards on the walls | dish-name tags («placards»), sparingly |

| bg | #FAF4E9 | cream stone walls | page background |

| surface | #FFFDF8 | white plates | cards |

| ink | #2A211D | — | body text |

| muted | #6E625A | — | captions |

| line | #E6DAC8 | — | hairlines |

| wood | #D9BE93 | light wood tables | gallery band, table strip |

Contrast: primary #7C2B2C on #FCF7EE = 8.9:1; ink #2A211D on bg #FAF4E9 = 13.5:1 — both AA+.

Typography

• Headings: Noto Serif SC, weight 700/900 — a serif with Chinese typographic heritage; lets headings carry an occasional hanzi accent (e.g. 手工饺子 next to «Raviolis maison») the way the wall placards do. Latin subset loads first; SC subset only for the few accent glyphs.
• Body: Source Sans 3, 400/600, 17px base, line-height 1.6 — menus must read effortlessly on a phone.
• Webfont source: Google Fonts, self-hosted via astro capabilities (subset).

Scale

| Token | Size | Line | Use |

|---|---|---|---|

| display | 3.25rem | 1.12 | hero h1 |

| h1 | 2.375rem | 1.15 | page titles |

| h2 | 1.75rem | 1.22 | section headings |

| h3 | 1.25rem | 1.3 | dish groups |

| body | 1.0625rem | 1.6 | paragraphs, menu items |

| small | 0.875rem | 1.45 | captions, footer |

Spacing & layout

• Base unit: 8px; scale 4–128.
• Container: 1080px max, 20px gutter, single column mobile.
• Rhythm: dense-but-warm — this is a canteen, not a spa. Sections at 64–96px; menu rows tight (12px).

Shape & surface

• Radii: sm 3px (tags), md 6px (buttons), lg 14px (cards, photos).
• Borders: hairline line; the porcelain-blue double rule (2px + 1px, accent) is the signature divider under section headings — echoes the plate rims.
• Shadows: sm on cards, md on the sticky mobile CTA bar only.
• Imagery: full-color, appetite-first crops of real dishes; the packed room as trust imagery. No stock photography, no duotones.

Motion

• Subtle only: hover/focus states ≤200ms; no entrance animations, no parallax.

Components

Button (primary)

• bg primary, ink primary-ink, radius md, padding 12px 20px, weight 600.
• hover: darken 8%; focus: 2px accent outline offset 2px.

Button (secondary)

• transparent, ink primary, 1px primary border.

Dish placard (signature component)

• Small tag styled after the wall placards: bg accent-2, white bold text, radius sm, tiny hanzi above the French dish name. Used for «guests' favourites» on the home page.

Card

• bg surface, 1px line border, radius lg, padding 24px, shadow sm.

Hero

• Layout: porcelain-band-photo-right — left text block (display headline + open-now strip + two CTAs: Appeler pour réserver / Voir la carte) against bg; right full-height food photo; the two zones separated by a vertical porcelain-pattern band (accent blue on white, CSS pattern, no image). Mobile: photo on top with the band as a horizontal rule, sticky call bar at bottom.

Nav

• Sticky, bg surface with hairline bottom; wordmark «Chez Yin» in Noto Serif SC 900 with 家 glyph accent; right: Carte, Horaires, Contact + phone button. Mobile: sticky bottom call/menu bar instead of a hamburger.

Section heading

• Eyebrow in accent blue, small caps; h2 in ink; porcelain double-rule underneath.