Skip to content
Launch offerAll 100 styles $19 $99·Launch pricing ends Sunday
StyleMD

Saffron Editorial

A slow-living magazine spread: oversized serif, saffron ink, sunlit stone.

Free style · full files

Download free .zip

Includes DESIGN.md, theme.css, tokens.json and the preview page. Want the other 99? All-Access $19

getstylemd.com/p/saffron-editorial

The idea

Built like the opening spread of a Sunday supplement. A towering high-contrast serif carries the headline, a single saffron rule marks what matters, and warm sunlit photography does the rest. Calm, expensive, unhurried.

Saffron Editorial is a magazine spread translated to the web. It borrows from mid-century European travel magazines and contemporary slow-living journals: a towering, high-contrast serif at display sizes, a disciplined sans for reading, and large warm photography given room to breathe. Nothing shouts; hierarchy comes from scale and whitespace, not colour. The single saffron accent behaves like a printer's second ink — a rule, an underline, a number — never a fill. The result should feel calm, expensive and slightly literary.

Principles

  • Let one photograph per section carry the mood; never tile small images.
  • Set headlines huge and tight; let them break across lines deliberately.
  • Use saffron as a second ink only: rules, underlines, numerals.
  • Whitespace is the luxury — sections need at least 128px of air.
  • Write captions and labels like a magazine: small caps, issue numbers, dates.

Motion

Headlines rise line by line from behind a clip mask; the hero photograph drifts 4% in a 14-second Ken Burns. Links draw a saffron underline from left to right.

Do & don't

Do

  • ✓ Pair every section with one strong photograph or one strong headline, not both competing.
  • ✓ Use issue numbers, dates and small captions for editorial texture.
  • ✓ Let headlines break into three lines at desktop.
  • ✓ Keep body copy in a narrow measure (55–62ch).
  • ✓ Use italic for exactly one emphasised word per headline.
  • ✓ Leave large margins — 144px between sections on desktop.

Don't

  • ✕ Don't use saffron as a background or button colour.
  • ✕ Don't round images or add drop shadows.
  • ✕ Don't use icons in feature lists — numerals instead.
  • ✕ Don't centre long paragraphs.
  • ✕ Don't use pure white (#FFFFFF) or pure black.
  • ✕ Don't add gradients, glass or glow.

What's in the DESIGN.md

  1. 01Overview & principles
  2. 02Colors (tokens + proportions)
  3. 03Typography (families + 12-role scale)
  4. 04Layout & spacing scale
  5. 05Elevation & depth
  6. 06Shapes & radii
  7. 07Motion (easing, durations, signature)
  8. 08Imagery + generation prompt
  9. 09Components (button, card, nav, input, badge)
  10. 10Do's and don'ts
  11. 11Responsive behaviour
  12. 12Iteration guide + agent checklist

Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 365 lines of DESIGN.md in total.