Using the Golden Section on This Site

The golden section is most useful when it behaves like a quiet constraint. It should help a page feel balanced, not announce that a formula has been applied.

For this site, the goal was not to turn every measurement into 1.618. The goal was to use the proportion where it could clarify hierarchy, reading order, and the relationship between content and supporting material.

A Reference, Not a Rule#

The golden section describes a relationship of roughly 1.618 to 1. In interface design, that relationship is easier to use as a reference than as a rigid system.

Responsive pages need to bend. Text wraps differently by viewport, images have their own native proportions, and interface controls need practical hit areas. If a golden-section measurement makes a layout harder to read or harder to use, it loses.

The rule here is simple: use the golden section for visible relationships, not for every detail.

Typography#

The body text stays at 17px, because that size works well for short notes and dense practical writing. A strict golden-section jump from there suggests title sizes around 28px and larger headings around 44px.

Those numbers are useful references, but the site still rounds toward familiar, readable sizes. List titles, featured note titles, section headings, and page titles use hierarchy that feels related without becoming a mechanical scale.

Line height follows the same logic. The golden section is a good anchor for prose rhythm, but long reading columns need more air. The article prose uses a generous line height because comfort matters more than numeric purity.

Layout#

The homepage hero is the clearest structural use. On desktop, the primary identity column and the supporting Now card use a 1.618fr / 1fr grid relationship.

That gives the introduction more visual authority while keeping the Now card close enough to read as part of the same opening composition. The search row still spans the full width, because its job is different: it anchors the first viewport and gives readers a direct path into the archive.

This is the kind of place where the golden section earns its keep. One side is clearly primary. The other side supports it. A 62% / 38% relationship makes that hierarchy visible without needing extra decoration.

Portfolio Frames#

Portfolio imagery now has an aspect-golden token:

--aspect-golden: 1.618 / 1;

That token is used for portfolio card image wells and carousel frames. It gives the work a wider editorial shape than a square or 4 / 3 frame, but it is less cinematic than 16 / 9.

The images themselves still use object-contain. The frame provides rhythm; it does not crop the work into compliance. That distinction matters for a portfolio, where the object being shown is more important than the container.

Modal Behavior#

The portfolio modal also uses the golden section on desktop. The image pane takes the larger share, and the text rail takes the smaller share:

media: 1.618fr
details: 1fr

That keeps attention on the work while leaving enough room for category, title, summary, and the close control.

The first version exposed a tradeoff. Some portfolio images are very tall, and locking the page scroll without giving the modal its own scroll path made the detail text hard to reach. The fix was to make the modal respond by context:

• On mobile and stacked layouts, the dialog itself can scroll.
• On desktop, the modal has a viewport-bounded height.
• The image pane scrolls independently when the artwork is tall.
• The text rail stays visible at the top when the modal opens.

The golden-section split remains, but usability controls the behavior.

What Not to Measure#

Some interface pieces are intentionally not golden-section-driven. Buttons, navigation links, tags, timestamps, and form controls need conventional sizing, predictable spacing, and comfortable interaction targets.

The same is true for mobile layouts. A single-column flow is often clearer than trying to preserve a desktop proportion on a narrow screen.

That restraint is part of the system. Proportion helps most when it supports the content structure readers already need.

The Practical Payoff#

The site now has a clearer proportional language:

• Type hierarchy references golden-section jumps without forcing an exact modular scale.
• The homepage hero uses a 1.618fr / 1fr desktop split.
• Portfolio media uses a reusable aspect-golden token.
• Desktop modals use a golden-section media/detail relationship.
• Tall images and small screens get practical scroll behavior instead of rigid geometry.

The result should not feel mathematical. It should feel settled.

That is the useful role of the golden section here: a quiet design pressure that helps the site stay editorial, readable, and composed.