TNG design layer — porting into your Quarto project

Two files carry the whole design system. Drop them next to your existing _quarto.yml and wire them in. Nothing else here needs to change in your project’s architecture, pages, or config beyond the theme: block.

tng.scss        Light theme — design tokens → Bootstrap/Quarto SCSS vars
                (scss:defaults) + all component CSS, responsive/mobile rules
                (scss:rules). Components are written against CSS custom
                properties so the dark file can reuse them.
tng-dark.scss   Dark theme — overrides the Bootstrap vars + token values only.

1. Wire up the theme + dark-mode toggle

In your _quarto.yml, set the theme to a light/dark map. Listing both files in the dark bundle is what lets dark mode reuse the shared component rules from tng.scss:

format:
  html:
    theme:
      light: tng.scss
      dark:  [tng.scss, tng-dark.scss]

Quarto automatically renders the light/dark toggle in the navbar whenever both a light and dark theme are present — you don’t add any markup. (If you already layer a base like cosmo, keep it first: light: [cosmo, tng.scss], dark: [cosmo, tng.scss, tng-dark.scss].)

2. What you get

  • Type, color, spacing, buttons, links, navbar, footer — mapped onto Bootstrap/Quarto $variables in scss:defaults, so your existing pages pick up the look with no per-page changes.
  • Component classes for the bespoke pieces (.tng-hero, .snippet-grid / .tng-card, .article-preview, .model-verify, .badge-tng, .tng-logo, the rank/standings/schedule rows). Apply them with Quarto fenced divs, e.g. ::: {.snippet-grid} … or from R via htmltools.
  • Mobile design — responsive breakpoints at 960px (tablet: hero + grids collapse) and 640px (phone: single-column, stacked hero actions, side thumbnail dropped from article previews, type scaled down).
  • Dark mode — full dark palette flipped via CSS custom properties.

3. The one place dark mode needs R help

Quarto’s reactable/ggplot output is styled from R, not CSS, so it won’t follow the toggle automatically. Two options:

  • Reference the CSS tokens from R where possible (e.g. pass color = "var(--ink)" in reactable cell styles) so they inherit the theme.
  • Or define a dark variant of your reactable/ggplot theme and switch on a build parameter.

Everything rendered as plain HTML (the hero, cards, previews, badges, model line) already follows the toggle with no R changes.

4. Token reference

tng.scss scss:rules opens with the full token set as CSS custom properties (--ink, --bg-paper, --brand-green, --chart-1..6, --space-*, etc.). tng-dark.scss overrides the subset that changes for dark. Use these vars in any custom CSS or R-emitted inline styles so light/dark stays consistent.