The Full-Bleed Architecture
Building a landing page with zero wrappers and perfect vertical alignment.
The "Content" Track
This paragraph is automatically confined to the central 75ch column. Most of your landing page content lives here to maintain optimal readability.
Because the grid is defined on the parent, we don't need a ".container" div for every single block of text. The browser handles the margins natively.
Breaking the Grid
This background stretches from one physical edge of the screen to the other. However, by nesting the grid logic inside, this text remains perfectly aligned with the paragraphs above and below it.
Evangelist Tip: Notice how the left edge of this dashed box aligns exactly with the text in the sections above.
The Beauty of Flat HTML
Scroll up and down. Check the source code. You will see that the structure of the body is incredibly flat. This makes the code easier to maintain, faster to parse, and much more accessible for screen readers.
By using OKLCH for our greens and neutrals, we ensure that our brand colours remain vibrant and consistent across all modern displays.