# Quickstart: Website Visual Foundation

## Purpose

This quickstart describes the local workflow for implementing the website-only visual foundation in `apps/website`.

## Prerequisites

- Node 20+ available through the repo workspace tooling
- Corepack-enabled pnpm
- Repo root at `wt-website`

## Local Development

Start the website from the repo root:

```bash
corepack pnpm dev:website
```

The website must continue to honor the existing `WEBSITE_PORT` contract.

## Expected Implementation Order

Implement the feature in this order:

1. Audit the current token and foundation layer in `apps/website/src/styles/tokens.css` and `apps/website/src/styles/global.css`.
2. Formalize semantic token roles for color, typography, spacing, surfaces, radius, borders, and shadows.
3. Update the current Astro primitives so shared rules are enforced through component APIs rather than page-local class decisions.
4. Apply the foundation across representative page families: landing/product, trust/legal, and content-heavy routes.
5. Encode `shadcn/ui` usage constraints through local primitives and implementation review rules, without introducing a new required React runtime.
6. Re-run build and smoke validation.

## Working Constraints

The implementation must preserve all existing website working-contract guarantees:

- keep `@tenantatlas/website` unchanged
- keep `WEBSITE_PORT` unchanged
- keep root `dev:website` and `build:website` workflows working
- keep all changes local to `apps/website` unless a deliberate new contract is explicitly introduced
- do not introduce platform runtime coupling, shared auth, or shared DTO/API assumptions

## Required Validation

Run the website build proof from the repo root:

```bash
corepack pnpm build:website
```

Run the browser smoke suite from the website app:

```bash
cd apps/website
corepack pnpm exec playwright test
```

## What Reviewers Should Verify

Reviewers should confirm that:

- representative landing, trust/legal, and content-heavy routes still load correctly
- heading hierarchy, section rhythm, and CTA weight are visibly consistent across those page families
- navigation and footer links remain reachable
- focus states and mobile readability remain intact
- no uncontrolled local override bypasses the shared token and primitive model
- no React, Radix, or platform coupling is introduced without a separate explicit decision

## Out of Scope for This Feature

- Filament theming or `apps/platform` styling
- shared website-platform design system work
- API-backed contact handling or a website backend
- CMS introduction
- visual regression infrastructure beyond the current lightweight smoke path