# Swiss Style — style guide for coding agents

> Generated from the Aesthetary record for **Swiss Style**.
> Research: **Partly sourced** · Build guidance: 38 rules recorded.
> 39 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

The postwar Swiss programme for objective typographic communication: a modular grid, one neutral grotesk, and hierarchy carried by position and weight alone.

**Defining:** Modular grid, flush-left ragged-right, one neutral grotesk, asymmetric balance, no ornament

**Recognise it by:** A modular grid that orders the whole page, its divisions left visible in Zurich work and often concealed in Basel, set in one neutral grotesk at very few sizes, flush left with a ragged right edge, with hierarchy carried by position on the grid, weight and interval, and any size change taken from a few grid formats. The diagnostic combination is not the grid alone and not the grotesk alone — both are common — but the refusal to add a second signalling device once the grid is in place. When a page has a grid and a sans-serif and also a rule, a tint panel or a centred heading, it is not this.

**Family:** Minimal & Ordered
**Era:** modernist
**Native medium:** print

**Scope:** Swiss graphic design usually limited to the 1950s and 1960s, practised in Zurich (Müller-Brockmann and the Neue Grafik editors, 1958-65) and Basel (Ruder, Hofmann). The boundaries of 'International Typographic Style' are hard to define; the record should treat the Swiss 1950s-60s school as the subject and the wider term as lineage. Zurich practice is described as the rigorous fraction; Basel practice as flexible, with the grid concealed or not rigidly followed.

## What it is arguing

Information can be ordered so that its structure is legible without the designer's personality intervening. The grid is not a convenience for placing things; it is the argument that objective presentation is possible.

**It refuses:** Refuses decorative illustration, centred composition, and hierarchy signalled by ornament rather than position.

## What it is not

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

- Editorial Modernism
- Bauhaus
- Monospace Minimal — Mono carries the entire voice; everything else is restrained to let it
- New Wave Typography

**What separates this language:** The grid is the organising subject, not just a tool; hierarchy comes from position and weight alone

_This is the record's own distinguishing line, not a comparison against any one neighbour. Where a per-neighbour difference is recorded it appears beside that name above; where it is absent, nobody has written it._

## 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): Necessary · our ranking · Documented · Source not yet verified · Seen in the work · Not part of the aesthetic · Our reading · 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/swiss-style.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.

### Necessary · our ranking

_Remove it and it is not this._

- **typography** — Set type in a neutral grotesque. The constraint is the class, not a particular typeface: Akzidenz-Grotesk, Univers, Folio and Neue Haas Grotesk/Helvetica were all in use.
  - Kind of claim: Necessary · our ranking · Evidence: Seen in the work · Strength: Necessary · our ranking · Product area: Typography
- **typography** — Set flush left, ragged right. Justified setting is forbidden.
  - Kind of claim: Necessary · our ranking · Evidence: Seen in the work · Strength: Necessary · our ranking · Product area: Typography
- **grid** — Build a module matrix: columns crossed by horizontal flowlines. Every element occupies whole modules.
  - Kind of claim: Necessary · our ranking · Evidence: Seen in the work · Strength: Necessary · our ranking · Product area: Layout

### Documented · Source not yet verified

- **typography** — Use very few distinct sizes and very few weights in one composition.
  - Kind of claim: Documented · Source not yet verified · Evidence: Documented · Source not yet verified · Product area: Typography
- **typography** — Set all text to a shared baseline rhythm derived from the grid module.
  - Kind of claim: Documented · Source not yet verified · Evidence: Documented · Source not yet verified · Product area: Typography

### Seen in the work

- **typography** — Hierarchy comes from systematic placement in the grid. Where size signals importance, it is drawn from a few formats that are whole multiples of the grid field.
  - Kind of claim: Seen in the work · Evidence: Seen in the work · Product area: Typography
- **color** — Restrict colour to a small number of flat areas, used functionally and never decoratively.
  - Kind of claim: Seen in the work · Evidence: Seen in the work · Product area: Color
- **color** — No particular hue is required. One Müller-Brockmann series alone uses green and blue, red, and magenta and turquoise; choosing the hue is left to the designer.
  - Kind of claim: Seen in the work · Evidence: Seen in the work · Product area: Color

### Not part of the aesthetic

- **color** — Ground light and near-neutral, ink near-black, text contrast comfortably above the AA minimum of 4.5:1.
  - Kind of claim: Not part of the aesthetic · Evidence: Not part of the aesthetic · Product area: Color
- **measure** — 45 to 75 characters per line.
  - Kind of claim: Not part of the aesthetic · Evidence: Not part of the aesthetic · Product area: Typography

### Our reading

- **grid** — Column count in the range 4 to 12 for a screen layout; gutter equal to one module unit.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Layout
- **radius** — Zero. No rounding on any element.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Interface
- **shadow** — None. No elevation, no depth simulation.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Interface
- **rule_treatment** — Hairline rules permitted where they separate grid fields; never decorative.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Layout
- **motion** — No canonical position. Any motion is an addition to the language, not an expression of it.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Motion
- **typography** — Do not rank by size alone or by colour alone.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Typography

## 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** — Neue Grafik's cover template used Akzidenz-Grotesk; per one specialist source all text-size typography, cover and inside, was set in Monotype Grotesque 215/216 because Akzidenz was unavailable on Monotype machines. The grotesque-class constraint stands; 'set throughout in Akzidenz' should be withdrawn.
  - Evidence: Documented · Source attached · Claim: `kcc:settles-review-queue-117`
- **Color** — Hofmann employed colour sparingly, and Neue Grafik used strong contrasts of black against pure white.
  - Evidence: Documented · Source attached · Claim: `kcc:color-1` · Covers Hofmann (Basel); Neue Grafik.
- **Color** — Müller-Brockmann paired simple geometric grids with complementary or contrasting colours, and the hue changed poster to poster.
  - Evidence: Documented · Source attached · Claim: `kcc:color-2` · Covers Zurich, Musica Viva series.
- **Imagery** — Photography replaces drawn illustration and ornament.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-1`
- **Imagery** — Photographs are treated as objective records, placed by function.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-2`
- **Imagery** — Pictures are cut to a few sizes that are whole multiples of the grid field, and each picture's size reflects its importance.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-3` · Covers Müller-Brockmann, Zurich.
- **Imagery** — Non-photographic posters use abstract geometric form instead of illustration.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-4` · Covers Müller-Brockmann concert posters.
- **Imagery** — In Basel, black-and-white photography could be pushed toward abstraction rather than kept factual.
  - Evidence: Documented · Source attached · Claim: `kcc:imagery-5` · Covers Hofmann, Basel.
- **Surface** — Flat printed ink on paper, with the unprinted paper standing as the white of the design.
  - Evidence: Documented · Source attached · Claim: `kcc:surface-1` · Covers Hofmann Giselle; V&A records of Müller-Brockmann offset lithographs.
- **Surface** — Basel posters also used linocut, whose slight cutting irregularities show in the print.
  - Evidence: Documented · Source attached · Claim: `kcc:surface-2` · Covers Hofmann, Basel.
- **Hierarchy** — Priority comes from systematic arrangement on the grid.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-1`
- **Hierarchy** — Where size signals importance, it is drawn from a few grid-field formats, and fewer size differences give a quieter page.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-2`
- **Hierarchy** — Using one grid for cover and inside pages can deliberately withhold prominence: 'no first amongst equals'.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-3` · Covers Neue Grafik.
- **Hierarchy** — In Ruder's 1961 TM Univers issue, hierarchy used three sizes of Univers 55.
  - Evidence: Documented · Source attached · Claim: `kcc:hierarchy-4` · Covers Ruder, TM Univers issue 1961.
- **Density** — The number of visual elements is reduced, and that reduction is what reads as clarity and order.
  - Evidence: Documented · Source attached · Claim: `kcc:density-1`
- **Density** — Unprinted space is treated as active: 'the unprinted gives life to the printed'.
  - Evidence: Documented · Source attached · Claim: `kcc:density-2` · Covers Ruder, Basel.
- **Density** — Text itself can be dense: long columns of text were used to inform rather than illustrate.
  - Evidence: Documented · Source attached · Claim: `kcc:density-3` · Covers Neue Grafik.

## 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** — Core, and specified
- **Typography** — Core, and specified
- **Color** — Core, and specified. Two separate claims. COUNT AND FUNCTION are constrained: a small number of flat areas, used functionally, never decoratively. HUE IS FREE — one designer used green and blue, red, and magenta and turquoise across one poster series. Absence of a required hue does not make the slot permissive, and the freedom is asserted rather than assumed.
- **Imagery** — Optional, but ruled. Objective photography, frontal and unmanipulated, used as information rather than atmosphere; illustration excluded. But the web-transfer analysis lists "whether imagery appears at all" as adaptable, so presence is optional while treatment is constrained.
- **Surface** — Specified. DEMOTED FROM PROHIBITED. The adjudication found no evidence of a surface constraint beyond the general anti-ornament position, and recorded it as "do not fill". Our previous "flat, no texture" was an inference from the ornament prohibition, which is a different claim. Unknown is the honest value.
- **Motif** — Excluded. No ornament, no motif system, no decorative mark of any kind. One of the strongest negative constraints in the corpus.
- **Interface** — Outside this language. The language predates interactive media entirely, so there is no interface for it to take a position on. Anything said here is contemporary translation and belongs in the transfer note, not in a posture. Previously recorded as prohibited, which asserted a refusal the movement was never in a position to make.
- **Motion** — Outside this language. Print-native: the language has no position on motion because motion did not exist in its medium. On transfer this becomes an open editorial question, NOT a permission.
- **Technique** — Outside this language. Historically offset lithography, but the language is indifferent to production method. Nothing about Swiss Style requires a particular process, so an agent may choose.
- **Form** — Outside this language. A two-dimensional graphic language. No three-dimensional organisation.

## Design grammar — web primitives

A starting grammar for a website in Swiss Style: what the record's rules become as web primitives. Rules on the record are cited; everything else is our translation and names the rule it comes from.

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/swiss-style.json.

### Colour

| Role | Value | Contrast | Use | Kind |
| --- | --- | --- | --- | --- |
| background | `#F2F2EF` | — | The page ground. Light and near-neutral. | Web translation |
| surface | `#FFFFFF` | — | A field that needs to separate from the ground, such as an input. | Web translation |
| text | `#0E0F10` | 17.1:1 | All reading text and headings. | Web translation |
| text-secondary | `#43464A` | 8.5:1 | Secondary text; input borders. | Web translation |
| text-muted | `#66696C` | 4.9:1 | Captions, labels and metadata. | Web translation |
| rule | `#CFCFC9` | — | Hairlines between grid fields. Never for a control's boundary. | Web translation |
| accent | `#B02A10` | 5.9:1 | One flat colour doing one job: the primary action, the current item, an error. | Web translation |

Other accents the record supports:

- Green and blue (recorded as "green + blue, 1958"): `#1B6B3A #1F4FB0`
- Red (recorded as "red, 1959"): `#B02A10`
- Magenta and turquoise (recorded as "magenta + turquoise, 1972"): `#A0126E #0B6F6A`

- **On the record · Seen in the work** · `token_rule:colour-roles` → Give the accent one job at a time (the primary action, the current item, an error) as a flat fill or rule.
- **On the record · Seen in the work** · `token_rule:hue-free` → Treat the accent value as replaceable: any hue that meets the contrast requirement works.
- **On the record · Not part of the aesthetic** · `token_rule:ground-ink-contrast` → Text on the background measures 17.1:1; secondary text 8.5:1.
- **Web translation** — Red, black and white is one choice, not the palette. The record's palettes are words; the values offered for them are ours, darkened until white text passes 4.5:1 on them. _Why:_ The record fixes no hue and contrast is a requirement, so each recorded hue is kept and its value chosen for legibility. (`token_rule:hue-free`, `token_rule:ground-ink-contrast`)
- **Web translation** — Fill areas with flat colour and leave the ground open: no gradients, tints or texture. _Why:_ The surface is flat printed ink on paper, with the unprinted paper standing as the white of the design; flat fills on an open ground are that surface on screen. (`slot_posture:surface`)

### Typography

Family: neutral grotesque (Akzidenz-Grotesk, Univers, Folio and Neue Haas Grotesk/Helvetica were all in use). Stack: `"Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", system-ui, sans-serif`

| Role | Size | Weight | Line height | Case | Tracking | Measure | Use |
| --- | --- | --- | --- | --- | --- | --- | --- |
| headline | 1.625rem | 700 | 2.25rem | not specified | not specified | — | Headings. Ranked by weight and position, which is why it is not much bigger than body. |
| body | 1.0625rem | 400 | 1.5rem | not specified | not specified | 45–75 characters | Reading text and controls. |
| label | 0.75rem | 700 | 1.125rem | not specified | not specified | — | Captions, folios, form labels. |

- **On the record · Necessary · our ranking** · `token_rule:typeface-class` → font-family: the grotesque stack above. Any face in the class satisfies it.
- **On the record · Necessary · our ranking** · `token_rule:flush-left` → text-align: left everywhere; never justify.
- **On the record · Seen in the work** · `token_rule:hierarchy-device` → Rank headings by position and space above, taking any size change from the few type sizes.
- **On the record · Our reading** · `token_rule:hierarchy-limits` → Never rank by size alone or colour alone.
- **On the record · Documented · Source not yet verified** · `token_rule:few-sizes` → Use only the three roles in the table across the whole site.
- **On the record · Documented · Source not yet verified** · `token_rule:baseline-rhythm` → Every line-height and vertical margin is a multiple of 0.75rem, half the module.
- **On the record · Not part of the aesthetic** · `token_rule:measure` → max-width: 66ch on running text.
- **Web translation** — Three sizes and two weights: 1.625, 1.0625 and 0.75rem; 400 and 700. _Why:_ Very few sizes and weights; the exact values are ours. (`token_rule:few-sizes`)
- **Web translation** — Line heights are multiples of half a module (0.75rem): 2.25, 1.5 and 1.125rem. _Why:_ Every line then lands on the grid's baseline rhythm. (`token_rule:baseline-rhythm`, `token_rule:module-matrix`)
- **Not specified by the source** — The sources do not specify letter case or tracking. _Instead:_ Set text as written and leave tracking at the face's default. Do not add all-caps or wide tracking and call it Swiss.

### Grid and layout

Module 1.5rem · gutter 1.5rem (one module) · margin One module below 40rem, two above

| Viewport | Columns |
| --- | --- |
| ≥ 64rem | 12 |
| 40–64rem | 6 |
| < 40rem | 4 |

- **On the record · Necessary · our ranking** · `token_rule:module-matrix` → CSS Grid with 1.5rem row modules; every block spans whole columns and whole rows.
- **On the record · Our reading** · `token_rule:column-count` → grid-template-columns: repeat(12, 1fr); gap: 1.5rem.
- **Web translation** — At breakpoints change only the column count; the module stays 1.5rem. _Why:_ The record's note on moving Swiss to screen steps the column count down while keeping module proportion; 1.5rem is this grammar's module. (`transfer_note:print->screen_web`)
- **Web translation** — Place blocks asymmetrically; no centred page layouts or centred headings. _Why:_ Our reading of the argument the record makes, applied to a web page; the record argues it, it does not state it as a rule. (`intent`)
- **Web translation** — Step 12 → 6 → 4 columns at 64rem and 40rem. _Why:_ The column count steps down while the module stays 1.5rem. (`token_rule:column-count`, `transfer_note:print->screen_web`)
- **Web translation** — Leave fields empty rather than filling them: white space is unoccupied modules. _Why:_ Elements occupy whole modules, so emptiness is also measured in modules. (`token_rule:module-matrix`)

### Shape and geometry

Tokens: radius `0` · shadow `none` · rule `1px solid #CFCFC9` · ruleEmphasis `3px solid accent`

- **On the record · Our reading** · `token_rule:zero-radius` → border-radius: 0 on every element.
- **On the record · Our reading** · `token_rule:no-elevation` → box-shadow: none; no depth effects.
- **On the record · Our reading** · `token_rule:hairline-rules` → 1px rules only where they divide grid fields.
- **Web translation** — No decorative icons, flourishes, dividers or background patterns. _Why:_ Our reading of the record's position on ornament, applied to a web page; the position is not itself a rule. (`slot_posture:motif`)
- **Web translation** — The rectangle is the module: fields, images and controls are rectangles of whole modules. _Why:_ Every element occupies whole modules of a rectangular matrix. (`token_rule:module-matrix`)
- **Not specified by the source** — The sources do not specify circles, diagonals or other shapes. _Instead:_ Use them only where the content itself calls for them, never as a Swiss signature.

### Imagery

- **Web translation** — Use photographs shot frontally and left untreated; no illustration. _Why:_ Our reading of the record's position on imagery, applied to a web page; the position is not itself a rule. (`slot_posture:imagery`)
- **Web translation** — A page without images is complete. _Why:_ Our reading of the record's position on imagery, applied to a web page; the position is not itself a rule. (`slot_posture:imagery`)
- **On the record · Necessary · our ranking** · `token_rule:module-matrix` → Image boxes span whole columns and rows; the photograph fills its box (object-fit: cover).
- **Web translation** — Hang the caption under the image, flush left on the image's own column line, in the label size. _Why:_ Flush-left setting and module alignment applied to the image's text. (`token_rule:flush-left`, `token_rule:module-matrix`)
- **Web translation** — No filters, overlays, duotones or tilted frames. _Why:_ Unmanipulated means the photograph is not treated for mood. (`slot_posture:imagery`)

### 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 flat rectangle on the grid, its label flush left and ranked by weight, with colour kept for the one action that matters.

- Anatomy: label (body size, bold); optional arrow after the label, same size and weight; no icon container, no pill
- Tokens: height `3rem (two modules)` · paddingInline `1.5rem (one module)` · radius `0` · border `1px solid (secondary only)` · fontSize `1.0625rem` · fontWeight `700`
- State, default: Primary: accent field, white label. Secondary: paper field, 1px ink border, ink label.
- State, hover: Primary: the field turns ink. Secondary: the field turns ink, the label turns paper. A change of field, never a glow, lift or scale.
- State, focus: 2px ink outline, offset 2px, outside the rectangle. Always visible on keyboard focus.
- State, active: The field inverts again for the press. No movement.
- State, disabled: Rule-coloured border, muted label, no field. Not conveyed by colour alone: the cursor and the disabled attribute carry it too.
- Accessibility: At least 44 × 44px: two modules high clears it.
- Accessibility: Label text 6.6:1 on the accent, 19:1 on ink.
- Accessibility: Focus ring never removed.
- **Web translation** — border-radius: 0. _Why:_ The zero-radius rule, applied to a screen button. Swiss print specified no buttons. (`token_rule:zero-radius`)
- **Web translation** — box-shadow: none, in every state; nothing lifts on hover. _Why:_ The no-elevation rule, applied to a button and its states. Swiss print had no hover. (`token_rule:no-elevation`)
- **Web translation** — Rank the primary action by field and weight, not by a bigger size. _Why:_ Rank comes from placement and field; avoiding size-alone ranking is our rule, not a documented Swiss one. A filled field is colour used for a job. (`token_rule:hierarchy-device`, `token_rule:hierarchy-limits`, `token_rule:colour-roles`, `slot_posture:ui_treatment`)
- **Web translation** — Set the label flush left inside the rectangle. _Why:_ Flush left governs all setting; centring is what the language refuses. (`token_rule:flush-left`, `intent`, `slot_posture:ui_treatment`)
- **Web translation** — Height and padding are whole modules. _Why:_ Every element occupies whole modules. (`token_rule:module-matrix`, `slot_posture:ui_treatment`)

#### Card

Not a floating box: a field of whole modules, opened by a hairline, its content flush left in three sizes at most.

- Anatomy: hairline rule across the top of the field; label (small size); title (heading size, bold); body (body size); optional photograph occupying the field's full column span
- Tokens: rule `1px solid rule colour; 3px accent when current or hovered` · radius `0` · shadow `none` · background `none (the page ground)` · padding `1.5rem top, 0 sides: the grid gives the margin`
- State, default: Hairline across the top, content flush left.
- State, hover: The top rule thickens to 3px and takes the accent. Nothing moves.
- State, focus: The whole card link takes the 2px ink outline.
- Accessibility: The whole card is one link, so the target is large.
- Accessibility: The title is a real heading in the document outline.
- **Web translation** — One 1px rule across the top of the card; no other border. _Why:_ The hairline-rules rule, applied to a card edge. Swiss print specified no cards. (`token_rule:hairline-rules`)
- **Web translation** — box-shadow: none. _Why:_ The no-elevation rule, applied to a card. Swiss print specified no cards. (`token_rule:no-elevation`)
- **Web translation** — Draw no box: a card is a grid field opened by a rule, not a bordered, shadowed container. _Why:_ Rules separate fields; a four-sided frame and a shadow are ornament and elevation. (`token_rule:hairline-rules`, `token_rule:no-elevation`, `slot_posture:motif`, `slot_posture:ui_treatment`)
- **Web translation** — At most three text sizes inside a card: label, title, body. _Why:_ The few-sizes rule, applied inside a card. Swiss print specified no cards. (`token_rule:few-sizes`)
- **Web translation** — Signal hover by the rule, in the accent. _Why:_ Colour used functionally: it marks the field you are about to open. (`token_rule:colour-roles`, `slot_posture:ui_treatment`)

#### Input

A plain rectangle two modules high with its label above, flush left; errors named in words, marked in the accent.

- Anatomy: label above the field (small size, bold); field: 1px ink-2 border, no radius; help or error line below, small size
- Tokens: height `3rem` · border `1px solid #43464A` · radius `0` · fontSize `1.0625rem` · labelSize `0.75rem` · labelWeight `700`
- State, default: 1px ink-2 border on the field colour.
- State, hover: Border darkens to ink.
- State, focus: Border becomes 2px ink and the 2px outline appears.
- State, error: Border and message take the accent; the message begins "Error:" so colour is never the only signal.
- State, disabled: Rule-coloured border on the paper ground.
- Accessibility: Field border 8.5:1 against the ground: well above the 3:1 non-text minimum.
- Accessibility: Every field has a visible label; placeholder text is never the label.
- Accessibility: Errors are text, linked with aria-describedby.
- **Web translation** — border-radius: 0 on the field. _Why:_ The zero-radius rule, applied to a form field. Swiss print specified no inputs. (`token_rule:zero-radius`)
- **Web translation** — Put the label above the field, flush left, never inside it. _Why:_ Flush-left setting, and a label that stays visible. (`token_rule:flush-left`, `slot_posture:ui_treatment`)
- **Web translation** — Give the field a full 1px border, not a single underline. _Why:_ Hairlines alone are too faint to mark a control; the border is a modern accessibility requirement, not a Swiss one. (`token_rule:ground-ink-contrast`, `slot_posture:ui_treatment`)
- **Web translation** — Mark an error in the accent and in words. _Why:_ Colour is used for a job, never alone. (`token_rule:colour-roles`, `token_rule:hierarchy-device`, `slot_posture:ui_treatment`)

#### Navigation

A row of words on the column lines. The current page is marked by weight and a short rule, not by a pill or a bigger size.

- Anatomy: links set in body size, regular; each link starts on a column line; current item: bold, with a 3px accent rule under it
- Tokens: fontSize `1.0625rem` · gap `column lines, not a fixed gap` · current `700 weight + 3px accent rule` · height `3rem`
- State, default: Regular weight, ink.
- State, hover: Underline in the accent.
- State, focus: 2px ink outline.
- State, current: Bold, with the accent rule under it; aria-current="page".
- Accessibility: aria-current marks the current page for screen readers.
- Accessibility: Below 40rem the row becomes a stacked list on the same left edge, not a hidden icon menu.
- **Web translation** — The current item differs by weight and position, never by size. _Why:_ The hierarchy-device rule, applied to navigation. Swiss print specified no navigation. (`token_rule:hierarchy-device`)
- **Web translation** — Start each item on a column line. _Why:_ Every element occupies whole modules. (`token_rule:module-matrix`, `slot_posture:ui_treatment`)
- **Web translation** — Mark the current page by weight plus a short accent rule. _Why:_ Weight is a lawful hierarchy device; the rule is colour used for a job. (`token_rule:hierarchy-device`, `token_rule:colour-roles`, `slot_posture:ui_treatment`)

### Motion

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

- Durations: state 100ms, move 200ms
- Easing: state `linear`, move `cubic-bezier(0.25, 0, 0, 1)`
- Transforms: translate only, along the grid axes, by whole modules. No scale, rotate, skew, blur or bounce.
- Entrance: None by default. Where content must enter, it moves one module along the reading direction and settles on the grid.
- Hover: A change of field or weight within 100ms. Nothing lifts, grows or glows.
- Reduced motion: Every move becomes an instant change of position.
- **Web translation** — Motion is optional: every page must work completely without it. _Why:_ The record's position on motion, applied to the screen. The record establishes no motion conventions. (`token_rule:motion-position`)
- **Web translation** — If something moves, it moves by whole modules and stops on the grid. _Why:_ The matrix is the one structure the language has; motion that ignores it adds a second. (`token_rule:module-matrix`, `token_rule:motion-position`)
- **Web translation** — No easing flourish: a plain ease-out with no overshoot. _Why:_ No ornament: overshoot and bounce are decoration in time. (`slot_posture:motif`, `token_rule:motion-position`)

### Deliberately not added

- **Letter case and tracking** (typography): The record holds no rule for either. We set text as written and add no tracking.
- **Circles and diagonals as a Swiss signature** (shapeGeometry): They appear in period posters but the record holds no rule for them. This page's own red disc is art direction, not guidance.
- **Any Swiss position on interface** (components): The research record does not establish canonical interface conventions for Swiss Style. All four components are contemporary translations of its documented visual rules.
- **Any Swiss position on motion** (motion): The research record does not establish canonical motion conventions. The motion values are a contemporary translation of its documented visual rules.

## Not researched yet

Every area of this record has a recorded position. That is unusual — most records do not.

## Grade your own work

20 checks: 3 mechanically testable, 16 needing a person to look, 0 needing a source Aesthetary does not hold, 1 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 modular grid that orders the whole page, its divisions left visible in Zurich work and often concealed in Basel, set in one neutral grotesk at very few sizes, flush left with a ragged right edge, with hierarchy carried by position on the grid, weight and interval, and any size change taken from a few grid formats. The diagnostic combination is not the grid alone and not the grotesk alone — both are common — but the refusal to add a second signalling device once the grid is in place. When a page has a grid and a sans-serif and also a rule, a tint panel or a centred heading, it is not this.
  - _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?

- **[visual_human · Necessary · our ranking · Evidence: Seen in the work · Strength: Necessary · our ranking]** Does your work hold this? Set type in a neutral grotesque. The constraint is the class, not a particular typeface: Akzidenz-Grotesk, Univers, Folio and Neue Haas Grotesk/Helvetica were all in use.
  - _If it fails:_ The result is not this Aesthetic. This is a requirement of the language, not a preference.
- **[visual_human · Necessary · our ranking · Evidence: Seen in the work · Strength: Necessary · our ranking]** Does your work hold this? Set flush left, ragged right. Justified setting is forbidden.
  - _If it fails:_ The result is not this Aesthetic. This is a requirement of the language, not a preference.
- **[visual_human · Necessary · our ranking · Evidence: Seen in the work · Strength: Necessary · our ranking]** Does your work hold this? Build a module matrix: columns crossed by horizontal flowlines. Every element occupies whole modules.
  - _If it fails:_ The result is not this Aesthetic. This is a requirement of the language, not a preference.

### 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. Use very few distinct sizes and very few weights in one composition.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Seen in the work · Evidence: Seen in the work]** Your work may depart from this — but knowingly, not by accident. Hierarchy comes from systematic placement in the grid. Where size signals importance, it is drawn from a few formats that are whole multiples of the grid field.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Documented · Source not yet verified · Evidence: Documented · Source not yet verified]** Your work may depart from this — but knowingly, not by accident. Set all text to a shared baseline rhythm derived from the grid module.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Column count in the range 4 to 12 for a screen layout; gutter equal to one module unit.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Seen in the work · Evidence: Seen in the work]** Your work may depart from this — but knowingly, not by accident. Restrict colour to a small number of flat areas, used functionally and never decoratively.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[mechanical · Not part of the aesthetic · Evidence: Not part of the aesthetic]** Your work may depart from this — but knowingly, not by accident. Ground light and near-neutral, ink near-black, text contrast comfortably above the AA minimum of 4.5:1.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Zero. No rounding on any element.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. None. No elevation, no depth simulation.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Hairline rules permitted where they separate grid fields; never decorative.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Not part of the aesthetic · Evidence: Not part of the aesthetic]** Your work may depart from this — but knowingly, not by accident. 45 to 75 characters per line.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[mechanical · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. No canonical position. Any motion is an addition to the language, not an expression of it.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[mechanical · Seen in the work · Evidence: Seen in the work]** Your work may depart from this — but knowingly, not by accident. No particular hue is required. One Müller-Brockmann series alone uses green and blue, red, and magenta and turquoise; choosing the hue is left to the designer.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Do not rank by size alone or by colour alone.
  - _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 Monospace Minimal? That language is: Mono carries the entire voice; everything else is restrained to let it
  - _If it fails:_ Not necessarily wrong, but you are closer to Monospace Minimal than to this Aesthetic.
- **[visual_human · neighbour drift · Evidence: No grade recorded]** Could your work be mistaken for New Wave Typography? That language is: The Swiss grid attacked from inside by people who knew it; not random disorder
  - _If it fails:_ Not necessarily wrong, but you are closer to New Wave Typography 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: `swiss-style` · status `draft` · research `partly_researched`
- Full structured record: https://aesthetary.com/data/swiss-style.json
- Human-readable record: https://aesthetary.com/a/swiss-style.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._