94 lines
4.1 KiB
Markdown
94 lines
4.1 KiB
Markdown
Status
|
||
|
||
APPROVED
|
||
|
||
Story
|
||
|
||
**As a** visitor,
|
||
**I want** a cohesive visual language,
|
||
**so that** the site feels premium and consistent.
|
||
|
||
Acceptance Criteria
|
||
|
||
1. Global CSS variables for color, spacing, radii, shadows, and motion exist and are documented.
|
||
2. Headline font and body font applied globally; extraneous fonts removed.
|
||
3. Tailwind config consumes tokens; shadcn primitives reflect tokens.
|
||
|
||
Tasks / Subtasks
|
||
|
||
- [ ] Define and align design tokens (AC: 1, 3)
|
||
- [ ] Audit existing tokens in `src/app/globals.css` (surface/text/brand, spacing, radius, transitions)
|
||
- [ ] Update palette to dark-first black/orange + neutrals per PRD; keep aliases for backward compat where needed
|
||
- [ ] Add motion presets and shadow tokens if missing; ensure `--radius` aligns with Tailwind theme.borderRadius
|
||
- [ ] Document token usage in a short README at `src/components/ui/README.md`
|
||
- [ ] Apply typography pairing globally (AC: 2)
|
||
- [ ] In `src/app/layout.tsx:body`, set Kanit as base text font; Rajdhani for headings via utility/class
|
||
- [ ] Remove unused fonts (DM Serif, Bentham, Share) from layout font variables and any CSS usages
|
||
- [ ] Ensure weights available: Rajdhani 600/700 for headings; Kanit 400/500 for body
|
||
- [ ] Update `src/app/globals.css` heading selectors to use Rajdhani
|
||
- [ ] Tailwind + shadcn integration (AC: 3)
|
||
- [ ] Map Tailwind theme colors to CSS vars (already partially done); ensure components read from vars
|
||
- [ ] Set Tailwind `fontFamily` to prefer CSS vars (e.g., body → Kanit, display → Rajdhani) where appropriate
|
||
- [ ] Verify shadcn primitives reflect tokenized colors, radius, and motion
|
||
- [ ] Regression and quality checks
|
||
- [ ] Lint passes: `npm run lint`
|
||
- [ ] Build passes: `npm run build`
|
||
- [ ] Visual smoke check `/projects`, `/faq`, `/contact` for layout/regressions (Integration Verification IV1)
|
||
- [ ] Admin pages readable and functional (IV2)
|
||
- [ ] Bundle size does not grow >10% vs baseline; note result in Completion Notes (IV3)
|
||
|
||
Dev Notes
|
||
|
||
- Context
|
||
- PRD: docs/prd.md (Ready). Story 1.1 targets tokens + typography; sidebar choice does not affect this story.
|
||
- Typography pairing approved: Headings Rajdhani 600/700; Body Kanit 400/500.
|
||
- Palette direction approved: dark-first black/orange + neutrals.
|
||
- Relevant Source Tree
|
||
- Layout file: src/app/layout.tsx:1 — loads multiple local fonts and assigns body class variables.
|
||
- Global styles: src/app/globals.css:1 — defines CSS variables and sets current fonts (Bentham, DM Serif for headings).
|
||
- Tailwind config: tailwind.config.ts:1 — maps theme colors to CSS vars; sets font families (currently Inter/Cal Sans defaults).
|
||
- Shared components likely to reflect tokens: src/components/* (e.g., Buttons/Forms use radius/colors).
|
||
- Required Changes (high level)
|
||
- Remove DM Serif, Bentham, Share font variables from body class list in layout; keep Rajdhani and Kanit only.
|
||
- Switch body font-family in globals.css to `var(--font-kanit)`, headings h1–h3 to `var(--font-rajdhani)`.
|
||
- Ensure Tailwind `fontFamily` values either include CSS variable driven stacks or rely on element selectors; do not regress shadcn styles.
|
||
- Tokenize any hardcoded colors in components if encountered while verifying ACs (limit scope to token plumbing, not a full refactor).
|
||
|
||
Testing
|
||
|
||
- Standards
|
||
- Use existing linting (ESLint + Prettier) and Next build as gates; no unit test framework present in repo.
|
||
- Accessibility: verify visible focus rings remain; respect prefers-reduced-motion (no changes expected in this story).
|
||
- Performance: capture approximate bundle size before/after with `next build` output; ensure <10% growth.
|
||
- Manual Checks
|
||
- Pages: `/projects`, `/faq`, `/contact`, `/admin/*` render without font fallback flashes and with expected fonts.
|
||
- Visual: Headings visibly using Rajdhani, body using Kanit.
|
||
|
||
Change Log
|
||
|
||
| Date | Version | Description | Author |
|
||
|------|---------|-------------|--------|
|
||
| 2025-09-24 | v1 | Initial draft from PRD Story 1.1 | Scrum Master |
|
||
|
||
Dev Agent Record
|
||
|
||
Agent Model Used
|
||
|
||
{{agent_model_name_version}}
|
||
|
||
Debug Log References
|
||
|
||
|
||
|
||
Completion Notes List
|
||
|
||
|
||
|
||
File List
|
||
|
||
|
||
|
||
QA Results
|
||
|
||
|