Header: Soft

This captures headlines and standfirsts that have a "soft" 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 - `ArticleDisplay.Standard` / `ArticleDisplay.Showcase`
- [ ] Headline - `ArticleDisplay.Immersive`
- [ ] Standfirst - `ArticleDisplay.Standard`
- [ ] Standfirst - `ArticleDisplay.Showcase`
- [ ] Standfirst - `ArticleDisplay.Immersive`
```

## Headline

### `ArticleDisplay.Standard` / `ArticleDisplay.Showcase`

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

- `ArticleDesign.Feature`
- `ArticleDesign.Interview`
- `ArticleDesign.Recipe`
- `ArticleDesign.Review`

#### Until Tablet Breakpoint

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

Using Source, the typography API call would be:

```ts
headline.small({ fontWeight: 'bold', 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: bold
* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

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

and an example of the colour change would be:

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

### `ArticleDisplay.Immersive`

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

- `ArticleDesign.Feature`
- `ArticleDesign.Interview`
- `ArticleDesign.Recipe`
- `ArticleDesign.Review`

#### Until Tablet Breakpoint

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

Using Source, the typography API call would be:

```ts
headline.medium({ fontWeight: 'bold', 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: bold
* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

Using Source, the typography API call would be:

```ts
headline.xlarge({ fontWeight: 'bold', 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 "soft" standfirst design must be the following `ArticleDesign`s:

- `ArticleDesign.Feature`
- `ArticleDesign.Interview`
- `ArticleDesign.Recipe`
- `ArticleDesign.Review`

#### 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 "soft" standfirst design must be the following `ArticleDesign`s:

- `ArticleDesign.Feature`
- `ArticleDesign.Interview`
- `ArticleDesign.Recipe`
- `ArticleDesign.Review`

#### 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.Feature`
- `ArticleDesign.Interview`
- `ArticleDesign.Recipe`
- `ArticleDesign.Review`

#### 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`.