Tailwind CSS

Tailwind v4 utility classes plus rf-* CSS tokens style the desktop app and the public site from the same palette idea.

The app uses @tailwindcss/vite with Tailwind 4. Global tokens live in src/index.css under :root (--bg, --accent, --surface, radii). Settings accent color writes into --accent at runtime via accentCss.ts. Frosted player dock, queue drawer blur, and downloader hero are plain utility stacks, not a component library.

The marketing site loads the same major Tailwind version through website/src/styles/global.css @theme block (--color-rf-bg, --color-rf-accent, etc.). Classes like rf-container, rf-link-card, and mega-menu overrides keep docs visually aligned without importing app CSS.

Scrollbars use a shared rf-scrollbar class (slim accent thumb, no native arrow buttons) on both surfaces. Horizontal carousels opt out with scrollbar-none.

Mini player adds height breakpoints (compact, micro, tiny) where controls hide or shrink based on window size. Responsive behavior is mostly Tailwind breakpoints plus a few inline measurements for micro layouts.

In the repo

:root {
  --bg: #1c1512;
  --surface: rgba(43, 30, 25, 0.7);
  --surface-elevated: rgba(56, 39, 32, 0.85);
  --border: rgba(212, 163, 115, 0.1);
  /* Synced from RuForge settings (see `accentCss.ts`); defaults to sand gold */
  --accent: #EDCF9B;
  --accent-glow: rgba(237, 207, 155, 0.28);
  --text: #fafaf9;
  --text-muted: #a8a29e;
  
  --radius-input: 12px;
  --radius-card: 20px;
  --radius-modal: 24px;
  --radius-pill: 999px;
}

@theme {
  --color-rf-bg: #1d1613;
  --color-rf-surface: #271c18;
  --color-rf-text: #edd79c;
  --color-rf-text-muted: #c9b87a;
  --color-rf-accent: #edd79c;
  --color-rf-border: rgb(237 215 156 / 0.12);
  --color-rf-add: #9cb86a;
  --color-rf-add-bg: rgb(156 184 106 / 0.12);
  --color-rf-fix: #d49a7a;
  --color-rf-fix-bg: rgb(212 154 122 / 0.12);
  --color-rf-todo: #e8c06a;
  --color-rf-todo-bg: rgb(232 192 106 / 0.1);
  --color-rf-done: #8a9e78;
  --color-rf-done-bg: rgb(138 158 120 / 0.1);
  --color-rf-critical: #7faa6e;
  --color-rf-critical-bg: rgb(94 130 82 / 0.22);
  --color-rf-high: #d4b06a;
  --color-rf-high-bg: rgb(212 176 106 / 0.14);
  --color-rf-docs-link: #d4a574;
  --font-sans: 'Satoshi', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --font-hand: 'Patrick Hand', cursive;
  --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;

Where it shows up

@tailwindcss/vite in root and website/ Vite configs
src/index.css and website/src/styles/global.css
Component utilities in PlayerView.tsx, DownloadJobQueuePanel.tsx, SiteHeader.astro