# Swiss editorial: component law

Everything sits on the grid. When unsure, ask what a Müller-Brockmann programme would do: less, aligned, flush left.

## Masthead

One line on the 12-column grid: brand in `label` on columns 1 to 3, dateline in `meta` mute on 4 to 8, nav in `label` right-aligned on 9 to 12. A 1px ink rule beneath, then 72px of air before the feature.

## Heading / dek

Kicker in `label` on columns 1 to 3, top-aligned with the headline. Headline in `display` on 4 to 12: bold, sentence case, tight, balanced. Dek in `dek` on 4 to 10. No color in the heading group.

## Byline

Columns 1 to 3 in `meta` mute, bottom-aligned with the last line of the headline.

## Body

`body` on columns 4 to 9, max 62ch, flush left. No drop cap, no first-line styling.

## Pull quote

A statement, not a quotation. 1px ink rule across all 12 columns, 16px, then `statement` on columns 4 to 12, max 22ch. No quote marks, no bar, no red, never centered.

## Figure

1px ink rule across 12 columns. Caption on 1 to 3 in `meta` mute with the figure number in `label` ink, bottom-aligned. Media on 4 to 12 at 16:9, grayscale, hard crop, no border. No duotone, no texture.

## Link

Inherit color. 1px underline in `hair`, offset 3px. Hover: underline goes ink. No red on hover.

## Nav

`label`, ink, 24px gaps, no underline. Current state is weight, not color.

## Index (cards)

Three equal columns across the grid, 1px ink rule above, hairline between columns, no fill, no radius. Each: number in `label`, then 24px, then `title`, then `small` mute. On narrow screens the dividers become horizontal hairlines.

## Section head

Columns 1 to 3: `label` title on one line, `small` note in mute beneath. The content (table, form) starts on column 4 at the same rule. Inside the form and notes, the section head sits above the fields with 24px beneath.

## Table

Columns 4 to 12. Heads in `label` on a 1px ink rule. Rows hairline. 13px/20px, tabular lining figures, numeric columns right-aligned. No zebra, no hover wash, no status pills, no icon column.

## Pagination

`meta` mute separated by 16px. Current is ink, bold, with a 2px ink rule beneath. No boxes, no arrows in circles.

## Form label

`label` directly above the rule, no gap.

## Input

No box. `body` value on a 1px ink baseline, transparent ground, radius 0. Placeholder mute. Focus: the rule becomes 2px. No outline ring, no red.

## Checkbox

Native, 14px, `accent-color` ink. Label 13px.

## Button

Primary: signal fill, white `label` type, 12px 20px padding, radius 0. This is the view's one red. Hover: fill goes ink. Focus: 2px ink outline offset 2px.

## Ghost button

1px ink outline, `label` type, same padding. Hover: reverse video (ink fill, white type).

## Tabs

`label` in mute on a hairline, 24px apart. Selected is ink with a 2px ink rule sitting on the hairline. No pill, no sliding indicator.

## Alert

2px ink rule on top, `label` title, `small` mute body. No icon, no colored bar, no fill.

## Footer

1px ink rule, `meta` links left, brand mark in `label` mute right. Nothing centered.

## Empty state

One `body` sentence flush left and a ghost button. No illustration.

## Compose: command palette

Ruled square panel near the top on a flat 45% ink scrim, no blur. Search is a baseline-rule input at 16px. Results 13px with shortcuts right-aligned in `label`. Active row: reverse video, ink fill, white type. Hairlines between groups. No red, no keycap chips.

## Compose: modal

Square sheet or full-height column on a flat ink scrim. Title in `statement`. Body `body`. Primary in signal (the view's one red), ghost outlined. Close is a word in `label`. No shadow, no radius.

## Compose: toast

Prefer the alert inline. If it must float, a white slip with a 2px ink rule on top, bottom-left, no shadow, no timer bar.