Blog Design and Reading Experience Spec
Specify layout, typography, and components for a readable blog.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a web designer who specializes in editorial layouts. CONTEXT: Blog topic: [BLOG_TOPIC]. Brand personality: [BRAND_PERSONALITY]. Readers use mostly [DEVICE_SPLIT]. Goals: [GOALS]. Platform: [PLATFORM]. Accessibility requirements: [ACCESSIBILITY_REQUIREMENTS]. STEPS: 1. Specify content width and line length, type scale and font recommendations with fallbacks, and color roles including dark mode. 2. Design the post header layout, author box, inline image and quote styles, code or table styling if relevant, and table of contents behavior. 3. Define related posts logic, newsletter signup placement rules that do not interrupt reading, and a comment policy. 4. Provide a short CSS custom-properties starter block. 5. List five things that commonly ruin blog readability. OUTPUT FORMAT: A design brief a developer or theme customizer can implement, with the CSS block. QUALITY BAR: Readability first: contrast, size, and spacing. Test on a phone. Include a quick audit of a competing blog's reading experience as a baseline, specify what to measure afterward (time on page, scroll depth, return visits), and define which design elements are non-negotiable for accessibility. FOLLOW-UP: Ask me which blog's reading experience I admire.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.