- Created src/layouts/BaseLayout.astro as the site's base layout component
- Imports tokens.css and fonts.css for design system and typography
- Accepts Props {title: string, description?: string}
- Computes page title (appends ' — Crash Test Dev' unless title is already 'Crash Test Dev')
- Reads import.meta.env.BASE_URL for RSS link generation
- HTML structure: doctype, html lang=en, head with charset/viewport/description meta, computed title, RSS link alternate
- Body: skip-to-content link, named nav slot, main#main-content with default slot
- Global styles: CSS reset, body typography, link styles, skip-link, main container, ::selection
- Updated src/pages/index.astro to use BaseLayout with inline style placeholders demonstrating tokens/fonts
- Added tests/check-base-layout.mjs build-output test with 23 assertions, all passing
Create src/styles/tokens.css with complete design token system including:
- Surface, text, accent, code, border, focus colors
- State colors (success, warning, error, info)
- Shadow definitions
- Typography families with full fallback stacks
- Typography scale (xs through 3xl) and line heights
- Spacing scale (0 through 12)
- Border radius tokens
- Layout constraints (prose, code, container widths)
- Motion tokens with reduced-motion media query
All values sourced from .design/specs/design-tokens-2026-05-26.md.
Includes verification test with 56 assertions across all categories.
Ken
Kenneth Chau
Azure Static Web Apps
Ken
Kenneth Chau