Interface Lab
Back to knowledge
Visual Foundations

Modular Rhythm and Repetition

Repeated modules reduce cognitive cost but need hierarchy and rhythm to avoid monotony.

Design Principle

Same structures suit same tasks; variation should come from content priority rather than random styling.

Principle

Same structures suit same tasks; variation should come from content priority rather than random styling.

Design action

Define a unified card or row template for repeated content; keep title, summary, tags, and actions in a fixed order and vary only by feature or status.

Examples

Positive example: Resource lists, knowledge entries, template cards, and data card groups. Counterexample: Every card is individually styled.

Apply when

Resource lists, knowledge entries, template cards, and data card groups. Users compare similar objects.

Source notes

Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems. Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/

Agent Directive

Define a unified card or row template for repeated content; keep title, summary, tags, and actions in a fixed order and vary only by feature or status.