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
- Read
references/style-guide.md in full.
- Start from the base scaffold in the style guide and inline
assets/comp-base.css inside a <style> tag (copy it, do not link to a CDN for it).
- Load DM Sans from Google Fonts and a charting library (Chart.js) from a CDN if you need charts.
- Build the hero, then the content as cards / tables / stat cards, then the footer.
- 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 <img src=x> must render as literal text, not execute. When embedding a data blob in a <script> tag, also neutralize </ (write it as <\/) so a value cannot close the script element.
Completeness
Deliver the finished report the user asked for, not a sample or "v1". If the content is large, write it in full. If you cannot produce part of it, say so in your reply rather than shipping a placeholder card.
Brand
- Hero: report title + subtitle. For a report about a specific company, use the logo URL and brand color the user provides; if none, use the company's initial in a tile. Never fabricate a logo.
- Footer: a "Powered by Comp" line linking to
comp.vc with UTM params (see the style guide for the exact link). If you show the Comp logo mark, use the bundled inline SVG (assets/comp-wordmark-white.svg on dark/red, assets/comp-wordmark-red.svg on light) — never a scaled raster, a color-filtered PNG, or a hand-drawn mark (those come out jagged/off-brand). Style guide §7.
Resources
| File |
Purpose |
references/style-guide.md |
Palette, typography, spacing, components, charts, scaffold, self-review checklist. Read in full before writing HTML. |
assets/comp-base.css |
Ready-to-inline base stylesheet. Copy into a <style> 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. |
1---2name: comp-html-guidelines3description: Default skill for ALL HTML outputs from Comp skills. A lightweight, self-contained visual style guide (Comp palette black #1F1B17 + red #F4364C, DM Sans, near-white background, white cards, pill buttons, hero cover, Powered by Comp footer). MUST be loaded whenever a skill produces HTML, for any relatório, página, análise, dashboard, qualquer variação de "faça/crie um html", and for any "apply the design" / "estiliza" / "padroniza" / "deixa isso bonito" request on existing HTML. Apply it even when the user does not ask explicitly. Maintained by Comp, free skill for HR & People leaders.4---56# Comp HTML Guidelines78A 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.910This 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.1112## When to use1314- **Generate** — creating a new HTML report from scratch. Load `references/style-guide.md`, inline `assets/comp-base.css`, then build.15- **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.16- **Consult** — a question about a specific rule (color, layout, footer, chart). Answer from `references/style-guide.md`.1718## The look in one paragraph1920Near-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.2122## How to build23241. Read `references/style-guide.md` in full.252. Start from the base scaffold in the style guide and inline `assets/comp-base.css` inside a `<style>` tag (copy it, do not link to a CDN for it).263. Load DM Sans from Google Fonts and a charting library (Chart.js) from a CDN if you need charts.274. Build the hero, then the content as cards / tables / stat cards, then the footer.285. Run the self-review checklist at the end of the style guide before delivering.2930## Escaping user data — required3132Reports 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 `<img src=x onerror=...>` must render as literal text, not execute. When embedding a data blob in a `<script>` tag, also neutralize `</` (write it as `<\/`) so a value cannot close the script element.3334## Completeness3536Deliver the finished report the user asked for, not a sample or "v1". If the content is large, write it in full. If you cannot produce part of it, say so in your reply rather than shipping a placeholder card.3738## Brand3940- Hero: report title + subtitle. For a report about a specific company, use the logo URL and brand color the user provides; if none, use the company's initial in a tile. Never fabricate a logo.41- Footer: a "Powered by Comp" line linking to `comp.vc` with UTM params (see the style guide for the exact link). If you show the Comp logo mark, use the bundled inline SVG (`assets/comp-wordmark-white.svg` on dark/red, `assets/comp-wordmark-red.svg` on light) — never a scaled raster, a color-filtered PNG, or a hand-drawn mark (those come out jagged/off-brand). Style guide §7.4243## Resources4445| File | Purpose |46|---|---|47| `references/style-guide.md` | Palette, typography, spacing, components, charts, scaffold, self-review checklist. Read in full before writing HTML. |48| `assets/comp-base.css` | Ready-to-inline base stylesheet. Copy into a `<style>` tag in the output. |49| `assets/comp-wordmark-white.svg` | Official Comp wordmark (white) — inline in footers/hero on dark or red backgrounds. Crisp vector, no external host. |50| `assets/comp-wordmark-red.svg` | Official Comp wordmark (red `#F4364C`) — inline on white/light backgrounds. |
trycomp-io