Journal

---
name: journal
description: Editorial magazine theme with a centered masthead, serif headlines, structured story grids, and restrained ochre accents.
license: MIT
metadata:
  author: Aimeos
---

# Journal Theme Design System

## Mission

Build credible editorial pages that make dense reporting easy to scan without turning the interface into a dashboard.

## Brand

Journal is sober, structured, and image-led. The page surround is warm gray (`#F1EFEC`), story modules are white, text is charcoal (`#1F1E1C`), and ochre (`#8C620C`) marks sections, actions, and active states. It uses Pico CSS and the existing markup in `theme/views/`.

## Style Foundations

- Typography: Georgia or the nearest system serif for masthead and headlines; Arial/Helvetica/system sans-serif for navigation, metadata, controls, and body UI
- Headline rhythm: compact line height, strong weight, no centered marketing copy except the masthead
- Surfaces: consecutive content elements form one white editorial surface; warm-gray vertical gaps separate heroes and the outer content frame
- Geometry: `--pico-border-radius: 0`; cards, dialogs, fields, and buttons stay square
- Accent: ochre is reserved for categories, primary actions, focus, and active navigation
- Images: editorial crops use `16 / 10`, article leads use `16 / 9`, and hero media fills its section without distortion
- Maximum width: 1156px shared page frame, with narrower article and prose measures where readability requires them

## Component Rules

- Header: center the masthead above a separate category rail on desktop; collapse to one accessible menu below 992px
- Hero: place the first content layer over the section image or slideshow and use a restrained dark overlay for legibility
- Story grids: present blog entries as four equal editorial cards on desktop, two on tablets, and one on phones
- Cards: use a bottom rule instead of rounded containers or shadows; change the rule to ochre on hover
- Articles: keep introductions and body copy on a narrow measure, while cover images may use the full content width
- Buttons: uppercase sans-serif labels, square borders, ochre primary action, white secondary action
- Footer: use sectioned link columns, a strong bottom rule, and the same masthead identity as the header

## Accessibility

- Keep text and controls at WCAG 2.2 AA contrast or better
- Use a visible 3px ochre focus outline with a 3px offset
- Preserve semantic headings, navigation labels, dialogs, details, and skip links
- Do not use color alone to identify an active item; combine color with borders, text, or position
- Keep touch targets at least 2.25rem high and allow long navigation labels to wrap on mobile
- Respect `prefers-reduced-motion` for image scaling and scrolling

## Content and Tone

- Write precise, direct headlines that state the tension or consequence
- Prefer concrete nouns, quantities, and decisions over slogans
- Keep summaries to two or three sentences and say why the story matters
- Use descriptive link text such as `Read the electricity-grid analysis`, not `Learn more`

## Prohibited Patterns

- No pill buttons, rounded cards, glass effects, heavy shadows, or decorative textures
- No invented utility classes or component markup; style the structures from `theme/views/`
- No oversized marketing gradients or animation that competes with reading
- No copied publication branding, logos, article text, or proprietary photography

## QA Checklist

- Masthead is centered and the category rail remains usable at 320px and 1280px
- Keyboard focus is visible on navigation, dropdowns, search, forms, and article links
- Lead and supporting story hierarchy is clear without relying on image content
- All card and article images retain intentional aspect ratios without distortion
- Long navigation labels wrap without overlapping search or subscription actions
- Reduced-motion mode removes nonessential image scaling
- JSON schema, PHP syntax, demo seeding, representative route rendering, PHPUnit, and PHPStan pass