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

1. Install dependencies

• 1.1 Install tailwindcss and @tailwindcss/vite in website/
• 1.2 Install @astrojs/sitemap in website/

2. Configure Astro

• 2.1 Update astro.config.mjs to add @tailwindcss/vite as a Vite plugin and @astrojs/sitemap as an integration with site: 'https://qumo.io'

3. Create global.css

• 3.1 Create src/styles/global.css with @import "tailwindcss"
• 3.2 Add @theme block with brand color tokens: --color-midnight, --color-snow, --color-brand-blue, --color-brand-red
• 3.3 Add --font-archia to the @theme block with system fallback stack
• 3.4 Add :root block with --gradient-brand: linear-gradient(135deg, #5257E4, #F71E3E)
• 3.5 Add @font-face declarations for all 6 Archia weights (Thin/100, Light/300, Regular/400, Medium/500, SemiBold/600, Bold/700) pointing to ../assets/fonts/archia/ woff2 files, each with font-display: swap

4. Wire global.css into Astro

• 4.1 Import ../styles/global.css in src/pages/index.astro (will move to BaseLayout in step 002)

5. Brand smoke test page

• 5.1 Replace the default src/pages/index.astro content with a smoke test page: a color swatch grid (Midnight, Snow, Brand Blue, Brand Red, + gradient bar) and a font weight table (Thin through Bold, each row showing uppercase + sentence-case sample text)

6. Verify

• 6.1 Run npm run build inside website/ — must succeed with zero errors
• 6.2 Run npm run dev and open the index page — verify all 4 color swatches, the gradient bar, and all 6 font weights render correctly
• 6.3 Confirm dist/sitemap-index.xml is present in the build output