Three ways to apply the Raycast design system to all pages. Pick the approach that fits your timeline and polish goals.

A — Token Cascade

Remap the existing CSS variables to DESIGN.md values + add Inter font. Everything in the app inherits the change automatically. Targeted component fixes for the biggest impact items (nav, cards, bottom tabs).

Recommended

theme-variables.css → all 30+ pages instantly

--background

#07080a canvas

--card

#0d0d0d surface

--border

#242728 hairline

--foreground

#f4f4f6 ink

--muted

#9c9c9d mute

--primary

#fff CTA pill

✓ Ships in 1 session

✓ Covers all 30+ pages

~ Some pages need manual polish

B — Full Component Overhaul

Rebuild every component to the exact DESIGN.md spec: command-palette cards, hairline borders, surface ladder, Inter ss03 typography, hero stripe gradient. Each screen redesigned individually.

Ambitious

pixel-perfect Raycast aesthetic

Merge Requests

⟵

feat: add TipTap rich text editor to comments

!204 · opened 2h ago · thomas

Open

⟵

fix: resolve CI failures in typecheck jobs

!203 · merged 1d ago · thomas

Merged

✓ Maximum visual impact

~ 3–5 sessions, large scope

~ High regression risk

C — Phased Hybrid

Token update first (instant coverage), then a focused pass on the highest-traffic screens (Dashboard, MR list, Issue list, Project detail). Skip rarely-used screens until later.

Balanced

incremental, prioritized delivery

Token + Font pass

CSS vars, Inter, remove light mode

All 30+ pages

Core screens polish

Nav, lists, detail pages, cards

~8 screens

Secondary screens

Settings, login, create forms, pipelines

~15 screens

✓ Visible wins quickly

✓ Controlled scope per session

~ Not "all pages" in one shot

Design Update Approaches