@financial-times/o3-foundation/css/sustainable-views.css

Origami foundations with design tokens

@import "./main.css";

/* src/css/tokens/sustainable-views/_variables.css */
[data-o3-brand=sustainable-views] {
  --o3-spacing-5xs: 0.25rem;
  --o3-spacing-4xs: 0.5rem;
  --o3-spacing-3xs: 0.75rem;
  --o3-spacing-2xs: 1rem;
  --o3-spacing-xs: 1.25rem;
  --o3-spacing-s: 1.5rem;
  --o3-spacing-m: 2rem;
  --o3-spacing-l: 2.5rem;
  --o3-spacing-xl: 3rem;
  --o3-spacing-2xl: 4rem;
  --o3-spacing-3xl: 5rem;
  --o3-spacing-4xl: 6rem;
  --o3-color-palette-teal: #0d7680;
  --o3-color-palette-oceanwave: #c9f5ea;
  --o3-color-palette-slate: #262a33;
  --o3-color-palette-white: #ffffff;
  --o3-color-palette-black: #000000;
  --o3-color-palette-claret: #990f3d;
  --o3-color-palette-black-90: #1a1817;
  --o3-color-palette-black-50: #807973;
  --o3-color-palette-black-70: #4d4d4d;
  --o3-color-palette-teal-40: #0a5e66;
  --o3-color-palette-teal-20: #052f33;
  --o3-color-palette-black-30: #b3a9a0;
  --o3-color-palette-black-10: #e6d9ce;
  --o3-color-palette-crimson: #cc0000;
  --o3-color-use-case-muted-inverse-text: #a8aaad;
  --o3-color-use-case-link-inverse-text: #ffffff;
  --o3-color-use-case-link-inverse-text-hover: #d4d4d6;
  --o3-color-use-case-link-inverse-underline: #ffffff;
  --o3-color-use-case-link-inverse-underline-hover: #d4d4d6;
  --o3-color-use-case-button-disabled: #9ec0bd;
  --o3-color-use-case-error-background: rgba(204, 0, 0, 0.06);
  --o3-color-use-case-success-background: #d7f0d1;
  --o3-color-use-case-success-foreground: #00572c;
  --o3-type-label-text-case: uppercase;
  --o3-type-body-content-base-font-weight: 1;
  --o3-type-body-content-highlight-font-weight: 600;
  --o3-type-body-content-emphasis-font-weight: 1;
  --o3-font-family-metric: "metric 2 VF", sans-serif;
  --o3-font-family-financier-display: "financier display VF", serif;
  --o3-font-family-financier-text: "financier text VF", serif;
  --o3-font-family-georgia: georgia, serif;
  --o3-font-weight-light: 300;
  --o3-font-weight-regular: 400;
  --o3-font-weight-medium: 500;
  --o3-font-weight-semibold: 700;
  --o3-font-weight-bold: 800;
  --o3-font-lineheight-0: 1.25rem;
  --o3-font-lineheight-1: 1.25rem;
  --o3-font-lineheight-2: 1.5rem;
  --o3-font-lineheight-3: 1.75rem;
  --o3-font-lineheight-4: 2rem;
  --o3-font-lineheight-5: 2rem;
  --o3-font-lineheight-6: 2.5rem;
  --o3-font-lineheight-7: 3rem;
  --o3-font-lineheight-8: 3.5rem;
  --o3-font-lineheight-9: 4.5rem;
  --o3-font-lineheight-10: 5.25rem;
  --o3-font-lineheight-negative-2: 1rem;
  --o3-font-lineheight-negative-1: 1rem;
  --o3-font-size-0: 1rem;
  --o3-font-size-1: 1.125rem;
  --o3-font-size-2: 1.25rem;
  --o3-font-size-3: 1.5rem;
  --o3-font-size-4: 1.75rem;
  --o3-font-size-5: 2rem;
  --o3-font-size-6: 2.5rem;
  --o3-font-size-7: 3rem;
  --o3-font-size-8: 3.5rem;
  --o3-font-size-9: 4.5rem;
  --o3-font-size-10: 5.25rem;
  --o3-font-size-negative-2: 0.75rem;
  --o3-font-size-negative-1: 0.875rem;
  --o3-font-lineheight-metric2-0: 1.5rem;
  --o3-font-lineheight-metric2-1: 1.5rem;
  --o3-font-lineheight-metric2-2: 1.75rem;
  --o3-font-lineheight-metric2-3: 2rem;
  --o3-font-lineheight-metric2-4: 2rem;
  --o3-font-lineheight-metric2-5: 2.5rem;
  --o3-font-lineheight-metric2-6: 3rem;
  --o3-font-lineheight-metric2-7: 3.5rem;
  --o3-font-lineheight-metric2-8: 4.5rem;
  --o3-font-lineheight-metric2-9: 5.25rem;
  --o3-font-lineheight-metric2-negative-2: 1rem;
  --o3-font-lineheight-metric2-negative-1: 1.25rem;
  --o3-font-size-metric2-0: 1rem;
  --o3-font-size-metric2-1: 1.125rem;
  --o3-font-size-metric2-2: 1.25rem;
  --o3-font-size-metric2-3: 1.5rem;
  --o3-font-size-metric2-4: 1.75rem;
  --o3-font-size-metric2-5: 2rem;
  --o3-font-size-metric2-6: 2.5rem;
  --o3-font-size-metric2-7: 3rem;
  --o3-font-size-metric2-8: 4rem;
  --o3-font-size-metric2-9: 4.5rem;
  --o3-font-size-metric2-negative-2: 0.75rem;
  --o3-font-size-metric2-negative-1: 0.875rem;
  --o3-border-radius-1: 0.125rem;
  --o3-border-radius-2: 0.25rem;
  --o3-color-use-case-link-text: var(--o3-color-palette-teal);
  --o3-color-use-case-link-text-hover: var(--o3-color-palette-slate);
  --o3-color-use-case-link-underline: var(--o3-color-palette-teal);
  --o3-color-use-case-link-underline-hover: var(--o3-color-palette-slate);
  --o3-color-use-case-page-background: var(--o3-color-palette-white);
  --o3-color-use-case-body-text: var(--o3-color-palette-black-90);
  --o3-color-use-case-muted-text: var(--o3-color-palette-black-50);
  --o3-color-use-case-support-text: var(--o3-color-palette-black-70);
  --o3-color-use-case-support-inverse-text: #e9eaeb;
  --o3-color-use-case-page-inverse-background: var(--o3-color-palette-slate);
  --o3-color-use-case-body-inverse-text: var(--o3-color-palette-white);
  --o3-color-use-case-button-foreground: var(--o3-color-palette-white);
  --o3-color-use-case-button-foreground-disabled: var(--o3-color-palette-white);
  --o3-color-use-case-button-default: var(--o3-color-palette-teal);
  --o3-color-use-case-button-hover: var(--o3-color-palette-teal-40);
  --o3-color-use-case-button-pressed: var(--o3-color-palette-teal-20);
  --o3-color-use-case-error-text: var(--o3-color-palette-crimson);
  --o3-color-use-case-error: var(--o3-color-palette-crimson);
  --o3-type-display-lg-font-family: var(--o3-font-family-metric);
  --o3-type-display-lg-font-weight: var(--o3-font-weight-semibold);
  --o3-type-display-lg-font-size: var(--o3-font-size-metric2-7);
  --o3-type-display-lg-line-height: var(--o3-font-lineheight-metric2-7);
  --o3-type-display-md-font-family: var(--o3-font-family-metric);
  --o3-type-display-md-font-weight: var(--o3-font-weight-semibold);
  --o3-type-display-md-font-size: var(--o3-font-size-metric2-6);
  --o3-type-display-md-line-height: var(--o3-font-lineheight-metric2-6);
  --o3-type-display-sm-font-family: var(--o3-font-family-metric);
  --o3-type-display-sm-font-weight: var(--o3-font-weight-semibold);
  --o3-type-display-sm-font-size: var(--o3-font-size-metric2-5);
  --o3-type-display-sm-line-height: var(--o3-font-lineheight-metric2-5);
  --o3-type-headline-lg-font-family: var(--o3-font-family-metric);
  --o3-type-headline-lg-font-weight: var(--o3-font-weight-regular);
  --o3-type-headline-lg-font-size: var(--o3-font-size-metric2-6);
  --o3-type-headline-lg-line-height: var(--o3-font-lineheight-metric2-6);
  --o3-type-headline-md-font-family: var(--o3-font-family-metric);
  --o3-type-headline-md-font-weight: var(--o3-font-weight-regular);
  --o3-type-headline-md-font-size: var(--o3-font-size-metric2-5);
  --o3-type-headline-md-line-height: var(--o3-font-lineheight-metric2-5);
  --o3-type-headline-sm-font-family: var(--o3-font-family-metric);
  --o3-type-headline-sm-font-weight: var(--o3-font-weight-regular);
  --o3-type-headline-sm-font-size: var(--o3-font-size-metric2-2);
  --o3-type-headline-sm-line-height: var(--o3-font-lineheight-metric2-2);
  --o3-type-title-lg-font-family: var(--o3-font-family-metric);
  --o3-type-title-lg-font-weight: var(--o3-font-weight-semibold);
  --o3-type-title-lg-font-size: var(--o3-font-size-metric2-4);
  --o3-type-title-lg-line-height: var(--o3-font-lineheight-metric2-3);
  --o3-type-title-md-font-family: var(--o3-font-family-metric);
  --o3-type-title-md-font-weight: var(--o3-font-weight-regular);
  --o3-type-title-md-font-size: var(--o3-font-size-metric2-3);
  --o3-type-title-md-line-height: var(--o3-font-lineheight-metric2-3);
  --o3-type-title-sm-font-family: var(--o3-font-family-metric);
  --o3-type-title-sm-font-weight: var(--o3-font-weight-regular);
  --o3-type-title-sm-line-height: var(--o3-font-lineheight-metric2-2);
  --o3-type-title-sm-font-size: var(--o3-font-size-metric2-2);
  --o3-type-body-lg-font-family: var(--o3-font-family-metric);
  --o3-type-body-lg-font-weight: var(--o3-font-weight-regular);
  --o3-type-body-lg-font-size: var(--o3-font-size-metric2-1);
  --o3-type-body-lg-line-height: var(--o3-font-lineheight-metric2-1);
  --o3-type-body-base-font-family: var(--o3-font-family-metric);
  --o3-type-body-base-font-weight: var(--o3-font-weight-regular);
  --o3-type-body-base-font-size: var(--o3-font-size-metric2-0);
  --o3-type-body-base-line-height: var(--o3-font-lineheight-metric2-0);
  --o3-type-body-highlight-font-family: var(--o3-font-family-metric);
  --o3-type-body-highlight-font-weight: var(--o3-font-weight-semibold);
  --o3-type-body-highlight-font-size: var(--o3-font-size-metric2-0);
  --o3-type-body-highlight-line-height: var(--o3-font-lineheight-metric2-0);
  --o3-type-detail-font-family: var(--o3-font-family-metric);
  --o3-type-detail-font-weight: var(--o3-font-weight-regular);
  --o3-type-detail-font-size: var(--o3-font-size-metric2-negative-1);
  --o3-type-detail-line-height: var(--o3-font-lineheight-metric2-negative-1);
  --o3-type-label-font-family: var(--o3-font-family-metric);
  --o3-type-label-font-weight: var(--o3-font-weight-regular);
  --o3-type-label-font-size: var(--o3-font-size-metric2-negative-1);
  --o3-type-label-line-height: var(--o3-font-lineheight-metric2-negative-1);
  --o3-type-body-content-base-font-family: var(--o3-font-family-financier-text);
  --o3-type-body-content-base-font-size: var(--o3-font-size-3);
  --o3-type-body-content-base-line-height: var(--o3-font-lineheight-4);
  --o3-type-body-content-highlight-font-family: var(--o3-font-family-financier-text);
  --o3-type-body-content-highlight-font-size: var(--o3-font-size-3);
  --o3-type-body-content-highlight-line-height: var(--o3-font-lineheight-4);
  --o3-type-body-content-emphasis-font-family: var(--o3-font-family-financier-text);
  --o3-type-body-content-emphasis-font-size: var(--o3-font-size-3);
  --o3-type-body-content-emphasis-line-height: var(--o3-font-lineheight-4);
  --o3-focus-use-case-ring-inner: 0px 0px 0px 4px #ffffff;
  --o3-focus-use-case-ring-outer: 0px 0px 0px 8px #000000;
  --o3-focus-use-case-ring-inverse-inner: 0px 0px 0px 4px #000000;
  --o3-focus-use-case-ring-inverse-outer: 0px 0px 0px 8px #ffffff;
  --o3-focus-use-case-outline-color: 0px 0px 0px 2px #807973;
  --o3-focus-use-case-outline-inverse-color: 0px 0px 0px 2px #ffffff;
}

/* src/css/brands/sustainable-views.css */
@font-face {
  src: url(https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierDisplay-VF&system_code=origami&font_format=woff2) format("woff2-variations");
  font-family: "financier display VF";
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  src: url(https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierTextWeb-VF&system_code=origami&font_format=woff2) format("woff2-variations");
  font-family: "financier text VF";
  font-weight: 1 800;
  font-style: normal;
  font-display: swap;
}