Ryan Perez · Composition system

The visual grammar.

The layer above components and sections. Mode establishes the environment, surface gives it character, contrast creates hierarchy, balance distributes attention, layering establishes relationships, and rhythm moves the visitor through. Same elements, six variables, entirely different pages.

The formula Mode + Surface + Contrast + Balance + Layering + Rhythm
Mode

Two environments, one hierarchy

Light mode is not a white background, and dark mode is not an inverted one. Both need six surface levels; the values change, the meaning does not.
{{ m.t }} {{ m.note }}
{{ lv.t }} {{ lv.d }}
{{ lv.hex }}
Content hierarchy
{{ ct.t }}
{{ m.ruleLabel }} {{ ru.t }}
Surface

Five families, rendered

Solid for tasks, tonal for separation, gradient for direction, pattern for identity, image for context. Anything behind dense content gets quieter, not louder.
{{ sf.n }}{{ sf.t }}
{{ sf.role }}
{{ s.sample }}
{{ s.t }}
Surface grid

Escalating a background

{{ r.a }}{{ r.b }}
Contrast

Sixteen kinds of difference

Contrast is not colour. Pick one primary strategy per section and let the rest support it.
{{ c.t }} {{ c.axis }}
{{ c.aTxt }} {{ c.bTxt }}
Hierarchy

Five contrasts every section owes

{{ l.a }}{{ l.b }}
Guardrails

Seven ways contrast goes wrong

{{ g.t }}
Balance

Four ways to distribute weight

Balance does not need symmetry. It needs the eye to come to rest somewhere on purpose.
{{ b.t }} {{ b.ratio }}
{{ b.d }} {{ b.uses }}
Visual weight comes from more than size
{{ w.a }}{{ w.b }}
Layering

The eight-level stack

Elevation is a claim about function. Two adjacent levels must be distinguishable, and anything blocking needs a way out.
{{ l.n }} {{ l.t }} {{ l.d }}
Rendered

The same stack, in space

Book the audit Floating surface — menus, popovers Blocking surface Must separate clearly from the page, and must offer a way out. System surface
{{ lg.a }}{{ lg.b }}
Rhythm

Six ways a page can move

Each strip is a page seen from a distance. One meaningful break every three to five sections — never more.
{{ r.t }}
{{ r.d }}
Spatial rhythm
{{ sp.a }} {{ sp.b }}
Narrative rhythm
Tension→Understanding→Possibility→Proof→Action
Interaction rhythm
Action→Feedback→Progress→Result→Next
Recipes

Six named combinations

Six settings of the same six variables. Cognitive architecture is the house recipe; the rest are what the system can do when a client needs something else.
{{ rc.eyebrow }} {{ rc.sample }} {{ rc.cta }}
{{ rc.t }} {{ rc.tag }}
{{ sp.a }} {{ sp.b }}
Matrix

Eight variables, four settings each

Variable Baseline Minor Major Extreme
{{ m.c0 }} {{ m.c1 }} {{ m.c2 }} {{ m.c3 }} {{ m.c4 }}
System rules

Ten rules that keep it consistent

{{ s.n }} {{ s.t }}