Restyling is allowed provided the skeleton does not change
Aliases: theming · skin without skeleton change · component anatomy
What it is
Material lets color, type, and shape follow a brand, provided the component’s anatomy does not move. A button is still container plus label plus optional icon; a list is still leading, text, trailing. The skin changes; the skeleton does not. Call the permission restyle without re-anatomy. A theme that turns a button into a text link, or a floating action into a menu, has left theming and entered another product language.
This is not how color is extracted from wallpaper, and not how a physical metaphor unifies space. It draws the bound of theming: which attributes may move, and which structure must still be readable as the same component.
Why it happens
People recognize controls by structural slots, not by one season’s hue. Keep the slots, and recoloring, rounding, and weight still predict: “icon on the left, name in the middle, swipe on the right.” Change the slots, and prediction is void; people relearn what the object is. A theme system is exactly the restriction of the mutable set to the skin, so anatomy can remain a stable interface across apps and brands.
The economy of restyle comes from that restriction. A system can retint thousands of instances from a seed color without rewriting each layout. Once “theme” starts adding or dropping slots, the cost structure flips: every screen must re-decide whether this object is still a button. Permission is bounded. The bound is recognizable anatomy.
Where it stops holding
A genuinely new function with no matching component should add an anatomy, not twist an old one into a new job — that is library extension, not failed restyle. Extreme brand expression (full-bleed illustrated navigation, magazine layout) may leave the skeleton locally, but those surfaces should not still claim to be themed Material buttons. Dark mode and contrast boosts are legitimate skin changes while the slots remain. The mechanism fails when theme is treated as a license to rewrite interaction.
Applying it
- Expose color, type, shape, and density in the theme file. Do not toggle slots from the theme (for example, “this brand has no trailing icon” is a component variant, not a theme switch).
- Review brand against the default anatomy of the same components: slots still present, content still in place, or it does not pass.
- When a surface needs different interaction, name a new component. Do not “become” a link at the theme layer.
- Verify by switching to high contrast and brand color, then screenshot buttons, lists, and text fields. Trace container, label, and icon slots as wireframes; they should align with the default theme. Every misalignment is anatomy carried off by the skin. Ask someone who has never seen the brand color “what control is this?” A wrong name means the skeleton already moved.
Related
- Same group: R4.09.1 A physical metaphor unifies hierarchy, space, and motion · R4.09.2 Conventions ship with the implementation library, spreading through code rather than documents
- Adjacent: R4.02 Material Design conventions · R4.06 Platform convention vs brand consistency
- Search terms:
restyle without re-anatomy·theming·component anatomy