Pelote
Colour carries meaning, shape carries personality.
Pelote is the design language of beedywool.com, built on Material 3 Expressive: Material You colour roles, organic shapes, elevation through tint and spring motion. Three materials, one system.
Three materials
Expressive is the reference. Plaza and Chrome change the material, never the components or the colour roles.
Expressive
The reference. Tint, expressive shapes, pills, spring motion.
Plaza
Wii U and 3DS: soft glossy plastic, fine stripes, gel on the primary action, rounded type.
Chrome
Y2K: polished metal, frosted glass, halos, LEDs, sharp corners and uppercase Michroma.
Five principles
They fit in one sentence each and decide every screen.
Colour carries meaning, shape carries personality.
One primary action per screen.
Tint, not shadows.
Always a complete state, never an empty shell.
Written for the person, not the system.
The rules
Five sections covering behaviour, variants, layout, the GitHub README and working with an AI agent.
UX rules
Hierarchy, feedback, empty states, forms, navigation, accessibility, PWA, languages and theming.
Read the section 02M3E variants
Plaza and Chrome as M3E variants: the material recipes, with no hard-coded tint.
Read the section 03Layout
Width classes, bento, bounded width with a support pane, foldables and empty space.
Read the section 04GitHub README
The GitHub README template: banner, badges, table of contents, numbered sections and footer.
Read the section 05AI rules
What an agent must follow: icons, code, PWA, layout, motion, colours, text and README.
Read the section ArchivedGaps between the repos
The differences found between portfolio, vps-admin and Stabilité, and the value kept.
Read the sectionThe components
Every entry shows the Expressive preview, the do and avoid examples, then the Plaza and Chrome variants.
Apps using Pelote
The portfolio, VPS Admin, PoGo Search and Stabilité share the same mark and the same rules.
Portfoliocode
VPS Admindns
PoGo Searchmy_location
StabiliténutritionBuild with Pelote
Load tokens.css, bundle.css and bundle.js, then compose with the system classes. Nothing to draw, nothing to reinvent.
<link rel="stylesheet" href="ds/tokens.css">
<link rel="stylesheet" href="ds/bundle.css">
<script src="ds/bundle.js"><\/script>
<button class="btn btn-filled st">Deploy</button>
<span class="chip ok"><i class="led"></i>Running</span>