comp-html-guidelineslisted

# Comp HTML Guidelines A lightweight, self-contained visual style guide for every HTML report, page, dashboard, or analysis produced by a Comp skill. Load it whenever you are about to write or restyle HTML so the result is consistent, polished, and on-brand. It does not change the methodology of the calling skill, it governs only the visual layer. This is a Knowledge skill. The full rules live in `references/style-guide.md` and a ready-to-inline stylesheet lives in `assets/comp-base.css`. Read the style guide before writing HTML. ## When to use - **Generate** — creating a new HTML report from scratch. Load `references/style-guide.md`, inline `assets/comp-base.css`, then build. - **Apply** — the user has existing HTML and wants it styled ("estiliza", "padroniza", "deixa isso bonito", "apply the design"). Load the style guide and re-skin the markup, keeping the content. - **Consult** — a question about a specific rule (color, layout, footer, chart). Answer from `references/style-guide.md`. ## The look in one paragraph Near-white background (`#FAFAF8`), content in white cards with a hairline border and soft radius. Comp black (`#1F1B17`) for text and the hero, Comp red (`#F4364C`) as the single accent. DM Sans for everything. Generous spacing (24px rhythm). A hero band at the top with the report title and a short subtitle; a "Powered by Comp" footer at the bottom. One accent color only, semantic green/amber/red reserved for good/warning/bad states. No gradients, no decorat