section-backgrounds

The 60-30-10 rule applies a dominant color (60%) to primary sections, a secondary color (30%) to supporting areas, and an accent color (10%) for emphasis. Assign background utility classes—bg-background, bg-muted, bg-primary—across alternating sections to enforce this distribution and create visual hierarchy.

Alternating section backgrounds establish consistent visual rhythm by cycling through designated background classes. This Skill applies those classes in a repeating pattern after removing inline styles, guiding user attention through contrasting sections while maintaining branding coherence.

Visual hierarchy is enforced by applying branding guidelines that alternate background colors and verify contrast between backgrounds and foreground elements. This ensures spacing and heading prominence while maintaining the 60-30-10 color rule across all sections.

Yes. This Skill removes inline styles and replaces them with designated background utility classes (bg-background, bg-muted, bg-primary), standardizing your markup and enabling consistent application of branding guidelines across sections.

Alternating backgrounds prevent visual monotony and establish clear section separation, improving scanability and user engagement. They reinforce the 60-30-10 branding rule while creating a predictable visual rhythm that guides attention through content.