Design tokens

• Color

  • RGB
  • RGB (extended)
  • HSL
  • HSL (extended)
• Grid
• Interactions
• Media queries
• Rule

• Typography

  • Typographic scale
  • Leading (line-height)
  • 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

Values for calculation

• --ds-type-scale-base: 1rem / 16px
• --ds-type-scale-ratio: 1.125 (Major Second scale)

Modular scale (-3 to 11)

• --ds-type-scale--3: 0.702rem / 11.237px
• --ds-type-scale--2: 0.79rem / 12.642px
• --ds-type-scale--1: 0.889rem / 14.222px
• --ds-type-scale-0: 1rem, 16px
• --ds-type-scale-1: 1.125rem / 18px
• --ds-type-scale-2: 1.266rem / 20.25px
• --ds-type-scale-3: 1.424rem / 22.781px
• --ds-type-scale-4: 1.602rem / 25.629px
• --ds-type-scale-5: 1.802rem / 28.833px
• --ds-type-scale-6: 2.027rem / 32.437px
• --ds-type-scale-7: 2.281rem / 36.491px
• --ds-type-scale-8: 2.566rem / 41.053px
• --ds-type-scale-9: 2.887rem / 46.184px
• --ds-type-scale-10: 3.247rem / 51.957px
• --ds-type-scale-11: 3.653rem / 58.452px
• --ds-type-scale-12: 4.110rem / 65.758px
• --ds-type-scale-13: 4.624rem / 73.978px

Note: See /src/common/components/typography for calculations

Leading (line-height)

• --ds-type-leading-lower: 1.4
• --ds-type-leading-upper: 1.2
• --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: 'MiloTE', 'MiloTESec', Charter, 'Bitstream Charter', 'Iowan Old Style', 'Calisto MT', serif
• --ds-type-system-serif-smallcaps 'MiloTESC', var(--ds-type-system-serif)
• --ds-type-system-sans: 'EconSansOS', 'EconSansOSSec', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif
• --ds-type-system-sans-smallcaps 'EconSansSC', var(--ds-type-system-sans)
• --ds-type-system-sans-condensed: 'EconSansCnd', 'EconSansCndSec', 'Arial Narrow', var(--ds-type-system-sans)
• --ds-type-system-sans-lining: 'EconSansLin', var(--ds-type-system-sans)
• --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'