Comp Html Guidelines

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 decorative icons, no rainbow palettes.

How to build

1. Read references/style-guide.md in full.
2. Start from the base scaffold in the style guide and inline assets/comp-base.css inside a `` tag (copy it, do not link to a CDN for it).
3. Load DM Sans from Google Fonts and a charting library (Chart.js) from a CDN if you need charts.
4. Build the hero, then the content as cards / tables / stat cards, then the footer.
5. Run the self-review checklist at the end of the style guide before delivering.

Escaping user data — required

Reports often embed data that originates from a user upload (names, areas, managers, free-text comments). When you inject any user-derived string into HTML — whether server-side in a script or client-side via innerHTML — escape it first (& " '). Never interpolate raw user text into markup. A name like ` must render as literal text, not execute. When embedding a data blob in a tag, also neutralize tag in the output. | | assets/comp-wordmark-white.svg | Official Comp wordmark (white) — inline in footers/hero on dark or red backgrounds. Crisp vector, no external host. | | assets/comp-wordmark-red.svg | Official Comp wordmark (red #F4364C`) — inline on white/light backgrounds. |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: trycomp-io
• Source: trycomp-io/comp-skills
• License: MIT

Install and usage instructions live in the source repository linked above.