Every README of a project using Pelote follows the same template, with visuals generated by tools/readme-assets.py (a light and a dark version of each visual). GitHub shows the README on white #ffffff or on #0d1117: every visual is checked against both backgrounds. The light/dark choice follows the GitHub theme, not the device, through the #gh-light-mode-only and #gh-dark-mode-only fragments.

The examples in this section come from personal projects: the footer shows beedywool.com. A project using Pelote for another brand keeps the same layout and shows its own name or brand, with a link to its site.

Structure, in this order

1. Centred banner: two <img> tags with the #gh-light-mode-only and #gh-dark-mode-only fragments, banner-light.svg and banner-dark.svg, width="100%", an alt repeating the name and tagline ("VPS Admin | Panel, deployments and assistant for your Linux servers").
2. Stack badges in style=for-the-badge, background 4F378B, logo D0BCFF. A line of secondary flat-square badges (backgrounds 4A4458 and 633B48) for key facts ("1 container", "installable").
3. Table of contents in bold, anchor links separated by ·.
4. Hook as a quote (>): 2 to 4 lines, the name in bold, what the project does and for whom.
5. Numbered sections: <a name="…"> then the section title SVG (numbered cookie9 badge, title, rule). The number follows the real order of the sections.
6. Content: 3-column tables for features, sh code blocks for installation, <details> for development.
7. Brand footer, always, last, the name in a pill (beedywool.com in the examples), linking to the site:

<br>

<a href="https://beedywool.com">
<img src=".github/assets/footer-light.svg#gh-light-mode-only" alt="beedywool.com" width="100%">
<img src=".github/assets/footer-dark.svg#gh-dark-mode-only" alt="beedywool.com" width="100%">
</a>

Image kit, three styles

The Readme asset group contains the full kit on the vps-admin example: banner (1000×340, as PNG because it embeds the panel screenshot), section (1000×100) and footer (1000×120), in each style, with separate light and dark versions. In M3E, these are the files from vps-admin/.github/assets, unchanged: the reference layout is vps-admin/tools/readme-assets.py. Plaza and Chrome use exactly the same layout with their material. Sections remain dividers ("02 Features"), the content below stays Markdown.

• One style per README, the same as the app's. Never mix a Plaza banner with an M3E footer.
• The footer is copied as is into .github/assets/ as footer-light.svg / footer-dark.svg. The banner and sections are templates (vps-admin example): each repo copies tools/readme-assets.py from vps-admin and only changes the data (name, tagline, chips, screenshot, sections).
• M PLUS Rounded 1c (Plaza) and Michroma (Chrome) are not loaded by GitHub in an SVG: the stacks plan for Nunito / Varela Round and Orbitron / Eurostile, then Roboto or Segoe UI. Keep 10% width margin on each text.

Visual rules, light and dark

• A card always has an outline. Fill sc (#F3EDF7 light) or sch (#2B2930 dark) and a 1px outline-v stroke (#CAC4D0 / #49454F). Without an outline, #fef7ff disappears on white and #211F26 on #0d1117.
• Text never goes under a shape or a screenshot. The text block has a fixed maximum width (about 55% of the card); shapes and mockups stay in the right area. Measure the text length in the script, do not guess.
• Decorative shapes in containers only: pc and tc (#EADDFF / #FFD8E4 light, #4F378B / #633B48 dark). No grey secc in dark: #4A4458 on #2B2930 is invisible. Two or three shapes maximum, all in the right half.
• Chip outlines in outline (#79747E / #938F99), not outline-v: the thin outline of a chip must reach 3:1.
• Text: title in on-surface, subtitles in on-sv, never below 4.5:1 on the card. Minimum size 14px in a 1000px-wide SVG (GitHub scales it down on mobile).
• Logo: the app mark (cookie9 + glyph) in the banner, in #4F378B / #EADDFF light, #D0BCFF / #381E72 dark.
• Animation: slow shape rotation (48 s) and a soft entrance are allowed, always stopped by prefers-reduced-motion.
• Font: stack 'Google Sans Flex', 'Google Sans', 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif. GitHub does not have Google Sans Flex: the SVG must stay readable with Roboto or Segoe UI (allow 10% extra width).
• Shapes: only the 26 shapes of the system (see ExpressiveShape), no polar formula.
• Plaza: striped background surface / sc, scl bubbles with highlight and soft shadow, primary gel button, rounded 800 type. Chrome: pc / tc halos, metal bars cut from secc with ok LEDs, primary gel, asymmetric corners, uppercase Michroma titles, Material Symbols Sharp glyphs.

Text

• The README language is the app's language (Stabilité and PoGo Search in French, vps-admin in English or French depending on the audience, portfolio bilingual).
• No emoji in titles or badges. No em dash.
• A responsibility note as a quote at the end if the project touches a third-party service or health (PoGo Search, Stabilité), just before the footer.

Check before pushing

1. Regenerate the visuals (python3 tools/readme-assets.py).
2. Open the README on GitHub in the light and dark theme (or render the SVGs on #ffffff and #0d1117 with rsvg-convert -b).
3. Check: card outlines visible, no text covered, footer present and clickable.