Three things changed in how posts look and read. Each one has a reason.

1. Arc color on post cards

Every post card now shows a left-border accent and a colored arc badge: slate for Arc 1, rose for Arc 2, gold for Arc 3. Previously both elements were always text-faint, making every card visually identical regardless of which arc it belonged to.

The principle at play is color as structure, not decoration. The arc system already defines a hierarchy: To See, To Feel, To Use, To Reflect. If that hierarchy exists in the content, it should be legible in the UI. Color is the most immediate way to signal category membership; a thin left-border is enough to orient a reader scanning a list without competing with the title.

This follows the pattern used in editorial design for magazine spreads with section colors, and in wayfinding systems where color encodes zone. The colors are all desaturated and muted (slate is a grayed blue, rose a dusty red, gold a warm ochre). They don’t shout, they orient.

One side effect: posts without an arc assignment render with a faint border, which is intentionally the most recessive option. This creates a natural visual hierarchy where arc-tagged work comes forward and untagged work steps back.

2. Arc eyebrow in article headers

When reading an article, the arc label now appears as a small uppercase eyebrow above the title, in the arc’s color, tracked out, visually subordinate to the heading but immediately readable.

The principle here is orientation before immersion. A reader arriving at an article via search or a direct link has no context for where they are in the arc structure. The eyebrow answers that before the title even registers: you are in Arc 1, this is a perception piece. You are in Arc 2, this is about emotion.

This is a standard editorial pattern: magazine articles use section labels above headlines for exactly this reason. It anchors the piece in its larger series without needing a sidebar or breadcrumb. The cost is one line of text. The gain is the reader always knows what they’re reading and why it exists.

3. Date and reading time on one line

Previously date and reading time were stacked on separate lines below the description. Now they sit on the same row, separated by a small gap.

This is purely a density decision. Two pieces of metadata that serve the same function (orienting the reader in time and effort) don’t need separate vertical positions. Combining them reduces the card height, tightens the information, and makes the list feel less padded.

The rule of thumb: group elements by function, not by type. Date and reading time are both pre-read signals: they answer “should I read this now?” before a reader commits. They belong together.

What didn’t change

The prose typography in articles is handled almost entirely by the Tailwind Typography plugin, which is configured in tailwind.config.js with the site’s design tokens: faint for body text, ink for headings, rose for links, gold for code. Removing dark:prose-invert (which was applied to the article wrapper) cleaned up a conflict: dark:prose-invert inverts prose color assumptions for dark mode, but since our typography plugin already defines colors explicitly for this dark-background design, the two were fighting. Removing it means the typography plugin’s configuration is the single source of truth.