section-breaks-and-transitions

name	section-breaks-and-transitions
description	Use when transitioning between sections. Smooth transitions feel curated; harsh transitions feel patched-together.

Section Breaks and Transitions

Section transitions via: white-space, background tone shift, decorative rule, signature flourish. Smooth not abrupt.

Transition options

1. White-space (4-8vh padding between sections)
2. Background tone shift (cream → cream-dim → cream)
3. Decorative rule (1px line, brand accent, full-width or centered)
4. Signature flourish (◆, simple icon)
5. Page sigil ("02 / 06")
6. Tag / eyebrow text ('Process', 'Pricing')
7. Mini-headline (small caps, brand voice)

Composition example

Above section:

• 4vh padding
• '◆' centered, brand accent, 1.2em
• 4vh padding
• New section

Gives smooth handoff without abrupt break. Reader knows section changed without losing flow.

Avoid

1. No transition (sections blur together)
2. Heavy graphic dividers (overdesigned)
3. Multiple decorative elements competing
4. Background changes too dramatic (cream → blue)
5. Inconsistent transition patterns across page

Where this fits in the X3 empire

Section transition rules for CardPrepAI editorial pages.