Interface: Sections

Sections set the page rhythm. They should feel like part of one system, not independently styled blocks.

Section Composition

• SHOULDMost sections resolve to a two-element structure: section shell + constrained inner content.
• MUSTEvery section answer two questions clearly: what is this about, and what should happen here?
• SHOULDTreat section headers as reusable patterns, not ad hoc text piles.

Cross-Section Consistency

• MUSTUse a deliberate vertical rhythm between sections and hold it consistently across the page.
• MUSTAlign major section content to a shared horizontal grid or container logic.
• SHOULDRepeat a small set of section archetypes rather than inventing a new composition each time.

Alignment

• MUSTKeep text blocks, controls, and media aligned to intentional edges.
• SHOULDUse asymmetry only when it creates a stronger hierarchy, not when spacing drift created it accidentally.
• MUST NOTLet one section introduce a new alignment logic unless the content type truly changes.

Transitions Between Sections

• SHOULDSection transitions come from pacing, surface shifts, or content contrast rather than ornamental separators.
• MUSTIf a section uses a strong background or surface change, the next section should visibly reset the rhythm.

Review Questions

• Does this section pattern belong to the same product as the others?
• Is the transition from one section to the next helping comprehension?
• Would the page still feel structured if the color treatments disappeared?