collision-engineers-design

Read `references/document-letterhead.md` when working on any A4 document or report template. Read `references/website-system.md` when building website components. For full design token detail, see `references/palette-and-type.md`. For iconography rules, see `references/iconography.md`. **For voice, tone, or any written copy — use the `ce-house-style` skill, not this one.** If the user invokes this skill without other guidance, ask what they want to build, and act as an expert designer who outputs HTML artefacts, document templates, or production code. ## If invoked by another skill Do **not** ask what to build. Read **only** the surface for the calling document type, return the tokens/layout the caller applies, and stop — don't emit a full HTML page unless asked. | Calling skill | Read | Document surface | |---|---|---| | vehicle-valuation | `references/document-letterhead.md` | *Market Valuation Evidence* (+ *Advert Evidence Pack*) | | diminution-rebuttal / diminution-report | `references/document-letterhead.md` | *Diminution Rebuttal* | | total-loss-assessment | — (deliberate non-CE Audatex format; do **not** apply CE styling) | n/a | | roadworthy-report | — (third-party HS template; do **not** apply CE styling) | n/a | | fee notes | `references/document-letterhead.md` | *Fee Note* | > **Not the same as the branded *Total Loss Report*.** The `total-loss-assessment` skill above is the > Audatex-format assessment PDF for EVA import (no CE styling). The CE-branded *Total Loss Report* > letterhead document in `ui_kits/documents/` is a separate, fully-branded expert report — keep using > the letterhead system for it. Canonical tokens to hand back: documents/print red `#C80A32`, warm charcoal `#2C2A27`, Arial body stack for document copy, Tw Cen MT / Futura brand faces for the logo/display only, and the letterhead header/footer spec. These are the single source of truth — callers must not re-define their own font or colour stack. ## Quick map - `colors_and_type.css` — all design tokens (`@font-face`, colours, type scale, radii, shadows, spacing). Import this first in any HTML/CSS output. - `fonts/` — Tw Cen MT Std (OTF, 6 weights) + Futura Cyrillic (TTF, 4 weights). Brand/logo faces; UI/body uses the system sans stack. - `assets/` — master logo (`logo_no_margin.png`, red gear-C), white reverse logo, brand imagery, engineer signature PNGs (`assets/signatures/`). - `preview/` — design-system specimen cards for all tokens (colours, type, spacing, components, documents). - `ui_kits/website/` — hi-fi recreation of `collisionengineers.co.uk` with all reusable components. - `ui_kits/documents/` — A4 letterhead system: Total Loss Report, Market Valuation Evidence, Diminution Rebuttal, Fee Note. Print-ready JSX components + CSS. - `references/` — load-on-demand documentation (see below). ## References — load when needed - `references/document-letterhead.md` — the canonical A4 letterhead spec (colours, layout, tables, footer, section headings). **Read before building any document or report template.** - `references/palette-and-type.md` — full palette, type scale, spacing, radii, shadows. - `references/website-system.md` — website layout rules, motion, interaction states, Lucide usage. - `references/iconography.md` — icon system rules and common glyphs. ## Non-negotiables - **Two official surfaces:** the **website** (`collisionengineers.co.uk`) and the **documents/reports** letterhead system. The internal Collision Command Centre app is excluded from this kit. - **Master logo:** `assets/logo_no_margin.png` (red gear-C). Never redraw the gear. - **One red per surface:** website `#DB0816`; documents/print `#C80A32`. One warm charcoal `#2C2A27`. - **Type:** keep UI/body on the system sans; brand faces (Tw Cen MT / Futura) for logo, display, marketing headers, and printed reports. - **Icons:** Lucide only (web). No emoji, no hand-drawn icons. - **Voice:** handled by `ce-house-style`. This skill covers visual design only.