Style Sample: Kitchen Sink

This is a temporary post for checking the article surface. It intentionally mixes prose, links, quotes, images, code, tables, and lists so the typography has to do a little work.

Section Heading

Good article styling should make scanning easy without turning every paragraph into a UI component. The main body text should feel calm, links like Astro should be obvious, and inline code such as getCollection("blog") should be legible without becoming visually loud.

A useful personal site is part profile, part notebook, part workshop. The important thing is that each mode feels intentional.

Image

Images need enough breathing room, a predictable width, and borders that do not make them feel like floating UI chrome.

Lists

An unordered list:

• Product notes
• Technical experiments
• Reading references
• Tiny tools and playgrounds

An ordered list:

1. Write the rough thought.
2. Turn it into a small artifact.
3. Keep the parts that still feel useful later.

Code

type Post = {
  title: string;
  date: Date;
  category: "AI" | "Tools" | "Web" | "Meta";
};

const newestFirst = (a: Post, b: Post) =>
  b.date.valueOf() - a.date.valueOf();

Table

Element	Purpose	Styling Check
Quote	Adds emphasis	Should stand apart from body text
Code	Shows implementation	Should not overflow awkwardly
Table	Compares ideas	Should stay readable on narrow screens

---

The end of a post should not feel like it fell off a cliff. There should be enough spacing below the final paragraph that the footer or next surface does not crowd it.