Layout

beta

Farn's layout philosophy is content-first: let the content determine the container size, not the other way around. Width tokens give you three semantic slots. Structural HTML gives you meaningful landmarks. Grid and flex each have a clear job.

Content-first widths

Three width tokens cover the full range of layout needs. Apply them to the element that owns the constraint — usually a wrapper <div> with margin-inline: auto.

Token Value Use
--width-content 1080px Outer page container — navigation, hero, section wrappers
--width-prose 70ch Text column — articles, docs, any running prose
--width-narrow 640px Tight containers — forms, dialogs, focused card layouts

70ch is relative to the element's own font size, so prose columns naturally widen slightly for display headings and narrow for captions — no extra math required. For the full spacing reference including padding scale and z-index, see Styles › Spacing.

Page structure

Use semantic landmarks. Each landmark has a natural width token pairing: 

<body>
  <header>
    <!-- max-width: var(--width-content) -->
    <nav>...</nav>
  </header>

  <main>
    <!-- outer bound: var(--width-content) -->

    <article>
      <!-- prose column: var(--width-prose) -->
      <h1>...</h1>
      <p>...</p>
    </article>

    <aside>
      <!-- sidebar or supplemental: var(--width-narrow) -->
    </aside>
  </main>

  <footer>
    <!-- max-width: var(--width-content) -->
  </footer>
</body>

Grid vs flex

The rule of thumb: flex for one-dimensional alignment, grid for two-dimensional layout.

Pattern Use Example
Flex row Aligning items along a single axis Nav links, button group, icon + label
Flex column Stacking with controlled spacing Form fields, card body
Grid columns Placing items in explicit rows and columns Card grid, two-column doc layout
Grid auto-fill Responsive columns without breakpoints repeat(auto-fill, minmax(240px, 1fr))

Always use gap: var(--space-*) rather than margins between grid or flex children. This keeps spacing in the token system and avoids margin-collapse edge cases. See Styles › Spacing for the full scale.

Radius as hierarchy

Border radius is not purely decorative — it signals depth and interactivity. Use the scale consistently so elements at the same depth read as related.

Token Value Use
--radius-sm 4px Inset elements — code snippets, badges, table cells
--radius-md 6px Interactive elements — buttons, inputs, select menus
--radius-lg 8px Containers — cards, panels, modals
--radius-xl 12px Prominent containers — hero cards, feature blocks
--radius-full 9999px Pills, avatars, toggle switches

Nest radii correctly: an inner element should have a smaller radius than its container, roughly container-radius - padding. Matching radii at every level makes nested surfaces look misaligned.