# Design tokens

- [Color](#color)
  - [RGB](#rgb)
  - [RGB (extended)](#rgb-extended)
  - [HSL](#hsl)
  - [HSL (extended)](#hsl-extended)
- [Grid](#grid)
- [Interactions](#interactions)
- [Media queries](#media-queries)
- [Rule](#rule)
- [Typography](#typography)
  - [Typographic scale](#typographic-scale)
  - [Leading (line-height)](#leading-line-height)
  - [Type families](#type-families)

## Color

### RGB

#### Brand

- `--ds-color-economist-red`: #E3120B
- `--ds-color-economist-red-60`: #F6423C

#### Accent

_Primary_

- `--ds-color-chicago-20`: #0A1757
- `--ds-color-chicago-30`: #142680
- `--ds-color-chicago-45`: #2E45B8
- `--ds-color-chicago-55`: #475ED1
- `--ds-color-chicago-90`: #D6DBF5
- `--ds-color-chicago-95`: #EBEDFA

_Secondary_

- `--ds-color-hong-kong-45`: #1DC9A4
- `--ds-color-hong-kong-55`: #36E2BD
- `--ds-color-hong-kong-90`: #D2F9F0
- `--ds-color-hong-kong-95`: #E9FCF8
- `--ds-color-tokyo-45`: #C91D42
- `--ds-color-tokyo-55`: #E2365B
- `--ds-color-tokyo-90`: #F9D2DB
- `--ds-color-tokyo-95`: #FCE9ED

_Tertiary_

- `--ds-color-singapore-55`: #F97A1F
- `--ds-color-singapore-65`: #FB9851
- `--ds-color-singapore-75`: #FCB583
- `--ds-color-singapore-90`: #FEE1CD
- `--ds-color-new-york-55`: #F9C31F
- `--ds-color-new-york-65`: #FBD051
- `--ds-color-new-york-75`: #FCDE83
- `--ds-color-new-york-90`: #FEF2CD

#### Greyscale

- `--ds-color-london-5`: #0D0D0D
- `--ds-color-london-10`: #1A1A1A
- `--ds-color-london-20`: #333
- `--ds-color-london-35`: #595959
- `--ds-color-london-70`: #B3B3B3
- `--ds-color-london-85`: #D9D9D9
- `--ds-color-london-95`: #F2F2F2
- `--ds-color-london-100`: #FFF

#### Canvas

- `--ds-color-los-angeles-85`: #E1DFD0
- `--ds-color-los-angeles-90`: #EBE9E0
- `--ds-color-los-angeles-95`: #F5F4EF
- `--ds-color-paris-85`: #D0E1E1
- `--ds-color-paris-90`: #E0EBEB
- `--ds-color-paris-95`: #EFF5F5

### HSL

#### Brand

- `--ds-color-hsl-economist-red`: 2, 91%, 47%
- `--ds-color-hsl-economist-red-60`: 2, 91%, 60%

#### Accent

_Primary_

- `--ds-color-hsl-chicago-20`: 230, 60%, 20%
- `--ds-color-hsl-chicago-30`: 230, 60%, 30%
- `--ds-color-hsl-chicago-45`: 230, 60%, 45%
- `--ds-color-hsl-chicago-55`: 230, 60%, 55%
- `--ds-color-hsl-chicago-90`: 230, 60%, 90%
- `--ds-color-hsl-chicago-95`: 230, 60%, 95%

_Secondary_

- `--ds-color-hsl-hong-kong-45`: 167, 75%, 45%
- `--ds-color-hsl-hong-kong-55`: 167, 75%, 55%
- `--ds-color-hsl-hong-kong-90`: 167, 75%, 90%
- `--ds-color-hsl-hong-kong-95`: 167, 75%, 95%
- `--ds-color-hsl-tokyo-45`: 347, 75%, 45%
- `--ds-color-hsl-tokyo-55`: 347, 75%, 55%
- `--ds-color-hsl-tokyo-90`: 347, 75%, 90%
- `--ds-color-hsl-tokyo-95`: 347, 75%, 95%

_Tertiary_

- `--ds-color-hsl-singapore-55`: 25, 95%, 55%
- `--ds-color-hsl-singapore-65`: 25, 95%, 65%
- `--ds-color-hsl-singapore-75`: 25, 95%, 75%
- `--ds-color-hsl-singapore-90`: 25, 95%, 90%
- `--ds-color-hsl-new-york-55`: 45, 95%, 55%
- `--ds-color-hsl-new-york-65`: 45, 95%, 65%
- `--ds-color-hsl-new-york-75`: 45, 95%, 75%
- `--ds-color-hsl-new-york-90`: 45, 95%, 90%

#### Greyscale

- `--ds-color-hsl-london-5`: 0, 0%, 5%
- `--ds-color-hsl-london-10`: 0, 0%, 10%
- `--ds-color-hsl-london-20`: 0, 0%, 20%
- `--ds-color-hsl-london-35`: 0, 0%, 35%
- `--ds-color-hsl-london-70`: 0, 0%, 70%
- `--ds-color-hsl-london-85`: 0, 0%, 85%
- `--ds-color-hsl-london-95`: 0, 0%, 95%
- `--ds-color-hsl-london-100`: 0, 0%, 100%

#### Canvas

- `--ds-color-hsl-los-angeles-85`: 51, 22%, 85%
- `--ds-color-hsl-los-angeles-90`: 51, 22%, 90%
- `--ds-color-hsl-los-angeles-95`: 51, 22%, 95%
- `--ds-color-hsl-paris-85`: 180, 22%, 85%
- `--ds-color-hsl-paris-90`: 180, 22%, 90%
- `--ds-color-hsl-paris-95`: 180, 22%, 95%

## Grid

#### Below 60rem / 900px

- `--ds-grid-gap`: 0.75rem / 12px
- `--ds-grid-gutter`: 1.5rem / 24px

#### Above 60rem / 900px

- `--ds-grid-gap`: 1rem / 16px
- `--ds-grid-gutter`: 2rem / 32px

## Interactions

- `--ds-interactions-transition`: 0.13s ease-in-out

## Media queries

#### Min-width

- `--ds-viewport-min-small`: (min-width: 22.5rem) / > 360px
- `--ds-viewport-min-medium`: (min-width: 37.5rem) / > 600px
- `--ds-viewport-min-large`: (min-width: 60rem) / > 960px
- `--ds-viewport-min-xlarge`: (min-width: 80rem) / > 1280px

#### Max-width

max-width media queries set to one pixel less than min-width to avoid overlaps triggering both queries

- `--ds-viewport-max-small`: (max-width: 22.4375rem) / < 359px
- `--ds-viewport-max-medium`: (max-width: 37.4375rem) / < 599px
- `--ds-viewport-max-large`: (max-width: 59.9375rem) / < 959px
- `--ds-viewport-max-xlarge`: (max-width: 79.9375rem) / < 1279px

## Rule

- `--ds-border-rule`: 0.0625rem solid `var(--ds-color-london-85)`;
- `--ds-border-rule--emphasised`: 0.0625rem solid `var(--ds-color-london-5)`;
- `--ds-border-rule--inverse`: 0.0625rem solid `var(--ds-color-london-35)`;
- `--ds-border-rule--inverse-emphasised`: 0.0625rem solid `var(--ds-color-london-100)`;
- `--ds-border-rule--heavy`: 0.25rem solid `var(--ds-color-london-5)`;
- `--ds-border-rule--inverse-heavy`: 0.25rem solid `var(--ds-color-london-100)`;
- `--ds-border-rule--accent`: 0.25rem solid `var(--ds-color-economist-red)`;
- `--ds-border-rule--inverse-accent`: 0.25rem solid `var(--ds-color-london-100)`;

## Typography

### Typographic scale

`--ds-type-scale--2`: 0.8125rem / 13px
`--ds-type-scale--1`: 0.9375rem / 15px
`--ds-type-scale-0`: 1.0625rem / 17px
`--ds-type-scale-1`: 1.25rem / 20px
`--ds-type-scale-2`: 1.4375rem / 23px
`--ds-type-scale-3`: 1.625rem / 26px
`--ds-type-scale-4`: 1.875rem / 30px
`--ds-type-scale-5`: 2.125rem / 34px
`--ds-type-scale-6`: 2.5rem / 40px
`--ds-type-scale-7`: 2.875rem / 46px
`--ds-type-scale-8`: 3.25rem / 52px
`--ds-type-scale-9`: 3.75rem / 60px
`--ds-type-scale-10`: 4.25rem / 68px
`--ds-type-scale-11`: 5rem / 80px
`--ds-type-scale-12`: 5.75rem / 92px

### Leading (line-height)

- `--ds-type-leading-lower`: 1.4
- `--ds-type-leading-upper`: 1.18
- `--ds-type-leading-border-link`: 1.125 (custom value for non-wrapping links)

**Note:** If `--ds-type-scale` is greater than or equal to `--ds-type-scale-3`, use `--ds-type-leading-upper`. Otherwise, set to `--ds-type-leading-lower`.

### Type families

- `--ds-type-system-serif`: 'EconomistSerifOsF', ui-serif, Georgia, Times, 'Times New Roman', serif
- `--ds-type-system-serif-smallcaps`: 'EconomistSerifSC', `var(--ds-type-system-serif)`
- `--ds-type-system-serif-lining`: 'EconomistSerifLF', `var(--ds-type-system-serif)`
- `--ds-type-system-sans`: 'EconomistSansOsF', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif
- `--ds-type-system-sans-smallcaps`: 'EconomistSansSC', `var(--ds-type-system-sans)`
- `--ds-type-system-sans-lining`: 'EconomistSansLF', `var(--ds-type-system-sans)`
- `--ds-type-system-sans-condensed`: `var(--ds-type-system-sans-lining)`
- `--ds-type-system-sans-headline`: 'EconomistSansHeadline', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Arial Black', sans-serif
- `--ds-type-system-twa`: 'TWANeue', Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Arial Black', sans-serif
- `--ds-type-system-twa-alt`: 'TWANeueAlt', `var(--ds-type-system-twa)`
- `--ds-type-system-twa-rounded`: 'TWANeueRounded', `var(--ds-type-system-twa)`
- `--ds-type-system-display`: 'Narrowfat', `var(--ds-type-system-twa)`
- `--ds-type-system-display-stencil`: 'NarrowfatStencil', `var(--ds-type-system-display)`
- `--ds-type-system-simplified-chinese: 'PingFang SC', 'Heiti SC', 'Noto Sans CJK', 'DengXian', 'Microsoft JhengHei UI', system-ui, sans-serif`
- `--ds-type-system-symbols`: 'EcoPict'