# Editorial Modernism — style guide for coding agents

> Generated from the Aesthetary record for **Editorial Modernism**.
> Research: **Partly sourced** · Build guidance: 13 rules recorded.
> 15 sources attached.

## How to use this

Paste this file into your agent as context before asking it to design or build something in this visual language. It states what is established, what is our interpretation, and what nobody has established. Treat all three differently.

**The most important section is "Not researched yet".** Its purpose is to stop you and your agent inventing rules that sound right and are not recorded anywhere.

## What this language is

**Defining:** Spread composed as one image, bled photography, one restricted typeface, generous white space

**Recognise it by:** A double-page spread read as one composition: a photograph bled or cropped hard across the gutter, one headline or display face at an extreme scale against large white (or black) space, and text set as a subordinate block in the composition rather than filling the page.

**Family:** Editorial & Typographic
**Era:** modernist, contemporary
**Native medium:** print_serial

**Scope:** Spread-led modernist art direction in illustrated magazines: Agha's Condé Nast titles, Brodovitch's Harper's Bazaar and Portfolio, and Fleckhaus's twen, across fashion, general-interest and youth titles. The unit is the page: the spread composed as one image. It does not cover newspapers or the generic apparatus of long-form reading (pull quotes, drop caps, baseline grids), which no opened source ties to this tradition. Fashion Editorial is the fashion image itself; this record is the page.

## What it is arguing

The spread is the unit. Photograph, type and white space are composed as one image, and copy gives way to the composition rather than the page serving a long text.

**It refuses:** Refuses the page as a container of separately placed elements held apart by column rules, borders and sidebars.

## What it is not

Commonly confused with these. Getting the difference right matters more than getting the surface right:

- Swiss Style — The grid is the organising subject, not just a tool; hierarchy comes from position and weight alone
- Fashion Editorial
- Broadsheet

## Established rules

Grouped by what kind of claim each is. A requirement of the language and our own interpretation are not interchangeable.

**How to read each rule.** Every rule states two separate things, and neither stands in for the other:

- **Kind of claim** (the heading): Documented · Source not yet verified · Documented · Source attached.
- **Evidence** (how it is established): Graded by our research brief · No source attached (`DOCUMENTED`) · From our catalogue entry (`SUPPORTED`) · Our reading (`CURATORIAL`) · Not researched yet (`UNKNOWN`) · No grade recorded (no grade in the record). Where a claim has its own canonical label, the Evidence line gives that label instead of the grade.
- **Product area**: which of the twelve areas the rule belongs to (Layout, Typography, Color, Imagery, Surface, Interface, Motion, Motif, Technique, Form, Hierarchy, Density), mapped from its raw area label in bold. "Context" means the rule is about the Aesthetic (its name, origin, lineage) rather than a part of the design. "Not mapped" means the raw area has no single area yet.
- The code in brackets is the `grade` field at `implementationConstraints.tokenRules.value.rules[].provenance.grade` in https://aesthetary.com/data/editorial-modernism.json. "From our catalogue entry" means: Stated in Aesthetary’s existing catalogue entry. An outside source is named only where one is linked to the claim.

### Documented · Source not yet verified

- **composition** — The spread is composed as one image: photograph, type and empty area are placed as a single composition, not as independently positioned elements inside a container.
  - Kind of claim: Documented · Source not yet verified · Evidence: Documented · Source not yet verified · Product area: Layout

## Found in research

What research established from sources Aesthetary opened and checked. Each line names its area, how it is known, and where it is scoped. "Seen in the work" means the source documents particular works or products rather than the Aesthetic as a whole.

- **Typography** — Brodovitch set Harper's Bazaar in a single Didone family (Didot) throughout.
  - Evidence: Documented · Source attached · Claim: `kcc:typography-1` · Covers Harper's Bazaar 1934–58.
- **Typography** — Agha introduced sans-serif typefaces at Condé Nast.
  - Evidence: Documented · Source attached · Claim: `kcc:typography-2` · Covers Vogue, Vanity Fair, House & Garden.
- **Typography** — twen set headlines in all-caps Schmalfette Grotesk with text in a sans serif.
  - Evidence: Documented · Source attached · Claim: `kcc:typography-3` · Covers twen.
- **Color** — At Brodovitch's Harper's Bazaar, Didot is described as 'the black blade that cut the white space' of his layouts.
  - Evidence: Documented · Source attached · Claim: `kcc:color-1` · Covers Brodovitch's Harper's Bazaar.
- **Color** — Brodovitch championed colour photography, while twen's photography was mostly black-and-white reportage.
  - Evidence: Documented · Source attached · Claim: `kcc:color-2` · Covers Bazaar 1934–58; early twen.
- **Color** — At twen, Fleckhaus marshalled often daring amounts of white or black space into his layouts.
  - Evidence: Documented · Source attached · Claim: `kcc:color-3` · Covers twen.
- **Imagery** — Photography is the cornerstone of the page, commissioned from leading photographers.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-1`
- **Imagery** — Images are cropped hard, placed off-centre and bled off the page or across the double spread.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-2`
- **Imagery** — Brodovitch is credited with freeing fashion photography from the confines of the studio.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-3` · Covers Harper's Bazaar.
- **Imagery** — Image drama is produced by extremes of scale, contrast and repetition; at twen the photography was mostly black-and-white reportage.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-4` · Covers twen.
- **Imagery** — In Brodovitch's own photography grain and contrast were deliberately exaggerated.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-5` · Covers Ballet (1945), not the magazine.
- **Surface** — In the fashion-magazine pages the source discusses, halftone printing on glossy coated paper made bodies and pages sleek, uninterrupted surfaces.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-surface-1` · Covers US Vogue and Harper's Bazaar, 1930s.
- **Surface** — The source says the appearance of luxury, once signified by ornament and decoration, had moved toward modernism's machine-made objects with smooth, spartan surfaces, and that white space became a talisman of modernist design in the 1930s.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-surface-2` · Covers discussed around Brodovitch's 1934 Bazaar redesign.
- **Surface** — Deep printed blacks set against text pages carried luxury and emphasis.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-surface-3` · Covers early 1930s.
- **Surface** — Vogue and Vanity Fair were printed letterpress. Art directors Brodovitch and Liberman printed photographs full bleed, and the source says distinctions collapsed between the glossy gelatin silver photograph and the halftone-printed coated page.
  - Evidence: Documented · Source attached · Claim: `kcc:w2-surface-4` · Covers 1930s–1960s.
- **Interface** — Borders around photographs, column rules and sidebars were removed from the page.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-1` · Covers Agha at Vogue; encyclopaedic source only.
- **Interface** — Columns were 'exploded' rather than kept as boxed containers.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-2` · Covers Brodovitch at Harper's Bazaar.
- **Motion** — Printed pages cannot animate; the sources describe movement only as sequencing across pages ('cinematic pacing').
  - Evidence: Documented · Source attached · Claim: `kcc:motion-1`
- **Technique** — Layouts were made by hand-arranging photostats of photographs and type on a cutting board and pasting them up.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-1` · Covers Brodovitch at Harper's Bazaar.
- **Technique** — Full-bleed images, printed without borders over the edge of the page, were introduced by Agha and used at Brodovitch's Bazaar.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-2`
- **Technique** — Cut-out images with runaround type were used, at a production cost to subeditors.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-3` · Covers Fleckhaus, F.A.Z. Magazin 1980–83.
- **Form** — Portfolio used fold-outs, die-cuts and tipped-in materials.
  - Evidence: Documented · Source attached · Claim: `kcc:form-1` · Covers Portfolio (1949/50–51) only.
- **Hierarchy** — At twen, Fleckhaus used extremes of scale, and would blow up a single-word headline across a double spread.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-1` · Covers twen.
- **Hierarchy** — At Brodovitch's Bazaar, copy was sacrificed to preserve white space.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-2` · Covers Harper's Bazaar under Brodovitch.
- **Hierarchy** — Sequence across pages is paced like film, with crescendos and pauses.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-3`
- **Density** — Low density: generous, deliberately preserved white space is a defining feature.
  - Evidence: Documented · Source attached · Claim: `kcc:density-1`
- **Density** — Negative space may be black as well as white.
  - Evidence: Documented · Source attached · Claim: `kcc:density-2` · Covers twen.

## Positions by area

The overall position recorded for each area. "No overall position recorded" means rules exist for the area but no position above them; the rules still apply. It is not the same as "Not established", which means nobody has researched the area.

- **Layout** — Specified
- **Typography** — Specified
- **Color** — Specified
- **Imagery** — Specified
- **Surface** — Specified
- **Interface** — Ruled out
- **Technique** — Specified
- **Motion** — Outside this language. The area does not apply; this is not a gap in the research.

## Design grammar — web primitives

A starting grammar for a website in Editorial Modernism: the screen composed as a double-page spread, one photograph bled and cropped hard, one headline at an extreme scale, white (or black) space kept at the cost of copy, and text as a subordinate block.

Three kinds of line: **On the record** names a rule this record holds (its wording is under Established rules) and states what it becomes on the web. **Web translation** is Aesthetary's choice for the web, derived from the rules it cites; change it if you have a reason, keep the cited rule. **Not specified by the source** means the research reached this but the sources say nothing about it; **Not researched yet** means the research has not reached it yet. Either way, follow the instruction and do not invent a rule. Structured version: `designGrammar` in data/editorial-modernism.json.

### Colour

| Role | Value | Contrast | Use | Kind |
| --- | --- | --- | --- | --- |
| paper | `#FDFDFB` | — | The white space. It is the largest thing on the page. | Web translation |
| ink | `#141412` | 18.4:1 | Type, hairlines and black space. | Web translation |
| grey | `#4A4A45` | 8.9:1 | Captions, labels and the running head. | Web translation |

Other accents the record supports:

- Black space (recorded as "white or black space (twen)"): `#141412`

- **On the record · Documented** · `claim:kcc:color-1` → Let black type cut the white space: at Bazaar, Didot was described as the black blade that cut it.
- **On the record · Documented** · `claim:kcc:color-3`, `claim:kcc:density-2` → Negative space may be black as well as white; Fleckhaus used daring amounts of both.
- **Web translation** — Keep the chrome to paper, ink and one grey; colour belongs to the photographs. _Why:_ Brodovitch championed colour photography and twen ran black-and-white reportage; in both, colour lived in the picture, not the furniture. (`claim:kcc:color-2`, `claim:kcc:imagery-1`)

### Typography

Family: condensed grotesque for display; Literata for text (ours). Stack: `"Oswald X", "Arial Narrow", "Helvetica Neue Condensed", sans-serif`

| Role | Size | Weight | Line height | Case | Tracking | Measure | Use |
| --- | --- | --- | --- | --- | --- | --- | --- |
| headline | clamp(3rem, 12vw, 10rem) | 700 | 0.9 | uppercase | -0.01em | — | One word or two, blown up across the spread. |
| deck | 1.5rem | 300 | 1.75rem | not specified | not specified | 34ch | The one sentence that goes with the headline, in the text face. |
| text | 1.0625rem | 400 | 1.75rem | not specified | not specified | 36em | A subordinate block, never columns of running text. |
| caption | 0.8125rem | 400 | 1.75rem | not specified | 0.04em | — | Plate captions and the running head. |

- **On the record · Documented** · `claim:kcc:typography-1` → Restrict the type: Brodovitch set Harper's Bazaar in a single Didone family throughout.
- **On the record · Documented** · `claim:kcc:hierarchy-1` → Blow a single-word headline up across the double spread.
- **Web translation** — Use a condensed grotesque in capitals for the headline. _Why:_ twen set its headlines in all-caps Schmalfette Grotesk; Oswald is our stand-in, not that face. (`claim:kcc:typography-3`)
- **Web translation** — Pair it with Literata for text, and use no third face. _Why:_ Neither face is named in the sources. Two faces with one display size keeps the restriction the sources describe. (`claim:kcc:typography-1`, `claim:kcc:typography-2`)
- **Not specified by the source** — The sources do not specify a body size, measure or text leading. _Instead:_ Keep text short and subordinate to the image; do not invent a reading system for it.

### Grid and layout

The spread, not the column: each screen is a double-page spread with a fold down the middle, and photograph, headline and white space are composed across it as one image.

| Viewport | Columns |
| --- | --- |
| 900px and up | 12 |

Tokens: fold `50%` · column-gap `24px`

- **On the record · Documented** · `claim:em-r1`, `claim:kcc:recognition` → Compose each screen as one image: photograph, type and empty area together, not boxes placed inside a container.
- **On the record · Documented** · `claim:kcc:boundary-1` → A twelve-column grid is documented for Fleckhaus, under drama from extremes of scale.
- **On the record · Documented** · `claim:kcc:hierarchy-2` → Cut copy before cutting white space.
- **Web translation** — Below 900px, the spread becomes one page; the photograph still bleeds to both edges. _Why:_ A phone shows one page at a time. Bleed is the documented habit that survives the fold. (`claim:kcc:imagery-2`, `claim:kcc:technique-2`)

### Shape and geometry

Tokens: radius `0` · shadow `none` · hairline `1px solid #141412`

- **On the record · Documented** · `claim:kcc:interface-1` → No borders around photographs, no column rules, no sidebars.
- **On the record · Documented** · `claim:kcc:interface-2` → Explode the columns rather than boxing them.
- **Web translation** — border-radius: 0 and box-shadow: none. _Why:_ The page was a smooth, uninterrupted printed surface; nothing on it had a corner radius or a cast shadow. (`claim:kcc:w2-surface-1`, `claim:kcc:w2-surface-2`)

### Imagery

- **On the record · Documented** · `claim:kcc:imagery-1` → Photography is the cornerstone of the page.
- **On the record · Documented** · `claim:kcc:imagery-2` → Crop hard, place off-centre, and bleed off the page or across the spread.
- **On the record · Documented** · `claim:kcc:imagery-4` → Get drama from extremes of scale, contrast and repetition.
- **Web translation** — On screen, bleed with object-fit: cover to the viewport edge, with no frame. _Why:_ Full-bleed printing without borders is the documented technique; the viewport edge is the page edge. (`claim:kcc:technique-2`)
- **Not specified by the source** — The sources do not say which photographs to use, and we hold none we may show. _Instead:_ Commission or license real photography. Never let a placeholder read as evidence.

### Pacing

A magazine is read as a sequence of spreads. Some shout (one word, one photograph at full bleed); some rest (white space and a short block of text).

- **On the record · Documented** · `claim:kcc:hierarchy-3` → Pace the sequence like film, with crescendos and pauses.
- **Web translation** — Alternate a loud spread with a quiet one down a long page. _Why:_ Our reading of cinematic pacing for a scrolling page. (`claim:kcc:hierarchy-3`, `claim:kcc:density-1`)

### Components

Anatomy, tokens and states below are Web translation: Aesthetary's specification for the screen. Each value line after them says whether it restates a rule this record holds.

#### Button

A small block of condensed capitals in a hairline ink frame, set like a folio line, that fills with ink when pressed.

- Anatomy: 1px ink frame drawn inside the box; condensed capital label; paper field, no radius, no shadow
- Tokens: border `inset 0 0 0 1px ink` · background `paper` · radius `0` · label `condensed capitals`
- State, default: Paper field, hairline ink frame, ink label.
- State, hover: Ink field, paper label. The swap is instant.
- State, focus: 2px ink outline, 3px outside the frame.
- State, active: Stays ink.
- State, disabled: Grey frame and grey label; the label also says it is unavailable.
- Accessibility: Ink on paper is about 18:1 in both states.
- Accessibility: At least 44px tall.
- **Web translation** — Draw the button as ink on paper, no fill, no radius, no shadow. _Why:_ The page is white space cut by black type; a button takes the same two values. (`claim:kcc:color-1`, `claim:kcc:density-1`)
- **Web translation** — Invert to a black field on hover and press. _Why:_ Negative space may be black as well as white, so the inverse is the same language. (`claim:kcc:density-2`)

#### Card

Not a box: a plate. A photograph cropped hard and bled to the card edge, with a short caption beneath and no frame.

- Anatomy: photograph cropped hard, bled to the edge; caption in condensed capitals under an ink hairline; no border, no shadow, no background panel
- Tokens: border `none` · radius `0` · image `cover, cropped off-centre` · caption `hairline above`
- State, default: Plate and caption.
- State, hover: The caption underlines; the photograph does not move.
- State, focus: 2px ink outline around the whole plate.
- Accessibility: The whole plate is one link with the caption as its name.
- Accessibility: Photographs carry alt text; decorative crops are hidden.
- **Web translation** — Photographs have no border. _Why:_ The cited rule belongs to the Aesthetic's own medium; applying it to a screen component or motion is our translation. (`claim:kcc:interface-1`)
- **Web translation** — Crop the photograph hard and place it off-centre. _Why:_ The cited rule belongs to the Aesthetic's own medium; applying it to a screen component or motion is our translation. (`claim:kcc:imagery-2`)
- **Web translation** — Replace the card box with the photograph itself. _Why:_ Borders, sidebars and boxed containers were removed from the page; the image is the container. (`claim:kcc:interface-1`, `claim:kcc:interface-2`)

#### Input

A single ink line with the label above in condensed capitals: no box around the field.

- Anatomy: label in condensed capitals; text in the text face; 1px ink line beneath
- Tokens: border `bottom 1px ink` · radius `0` · background `transparent`
- State, default: 1px ink line.
- State, focus: The line thickens to 3px; 2px outline outside the field.
- State, error: The line stays ink; an "Error:" sentence follows in the text face.
- State, disabled: Grey line, grey label.
- Accessibility: A visible label on every field.
- Accessibility: Errors are written, not only coloured.
- **Web translation** — Draw the field as one line, not a box. _Why:_ Boxed containers were exploded; a field needs a line to write on, not a frame. (`claim:kcc:interface-2`)

#### Navigation

A running head: section names in condensed capitals along a hairline, with the folio (page number) at the far end.

- Anatomy: one line of condensed capitals; ink hairline beneath; current section in ink, the rest in grey; folio at the right
- Tokens: rule `1px ink` · current `ink` · rest `grey #4A4A45`
- State, default: Grey capitals.
- State, hover: Ink field, paper text.
- State, focus: 2px ink outline.
- State, current: Ink capitals, aria-current, and the folio reads the section number.
- Accessibility: aria-current on the current section.
- Accessibility: Grey on paper is about 8.9:1.
- **Web translation** — Set the navigation as the magazine's running head and folio. _Why:_ The unit is the spread in a paced sequence of spreads; the running head tells a reader where in the sequence they are. (`claim:kcc:hierarchy-3`, `claim:idr:intent`)

### Motion

Durations, easing and the rest of this specification are Web translation: Aesthetary's choice for the screen.

- Durations: state 0ms
- Easing: state `none`
- Transforms: none
- Entrance: None: each spread arrives already composed.
- Hover: An instant swap to ink.
- Reduced motion: Nothing changes: there is no animation to reduce.
- **Web translation** — Movement is pacing across pages, with crescendos and pauses; printed pages do not animate. _Why:_ The cited rule belongs to the Aesthetic's own medium; applying it to a screen component or motion is our translation. (`claim:kcc:motion-1`, `claim:kcc:hierarchy-3`)
- **Web translation** — Move between spreads with a cut, and pace a long page as loud spreads and quiet ones. _Why:_ The sources describe cinematic sequencing, not animated elements. (`claim:kcc:hierarchy-3`)

### Deliberately not added

- **Body size, measure and leading** (typography): The sources describe display type and restriction, not a text setting.
- **Photographs we may show** (imagery): None is held; the board draws plates instead.
- **Interface conventions** (components): The research record does not establish them. The four components are contemporary translations of documented rules.

## Not researched yet

Nobody has established a position for this language on:

- Motif
- Form

**Do not fill these in.** An absent position is absent research, not permission and not a blank for you to complete. If the work needs a decision in one of these areas, make it on other grounds and do not attribute it to this language.

## Grade your own work

6 checks: 0 mechanically testable, 4 needing a person to look, 0 needing a source Aesthetary does not hold, 2 with no recorded position. Scores do not add up. A failure against a required rule and a departure from something we invented are not the same result, and no total should let them cancel.

### Recognition — does this read as the intended Aesthetic?

- **[visual_human · recognition signature · Evidence: No grade recorded]** Strip every logo, word and borrowed image out of your work, then show it to someone who knows the collection. Do they land on this Aesthetic? The signature to hold is: A double-page spread read as one composition: a photograph bled or cropped hard across the gutter, one headline or display face at an extreme scale against large white (or black) space, and text set as a subordinate block in the composition rather than filling the page.
  - _If it fails:_ The work may be competent and still read as a different Aesthetic, or as none. Nothing below matters until this passes.

### Fidelity — are its defining rules present?

- **[unassessable · no recorded position · Evidence: Not researched yet (`UNKNOWN`)]** Nothing is recorded as a requirement of this Aesthetic. There is no rule here that your work must hold — which means nothing you do can fail this dimension, and nothing you do can satisfy it either. That is missing research, not freedom.
  - _If it fails:_ Not applicable. An empty dimension is an absence of research, never a pass and never a failure.

### Implementation — were those rules translated appropriately into this medium?

- **[visual_human · Documented · Source not yet verified · Evidence: Documented · Source not yet verified]** Your work may depart from this — but knowingly, not by accident. The spread is composed as one image: photograph, type and empty area are placed as a single composition, not as independently positioned elements inside a container.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.

### Avoidance — known failure modes, neighbour drift, cloning

- **[visual_human · neighbour drift · Evidence: No grade recorded]** Could your work be mistaken for Swiss Style? That language is: The grid is the organising subject, not just a tool; hierarchy comes from position and weight alone
  - _If it fails:_ Not necessarily wrong, but you are closer to Swiss Style than to this Aesthetic.
- **[visual_human · neighbour drift · Evidence: No grade recorded]** Could your work be mistaken for Broadsheet? That language is: Denser and more ruled than the parent; newspaper rather than magazine
  - _If it fails:_ Not necessarily wrong, but you are closer to Broadsheet than to this Aesthetic.

### Accessibility — the Aesthetic preserved without its inaccessible practice

- **[unassessable · no recorded position · Evidence: Not researched yet (`UNKNOWN`)]** Does this Aesthetic conflict with any usability floor? Nobody has recorded one for it.
  - _If it fails:_ Nothing — and that is the problem. An unrecorded conflict is not an absent one. Hold AA on reading matter and decide the rest on other grounds.

## Rules for the agent

1. Do not invent rules for any area listed under **Not researched yet**.
2. Do not treat an absent position as permission to do anything you like — say that the language has no position, and decide on other grounds.
3. Keep our interpretations separable from the language's own requirements. If asked to justify a choice, cite which kind of claim it came from.
4. If you need something this record does not contain, say so rather than producing a confident answer from the aesthetic's name.
5. When you self-score against "Grade your own work", score only checks marked `mechanical`. Declare `visual_human` and `evidence_dependent` checks unjudged rather than guessing, and never score an `unassessable` one.
6. Evidence "Not researched yet" (`UNKNOWN`) is never a failure. It means nobody researched the dimension, so departing from what is written there costs nothing and must not be reported as a defect. "No grade recorded" is not a grade either: do not treat it as our decision or as an outside source.
7. In **Design grammar**, a "Web translation" line is our choice for the web and may be changed with a reason; the rules it cites may not. Never present a translation as a property of the language.

## Provenance

- Record: `editorial-modernism` · status `draft` · research `partly_researched`
- Full structured record: https://aesthetary.com/data/editorial-modernism.json
- Human-readable record: https://aesthetary.com/a/editorial-modernism.html
- This file is a snapshot. The record may have changed since; check the page above.

_Aesthetary is an alpha. Where a page says nothing, nobody has done the work yet._