Layout
Structural rules for long-form law firm content pages. These govern how a page is organized, where content lives, and how a reader moves through it — not what the content says.
Large formatting
Rules for shaping a long-form article from its raw topic inventory into a page a reader can navigate in under 60 seconds. Apply these before choosing components — they determine what goes on the page at all.
Structure
| Rule | Rationale |
|---|---|
| Maximum 5–6 visible sections. If content exceeds that, use progressive disclosure — topic cards, modals, or accordions — rather than adding more top-level sections. | Every additional band above six increases scroll depth without adding orientation. Readers stop scanning and start skipping. |
| Each section answers exactly one question. If you can't state the question in one sentence, split or merge. | Mixed-purpose sections force readers to skim for what they actually need, increasing exit rate at the wrong moments. |
| Sections build on each other. Each one earns the next. No section should be skippable without losing context for what follows. | A page that can be read in any order has no narrative pull — it reads like a FAQ, not an argument. |
Repetition
| Rule | How to apply |
|---|---|
| State each concept once, in the section where it belongs. Never restate across sections. | When the same idea appears in two sections, pick the better home for it and cut the rest. If it's hard to pick, the sections are probably covering the same question. |
| If the same idea appears more than once, cut the duplicate — not the original. | Don't dilute the primary treatment by splitting it. Readers who reach a duplicate section after reading the first lose trust in the page. |
| "Why hire a lawyer" belongs at the end as a CTA — not as a content section. | Drop or merge any section whose primary job is to persuade the reader to call. The gold CTA band does this; a prose section restating it creates length without value. |
Depth management
| Rule | Implementation |
|---|---|
| Procedural content belongs behind progressive disclosure. Step-by-step processes, legal checklists, and exception cases go in topic cards, accordions, or modals — not inline. | Use marketing-topiccard + marketing-modal (the DS explorer pattern) for any run of ≥2 sections that a reader might selectively consult rather than read in order. |
| At least 2 full section bands must precede each topic explorer cluster — not just the first one on the page. Every cluster needs its own two-band runway of prose context before readers drop into cards. | In TOPIC_RANGES, leave a gap of ≥2 sections between every pair of ranges. A single interstitial divider between clusters does not satisfy this rule — the gap must be full prose bands. Example for three clusters: [[4,7],[10,13],[16,19]] — sections 2–3 precede cluster 1, sections 8–9 precede cluster 2, sections 14–15 precede cluster 3. |
| Surface the headline claim and one-sentence framing inline. Let readers choose to go deeper. | The topic card teaser is the headline claim. The modal body is the depth. Never put the headline claim only inside the modal. |
| A page should be scannable in under 60 seconds. If it isn't, move content behind disclosure. | Count visible bands: intro + 2 lead bands + cluster + 2 lead bands + cluster + … + 1 closing band. Each cluster contributes 3 visible sections (2 lead bands + 1 explorer). More than 3 clusters, compress. |
Copy
Do
- Lead with the most important sentence — the ruling or the rule, not the context.
- Use the target phrase naturally, once per section maximum.
- Cut any sentence that restates the heading it lives under.
- Eliminate throat-clearing openers: "In this guide…", "It is important to note…"
Don't
- Bury the answer in paragraph three after setting up context no one asked for.
- Repeat the target keyword in every sentence to "signal relevance."
- Write a section intro that paraphrases the heading: "In this section, we will cover estate planning…"
- Open with scope-setting that delays the point: "There are many things to consider when…"
Visual rhythm
| Rule | DS implementation |
|---|---|
| Alternate band backgrounds to create separation without extra headings. | The catch-all sectionizer cycles combination-sand / ivory / goldwash / navy automatically. Don't break the cycle by adding a header between bands. |
| Use illustration, icons, or cards to break up prose — not more subheadings. | The DS explorer (marketing-topiccard grid) turns a wall of sections into a scannable card set. Topic cards are the primary rhythm break for long articles. |
Each topic explorer cluster opens with a centered illustration that introduces its sub-topic. Place a marketing-figure marketing-figure--center between the cluster heading and the card grid. Choose a motif that signals the cluster's theme — different from the motif used by adjacent prose bands. | Use the CLUSTER_ILLUS lookup (per page, per cluster, in order). Fallback cycle: scales → courthouse → books → key → gavel → tree. Render at width="220" height="220", opacity: .72, with data-reveal data-reveal-delay=".07s". Never repeat the same motif as the immediately preceding prose band's illustration. |
| Every sequential prose band must carry at least one illustration. No two adjacent bands may use the same placement or treatment — vary position and role across every band to avoid a repetitive column. |
Six valid placements, rotate through them:
-navy ink on light bands, -gold or -ivory on dark/navy bands. Never repeat a placement on the immediately preceding or following band.
|
| One CTA placement per page, at the conversion moment — the end. | The gold marketing-ctaband is always the closer. Remove any in-body "Contact us" sections; mid-article revenue presence comes from the interstitial divider bands between explorer clusters. |
Section count check: Before publishing, count visible page bands. Each topic explorer cluster requires 2 lead bands before it — so a 3-cluster page has: intro + 2 lead + cluster + 2 lead + cluster + 2 lead + cluster + 1 closing = 11 bands. The gold CTA closer and header/footer are structural chrome — they don't count toward the limit. Every topic explorer cluster must be preceded by at least 2 full prose bands, measured from the previous explorer (or from the page start for the first cluster).