` or `` wrappers (no styling — Phase 4 replaces them with `Card`); `AsciiPanel` in `[locale]/page.tsx` is removed entirely. `TextButton` and `TextTabsNav` are NOT deleted in this phase (they remain functional as the primary CTA and navigation components until Phase 4 replaces them), but their `font-mono` classes are updated to `font-sans`.
+
+**Primary recommendation:** Implement in order: (1) write new token block in `globals.css`, (2) update `tailwind.config.ts` with new semantic aliases, (3) migrate all `font-mono` to `font-sans`, (4) delete ASCII components and update all import sites. Each step is independently verifiable with `npm run build`.
+
+---
+
+## Standard Stack
+
+### Core (no new packages required for Phase 1)
+
+| Library | Version | Purpose | Why Standard |
+|---------|---------|---------|--------------|
+| Tailwind CSS | 3.4.0 (installed) | Utility classes from CSS variable tokens | Already installed; `darkMode: 'media'` already configured |
+| PostCSS | 8.4.0 (installed) | CSS variable processing | Already in pipeline |
+| TypeScript | 5.7.3 (installed) | Type-safe Tailwind config | Already used throughout |
+
+Phase 1 requires zero new npm packages. All token system work is in `globals.css` and `tailwind.config.ts`. No animation library, no new dependencies.
+
+### Alternatives Considered
+
+| Instead of | Could Use | Tradeoff |
+|------------|-----------|----------|
+| CSS variables + Tailwind aliases | Tailwind v4 CSS-first config | Project uses Tailwind 3.4; v4 migration is explicitly out of scope per REQUIREMENTS.md |
+| `@media (prefers-color-scheme: dark)` | `[data-theme="dark"]` data attribute | Data attribute requires JavaScript on load, causing FOUC on static export; media query is flash-free — locked by D-09 |
+| System font stack | Inter / Geist web font | Web font adds FOUT risk and ~100KB payload; system fonts load instantly and match the BitRemote app's SF Pro on Apple devices — locked by D-01 |
+
+---
+
+## Architecture Patterns
+
+### Recommended File Structure After Phase 1
+
+```
+src/
+├── app/
+│ ├── globals.css # MODIFIED: full token system, dark override, clean animation utils
+│ ├── [locale]/
+│ │ ├── layout.tsx # MODIFIED: font-mono → font-sans in footer
+│ │ ├── page.tsx # MODIFIED: remove AsciiPanel, TextSeparator, TextFrame; font-mono → font-sans
+│ │ ├── privacy/page.tsx # MODIFIED: TextFrame/TextButton kept but font updated
+│ │ ├── terms/page.tsx # MODIFIED: same as privacy
+│ │ └── support/page.tsx # MODIFIED: same as privacy
+│ ├── page.tsx # MODIFIED: font-mono → font-sans
+│ └── not-found.tsx # MODIFIED: font-mono → font-sans
+├── components/
+│ ├── BitRemoteWordmark.tsx # MODIFIED: font-mono → font-sans on SVG text
+│ ├── FaqAccordion.tsx # MODIFIED: font-mono → font-sans
+│ ├── TextButton.tsx # MODIFIED: font-mono → font-sans (kept functional)
+│ ├── TextTabsNav.tsx # MODIFIED: font-mono → font-sans (kept functional)
+│ ├── DownloaderLandingPage.tsx # MODIFIED: remove TextSeparator/TextFrame; font-mono → font-sans
+│ ├── TextFrame.tsx # DELETED
+│ └── TextSeparator.tsx # DELETED
+├── ascii-panel/ # DELETED (entire directory)
+└── tailwind.config.ts # MODIFIED: new semantic color aliases
+```
+
+### Pattern 1: CSS Variable Token Block (globals.css)
+
+**What:** Semantic CSS variables defined in `:root`, overridden in `@media (prefers-color-scheme: dark)`.
+**When to use:** Always — this is the single source of truth for all design values.
+
+```css
+/* globals.css — full token block replacing existing :root */
+@layer base {
+ :root {
+ /* Surface hierarchy */
+ --color-bg: #ffffff;
+ --color-surface: #f8f8f8;
+ --color-surface-alt: #f0f0f0;
+ --color-border: #e5e5e5;
+
+ /* Text */
+ --color-text-primary: #0a0a0a;
+ --color-text-secondary: #6b7280;
+ --color-text-muted: #9ca3af;
+
+ /* Accent (blue only) */
+ --color-accent: #2563eb;
+ --color-accent-hover: #1d4ed8;
+ --color-accent-subtle: #dbeafe;
+
+ /* Radius */
+ --radius-sm: 0.375rem;
+ --radius-md: 0.75rem;
+ --radius-lg: 1.25rem;
+ --radius-xl: 1.75rem;
+
+ /* Shadow */
+ --shadow-card: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 16px rgb(0 0 0 / 0.06);
+ --shadow-raise: 0 8px 32px rgb(0 0 0 / 0.12);
+
+ /* Layout */
+ --max-width: 72rem;
+ --gutter: 1rem;
+
+ /* Font */
+ --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
+ sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+
+ /* Glass (preserve color-mix pattern) */
+ --bg-glass-92: color-mix(in srgb, var(--color-bg) 92%, transparent);
+ --bg-glass-95: color-mix(in srgb, var(--color-bg) 95%, transparent);
+ --bg-panel-88: color-mix(in srgb, var(--color-bg) 88%, transparent);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --color-bg: #0a0a0a;
+ --color-surface: #141414;
+ --color-surface-alt: #1e1e1e;
+ --color-border: #2a2a2a;
+
+ --color-text-primary: #f5f5f5;
+ --color-text-secondary: #a3a3a3;
+ --color-text-muted: #6b6b6b;
+
+ --color-accent: #3b82f6;
+ --color-accent-hover: #60a5fa;
+ --color-accent-subtle: #1e3a5f;
+
+ --shadow-card: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
+ --shadow-raise: 0 8px 32px rgb(0 0 0 / 0.5);
+ }
+ }
+}
+```
+
+**Critical note:** The existing `globals.css` uses old variable names (`--bg`, `--fg`, `--blue`, `--blue-strong`, etc.) that are referenced throughout the codebase. The migration strategy is:
+1. Add all new `--color-*` variables
+2. Keep the old `--bg` and `--fg` aliases temporarily, pointing to new values
+3. Migrate all component references to new token names in the same phase
+4. Remove old aliases once no references remain
+
+### Pattern 2: Tailwind Semantic Config
+
+**What:** Map CSS variables to semantic Tailwind utility names.
+**When to use:** In `tailwind.config.ts` — this is what enables `bg-surface`, `text-text-primary`, etc.
+
+```typescript
+// tailwind.config.ts
+const config = {
+ content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+ darkMode: 'media', // already set — do not change
+ theme: {
+ extend: {
+ colors: {
+ bg: 'var(--color-bg)',
+ surface: 'var(--color-surface)',
+ 'surface-alt':'var(--color-surface-alt)',
+ border: 'var(--color-border)',
+ text: {
+ primary: 'var(--color-text-primary)',
+ secondary: 'var(--color-text-secondary)',
+ muted: 'var(--color-text-muted)',
+ },
+ accent: {
+ DEFAULT: 'var(--color-accent)',
+ hover: 'var(--color-accent-hover)',
+ subtle: 'var(--color-accent-subtle)',
+ },
+ },
+ fontFamily: {
+ sans: ['var(--font-sans)'],
+ // Remove mono alias entirely — no monospace in this design system
+ },
+ borderRadius: {
+ sm: 'var(--radius-sm)',
+ md: 'var(--radius-md)',
+ lg: 'var(--radius-lg)',
+ xl: 'var(--radius-xl)',
+ },
+ boxShadow: {
+ card: 'var(--shadow-card)',
+ raise: 'var(--shadow-raise)',
+ },
+ },
+ },
+ plugins: [],
+} satisfies Config;
+```
+
+**Warning:** Removing the `mono` font family alias from Tailwind config will cause build errors if any `font-mono` class remains. Complete the font migration in the same pass as the config update.
+
+### Pattern 3: TextFrame Replacement Placeholder
+
+**What:** When deleting `TextFrame`, its import sites need a minimal replacement that doesn't break the page.
+**When to use:** In `[locale]/page.tsx`, `privacy/page.tsx`, `terms/page.tsx`, `support/page.tsx`, and `DownloaderLandingPage.tsx`.
+
+Replace each `...` with:
+```tsx
+
+```
+
+This is a neutral, unstyled wrapper that preserves accessibility semantics without the terminal aesthetic. Phase 4 replaces these with the `Card` component.
+
+### Pattern 4: TextSeparator Replacement Placeholder
+
+**What:** When deleting `TextSeparator`, replace each instance with a plain `
`.
+**When to use:** In `[locale]/page.tsx` (3 occurrences) and `DownloaderLandingPage.tsx` (2 occurrences).
+
+```tsx
+
+```
+
+This uses the new `border` token. Phase 5 replaces these with thin SVG dividers (VFX-03).
+
+### Anti-Patterns to Avoid
+
+- **Keeping old aliases while adding new ones:** Once new `--color-*` variables are defined, all component references must migrate to the new names in the same phase. Leaving mixed token usage creates a confusing state for Phase 2 engineers.
+- **Removing `font-mono` from Tailwind config before migrating all usages:** This will cause build failures. Always audit and migrate all occurrences first, then remove the config alias.
+- **Using `dark:` Tailwind class prefix instead of CSS variables:** The whole point of the token system is a single override block. `dark:` class prefixes on individual elements are the anti-pattern this phase explicitly replaces.
+- **Touching `src/domain/`, `src/i18n/`, `src/seo/`, or `src/app/sitemap.ts`:** These are untouchable per the architecture. Design tokens flow through CSS — they never touch data or routing layers.
+
+---
+
+## Don't Hand-Roll
+
+| Problem | Don't Build | Use Instead | Why |
+|---------|-------------|-------------|-----|
+| Dark theme CSS variables | A custom CSS-in-JS theme provider | CSS `@media (prefers-color-scheme: dark)` with variable overrides | No JavaScript, no hydration risk, flash-free — exactly what D-09 requires |
+| Font loading | A custom font loader | System font stack via CSS variable | Zero FOUT, no external request, no layout shift |
+| Color token types | Custom TypeScript types for colors | Tailwind's built-in config type inference | Tailwind already types theme extensions through `satisfies Config` |
+
+---
+
+## Common Pitfalls
+
+### Pitfall 1: FOUC from JavaScript-Driven Theme
+**What goes wrong:** Setting `data-theme` attribute via JavaScript in a `