Page design
Broadsheet Newspaper
A broadsheet front page on warm newsprint: folio line, blackletter flag between two ear boxes, a double-ruled section bar, a banner headline over a halftone portrait, and ruled columns of stories below the fold.
Paste this into an agent to rebuild the whole page from scratch.
Build a personal home page as the front page of a broadsheet newspaper, `The AntJanus Dispatch`. Everything follows print conventions: no cards, no rounded corners, no shadows, only hairline column rules, a strict headline ladder and a single spot colour. The visitor should feel they picked up a morning paper about one person's writing.
Lay the page on a 12-column grid inside a max width of about 1280px with 1.5rem gutters. Modules are rows of spans (`span-6`, `span-3`, `span-5`, `span-4`) separated by 1px vertical rules drawn in the column gap, and stacked modules get hairline horizontal separators. Below 960px every row collapses into one ruled column.
Use **UnifrakturMaguntia** for the flag and nothing else. Headlines are **Playfair Display** in a ladder: a banner `h1` across the full width around `clamp(2.6rem, 6vw, 5rem)` at weight 900, then `hed-1` to `hed-4` stepping down to about 1.1rem. Body copy and italic decks are **Newsreader** at about 1.125rem, and kickers, bylines, datelines and agate tables are **Libre Franklin**, small caps or uppercase with letter-spacing. Set a dropcap on the lead paragraph.
The day edition is warm newsprint `#f5f1e6` with ink `#16140f`, secondary ink `#57514a` and rules in `#ddd5c0`. The brand slate `#364f6a` is the only spot colour, used for kickers and links; a press red `#8f2a1c` marks alerts, red kickers and the reversed nav item. The night edition swaps to near-black stock `#121110` with ink `#ebe4d3`, slate lifted to `#9dbbdb` and red to `#f09482`, with the same rules and ladder. Put the toggle in the folio line as a small `Night edition` button, remember the choice in `localStorage` wrapped in try/catch, and fall back to `prefers-color-scheme`. Photos run as grayscale halftones: a CSS `grayscale` and contrast filter plus a dot-screen overlay made from a repeating `radial-gradient`.
The masthead is the signature. A folio line carries volume and number, the dateline city and date, and the edition toggle. Beneath it, a three-column masthead puts a circular `Aj` seal ear box on the left, the blackletter flag and a one-line italic motto in the centre, and a mountain-outline ear with `600+ GitHub stars` on the right. Then a section bar between a double rule and a single rule, with the current section set in reverse (ink background, paper text), and an `Inside` teaser line listing what each section holds.
Above the fold, run a red kicker and the banner headline, a cutoff rule, then three columns: a 4:5 halftone portrait with credit and cutline, a column with a large italic deck, a dropcap paragraph opening with a dateline, a three-cell stat box and buttons, and a `Start here` rail of three stacked stories. Mark the fold with a dashed rule labelled `The fold`. Below it, each section opens with a standing head (Playfair title, italic deck, `View all` link) over ruled columns of stories: one dominant story with a 16:9 halftone and cutline, and two narrower stacks. The Digital Garden adds a boxed numbered list, the AI experiments run as a four-column classifieds block with category labels, and the closing row pairs ghost buttons, an agate table of projects, and an inverse `Notice` box for consulting. The colophon repeats the flag small beside link columns and a `Home delivery` newsletter form.
The page is static apart from link hover underlines and the edition toggle; resist adding motion, since a newspaper's authority comes from stillness. Under `prefers-reduced-motion` there is nothing to remove. At 400px the masthead ears hide, the flag scales down with `clamp`, the section bar wraps into a three-column grid of ruled cells, and every module is a single column. Do not overdo the blackletter: it belongs only on the flag.
One self-contained file: markup, styles and scripts together.
Loading the page source…
The whole front page of the newspaper demo, from masthead to colophon, as one page: the above-the-fold lead with portrait, deck, stat box and Start here rail, then AI, Digital Garden and Classifieds modules, and a Notice box for consulting. It works because it commits to print conventions throughout, with 1px column rules instead of cards, a strict headline ladder, and a single slate spot colour.
Sections, top to bottom
- Folio line, blackletter flag with ears, section bar and Inside teasers
- Above-the-fold lead: banner headline, halftone portrait, stat box, Start here rail
- Fold marker
- AI and Machine Learning module
- Digital Garden module with Demystifying Tools box
- Classifieds: AI Experiments
- Connect, projects agate table and Work With Me notice
- Colophon footer with newsletter
- Type
- UnifrakturMaguntia (flag only) · Playfair Display (headlines) · Newsreader (body, decks) · Libre Franklin (kickers, bylines, agate, UI) · IBM Plex Mono (code)
- Themes
- light+dark
- Palette
#f5f1e6#ebe5d5#ddd5c0#16140f#3a362d#57514a#364f6a#8f2a1c#121110#1b1a17#ebe4d3#9dbbdb#f09482