There’s a point in most site builds where you realize you’re not designing a page—you’re designing a system. If you’re using Breakdance, that moment usually arrives after the third “quick” landing page when spacing drifts, hover states disagree, and a tidy grid turns into a collage. The fix isn’t more creativity; it’s fewer knobs.

Below is a set of practices I use when I want pages that ship fast and read consistently six months later. The examples assume Breakdance, but the ideas hold anywhere: decide on a vocabulary, hide the noisy controls, and let content lead.

---

A vocabulary for structure

Tokens first. Before touching a canvas, define a small scale for type (xs–2xl), spacing (4–48 in consistent steps), and radii (0 and one rounded option). Treat these like words you’re willing to say in public. Everything else is remix.

One hero, plural stories. For the main header band, pick a single structure—eyebrow, headline, supporting line, action—and don’t fight it. Change the copy, the image, the order; don’t invent a new hero style just because the topic is new.

Guardrails in the elements. Whether you build with core Breakdance parts or element libraries (e.g., card grids, timelines, FAQs), lock ratios and line lengths inside the element. It’s easier to protect rhythm once than to police it per page.

---

Content before cosmetics

Outline first, then decorate. Draft the page as an outline: one idea per section, one job per block. If a section has two verbs (“compare and persuade”), it’s two sections. When structure feels obvious, only then choose components.

Short labels, strong verbs. Buttons that say “See it working” or “Compare options” are better than “Learn more.” Section headings that start with a verb (“Choose a plan that fits”) keep you honest about purpose.

A test for every section. Ask: could someone get value from this block if the illustration didn’t load? That question tends to trim decorative noise and sharpen copy.

---

Reuse without repetition

Patterns, not fragments. Save full sections you actually use—Hero, Card Grid, Feature Row, FAQ, CTA Band. Name them clearly. When you feel the itch to tweak a saved pattern, change the token, not the component.

One animation per section. Movement attracts attention; too much movement fragments it. If something slides, nothing else bounces. Prefer subtle opacity/position transitions over canned “entrance” effects.

A components page. Keep a private page that renders every pattern on one long scroll. It doubles as QA and a teaching aid for new editors. If two components look like cousins, merge them.

---

Performance and accessibility by default

Aspect ratios everywhere. Define image ratios at the element level—3:2 for cards, 16:9 or 4:3 for media blocks, 1:1 for avatars—and stick with them. You’ll reduce layout shift and art-direction thrash.

Typography that breathes. Clamped sizes (min–preferred–max) keep text readable across devices without media-query haystacks. If a line breaks badly on a small phone, fix the scale, not the sentence.

Keyboard and screen reader paths. Focus order should mirror the visual story. Make expandable content announce itself and remember its state. Labels belong on inputs, not as placeholders.

---

Editorial hand-off that works

A one-page guide. Editors don’t need a manual; they need a napkin sketch. Give them a single page: when to use each pattern, which toggles they can touch, and two “do not” examples with reasons.

Empty-state microcopy. Patterns that expose dynamic content (posts, products) should show helpful empty states in the editor: “No items yet—check your filter or add content in X.”

Routing for changes. When someone requests a “small change,” ask whether it’s a token tweak (global) or a one-off (anti-pattern). Saying no to the second is how the system survives.

---

A small, opinionated checklist

• Decide your type/spacing/radius tokens before building a single section.

• Save five patterns you actually use; resist adding a sixth for a week.

• Lock image ratios in the element; let authors pick images that fit the frame.

• Limit animations to one per section; test on a cheap phone.

• Keep CTAs literal; let design be quiet and copy carry the load.

• Put every pattern on a private “components” page; review it monthly.

• When a change request appears twice, promote it to a token.

• When it appears once, investigate the content instead.

  
  

---

Notes from a week in production

After standardizing tokens and committing to a handful of patterns, two things happened. First, the design debates got shorter; we argued about meaning instead of margins. Second, we shipped more pages because editors stopped tinkering. Knowing that a card grid would behave, that a hero would compress gracefully, that a FAQ would remember its state—those little certainties add up.

This isn’t about purity. It’s about lowering the cost of saying “yes” to a new page. If the building blocks are trustworthy, the team feels braver, and braver teams publish.

---

Tool referenced : Destiny Elements