• Colours are --color-<name>
• Type is --font-size-<name>, --line-height-<name>, --font-weight-<name>
• Space, radius and shadow are --space-<n>, --radius-<name>, --shadow-<n>
• Use the token, never the raw value

tokens.csstokens.jsonfonts.cssDESIGN-TOKENS.md

/* CNO design tokens: extracted from the saved nationalobserver.com pages (the --cno-* custom properties and the compiled Tailwind/Drupal CSS).
   One token per line with its use as the trailing comment: the docs, tokens.json and the skill are generated from this file.
   Source tag at the start of each comment:
     [css]  the value is written literally in the saved nationalobserver.com CSS (:root --cno-* or a component rule)
     [ours] defined by us for the admin tool, not taken from the site */
:root {
  /* Color: text */
  --color-text: #000000;                     /* [css] body text (--cno-base-font-color), table cells, headings */
  --color-text-on-dark: #ffffff;             /* [css] text and icons on the black sidebar and on filled buttons */
  --color-text-muted: #666666;               /* [css] labels, captions (--cno-gray-500) */
  --color-text-disabled: #999999;            /* [css] disabled text (--cno-gray-700) */

  /* Color: brand and neutrals */
  --color-primary: #003f74;                  /* [css] links in the admin, active states, focus (--cno-blue-dark) */
  --color-primary-hover: #3ba5d1;            /* [css] link and button hover (--cno-blue, the site's link colour) */
  --color-link: #3ba5d1;                     /* [css] links on the public site (a { color: var(--cno-blue) }) */
  --color-accent: #fe3b1f;                   /* [css] Subscribe orange: the active-item bar and the one call to action (--cno-subscribe-orange) */
  --color-brand-red: #ff3a1e;                /* [css] red of the CNO logo mark (--cno-red-300) */
  --color-ink: #000000;                      /* [css] sidebar, header and footer-dark surfaces (--cno-black) */
  --color-ink-soft: #222222;                 /* [css] hover on black surfaces (--cno-gray-100) */
  --color-surface: #ffffff;                  /* [css] cards, menus, main area (--cno-white) */
  --color-page-bg: #f9f9f9;                  /* [css] code boxes, dev box, page tint (--cno-gray-1200) */
  --color-surface-alt: #f2f2f2;              /* [css] footer background (--cno-gray-1100) */
  --color-border: #dddddd;                   /* [css] section header rule (--cno-gray-950) */
  --color-border-light: #e2e2e2;             /* [css] table row dividers (--cno-gray-1000) */
  --color-border-strong: #cccccc;            /* [css] input borders (--cno-gray-900) */
  --color-hover: rgba(0, 0, 0, 0.04);        /* [ours] round icon button hover */
  --color-focus-visible: rgba(0, 0, 0, 0.12); /* [ours] keyboard focus fill on rows */
  --color-icon-muted: #757575;               /* [css] icons (--cno-gray-600) */
  --color-backdrop: rgba(0, 0, 0, 0.8);      /* [css] behind a dialog (--cno-modal-background-color) */
  --color-link-underline: rgba(0, 63, 116, 0.4); /* [ours] underline on admin links */
  --color-disabled-bg: #e2e2e2;              /* [css] disabled button fill (--cno-gray-1000) */
  --color-disabled-text: #999999;            /* [css] disabled button text (--cno-gray-700) */

  /* Color: status */
  --color-success: #0db500;                  /* [css] success (--cno-green) */
  --color-success-bg: #d4f4d4;               /* [css] success fill (--cno-green-light) */
  --color-success-text: #054f00;             /* [css] success text (--cno-green-dark) */
  --color-danger: #ff0c00;                   /* [css] error (--cno-red) */
  --color-danger-bg: #ffcecc;                /* [css] error fill (--cno-red-light) */
  --color-danger-text: #990700;              /* [css] error text (--cno-red-dark) */
  --color-warning: #ffad02;                  /* [css] warning (--cno-yellow-dark) */
  --color-warning-bg: #fdca40;               /* [css] highlight fill (--cno-gold) */

  /* Typography */
  --font-family: ProximaNova, "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif; /* [css] --cno-base-font-family: the UI typeface */
  --font-family-serif: "Noto Serif", Georgia, Times, "Times New Roman", serif; /* [css] --cno-serif-font-family: article body and pull quotes */
  --letter-spacing: 0;                       /* [css] the site sets none */
  --font-size-title: 32px;                   /* [css] h1 at the smallest breakpoint (2rem) */
  --line-height-title: 36px;                 /* [css] h1 (2.25rem) */
  --font-weight-title: 800;                  /* [css] h1 */
  --font-size-display: 54px;                 /* [css] h1 at the widest breakpoint (3.375rem) */
  --line-height-display: 60px;               /* [css] h1 at the widest breakpoint (3.75rem) */
  --font-size-h2: 32px;                      /* [css] h2 (2rem) */
  --line-height-h2: 40.8px;                  /* [css] h2 (2.55rem) */
  --font-size-lg: 18px;                      /* [css] base text (--cno-base-font-size) and large buttons */
  --line-height-lg: 24px;                    /* [css] base line height (--cno-base-line-height) */
  --font-size-md: 16px;                      /* [css] admin body text, medium and small buttons (1rem) */
  --line-height-md: 24px;                    /* [ours] admin body line height */
  --font-size-table: 15px;                   /* [ours] table body in the admin (dense, between 14 and 16) */
  --line-height-table: 22px;                 /* [ours] table body */
  --font-size-nav: 14px;                     /* [ours] sidebar items, uppercase 700 */
  --line-height-nav: 20px;                   /* [ours] sidebar items */
  --font-size-thead: 13px;                   /* [ours] table head, 800 */
  --line-height-thead: 20px;                 /* [ours] table head */
  --font-size-caption: 13px;                 /* [ours] code badges, captions */
  --line-height-caption: 18px;               /* [ours] captions */
  --font-weight-regular: 400;                /* [css] body */
  --font-weight-semibold: 600;               /* [css] subheads */
  --font-weight-bold: 700;                   /* [css] buttons, nav */
  --font-weight-thead: 800;                  /* [css] headings (extrabold file) */

  /* Radius */
  --radius-sm: 4px;                          /* [css] cards, inputs, code (--cno-border-radius) */
  --radius-btn-sm: 15px;                     /* [css] small pill button (.9375rem) */
  --radius-btn-md: 20px;                     /* [css] medium pill button (1.25rem) */
  --radius-btn-lg: 24px;                     /* [css] large pill button (1.5rem) */
  --radius-round: 50%;                       /* [ours] icon buttons, dots */

  /* Spacing */
  --space-1: 4px;                            /* [css] Tailwind 1 */
  --space-2: 8px;                            /* [css] Tailwind 2 */
  --space-3: 12px;                           /* [css] Tailwind 3 */
  --space-4: 16px;                           /* [css] Tailwind 4 */
  --space-5: 20px;                           /* [css] Tailwind 5 (footer side padding) */
  --space-6: 24px;                           /* [css] Tailwind 6 (paragraph margin 1.5rem) */
  --space-8: 32px;                           /* [css] Tailwind 8 */
  --space-10: 40px;                          /* [css] Tailwind 10 */
  --page-padding: 40px;                      /* [ours] main area padding */
  --card-padding: 24px;                      /* [ours] card padding */

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.12); /* [ours] the site uses almost no shadows; resting card (admin only) */
  --shadow-8: 0 6px 16px rgba(0, 0, 0, 0.16); /* [ours] menus and hovered tiles */
  --shadow-24: 0 16px 40px rgba(0, 0, 0, 0.3); /* [ours] dialogs */

  /* Motion */
  --duration-hover: 150ms;                   /* [css] --cno-transition-speed-default: colour and background fades */
  --duration-menu-item: 150ms;               /* [css] same as hover */
  --ease-standard: ease-in-out;              /* [css] transition timing on links and buttons */
  --transition-focus: 150ms ease-in-out;     /* [css] focus and underline transitions */

  /* Layout */
  --sidebar-width: 240px;                    /* [ours] admin left nav */
  --content-max-width: 1290px;               /* [css] --cno-main-content-max-width-wide (80.625rem) */
  --article-max-width: 790px;                /* [css] article column (max-w-search_result) */
  --nav-indicator-height: 4px;               /* [ours] active item bar */
  --header-height: 200px;                    /* [css] site header, collapsed (12.5rem) */
  --footer-padding: 20px;                    /* [css] footer side padding (px-5) */
}

{
  "name": "cno",
  "version": "1.0",
  "source": "nationalobserver.com (saved pages) via design-tokens/tokens.css",
  "color": {
    "text": "#000000",
    "text-on-dark": "#ffffff",
    "text-muted": "#666666",
    "text-disabled": "#999999",
    "primary": "#003f74",
    "primary-hover": "#3ba5d1",
    "link": "#3ba5d1",
    "accent": "#fe3b1f",
    "brand-red": "#ff3a1e",
    "ink": "#000000",
    "ink-soft": "#222222",
    "surface": "#ffffff",
    "page-bg": "#f9f9f9",
    "surface-alt": "#f2f2f2",
    "border": "#dddddd",
    "border-light": "#e2e2e2",
    "border-strong": "#cccccc",
    "hover": "rgba(0, 0, 0, 0.04)",
    "focus-visible": "rgba(0, 0, 0, 0.12)",
    "icon-muted": "#757575",
    "backdrop": "rgba(0, 0, 0, 0.8)",
    "link-underline": "rgba(0, 63, 116, 0.4)",
    "disabled-bg": "#e2e2e2",
    "disabled-text": "#999999",
    "success": "#0db500",
    "success-bg": "#d4f4d4",
    "success-text": "#054f00",
    "danger": "#ff0c00",
    "danger-bg": "#ffcecc",
    "danger-text": "#990700",
    "warning": "#ffad02",
    "warning-bg": "#fdca40"
  },
  "font": {
    "family": "ProximaNova, \"Helvetica Neue\", Helvetica, Arial, \"Nimbus Sans L\", sans-serif",
    "familySerif": "\"Noto Serif\", Georgia, Times, \"Times New Roman\", serif"
  },
  "layout": {
    "page-padding": "40px",
    "card-padding": "24px",
    "sidebar-width": "240px",
    "content-max-width": "1290px",
    "article-max-width": "790px"
  },
  "cssVariables": {
    "--color-text": "#000000",
    "--color-text-on-dark": "#ffffff",
    "--color-text-muted": "#666666",
    "--color-text-disabled": "#999999",
    "--color-primary": "#003f74",
    "--color-primary-hover": "#3ba5d1",
    "--color-link": "#3ba5d1",
    "--color-accent": "#fe3b1f",
    "--color-brand-red": "#ff3a1e",
    "--color-ink": "#000000",
    "--color-ink-soft": "#222222",
    "--color-surface": "#ffffff",
    "--color-page-bg": "#f9f9f9",
    "--color-surface-alt": "#f2f2f2",
    "--color-border": "#dddddd",
    "--color-border-light": "#e2e2e2",
    "--color-border-strong": "#cccccc",
    "--color-hover": "rgba(0, 0, 0, 0.04)",
    "--color-focus-visible": "rgba(0, 0, 0, 0.12)",
    "--color-icon-muted": "#757575",
    "--color-backdrop": "rgba(0, 0, 0, 0.8)",
    "--color-link-underline": "rgba(0, 63, 116, 0.4)",
    "--color-disabled-bg": "#e2e2e2",
    "--color-disabled-text": "#999999",
    "--color-success": "#0db500",
    "--color-success-bg": "#d4f4d4",
    "--color-success-text": "#054f00",
    "--color-danger": "#ff0c00",
    "--color-danger-bg": "#ffcecc",
    "--color-danger-text": "#990700",
    "--color-warning": "#ffad02",
    "--color-warning-bg": "#fdca40",
    "--font-family": "ProximaNova, \"Helvetica Neue\", Helvetica, Arial, \"Nimbus Sans L\", sans-serif",
    "--font-family-serif": "\"Noto Serif\", Georgia, Times, \"Times New Roman\", serif",
    "--letter-spacing": "0",
    "--font-size-title": "32px",
    "--line-height-title": "36px",
    "--font-weight-title": "800",
    "--font-size-display": "54px",
    "--line-height-display": "60px",
    "--font-size-h2": "32px",
    "--line-height-h2": "40.8px",
    "--font-size-lg": "18px",
    "--line-height-lg": "24px",
    "--font-size-md": "16px",
    "--line-height-md": "24px",
    "--font-size-table": "15px",
    "--line-height-table": "22px",
    "--font-size-nav": "14px",
    "--line-height-nav": "20px",
    "--font-size-thead": "13px",
    "--line-height-thead": "20px",
    "--font-size-caption": "13px",
    "--line-height-caption": "18px",
    "--font-weight-regular": "400",
    "--font-weight-semibold": "600",
    "--font-weight-bold": "700",
    "--font-weight-thead": "800",
    "--radius-sm": "4px",
    "--radius-btn-sm": "15px",
    "--radius-btn-md": "20px",
    "--radius-btn-lg": "24px",
    "--radius-round": "50%",
    "--space-1": "4px",
    "--space-2": "8px",
    "--space-3": "12px",
    "--space-4": "16px",
    "--space-5": "20px",
    "--space-6": "24px",
    "--space-8": "32px",
    "--space-10": "40px",
    "--page-padding": "40px",
    "--card-padding": "24px",
    "--shadow-1": "0 1px 2px rgba(0, 0, 0, 0.12)",
    "--shadow-8": "0 6px 16px rgba(0, 0, 0, 0.16)",
    "--shadow-24": "0 16px 40px rgba(0, 0, 0, 0.3)",
    "--duration-hover": "150ms",
    "--duration-menu-item": "150ms",
    "--ease-standard": "ease-in-out",
    "--transition-focus": "150ms ease-in-out",
    "--sidebar-width": "240px",
    "--content-max-width": "1290px",
    "--article-max-width": "790px",
    "--nav-indicator-height": "4px",
    "--header-height": "200px",
    "--footer-padding": "20px"
  }
}