Inkwell.

Chapter 05

Layout & spacing

Space is part of the palette. A few breakpoints, a handful of widths, one gutter and one vertical rhythm, used the same way on every page.

Built with

  • Tailwind breakpoints
  • max-width
  • Gutters

Where it changes

Breakpoints.

Inkwell uses Tailwind’s standard breakpoints and defines none of its own. Layouts start as a single column for phones and grow with sm:, md: and lg:. They are mobile-first: the unprefixed class is the phone.

  1. base0Phones. One column, 20px gutters. Design here first.
  2. sm640pxLarge phones and small tablets. Gutters widen on some pages.
  3. md768pxTablets. Two-column layouts begin, gutters become 32px.
  4. lg1024pxLaptops. The contents rail and the header search appear.
  5. xl1280pxWide screens. Rarely needed: layouts are capped well before this.

How wide

Widths and gutters.

The side gutter is most often px-5 md:px-8: 20px on phones, 32px from tablet up. A few pages use px-4 sm:px-8. Content is capped so a line never runs across a whole wide screen.

  • max-w-[1440px]

    The overall frame of the learn guides: contents rail plus chapter.

  • max-w-[1240px]

    A narrower frame used on a few pages.

  • max-w-3xl

    Wide reading blocks: code, callouts, diagrams.

  • max-w-2xl

    Body copy. The most used width, so a line stays comfortable to read.

The frame of a learn guide
<div className="mx-auto max-w-[1440px] px-5 md:px-8">  <p className="max-w-2xl">Reading text stays narrow.</p></div>

Up and down

Vertical rhythm.

A chapter is a stack of sections separated by space-y-28 (7rem), so each idea has room. Inside a section, a heading sits above its content with a 2rem gap. Every section anchor has scroll-mt-24, so a heading is never hidden under the sticky header when you jump to it.

A chapter, in outline
<div className="space-y-28">  <Section id="one" eyebrow="..." title="...">...</Section>  <Section id="two" eyebrow="..." title="...">...</Section></div>

The rule that never bends

Phones come first.

  1. A phone never scrolls sideways. Not the page, and not a code block, table or row of tabs inside it.
  2. Code wraps. Tables turn into stacked, labelled cards. Tab and chip rows wrap onto more lines.
  3. Every control is at least 40px tall on touch. Text inputs are 16px, so iOS does not zoom.
  4. Test at 390px wide. The reliable way is to render the page in a 390px iframe from the same origin and measure inside it.