# Design spec — LexAI website

## User + job

Open-source visitors evaluating LexAI. Success: understand BYO-key privacy, pick Chrome / VS Code / CLI, reach install or docs in ≤ 2 clicks from the hero.

## Flow

Landing → Features → Packages → Docs (deep) or Chrome Web Store / Git. Secondary: Docs nav anchors per package.

## Screens

| Route | Purpose |
| --- | --- |
| `/` | Brand hero, feature highlights, package cards, privacy, CTAs |
| `/docs` | All packages + features, install pointers, shared core |

States: static marketing (no loading/error beyond 404 → home link).

## Visual

- Brand **LexAI** is the hero signal; bolt mark from product icon.
- Atmosphere: deep slate field + amber bolt accent (from icon gold), not purple-on-white.
- Type: Syne (display) + Source Sans 3 (body).
- No card grid in hero; package cards only where choosing a product is the interaction.

## Acceptance

1. First viewport: LexAI brand, one headline, one support line, CTA group, dominant visual.
2. Features of writing + Code Assist + Prompt Builder called out.
3. Docs lists Chrome, VS Code, CLI with feature bullets and links to store/repo READMEs.
4. Works desktop + mobile.
5. `npm run website:build` succeeds.