Design preview — every element on one page

This post exists to stress-test the journal layout. It runs through every markdown element the post template renders — body copy, two heading levels, images at full width, blockquotes, ordered and unordered lists, inline links, inline code, code blocks, and horizontal rules — so we can see what works and what still needs work before real posts ship.

If something here looks off (line length, image edges, heading rhythm, list indent), that’s exactly what we’re trying to surface.

Body copy and rhythm

The body type sits at 18px with a 1.65 line height. Paragraphs are separated by a generous 1.25em — enough breathing room to feel editorial without drifting into airy lifestyle-magazine territory. The measure (max-width of the column) caps at the same 3xl Tailwind width used elsewhere on the site, so reading a wide block of text never becomes a chore.

A second paragraph, here, to verify spacing between consecutive paragraphs and that the accent link colour reads cleanly against the page background. Inline code spans should sit on a subtle elevated surface and align with the baseline of surrounding text.

A subheading two levels deep

H3 is set tighter than H2 and is used inside long sections to break them into smaller scannable units. We are using it here to confirm the size, weight, and top-margin all feel right next to a paragraph that follows it immediately.

A full-width image

Images inside the prose container stretch to the full measure. The corners get a small radius, the aspect ratio is preserved, and the figure sits with the same vertical rhythm as a paragraph.

The alt text above doubles as the implicit caption for screen readers. We do not currently render a visible caption underneath — if we decide we want one, that’s a small template change in BlogLayout.astro.

A pull quote

Block quotes are used sparingly, usually to lift a single sentence out of the body so the reader slows down for a beat.

The scene that looks lit-for-the-camera reads as advertising. The scene that looks like the room reads as a moment.

The left rule is the brand accent. The text inside is italic and muted so the quote feels like a different voice from the body around it.

Lists

An unordered list, used for things where order does not matter:

• Available light first, supplemental second
• One producer per shoot, not three
• Tight edits — leave the audience wanting another minute
• Deliver in the format the platform actually wants

An ordered list, used when sequence matters:

1. Walk the room before the lights go up
2. Find the two or three angles worth holding
3. Shoot wide, then close, then a detail
4. Cut in the camera, not at the desk

Lists are indented enough to be obviously distinct from body copy but not so far that they break the column rhythm.

Code, when we need it

Inline code like --accent: #f38713 should be readable next to body type. Code blocks are reserved for the rare technical post:

.prose-blog blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.5em;
  font-style: italic;
  color: var(--muted);
}

The block uses the elevated surface tone, a subtle border radius, and horizontal scroll if a line runs long.

A second image, lower in the page

To verify that an image deep in the article still respects the same treatment as one near the top.

---

Things to look at on this page

• Are the heading sizes for H2 and H3 distinct enough?
• Does the body line length feel comfortable on a 1440-wide screen?
• Are the top and bottom margins around images right?
• Does the tag row at the top of the article need more breathing room?
• Is the published date styled the way we want, or should it be larger?
• Should images get a small caption underneath, drawn from the alt text?
• Should we add a “next post” link at the bottom?

If anything on this list needs a change, that’s the next round of edits. This post will be deleted before launch.