Chun

Chun is a bold asymmetric layout built around weight contrast and tight margins. Where most editorial layouts aim for calm readability, Chun creates deliberate visual tension — the kind that keeps readers anchored when working through dense material. The name references the controlled energy of its composition: every element has a specific gravitational pull, and the asymmetry is intentional rather than accidental.

We developed Chun for content that needs to hold attention through complexity — technical documentation, comparative analyses, and long-form arguments where losing the reader's place means losing the argument. The two-column asymmetric grid gives primary content 65% of the horizontal space while the supporting column handles annotations, key definitions, and contextual callouts. This is not a sidebar in the traditional sense. It is an active participant in the reading experience.

Theme authors building layouts for documentation-heavy sites, design system reference pages, or academic content will find the most value in Chun's approach. The tension between columns creates energy without chaos, and the strong vertical rhythm ensures that even when content shifts between columns, the reading pace stays consistent.

Layout Anatomy

Chun divides the viewport into two unequal columns at a 65/35 ratio, with a narrow gutter of 24px. The primary column holds the main narrative. The secondary column is not a passive sidebar — it contains active annotations that correspond to adjacent content in the primary column. This creates a call-and-response reading pattern that works surprisingly well for technical material. On viewports below 900px, the secondary column stacks below each relevant section rather than collapsing entirely.

Spacing and Typography Notes

Vertical spacing in Chun is tighter than in most editorial layouts. Paragraph spacing is 1.25× the line height — deliberately compact to maintain the density that makes the two-column format work. Section headings use 2.5× spacing above, which creates enough separation to signal a new topic without breaking the visual connection between columns. The tight spacing is what gives Chun its characteristic energy; loosening it undermines the layout's core identity.

Chun uses a heavier font weight for headings than is typical — 800 rather than 700 — paired with a slightly condensed letter spacing of -0.02em. This creates the 'bold' character that defines the layout. Body text stays at regular weight with a line height of 1.55, which is slightly tighter than the standard 1.6 but appropriate for the denser spacing context. The secondary column uses a smaller type size (14px) to maintain visual hierarchy without fighting the primary content for attention.

Components in This Layout

The primary components in Chun are the annotation callout, the inline definition block, the section divider, and the cross-reference link. Annotation callouts appear in the secondary column and are visually aligned with relevant paragraphs using a subtle dotted connector line. Inline definitions use a highlighted background to distinguish them from narrative text. The section divider is a bold horizontal rule with the section number — a detail that helps readers navigate lengthy documents.

Common Implementation Mistakes

• Making the secondary column too wide. Beyond 35%, it starts competing with the primary content for attention and the call-and-response pattern breaks down into two parallel streams that neither supports.
• Using the same font size in both columns. The hierarchy between primary and secondary content depends on the size difference — without it, the layout feels like two competing articles placed side by side.
• Stacking the secondary column at the bottom of the page on mobile. Chun's annotations lose their value when separated from the content they reference. Section-level stacking preserves the relationship.
• Forgetting to test with short content. Chun's two-column layout creates visible empty space when sections are brief. Either pad with contextual callouts or consider whether the layout suits your content length.
• Applying Chun's density to image-heavy content. The tight spacing works for text because reading creates its own rhythm. Images need more breathing room, and forcing them into Chun's cadence makes the page feel cramped.