← All posts
Button row spacing after the 8px grid pass
8/26/2026Layout
#buttons #mobile #spacing
Page-link rows fail on phones because the hit area is a label, not a button.
Rules that survive every template:
- min-height 44px
- 8px vertical rhythm
- one primary action, the rest outline
Do not shrink type to fit more links. Cut the list instead.
Eight-pixel rhythm is boring on purpose. Boring spacing is how fingers find the next target without zooming. If the row feels cramped, increase height and gap before you touch brand color. Color will not fix a miss-tap.
Primary versus outline is hierarchy, not decoration. One filled button for the action you want this week. Everything else stays quiet so the list can grow without screaming. When the list grows past five meaningful destinations, you do not need smaller type — you need fewer destinations.
Blog and Courses belong on the hub only when you actually publish. Empty destinations are clutter. Full destinations with long posts, like this one, justify the row because visitors have somewhere to land and scroll.
After you adjust spacing, test with a thumb on a real device while this article is open. Soft-nav back to Profile, tap Blog again, and confirm the row never jumps. Persist chrome plus 8px rhythm is the product; the accent is just paint.
Checklist while you scroll: does the avatar stay readable under the name band, do page links remain tappable after the post, and does the SiteFooter arrive only once at the bottom. Duplicate chrome is a scroll bug dressed as a design choice.
Theme swaps should not rewrite the article. Tokens move; the body stays. If a layout change forces you to cut half the post, you picked a template that cannot carry long-form content.
Use real line breaks. Walls of text hide overflow issues. Paragraphs, lists, and a closing line make scroll position easier to judge when you are comparing Studio preview against the public URL.
Publish order still wins. Ship the page, then polish the essay. Fans cannot open a Figma file. They can open /blog/themebuilder and scroll until the footer.
Support, Shop, and Booking inherit the same radius and type tokens. Long blog bodies are a stress test for those tokens because the eye travels farther before it hits the next surface.
If the post feels finished at three hundred words, keep writing about the constraint. Constraint is the design. The scroll bar is the proof that the layout can hold attention without adding a second accent color.
On a live public page the visitor never sees your Studio draft history. They see one URL, one accent, and one decision about type. That is why length on a blog post matters for QA: long copy forces the canvas and the site chrome to share scroll space without fighting each other.
Reweyou surfaces share a template shell. Profile, Shop, Book, Support, Explore, Blog, and Courses should feel like rooms in the same house. When you publish a long note, you are also testing whether the footer, header, and soft-nav still behave when the middle column grows.
Phone testing is the honest pass. Desktop always looks calm. On a narrow viewport, a short post collapses into a card; an eight-hundred-word post reveals whether gap tokens, cover crops, and sticky chrome leave enough room for reading.
Keep the voice consistent with the theme. Navy and gold copy should not suddenly sound like a SaaS changelog. Write like the page looks: direct, a little cinematic, and short sentences where the layout already does the drama.
Checklist while you scroll: does the avatar stay readable under the name band, do page links remain tappable after the post, and does the SiteFooter arrive only once at the bottom. Duplicate chrome is a scroll bug dressed as a design choice.
Theme swaps should not rewrite the article. Tokens move; the body stays. If a layout change forces you to cut half the post, you picked a template that cannot carry long-form content.
Use real line breaks. Walls of text hide overflow issues. Paragraphs, lists, and a closing line make scroll position easier to judge when you are comparing Studio preview against the public URL.
Publish order still wins. Ship the page, then polish the essay. Fans cannot open a Figma file. They can open /blog/themebuilder and scroll until the footer.
Support, Shop, and Booking inherit the same radius and type tokens. Long blog bodies are a stress test for those tokens because the eye travels farther before it hits the next surface.
If the post feels finished at three hundred words, keep writing about the constraint. Constraint is the design. The scroll bar is the proof that the layout can hold attention without adding a second accent color.
On a live public page the visitor never sees your Studio draft history. They see one URL, one accent, and one decision about type. That is why length on a blog post matters for QA: long copy forces the canvas and the site chrome to share scroll space without fighting each other.