Back to Gallery

Clone comparison

North Index · Editorial grid DESIGN.md

An editorial research publication that uses a disciplined grid, generous reading measure, and fluid typography rather than dashboard chrome.

Updated:

What this example demonstrates

  • Editorial grid
  • Fluid type
  • Mobile layout

Code-driven rebuild

Reads the page structure and CSS directly, then builds a clean Tailwind CSS v4 project.

Complete page assets

Keeps layouts, variables, and assets in a safe static preview.

Responsive layouts

Light and dark themes

Change the device width or theme and both previews show the same state. Webpages scroll together, while each HTML pane scrolls on its own.

Recreation challenge

The layout needs to retain its editorial rhythm and asymmetric emphasis as columns collapse across breakpoints.

Limits of this example

Article copy and citations are illustrative. Replace them with reviewed content and add the publishing workflow your project requires.

DESIGN.md

Design facts from the same capture

Download DESIGN.md
  • Header: Use align-items `end`; border-bottom `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `1fr 2fr auto`; padding-bottom `18px`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
  • Navigation: Use display `flex`; font-family `Arial,sans-serif`; gap `20px`. When viewport width <= 700px, use font-size `12px`; gap `10px`.
  • Level 1 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(54px,8vw,128px)`; letter-spacing `-.075em`; line-height `.82`; margin `18px 0`. When viewport width <= 700px, use font-size `58px`.
  • Border Default: #e33b2e
  • Level 2 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(24px,3vw,48px)`; line-height `1`; margin `12px 0`.
  • Page: Use font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`.

Use this workflow for your own page

Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.

More from Gallery

Block AssemblyA studio portfolio driven by asymmetric blocks, sharp geometry, primary colors, and a deliberately unconventional reading path.Orbit DeskA space-operations console with light and dark themes, dense system readings, and navigation that contracts cleanly on smaller screens.

Extract your own webpage

Enter a public page you own or have permission to use. Get a Tailwind CSS v4 project and DESIGN.md. Your URL is kept when you sign in.