ZeroFy

Demo Site 8 — Editorial

Ink, paper, one red rule.

Editorial borrows from print journalism: a warm paper ground, a single deep red used sparingly, a high-contrast serif at display size, and hairline rules instead of boxes. The page reads like a magazine feature rather than a product page.

  • Warm paper
  • One red rule
  • High-contrast serif
  • Hairlines
  • Light and dark
Start your project See the next demo

What this theme does

Four habits that make a page feel like something worth reading rather than something to skim.

One accent, strictly

A single deep red marks the kicker, the button and the hover state, and appears nowhere else, so it always means something.

Rules, not boxes

Sections are separated by a hairline rather than a border and a fill, which is what keeps an editorial page open.

Serif for the voice

A high-contrast serif at display size carries the personality, while the body stays in a plainer serif for long reading.

Cards without cards

The content blocks drop their boxes entirely and keep only a bottom rule, so the grid stays visible without the chrome.

The theme in numbers

Small, measurable decisions are what make an editorial page feel composed rather than empty.

  • 1 Accent colour

    A single deep red, spent only where it earns attention.

  • 1px Rule weight

    A hairline that separates without boxing in.

  • 0px Corner radius

    Nothing on this page is rounded.

  • 320px Narrowest layout

    Fluid rules hold all the way down to 320px.

Typography and spacing

A serif throughout, with the display size left italic and tight. The specimen on the left uses the same tokens as the page.

  • Display 68px

    Set like a headline

  • Heading 36px

    A quieter second voice

  • Title 22px

    Deck and standfirst

  • Body 17px

    The reading size. Built for an hour, not a glance.

  • Caption 13px

    Credits, notes and metadata

Display
Georgia italic at display size, tight leading.
Body
Georgia regular at 17px on a 1.75 line height, the loosest here.
Scale
68 / 36 / 22 / 17 / 13 px, five sizes and no more.
Spacing
4, 8, 16, 24, 32 and 64 px from one rhythm.
Measure
62ch for ledes, 72ch for running text, the widest here.
Grid
12 columns, 1200px maximum, 24px gutter.
Corners
0px. A rounded corner would break the rule.
Borders
A single 1px hairline in the ink colour.
Shadows
One 2px underline. No lift, no glow.
Motion
150ms on colour and underline width only.
Icons
1.05rem, 1.8px outline stroke, no fills.
Files
3 HTML, 2 CSS, 2 JS. No build step, no framework.

What you get in the box

Six things that are already solved, so the work that remains is your own content.

  • Design tokens

    Every colour, radius and shadow is a CSS variable, so the light and dark palettes live in a single block of overrides.

  • Semantic markup

    Landmarks, one h1, ordered headings and real lists, so assistive technology reads the page in the order you wrote it.

  • Keyboard support

    Every control is reachable with Tab and shows a visible 2px focus ring that is never removed.

  • Responsive by default

    Fluid type and grid rules hold from 320px. Breakpoints only handle the navigation and the mode switcher.

  • Reduced motion

    When the operating system asks for less movement, every transition on the page collapses to nothing.

  • No dependencies

    No framework and no bundler. Open the file in a browser and it runs.

How a build with this theme goes

Four steps, usually two or three days for a small business site from brief to handover.

  1. 1

    Choose the accent

    We settle on one red and refuse every other colour, so the accent keeps its meaning across every page of the site.

  2. 2

    Set the measure

    A wider line length and a looser leading than the other themes, because an editorial page is read rather than scanned.

  3. 3

    Drop the boxes

    Cards keep a hairline and lose their fill, radius and shadow, which is what opens the page up.

  4. 4

    Prove it

    We check contrast, keyboard order and a 320px viewport before the theme goes anywhere near production.

Is this the right theme for you?

Editorial is a reading theme, so it is worth being honest about where it works and where it will fight you.

Use it when

  • Essays, long-form articles and anything a visitor reads for more than a minute.
  • Newsrooms, think tanks, research and policy, where the argument is the product.
  • Studios and practices that want a considered, literate page rather than a loud one.
  • Premium brands whose voice does more work than their imagery.

Skip it when

  • Dashboards, catalogues and anything where a user scans for a control.
  • Short conversion pages, where the reader will not stay long enough to be drawn in.
  • Brands that need several accent colours to separate sections.
  • Products aimed at a very young audience, who tend to read a serif as homework.

Questions people ask

The things clients usually want to know before committing to a reading-first design.

Can I copy this demo as a starting point?

Yes. The eight demos share css/styles.css and css/demo-themes.css. Each theme is one token block plus one character block, so copying a page and its theme gives you a working site with no wiring to redo.

Why serif for everything?

Because this theme is borrowing from print, and print sets its body copy in a serif too. The looser leading and wider measure are what make long reading comfortable at that.

Is a red accent enough colour?

On this theme, yes. The red is the only accent in the palette, which is why it lands. Adding a second one usually flattens the effect rather than adding to it.

Does the dark mode hold up?

It is a separate set of tokens, not an inversion. Light is warm paper with black ink and a deep red; dark is a near-black ground with cream ink and the red lifted, so the hairline rules still read as rules.

What fonts can I swap in?

Anything with a similar range of weights. The theme uses --display-font and --body-font, so you can point both at one family or run a second family for headings without touching the markup.

Is it accessible?

The light palette is checked token by token against the 4.5:1 ratio WCAG asks for, and dark mode is checked the same way. Focus rings are never suppressed, the FAQ uses real disclosure widgets, and every list on the page is a real list.

Our average read time went up because the page finally looked like something worth sitting with. That was the whole project.

Placeholder testimonial for this demo — swap in a real client quote before launch.

Live colour palette

Ten tokens, two palettes. The chips are painted with the same custom properties the page uses, and the code under each one is read live from the computed style, so the switch in the header updates both together.

  • Background --bg
  • Surface --surface
  • Surface tint --surface-strong
  • Primary --primary
  • Primary soft --primary-soft
  • Secondary --secondary
  • Accent --accent
  • Text --text
  • Muted --muted
  • Border --border

Light mode is warm paper with black ink and a single deep red. Dark mode drops to a near-black ground with cream ink and the red lifted, so the hairline rules still read. The value under each chip is read live from the computed style.

Try the other themes

The same content, seven other personalities. The mode you pick follows you between them.

Want a page worth reading?

Tell us what you do and what you would rather stop saying. We will send back a stripped-down first pass, a fixed price, and an honest note on anything we think should be cut.

Start your project Read about ZeroFy

Replies within one working day. No newsletter and no follow-up calls.