# Design Skills Bench — Standard Brief v1.0

You are building two pages for **Ledgerly**, a fictional B2B invoicing SaaS for small agencies.
Use ONLY the design tokens provided in `tokens.css` / `tokens.json`. Output plain HTML + CSS
(one `index.html` per page plus any CSS files). No JavaScript frameworks, no external
CSS frameworks, no remote images. Fonts may be referenced by name only.

## Page 1 — `settings.html`: Workspace settings
1. App header with product name, primary nav (Dashboard, Invoices, Clients, Settings — Settings active) and an account menu button.
2. Left sub-navigation: General, Members, Billing, Notifications, API keys (General active).
3. "General" form: Workspace name (text), Workspace URL (prefix `ledgerly.app/` + text), Default currency (select: EUR, USD, GBP), Invoice prefix (text, helper text "Shown before every invoice number"), Time zone (select).
4. Notifications group: three toggles (Invoice paid, Invoice overdue, Weekly summary) with descriptions.
5. Validation state: Workspace URL shows the error "This URL is already taken."
6. Danger zone: "Delete workspace" with explanatory text and a destructive button.
7. Sticky footer bar with "Cancel" (secondary) and "Save changes" (primary) actions.

## Page 2 — `pricing.html`: Pricing
1. Header, short headline and one-sentence subhead.
2. Monthly / Yearly billing switch ("Save 20%" hint on Yearly).
3. Three plans: Solo €9/mo, Studio €29/mo (recommended), Agency €79/mo — each with 4–6 features and a CTA.
4. Feature comparison table (at least 8 rows, 3 plan columns, with included / not included states).
5. FAQ with 4 questions (disclosure pattern).
6. Footer with legal links.

## Constraints
- Must work at 1280px and 390px widths.
- Must meet WCAG 2.2 AA.
- Real copy — no lorem ipsum.