Header: Neutral

This captures headlines, standfirsts and bylines that have a "neutral" style. These changes should go out together (either in a single PR, or a single feature switch) to create a consistent design update. The list of tasks is here for quick reference and full descriptions can be found below.

```[tasklist]
### Tasks
- [ ] Headline Clear - `ArticleDisplay.Standard` / `ArticleDisplay.Showcase`
- [ ] Headline Stand-out - `ArticleDisplay.Standard` / `ArticleDisplay.Showcase`
- [ ] Headline Clear - `ArticleDisplay.Immersive`
- [ ] Headline Stand-out - `ArticleDisplay.Immersive`
- [ ] Standfirst - `ArticleDisplay.Standard`
- [ ] Standfirst - `ArticleDisplay.Showcase`
- [ ] Standfirst - `ArticleDisplay.Immersive`
- [ ] Byline - `ArticleDesign.Analysis`
```

## Headline

### Clear - `ArticleDisplay.Standard` / `ArticleDisplay.Showcase`

The list of formats that should have a "neutral clear" headline design must be the following `ArticleDesign`s:

- `ArticleDesign.Standard`
- `ArticleDesign.Profile`
- `ArticleDesign.Explainer`
- `ArticleDesign.Timeline`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 28px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.small({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 34px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.medium({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

### Stand-out - `ArticleDisplay.Standard` / `ArticleDisplay.Showcase`

The list of formats that should have a "neutral stand-out" headline design must be the following `ArticleDesign`s:

- `ArticleDesign.LiveBlog`
- `ArticleDesign.DeadBlog`
- `ArticleDesign.Analysis`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 28px
* font-weight: medium
* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

```ts
headline.small({ fontWeight: 'medium', lineHeight: 'tight' })
```

and an example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[200]};
`;
```

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 34px
* font-weight: medium
* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

```ts
headline.medium({ fontWeight: 'medium', lineHeight: 'tight' })
```

and an example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[200]};
`;
```

### Clear - `ArticleDisplay.Immersive`

The list of formats that should have a "neutral clear" headline design must be the following `ArticleDesign`s:

- `ArticleDesign.Standard`
- `ArticleDesign.Profile`
- `ArticleDesign.Explainer`
- `ArticleDesign.Timeline`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 34px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.medium({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 50px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xlarge({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

### Stand-out - `ArticleDisplay.Immersive`

The list of formats that should have a "neutral stand-out" headline design must be the following `ArticleDesign`s:

- `ArticleDesign.LiveBlog`
- `ArticleDesign.DeadBlog`
- `ArticleDesign.Analysis`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 34px
* font-weight: medium
* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

```ts
headline.medium({ fontWeight: 'medium', lineHeight: 'tight' })
```

and an example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[200]};
`;
```

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 50px
* font-weight: medium
* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

```ts
headline.xlarge({ fontWeight: 'medium', lineHeight: 'tight' })
```

and an example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[200]};
`;
```

## Standfirst

### `ArticleDisplay.Standard`

The list of formats that should have a "neutral" standfirst design must be the following `ArticleDesign`s:

- `ArticleDesign.Standard`
- `ArticleDesign.Profile`
- `ArticleDesign.Explainer`
- `ArticleDesign.Timeline`
- `ArticleDesign.LiveBlog`
- `ArticleDesign.DeadBlog`
- `ArticleDesign.Analysis`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 17px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xxxsmall({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 20px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xxsmall({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

### `ArticleDisplay.Showcase`

The list of formats that should have a "neutral" standfirst design must be the following `ArticleDesign`s:

- `ArticleDesign.Standard`
- `ArticleDesign.Profile`
- `ArticleDesign.Explainer`
- `ArticleDesign.Timeline`
- `ArticleDesign.LiveBlog`
- `ArticleDesign.DeadBlog`
- `ArticleDesign.Analysis`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 17px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xxxsmall({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 20px
* font-weight: medium
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xxsmall({ fontWeight: 'medium', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

### `ArticleDisplay.Immersive`

The list of formats that should have a "neutral" standfirst design must be the following `ArticleDesign`s:

- `ArticleDesign.Standard`
- `ArticleDesign.Profile`
- `ArticleDesign.Explainer`
- `ArticleDesign.Timeline`
- `ArticleDesign.LiveBlog`
- `ArticleDesign.DeadBlog`
- `ArticleDesign.Analysis`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 20px
* font-weight: regular
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xxsmall({ fontWeight: 'regular', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 24px
* font-weight: regular
* lightmode colour: neutral[7]
* darkmode colour: neutral[60]

Using Source, the typography API call would be:

```ts
headline.xsmall({ fontWeight: 'regular', lineHeight: 'tight' })
```

and colours from `palette.neutral`.

## Byline

### `ArticleDesign.Analysis`

#### Until Tablet Breakpoint

* font: GuardianHeadline
* font-size: 28px
* font-weight: medium
* font-style for job title: 'italic'
* lightmode colour: pillar colour 400
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

For author name:

```ts
headline.small({ fontWeight: 'medium', lineHeight: 'tight' })
```

For job title:

```ts
headline.small({ fontWeight: 'medium', lineHeight: 'tight', fontStyle: 'italic' })
```

and an example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[400]};
`;
```

#### From Tablet Breakpoint

* font: GuardianHeadline
* font-size: 34px
* font-weight: medium
* font-style for job title: 'italic'
* lightmode colour: pillar colour 400
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

For author name:

```ts
headline.small({ fontWeight: 'medium', lineHeight: 'tight' })
```

For job title:

```ts
headline.small({ fontWeight: 'medium', lineHeight: 'tight', fontStyle: 'italic' })
```

and an example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[400]};
`;
```