34 lines
1.7 KiB
Markdown
34 lines
1.7 KiB
Markdown
## 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
|