Slopless Design · reference render
Everything above this panel is the design
Design code sd1.hVXLDoIwEPwXzmKEqJEriZ_hgUIbG7HFQhM_39kt6IbEcIJktt3HzE4pUAXfdONdY5epVTaDDHh2uRZ1UfNvdBYkPtAGvC-6yTbrway0VuzL064478q5ApHEBFSeD5jhPCaBjbrlXYMqexJOakcE2Cfm4qCPX3P_ruYZCxDUaUPaWFgQ2NenfCDBLsSIiGQcsEVWdOJIwOQ6-LArAJeEiqheT-iHamC65HkP3VF6y2tCnMuxRDW2wSqYh4-Dd8QnmNtuhKUiL5oaY3Ll39s1IkWVUpDKZAp-DGDPHVVKwhTgKyerarIbjku9lYdjNWvuAwoEPb (Broadsheet Newspaper), drawn by the Slopless preview renderer with sample copy. Use it as a visual guide while building: design/DESIGN.md and design/tokens.json are the source of truth. Every section root carries data-pattern with its pattern id.
Viewport
Without ?viewport= the render follows the window width once scripts run. Screenshot at 1440 px with ?viewport=desktop and at 375 px with ?viewport=phone.
Pages
Tokens at a glance
- Palette
- monochrome, light · bg #F4F0E6 · text #1B1A17 · accent #872824
- Type
- UnifrakturMaguntia / Newsreader · scale 1.25, base 16px
- Grid
- 12 columns, gutter 20px, max 1320px · section space 58px
- Shape
- radius 0px · border rule 1px · shadow none · motion none
Sections on the about page (/about), top to bottom
Each link shows that pattern alone with these tokens, beside its rule, grid areas, slots, notes and layout tree.
nav.broadsheet-section-rail Section rail · nav, on every pageBetween a 2 px and a 1 px rule: a small blackletter nameplate left, section links in caps in the middle, a 'Subscribe' text link right.content.broadsheet-column-story Column story · contentA kicker, a two-line serif headline, byline and dateline, a rule, then the story in two justified columns (the first with a drop cap) and a pull quote in the third, split by vertical rules.team.broadsheet-staff-box Staff box · teamThe paper's staff box: a bordered panel with a blackletter flag, a rule, and names in three columns, each with the role in small caps above the name.testimonial.broadsheet-letters Letters to the editor · testimonialA centred 'Letters' flag over a 2 px rule, then three to six letters in columns split by vertical rules: the letter in italic serif, the writer's name and town.footer.broadsheet-imprint Imprint · footer, on every pageA double rule, then the printer's imprint in small type: blackletter name 1–3, address 4–7, email 8–9, legal and copyright 10–12.
More
To see the user's own copy, append the #b=… part of their picker link to this URL. It is read in the browser only and never sent to the server.