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

  to {
    transform: translateX(-20px);
  }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 15s linear infinite;
}

@keyframes rf-download-card-shimmer {
  0% {

@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-priority-essential: #d96a62;
  --color-rf-priority-high: #ddb24f;
  --color-rf-priority-medium: #5da9c9;
  --color-rf-priority-low: #8e8578;
  --color-rf-docs-link: #d4a574;

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