qumo-website/openspec/changes/archive/2026-04-10-step-001-project-scaffold/proposal.md

Why

The Astro project scaffold exists but has no Tailwind CSS integration or brand tokens configured. Before any UI work can begin, the design system foundation must be in place: brand colors, the Archia typeface, and the gradient — all wired into Tailwind so every subsequent step can use utility classes directly.

What Changes

• Install tailwindcss and @tailwindcss/vite (Tailwind v4) and @astrojs/sitemap
• Configure astro.config.mjs with the Vite Tailwind plugin and sitemap integration
• Create src/styles/global.css with:
  • @import "tailwindcss"
  • @theme block defining brand color tokens and font-archia
  • @font-face declarations for all 6 Archia weights (Thin, Light, Regular, Medium, SemiBold, Bold)
• Replace the default src/pages/index.astro with a brand smoke test page showing color swatches, font weight samples, and a gradient bar
• No tailwind.config.mjs — configuration is CSS-based (Tailwind v4 pattern)

Capabilities

New Capabilities

• brand-tokens: Qumo design system tokens available as Tailwind utilities — brand colors (midnight, snow, brand-blue, brand-red), font-archia, and the gradient definition

Modified Capabilities

(none)

Impact

• website/package.json — new dependencies: tailwindcss, @tailwindcss/vite, @astrojs/sitemap
• website/astro.config.mjs — adds Vite plugin and sitemap integration
• website/src/styles/global.css — new file, imported globally
• website/src/pages/index.astro — replaced with temporary smoke test (will be replaced again in a later step when the homepage is built)
• No SEO impact — smoke test page is a dev-only visual check
• No content strings needed — smoke test has no user-visible text to localize