Ryan Perez · List system

The relationship picks the list.

Not the appearance you want. If changing the order changes the meaning, it is ordered. If every item pairs a term with a value, it is a description list. Fourteen relationships, fourteen structures — each one rendered below rather than described.

The test Reorder the items in your head. If the meaning survived, it was never ordered.
Fourteen specimens

Every list type, rendered

Real markup, real content, at the size it ships. The condition that selects each one is stated above it, and the rule that most often gets broken sits below.
Unordered order does not matter
  • Verified customer research
  • Intent-based funnel design
  • Conversion measurement
Every item is a noun phrase. Break the parallelism and the list stops scanning.
Ordered sequence matters
  1. Define the customer condition.
  2. Identify the blocked decision.
  3. Select the evidence required.
  4. Design the next transition.
All complete sentences, so all take full stops. Pick one grammar and hold it.
Description term and value
Funnel type
Diagnostic assessment
Primary outcome
Qualified consultation
Change state
Moderate
One object, many attributes. Several objects across the same attributes is a table.
Checklist — informational included, not interactive
  • {{ i.t }}
Ticks and dashes plus text — never colour alone. Nothing here looks clickable, because nothing is.
Checklist — interactive user changes state
{{ doneLabel }}
Real checkboxes, 44px targets, and the saved state communicated. Try it.
Icon list visual recognition cue
  • {{ i.t }} {{ i.d }}
Icons differ meaningfully and sit beside the text, because these items carry explanations.
Ranked comparative position
  1. {{ r.n }} {{ r.t }} {{ r.why }} {{ r.val }}
Ranked by measured lift in qualified consultations · 14 client funnels · Q1–Q2 2026
The criterion is disclosed. A ranking without stated criteria is decoration wearing authority.
Step list instructions, with results
  1. {{ s.n }} {{ s.t }} {{ s.d }} {{ s.result }}
Each step states its expected result, and step two carries its warning before the action.
Stepper interactive progress
  1. {{ s.n }} {{ s.t }} {{ s.state }}
Complete steps are revisitable, current is emphasised, upcoming is not styled as clickable, and the error state is visible rather than silent.
Timeline events by time
  1. {{ e.date }} {{ e.t }} {{ e.d }}
The approximate date is labelled as approximate. The current state is the emphasised node.
Statistic list value + unit + label + context
{{ s.v }}{{ s.unit }}
{{ s.label }}
{{ s.ctx }}
Each figure carries its baseline and period. The estimated one says so.
Paired problem → solution
{{ p.a }}
→{{ p.b }}
Every item carries the same two-part relationship. One side missing means it is not a pair.
Nested parent → child
  • {{ n.t }}
    • {{ k.t }}
      •
Two levels. A rule on the left replaces deep indentation, so it survives a narrow screen.
Navigation grouped links, current state
On this page
The current item carries aria-current, not just a colour change.
Resource type + title + meta + action
  • {{ r.t }} {{ r.meta }} {{ r.action }}
Format and size are stated, so the download is not a surprise.
Metadata & inline secondary, de-emphasised
  • {{ m.t }}

The audit covers crawling, indexing and rendering — an inline list, because these are three words inside a sentence rather than three things to scan.

Metadata is quiet until it affects a decision. Then it moves next to the content.
Marker system

Eleven markers, each meaning one thing

A marker carrying semantic meaning must carry it consistently across the whole system. Shown at real size, on a real item.
{{ m.glyph }} {{ m.t }} {{ m.means }}
Icon position

Three placements, three jobs

  • {{ l.t }}
Leading inline Short benefits, contact details, compact navigation. Fastest to scan.
  • {{ b.t }} {{ b.d }}
Beside text block Longer explanations, and the default above four items. Scanning stays vertical.
  • {{ a.t }} {{ a.d }}
Above text Spacious feature grids of three or four. Presentation over scanning speed.
{{ r.a }} {{ r.b }}
Included & excluded

Four states, distinguishable without colour

  • {{ i.t }} {{ i.state }}
Shape, text label and colour all carry the state. Remove the colour and it still reads — which is the requirement, not a nicety.
Marker rules

Three, plus the exclusion clause

{{ r.a }} {{ r.b }}
Parallel grammar

The same list, twice

Identical information. The left one costs the reader a re-parse on every item, because the grammar keeps changing under them.
{{ g.t }}
  • {{ i.t }}
    •
{{ g.note }}
{{ c.t }}
Choose one and apply it to every item. If an introductory sentence leads into the list, every item must complete that sentence grammatically.
Density

Four densities, shown at real spacing

  • {{ i.t }} {{ i.d }}
{{ d.t }} {{ d.when }}
{{ r.a }} {{ r.b }}
Multi-column

Short, equal, independent — or one column

  • {{ c.t }}
    •
{{ r.a }} {{ r.b }}
Motion & responsive

Twelve rules

{{ r.a }} {{ r.b }}
The same content, three ways

List, cards, table

Three engagement levels, three offers, identical facts. Which one is correct depends entirely on what the reader is doing.
List read independently
  • {{ o.name }} {{ o.outcome }}
Simple anatomy, no media, no per-item action. The list wins on scanning speed.
Cards act on one
{{ o.name }} {{ o.badge }}
{{ o.outcome }} {{ o.cta }}→
Boundaries earn their place once each item carries a badge and its own action.
Table compare attributes
Offer Days Output
{{ o.name }} {{ o.days }} {{ o.output }}
Once the reader compares the same attribute across items, only a table works. Do not convert it blindly to cards on mobile — preserve the relationships.
Boundary rules

Eight decisions

{{ r.a }} {{ r.b }}
Accessibility

Seven requirements

{{ a.t }}
Never An unordered list with manually typed numbers when sequence matters. The number is then decoration, and assistive technology announces a bulleted list of strings beginning with digits.
SEO

Six rules, and one myth

{{ r.a }} {{ r.b }}
There is no item count that guarantees a ranking or a featured result. Lists organise content for readers; that is the whole mechanism.
LAKA states

Ten treatments of one list

{{ l.a }} {{ l.b }}
Selection engine

Eight branches, in order

{{ l.t }}
Agent contract

Machine-readable

{{ l.t }}
Base CSS

Spacing and icon list

{{ l.t }}
Base CSS

Description list

{{ l.t }}
Logical properties throughout — padding-inline-start and margin-block-start — so the same rules survive a right-to-left locale without a second stylesheet.
The governing principle Choose the list type from the relationship among the items — not from the appearance you want.