Tembi Intelligence

View saved version →

---
name: report-to-tembi-style
description: >-
  Restyle an existing standalone HTML report, dashboard, or data visualization
  into Tembi's visual brand (the EIP / ecom-new-frontend look) while preserving
  all data, copy, and charts. Use this whenever the user wants to convert,
  transform, restyle, re-skin, "tembi-fy", or apply Tembi branding to one or
  more `.html` files — including phrases like "make this report look like
  Tembi", "convert these dashboards to our styling", "apply our brand to this
  HTML", or "restyle this with the frontend design system". Also use it when the
  user drops HTML report files and asks to "transform" or "convert" them with no
  other target named. Works for plain-CSS reports and for chart-library
  dashboards (Plotly, D3/topojson, inline SVG). Not for building a report from
  scratch (this restyles existing markup) and not for restyling the live
  ecom-new-frontend app itself.
---

# HTML → Tembi style

Convert an existing standalone HTML report/dashboard so it looks like it came out
of Tembi's product, **without touching the data or the narrative**. The data,
numbers, copy, and chart logic are the client's deliverable and must survive
verbatim — your job is purely presentation: palette, type, chrome, chart colors,
logo.

## The one rule that matters most

**Restyle, never recompute.** Don't change numbers, labels, copy, chart math, or
which data points are shown. If you find yourself editing a value inside a `DATA`
const or a `<td>`, stop — that's out of scope. You touch CSS, color literals, the
`<style>` block, fonts, and the header/footer chrome. Nothing else.

## Step 0 — Confirm three decisions before writing anything

These change the whole job, so ask up front (one `AskUserQuestion` with all three
is ideal) unless the user already answered:

1. **Output location** — new folder in the repo (e.g. `reports/`), beside the
   originals, or overwrite in place. Default: a new folder; never overwrite an
   original unless told to.
2. **Restyle depth** — *token swap* (keep each file's layout/structure, only swap
   colors/fonts/cards) vs *unify into one shared Tembi template* (normalize
   several files onto one header/card/chart style). Token swap is faster and
   lower-risk; unify is right when restyling a set that should look like siblings.
3. **Accent handling for data series** — if the report charts carriers/brands,
   confirm: carrier data series use the **canonical carrier color map**
   (`assets/carrier-colors.json`); Tembi green is UI chrome only (eyebrows,
   KPIs, positive deltas, borders, active tabs). For non-carrier categorical
   series (e.g. markets/regions), pick a distinct categorical triad that does
   **not** collide with the brand green or a carrier blue.

## Step 1 — Inspect before reading

Reports are often huge because of embedded data (geojson, a multi-MB `DATA`
const). Reading the whole file will blow your context. First profile it:

```bash
wc -c FILE; wc -l FILE
awk '{ if(length>2000) print NR": "length }' FILE   # find giant data lines
```

If one line is enormous, it's the data — **never read it**. Read only the template
(head/`<style>`/body/scripts) with `sed -n` ranges that skip the data line.

A file too big to `Read` is also too big to `Edit` (Edit requires a prior Read).
For those, transform with a **script** (Python is easiest) doing targeted
string/regex substitutions and writing the output to the new location. See
`references/frameworks.md` → "Large / minified files".

## Step 2 — Identify the framework

How a report draws its visuals decides what you restyle beyond the `<style>` block:

- **Plain CSS / inline SVG** — restyle the `<style>` block and any inline `fill=`
  / `stroke=` / `style="background:…"` color literals.
- **Plotly** — restyle the `<style>` block **and** the color literals scattered in
  the JS `layout`/`trace` objects (geo colors, `paper_bgcolor`, font color,
  colorbar tick color, `colorscale`, marker line). Replace named colorscales

Preview of the first 4,000 characters. Read full instructions →

Referenced files: 7 — file references are metadata, not package contents.