# Design tokens

Named values for the CNO interface, extracted from the saved nationalobserver.com pages. Use the token, never the raw value.

## Colour

| Colour | Token | Hex / value | RGB | Use |
| --- | --- | --- | --- | --- |
| Text | `--color-text` | `#000000` | R0 G0 B0 | body text (--cno-base-font-color), table cells, headings |
| Text on dark | `--color-text-on-dark` | `#ffffff` | R255 G255 B255 | text and icons on the black sidebar and on filled buttons |
| Text muted | `--color-text-muted` | `#666666` | R102 G102 B102 | labels, captions (--cno-gray-500) |
| Text disabled | `--color-text-disabled` | `#999999` | R153 G153 B153 | disabled text (--cno-gray-700) |
| Primary | `--color-primary` | `#003f74` | R0 G63 B116 | links in the admin, active states, focus (--cno-blue-dark) |
| Primary hover | `--color-primary-hover` | `#3ba5d1` | R59 G165 B209 | link and button hover (--cno-blue, the site's link colour) |
| Link | `--color-link` | `#3ba5d1` | R59 G165 B209 | links on the public site (a { color: var(--cno-blue) }) |
| Accent | `--color-accent` | `#fe3b1f` | R254 G59 B31 | Subscribe orange: the active-item bar and the one call to action (--cno-subscribe-orange) |
| Brand red | `--color-brand-red` | `#ff3a1e` | R255 G58 B30 | red of the CNO logo mark (--cno-red-300) |
| Ink | `--color-ink` | `#000000` | R0 G0 B0 | sidebar, header and footer-dark surfaces (--cno-black) |
| Ink soft | `--color-ink-soft` | `#222222` | R34 G34 B34 | hover on black surfaces (--cno-gray-100) |
| Surface | `--color-surface` | `#ffffff` | R255 G255 B255 | cards, menus, main area (--cno-white) |
| Page bg | `--color-page-bg` | `#f9f9f9` | R249 G249 B249 | code boxes, dev box, page tint (--cno-gray-1200) |
| Surface alt | `--color-surface-alt` | `#f2f2f2` | R242 G242 B242 | footer background (--cno-gray-1100) |
| Border | `--color-border` | `#dddddd` | R221 G221 B221 | section header rule (--cno-gray-950) |
| Border light | `--color-border-light` | `#e2e2e2` | R226 G226 B226 | table row dividers (--cno-gray-1000) |
| Border strong | `--color-border-strong` | `#cccccc` | R204 G204 B204 | input borders (--cno-gray-900) |
| Hover | `--color-hover` | `rgba(0, 0, 0, 0.04)` |  | round icon button hover |
| Focus visible | `--color-focus-visible` | `rgba(0, 0, 0, 0.12)` |  | keyboard focus fill on rows |
| Icon muted | `--color-icon-muted` | `#757575` | R117 G117 B117 | icons (--cno-gray-600) |
| Backdrop | `--color-backdrop` | `rgba(0, 0, 0, 0.8)` |  | behind a dialog (--cno-modal-background-color) |
| Link underline | `--color-link-underline` | `rgba(0, 63, 116, 0.4)` |  | underline on admin links |
| Disabled bg | `--color-disabled-bg` | `#e2e2e2` | R226 G226 B226 | disabled button fill (--cno-gray-1000) |
| Disabled text | `--color-disabled-text` | `#999999` | R153 G153 B153 | disabled button text (--cno-gray-700) |
| Success | `--color-success` | `#0db500` | R13 G181 B0 | success (--cno-green) |
| Success bg | `--color-success-bg` | `#d4f4d4` | R212 G244 B212 | success fill (--cno-green-light) |
| Success text | `--color-success-text` | `#054f00` | R5 G79 B0 | success text (--cno-green-dark) |
| Danger | `--color-danger` | `#ff0c00` | R255 G12 B0 | error (--cno-red) |
| Danger bg | `--color-danger-bg` | `#ffcecc` | R255 G206 B204 | error fill (--cno-red-light) |
| Danger text | `--color-danger-text` | `#990700` | R153 G7 B0 | error text (--cno-red-dark) |
| Warning | `--color-warning` | `#ffad02` | R255 G173 B2 | warning (--cno-yellow-dark) |
| Warning bg | `--color-warning-bg` | `#fdca40` | R253 G202 B64 | highlight fill (--cno-gold) |

## Typography

Sans `ProximaNova, "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif`; serif `"Noto Serif", Georgia, Times, "Times New Roman", serif`.

| Token | Size / line height | Weight | Use |
| --- | --- | --- | --- |
| `--font-size-display` | 54px / 60px | 800 | Page title on wide screens |
| `--font-size-title` | 32px / 36px | 800 | Page title |
| `--font-size-h2` | 32px / 40.8px | 800 | Section heading |
| `--font-size-lg` | 18px / 24px | 400 | Site base text, large buttons |
| `--font-size-md` | 16px / 24px | 400 | Admin body text, medium and small buttons |
| `--font-size-table` | 15px / 22px | 400 | Table body |
| `--font-size-nav` | 14px / 20px | 700 | Sidebar items (uppercase) |
| `--font-size-thead` | 13px / 20px | 800 | Table head (uppercase) |
| `--font-size-caption` | 13px / 18px | 400 | Code badges, captions |

## Shape and elevation

| Token | Value | Use |
| --- | --- | --- |
| `--radius-sm` | 4px | Cards, inputs, code boxes |
| `--radius-btn-sm` | 15px | Small pill button |
| `--radius-btn-md` | 20px | Medium pill button |
| `--radius-btn-lg` | 24px | Large pill button |
| `--radius-round` | 50% | Icon buttons, dots |
| `--shadow-1` | 0 1px 2px rgba(0, 0, 0, 0.12) | Resting card (admin only; the site uses almost none) |
| `--shadow-8` | 0 6px 16px rgba(0, 0, 0, 0.16) | Menus and hovered tiles |
| `--shadow-24` | 0 16px 40px rgba(0, 0, 0, 0.3) | Dialogs |

## All tokens

Generated from `tokens.css`, so it is always complete.

| Token | Value | Use | Source |
| --- | --- | --- | --- |
| `--color-text` | `#000000` | body text (--cno-base-font-color), table cells, headings | nationalobserver.com CSS |
| `--color-text-on-dark` | `#ffffff` | text and icons on the black sidebar and on filled buttons | nationalobserver.com CSS |
| `--color-text-muted` | `#666666` | labels, captions (--cno-gray-500) | nationalobserver.com CSS |
| `--color-text-disabled` | `#999999` | disabled text (--cno-gray-700) | nationalobserver.com CSS |
| `--color-primary` | `#003f74` | links in the admin, active states, focus (--cno-blue-dark) | nationalobserver.com CSS |
| `--color-primary-hover` | `#3ba5d1` | link and button hover (--cno-blue, the site's link colour) | nationalobserver.com CSS |
| `--color-link` | `#3ba5d1` | links on the public site (a { color: var(--cno-blue) }) | nationalobserver.com CSS |
| `--color-accent` | `#fe3b1f` | Subscribe orange: the active-item bar and the one call to action (--cno-subscribe-orange) | nationalobserver.com CSS |
| `--color-brand-red` | `#ff3a1e` | red of the CNO logo mark (--cno-red-300) | nationalobserver.com CSS |
| `--color-ink` | `#000000` | sidebar, header and footer-dark surfaces (--cno-black) | nationalobserver.com CSS |
| `--color-ink-soft` | `#222222` | hover on black surfaces (--cno-gray-100) | nationalobserver.com CSS |
| `--color-surface` | `#ffffff` | cards, menus, main area (--cno-white) | nationalobserver.com CSS |
| `--color-page-bg` | `#f9f9f9` | code boxes, dev box, page tint (--cno-gray-1200) | nationalobserver.com CSS |
| `--color-surface-alt` | `#f2f2f2` | footer background (--cno-gray-1100) | nationalobserver.com CSS |
| `--color-border` | `#dddddd` | section header rule (--cno-gray-950) | nationalobserver.com CSS |
| `--color-border-light` | `#e2e2e2` | table row dividers (--cno-gray-1000) | nationalobserver.com CSS |
| `--color-border-strong` | `#cccccc` | input borders (--cno-gray-900) | nationalobserver.com CSS |
| `--color-hover` | `rgba(0, 0, 0, 0.04)` | round icon button hover | Ours (admin tool) |
| `--color-focus-visible` | `rgba(0, 0, 0, 0.12)` | keyboard focus fill on rows | Ours (admin tool) |
| `--color-icon-muted` | `#757575` | icons (--cno-gray-600) | nationalobserver.com CSS |
| `--color-backdrop` | `rgba(0, 0, 0, 0.8)` | behind a dialog (--cno-modal-background-color) | nationalobserver.com CSS |
| `--color-link-underline` | `rgba(0, 63, 116, 0.4)` | underline on admin links | Ours (admin tool) |
| `--color-disabled-bg` | `#e2e2e2` | disabled button fill (--cno-gray-1000) | nationalobserver.com CSS |
| `--color-disabled-text` | `#999999` | disabled button text (--cno-gray-700) | nationalobserver.com CSS |
| `--color-success` | `#0db500` | success (--cno-green) | nationalobserver.com CSS |
| `--color-success-bg` | `#d4f4d4` | success fill (--cno-green-light) | nationalobserver.com CSS |
| `--color-success-text` | `#054f00` | success text (--cno-green-dark) | nationalobserver.com CSS |
| `--color-danger` | `#ff0c00` | error (--cno-red) | nationalobserver.com CSS |
| `--color-danger-bg` | `#ffcecc` | error fill (--cno-red-light) | nationalobserver.com CSS |
| `--color-danger-text` | `#990700` | error text (--cno-red-dark) | nationalobserver.com CSS |
| `--color-warning` | `#ffad02` | warning (--cno-yellow-dark) | nationalobserver.com CSS |
| `--color-warning-bg` | `#fdca40` | highlight fill (--cno-gold) | nationalobserver.com CSS |
| `--font-family` | `ProximaNova, "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif` | --cno-base-font-family: the UI typeface | nationalobserver.com CSS |
| `--font-family-serif` | `"Noto Serif", Georgia, Times, "Times New Roman", serif` | --cno-serif-font-family: article body and pull quotes | nationalobserver.com CSS |
| `--letter-spacing` | `0` | the site sets none | nationalobserver.com CSS |
| `--font-size-title` | `32px` | h1 at the smallest breakpoint (2rem) | nationalobserver.com CSS |
| `--line-height-title` | `36px` | h1 (2.25rem) | nationalobserver.com CSS |
| `--font-weight-title` | `800` | h1 | nationalobserver.com CSS |
| `--font-size-display` | `54px` | h1 at the widest breakpoint (3.375rem) | nationalobserver.com CSS |
| `--line-height-display` | `60px` | h1 at the widest breakpoint (3.75rem) | nationalobserver.com CSS |
| `--font-size-h2` | `32px` | h2 (2rem) | nationalobserver.com CSS |
| `--line-height-h2` | `40.8px` | h2 (2.55rem) | nationalobserver.com CSS |
| `--font-size-lg` | `18px` | base text (--cno-base-font-size) and large buttons | nationalobserver.com CSS |
| `--line-height-lg` | `24px` | base line height (--cno-base-line-height) | nationalobserver.com CSS |
| `--font-size-md` | `16px` | admin body text, medium and small buttons (1rem) | nationalobserver.com CSS |
| `--line-height-md` | `24px` | admin body line height | Ours (admin tool) |
| `--font-size-table` | `15px` | table body in the admin (dense, between 14 and 16) | Ours (admin tool) |
| `--line-height-table` | `22px` | table body | Ours (admin tool) |
| `--font-size-nav` | `14px` | sidebar items, uppercase 700 | Ours (admin tool) |
| `--line-height-nav` | `20px` | sidebar items | Ours (admin tool) |
| `--font-size-thead` | `13px` | table head, 800 | Ours (admin tool) |
| `--line-height-thead` | `20px` | table head | Ours (admin tool) |
| `--font-size-caption` | `13px` | code badges, captions | Ours (admin tool) |
| `--line-height-caption` | `18px` | captions | Ours (admin tool) |
| `--font-weight-regular` | `400` | body | nationalobserver.com CSS |
| `--font-weight-semibold` | `600` | subheads | nationalobserver.com CSS |
| `--font-weight-bold` | `700` | buttons, nav | nationalobserver.com CSS |
| `--font-weight-thead` | `800` | headings (extrabold file) | nationalobserver.com CSS |
| `--radius-sm` | `4px` | cards, inputs, code (--cno-border-radius) | nationalobserver.com CSS |
| `--radius-btn-sm` | `15px` | small pill button (.9375rem) | nationalobserver.com CSS |
| `--radius-btn-md` | `20px` | medium pill button (1.25rem) | nationalobserver.com CSS |
| `--radius-btn-lg` | `24px` | large pill button (1.5rem) | nationalobserver.com CSS |
| `--radius-round` | `50%` | icon buttons, dots | Ours (admin tool) |
| `--space-1` | `4px` | Tailwind 1 | nationalobserver.com CSS |
| `--space-2` | `8px` | Tailwind 2 | nationalobserver.com CSS |
| `--space-3` | `12px` | Tailwind 3 | nationalobserver.com CSS |
| `--space-4` | `16px` | Tailwind 4 | nationalobserver.com CSS |
| `--space-5` | `20px` | Tailwind 5 (footer side padding) | nationalobserver.com CSS |
| `--space-6` | `24px` | Tailwind 6 (paragraph margin 1.5rem) | nationalobserver.com CSS |
| `--space-8` | `32px` | Tailwind 8 | nationalobserver.com CSS |
| `--space-10` | `40px` | Tailwind 10 | nationalobserver.com CSS |
| `--page-padding` | `40px` | main area padding | Ours (admin tool) |
| `--card-padding` | `24px` | card padding | Ours (admin tool) |
| `--shadow-1` | `0 1px 2px rgba(0, 0, 0, 0.12)` | the site uses almost no shadows; resting card (admin only) | Ours (admin tool) |
| `--shadow-8` | `0 6px 16px rgba(0, 0, 0, 0.16)` | menus and hovered tiles | Ours (admin tool) |
| `--shadow-24` | `0 16px 40px rgba(0, 0, 0, 0.3)` | dialogs | Ours (admin tool) |
| `--duration-hover` | `150ms` | --cno-transition-speed-default: colour and background fades | nationalobserver.com CSS |
| `--duration-menu-item` | `150ms` | same as hover | nationalobserver.com CSS |
| `--ease-standard` | `ease-in-out` | transition timing on links and buttons | nationalobserver.com CSS |
| `--transition-focus` | `150ms ease-in-out` | focus and underline transitions | nationalobserver.com CSS |
| `--sidebar-width` | `240px` | admin left nav | Ours (admin tool) |
| `--content-max-width` | `1290px` | --cno-main-content-max-width-wide (80.625rem) | nationalobserver.com CSS |
| `--article-max-width` | `790px` | article column (max-w-search_result) | nationalobserver.com CSS |
| `--nav-indicator-height` | `4px` | active item bar | Ours (admin tool) |
| `--header-height` | `200px` | site header, collapsed (12.5rem) | nationalobserver.com CSS |
| `--footer-padding` | `20px` | footer side padding (px-5) | nationalobserver.com CSS |

## CSS

```css
/* 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) */
}
```