The Daily Style
Friday, March 7, 2026 · Final Edition
Technologies Demonstrated
[Alpine] Copy-to-clipboard ink swatches with x-data + @click
[Alpine] Breaking News banner toggle slide in/out
[HTMX] Letters to the Editor form submission to /guides/newspaper/demo-form
[Alpine] Expandable story cards with x-show + x-transition
[HTMX] Infinite scroll headlines with hx-trigger='revealed'
[HTMX] Article view transitions with hx-swap='innerHTML transition:true'
[Alpine] Reading progress bar with @scroll.window tracking
Color Palette
[Alpine]Cream Paper
#faf9f6
Ink Black
#1a1a1a
Spot Red
#c41e1e
Paper White
#ffffff
Click any swatch to copy the hex value to clipboard. A newspaper palette is defined by restraint.
<div class="grid grid-cols-2 sm:grid-cols-4 gap-6"> @newsColorSwatch("Cream Paper", "var(--color-bg)", "#faf9f6") @newsColorSwatch("Ink Black", "var(--color-secondary)", "#1a1a1a") @newsColorSwatch("Spot Red", "var(--color-primary)", "#c41e1e") @newsColorSwatch("Paper White", "var(--color-surface)", "#ffffff") </div>
Typography
Headlines Set The Tone
Subheads Guide the Reader Through the Story
Typography is the voice of a newspaper. Every choice of weight, size, and leading communicates hierarchy before a single word is read. The serif face carries authority earned over centuries of print. A well-set column of text is invisible — the reader sees only the story. But set it poorly and every line is a stumbling block. The measure, the leading, the word spacing: these are the silent architecture of reading.
"Good typography is invisible. Bad typography is everywhere."
Photo captions, bylines, and metadata. Small-caps variant used for attributions and datelines throughout.
Spacing Scale
4px
8px
16px
24px
32px
48px
64px
The gutter is the space between columns. In newspaper design, 2rem is standard. The column rule provides a subtle visual separator that helps the eye track back to the correct column after reaching the end of a line. Without the rule, columns set too close together become illegible. Without adequate gutter width, the text feels cramped.
Buttons
[Alpine]⚠ BREAKING: Typography declared the most important design tool of the century
<div x-data="{ breaking: false }"> <button class="news-btn cursor-pointer" { templ.Attributes{"@click": "breaking = !breaking"}... } > <span x-text="breaking ? 'Dismiss Alert' : 'Show Breaking News'">Show Breaking News</span> </button> <div x-show="breaking" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" class="news-breaking mt-4" > { "\u26a0 BREAKING: Typography declared the most important design tool of the century" } </div> </div>
Forms
[HTMX] [Alpine]Letters to the Editor
<form hx-post="/guides/newspaper/demo-form" hx-target="#news-form-response" hx-swap="innerHTML" class="space-y-6" > <div> <label class="block news-byline mb-2" for="news-name">Your Name</label> <input id="news-name" name="name" type="text" placeholder="e.g. A. Reader" class="news-input"/> </div> <div> <label class="block news-byline mb-2" for="news-subject">Subject</label> <select id="news-subject" name="category" class="news-input cursor-pointer" style="background: transparent;"> <option value="">Select a topic...</option> <option value="typography">Typography</option> <option value="design">Design</option> <option value="editorial">Editorial</option> <option value="corrections">Corrections</option> </select> </div> <div> <label class="block news-byline mb-2" for="news-message">Your Letter</label> <textarea id="news-message" name="message" rows="4" placeholder="Dear Editor,..." class="news-input" style="resize: vertical;"></textarea> </div> <!-- Checkboxes --> <div> <p class="news-byline mb-2">Preferences</p> <div class="space-y-2"> <label class="flex items-center gap-2 cursor-pointer" style="font-family: var(--font-body); font-size: var(--font-size-body);"> <input type="checkbox" name="pref" value="anonymous" class="w-4 h-4 cursor-pointer"/> Publish anonymously </label> <label class="flex items-center gap-2 cursor-pointer" style="font-family: var(--font-body); font-size: var(--font-size-body);"> <input type="checkbox" name="pref" value="subscribe" class="w-4 h-4 cursor-pointer"/> Subscribe to responses </label> </div> </div> <!-- Radio --> <div> <p class="news-byline mb-2">Urgency</p> <div class="space-y-2"> <label class="flex items-center gap-2 cursor-pointer" style="font-family: var(--font-body); font-size: var(--font-size-body);"> <input type="radio" name="weight" value="standard" checked class="w-4 h-4 cursor-pointer"/> Standard </label> <label class="flex items-center gap-2 cursor-pointer" style="font-family: var(--font-body); font-size: var(--font-size-body);"> <input type="radio" name="weight" value="urgent" class="w-4 h-4 cursor-pointer"/> Urgent </label> </div> </div> <div> <button type="submit" class="news-btn news-btn-primary cursor-pointer">Submit Letter</button> </div> </form>
Cards & Panels
[Alpine]The Typographic Renaissance: How Digital Design Rediscovered Print
For decades, web design chased novelty. Rounded corners, gradients, flat design, material design, neumorphism. Each trend lasted a few years before being replaced. But in the quiet margins, a counter-movement was forming. Designers began to look backward, past the screen, to the centuries of typographic craft that preceded the pixel. What they found was not nostalgia but clarity.
Serif Fonts Make a Comeback in Web Design
After years of sans-serif dominance, designers are returning to serif typefaces for body text, citing improved readability.
Read More ›Column Layout Properties See Renewed Interest
The CSS multi-column specification, long overlooked, is finding new applications in editorial web design.
Read More ›Why Every Designer Should Study Newspapers +
The newspaper is the original design system. Centuries before atomic design or component libraries, editors and typesetters developed rigorous systems for organizing information hierarchically. Every designer working in digital media owes a debt to the broadsheet. Understanding these foundations is not optional — it is essential.
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="news-card"> <p class="news-byline mt-2 mb-1">Typography</p> <h4 class="news-headline-sm mb-2">Serif Fonts Make a Comeback in Web Design</h4> <p style="font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.5;"> After years of sans-serif dominance, designers are returning to serif typefaces for body text, citing improved readability. </p> <a class="inline-block mt-3" style="font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-primary); cursor: pointer;">{ "Read More \u203a" }</a> </div> <div class="news-card"> <p class="news-byline mt-2 mb-1">CSS</p> <h4 class="news-headline-sm mb-2">Column Layout Properties See Renewed Interest</h4> <p style="font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.5;"> The CSS multi-column specification, long overlooked, is finding new applications in editorial web design. </p> <a class="inline-block mt-3" style="font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-primary); cursor: pointer;">{ "Read More \u203a" }</a> </div> <!-- Expandable card --> <div class="news-card" x-data="{ expanded: false }"> <div class="cursor-pointer" { templ.Attributes{"@click": "expanded = !expanded"}... } > <p class="news-byline mt-2 mb-1">Opinion</p> <h4 class="news-headline-sm mb-2"> Why Every Designer Should Study Newspapers <span class="inline-block transition-transform text-sm" { templ.Attributes{":class": "expanded ? 'rotate-45' : ''"}... }>+</span> </h4> </div> <div x-show="expanded" x-transition class="mt-2"> <p style="font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.5;"> The newspaper is the original design system. Centuries before atomic design or component libraries, editors and typesetters developed rigorous systems for organizing information hierarchically. Every designer working in digital media owes a debt to the broadsheet. Understanding these foundations is not optional — it is essential. </p> </div> </div> </div>
Latest Headlines
[HTMX]The Grid Is Dead, Long Live the Grid
Modern layout systems have made the rigid grid obsolete — or have they? A look at the evolution of page structure.
Why Your Font Choice Is Wrong
A provocative look at the assumptions designers make about typeface selection and readability.
The Case Against Color
When restraint becomes the most powerful tool in a designer’s arsenal.
<div id="news-main-content"> @HeadlineCard("0", "Design", "The Grid Is Dead, Long Live the Grid", "Modern layout systems have made the rigid grid obsolete \u2014 or have they? A look at the evolution of page structure.", "By Jane Chen \u00b7 8 min read") @HeadlineCard("1", "Typography", "Why Your Font Choice Is Wrong", "A provocative look at the assumptions designers make about typeface selection and readability.", "By Marcus Webb \u00b7 5 min read") @HeadlineCard("2", "Color Theory", "The Case Against Color", "When restraint becomes the most powerful tool in a designer\u2019s arsenal.", "By Sarah Kim \u00b7 6 min read") @HeadlineSentinel("1") </div>
Article View Transition
[HTMX]Click any headline in the feed above. The article loads into the same container using hx-swap="innerHTML transition:true". A "Back to Front Page" button returns to the headline listing via /guides/newspaper/feed.
Reading Progress
[Alpine]The red progress bar at the very top of the viewport tracks your scroll position. It uses Alpine.js @scroll.window to calculate percentage via scrollY / (documentHeight - windowHeight).
<div x-data="{ progress: 0 }" { templ.Attributes{ "@scroll.window": "progress = Math.min(100, Math.round(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight) * 100))", ":style": "'width:' + progress + '%'", }... } class="news-progress"> </div>