Ryan Perez · Section system
The section system.
A page is a sequence of sections, and a section is a formula of elements. Every pattern below is rendered, not described — pick the formula, not the picture. Then run it through the transformation grid when the baseline stops working.
Anatomy
Context · Attention · Explanation · Visual · Structure · Evidence · Interaction · Action · Navigation · Background · Transition
{{ total }} sections rendered · 21 skeletons
Standing rule · every header on every site
Four elements. Never a fifth.
There are no inline navigation links in this system. A header carries the mark, the name, one button that opens everything, and one commercial action. Every site section, however deep, is reached through the Menu — which means the bar never grows, never reflows awkwardly on a tablet, and never forces the choice of which five links matter most.
{{ n.n }}
{{ n.t }}
{{ n.what }}
{{ n.spec }}
Mechanics
{{ m.a }}
{{ m.b }}
Never in the bar
{{ m.a }}
{{ m.b }}
{{ f.n }}{{ f.t }}{{ f.count }} patterns
{{ f.role }}
{{ i.code }}{{ i.label }}
{{ i.formula }}
Grid 01
Section transformation grid
Any section, twelve directions. Run this when a section technically works and still converts nothing.{{ r.a }}{{ r.b }}
Grid 02
Feature section, ten ways
Baseline: headline + three feature cards{{ r.a }}{{ r.b }}
Grid 03
Testimonial section, eleven ways
Baseline: quote + name + portrait{{ r.a }}{{ r.b }}
Documentation
What every pattern has to carry
Sequences
Five pages, in order
Sections are half the system. The other half is the order they arrive in — each step below names the pattern to use.
{{ q.t }}
{{ q.goal }}
{{ st.n }}
{{ st.t }}