---
name: vellum-design
description: Use this skill to generate well-branded interfaces and assets for Vellum (a WhatsApp-first inbound paperwork & client-communication layer for Canadian accountants / immigration consultants / lawyers serving Indian-origin clients), either for production or throwaway prototypes/mocks. Contains essential design guidelines, the Vellum brand system (ink blue / cream / copper, Newsreader + IBM Plex), Indic-script fonts, document-type taxonomy, and UI kit components for prototyping the agent web app, the mobile companion, and the client-side WhatsApp-linked web views.
user-invocable: true
---

Read the `README.md` file within this skill first — it contains:
- Product context (two distinct users, two surfaces, one backend)
- The Vellum brand in one paragraph
- Content fundamentals (tone per surface, copywriting do's and don'ts)
- Visual foundations (palette, type, structural decisions, what we don't do)
- Iconography rules (Lucide, no emoji in agent UI, typographic document tags)
- Fonts and licensing notes

Then explore the other files:
- `colors_and_type.css` — all design tokens on `:root`. Link this from any HTML you build and the rest cascades — no class needed.
- `assets/` — Vellum wordmark, WhatsApp glyph
- `preview/` — design-system tab cards (palette, type, components)
- `ui_kits/agent-web/index.html` — Unified Inbox (most important agent surface)
- `ui_kits/agent-web/family-record.html` — Family record (family-as-unit)
- `ui_kits/agent-web/document-queue.html` — Document review with AI classification
- `ui_kits/agent-web/file-matter.html` — File / matter workflow + checklist + financials
- `ui_kits/agent-web/assignment.html` — Partner view: drag families between associates
- `ui_kits/agent-web/audit-trail.html` — CRA / LSO-defensible record of every interaction
- `ui_kits/agent-mobile/index.html` — Mobile companion (5 screens)
- `ui_kits/client-views/index.html` — Three WhatsApp-linked client web views (e-sign, invoice, status)
- `ui_kits/whatsapp-templates/index.html` — WhatsApp Business templates with phone preview + editor catalog

## Working principles

If creating visual artifacts (slides, mocks, throwaway prototypes), copy the relevant CSS / SVG assets into the output file and link to `colors_and_type.css`. All tokens are on `:root` — no class needed.

If working on production code, lift values from `colors_and_type.css` directly (CSS custom properties) and pull components from the UI kits.

## Hard constraints — do not break

- **Never use pure white for backgrounds.** Always use `--canvas` (cream `#F4EFE6`).
- **Tabular numerals are default everywhere.** `font-variant-numeric: tabular-nums lining-nums` on root.
- **No emoji in agent UI**, ever. Only on the client side, and only when authored into a WhatsApp template by the firm — the product itself never adds emoji.
- **No sparkles, no gradient text on "AI", no holographic chrome.** AI confidence is shown as 1–3 filled dots, never a sparkle.
- **No flag icons** for languages or document origin. Use the text label (`EN`, `ਪੰਜਾਬੀ`, `हिन्दी`, `ગુજરાતી`).
- **No overt Indian visual motifs** — no rangoli, paisley, marigold, mandala backgrounds, or decorative Devanagari letterforms in English UI.
- **Document-type tags are typographic, not pictographic.** `T4`, `Form 16`, `PAN` set in mono. Canadian documents in green-tinted (`--doc-ca-bg`/`--doc-ca-fg`); Indian documents in copper-tinted (`--doc-in-bg`/`--doc-in-fg`).
- **Lead agent is sticky and named.** UI never shows a round-robin queue label — every family record, inbox row, and audit-trail entry shows the named lead agent.
- **Family-as-unit is the default.** Avatar stacks support 1–6 linked people. Never force a single primary contact.
- **Tone per surface** — agent UI is terse and matter-of-fact (`Approve`, not `Let's approve this!`). WhatsApp messages are warm, addressed by name, in the *aap* register. Client web views have one job per page and ≥56px primary buttons.

## When the user invokes this skill without guidance

Ask what they want to build or design, ask any clarifying questions (agent surface vs client surface, English-only vs multi-script), and act as an expert designer who outputs HTML artifacts or production code as needed.