Components

AppIcon The shared mark of every Pelote app: a filled Material Symbol on the cookie9 shape, in violet. Brand

Button A 40px pill that starts an action, in five variants ordered by emphasis. Actions

FAB Extended floating action button, 56px, for the main action of a mobile screen. Actions

IconButton 40px round button carrying a single 24px icon, for compact repeated actions. Actions

Card An sc container with 28px corners, no shadow and no border, grouping one subject. Content

ExpressiveShape 26 of the 35 official Material 3 Expressive shapes, with exact paths. Content

ListRow A list row with a leading element, a growing title and subtitle, and a trailing element. Content

MetricCard A metric card: label, large value, wavy progress bar and a slowly rotating shape. Content

SectionHeading A numbered section title: cookie9 badge, 36px heading and a rule filling the line. Content

Cover The README cover card: name, tagline, chips and expressive shapes. Content

Checkbox An 18px box inside a 40px target, for a choice confirmed by a button. Selection

Chip A small 8px-radius label for metadata, status or filtering. Selection

Slider A 16px track, a 4×44 vertical handle and a value bubble. Selection

Switch A 52×32 switch for a setting that applies immediately. Selection

Dialog A modal sch window with 28px corners, 480px max, to confirm or type something short. Feedback

Snackbar A short message bottom-centre on an inverted surface, 12px radius, floating shadow. Feedback

Tooltip A simple bubble on hover and focus for an element without a visible label. Feedback

StatusDot A 12px dot with a halo, always paired with a word or an icon. Feedback

TextField A 52px outlined field and a 56px pill search bar. Input

NavigationBar Mobile bottom bar: 3 to 5 destinations, active secc pill, sc background. Navigation

NavigationRail A 96px vertical rail on the left, cookie logo and 56×32 pill destinations. Navigation

Icon Always a Material Symbol: Rounded for M3E and Plaza, Sharp for Chrome. Iconography

MaterialYou Four source colours, three materials, the same M3 roles everywhere. Variants

ExampleToday Stabilité's Today screen, rebuilt in all three materials. Interface examples

ExampleDashboard vps-admin's Overview view in M3, then Plaza and Chrome. Interface examples

ExamplePortfolio A portfolio section: dot grid, numbered heading, project cards. Interface examples

ReadmeKit The GitHub README template: banner, badges, table of contents, sections, footer. GitHub README

ReadmeAssets The README image kit: banner, section divider and footer. GitHub README

Loader An M3E indicator that morphs, a wavy bar and skeletons. Motion

IdleMotion Slow decorative motion, one per area, stopped by prefers-reduced-motion. Motion

Transitions Entrances, dialogs, ripple and button morphing, with their curves. Motion

Layout The responsive shell: bottom bar, left rail, bento and two panes. Layout

Localisation Buttons that stack, text that never truncates, formats through Intl. Localisation

More