| name | icp-brand-design |
| description | ICP / DFINITY visual design system v2: tokens, color, typography, layout, components, accessibility for DFINITY and Internet Computer surfaces. Pairs with icp-brand-voice. Use when building or reviewing visual surfaces (NNS, ICP.app, Internet Identity, dashboards, the main website, developer docs, marketing). Enforces the system that ships on internetcomputer.org: three faces (Newsreader, Inter, JetBrains Mono), single rust accent, light editorial parchment as the default theme with an opt-in dark theme for product surfaces that need it, sentence case, italic for asides only, no em-dashes (U+2014), tamperproof spelled as one word. Triggers: ICP design, DFINITY design, brand tokens, design review ICP, color palette, typography ICP, NNS redesign, light or dark mode ICP. OISY, Caffeine, and ecosystem products with their own brand are out of scope. |
ICP / DFINITY Brand Design v2.1
Current version: v2.1 (2026-05-08). See the Changelog section at the bottom for history. Every change to this skill bumps the minor version and adds a line to the changelog.
When to Use This Skill
Load this skill when the user works on any visual surface under the DFINITY or Internet Computer mark. That includes:
- Products: NNS, ICP.app, Internet Identity, the IC dashboard, developer portals, explorers, internal tools
- The main website: internetcomputer.org and its subpages
- Developer documentation: docs pages, API references, tutorials, SDK sites
- Marketing material: landing pages, campaign pages, investor pages, press pages, decks
- Reviews: design reviews, brand checks, compliance audits, PR or mockup reviews
Also load when the user says "make this on brand visually", "ICP style", "DFINITY look", "brand tokens", "match the website".
For what to say (positioning, voice, vocabulary), load icp-brand-voice. The two skills are designed to be used together.
Do NOT use this skill for:
- OISY wallet. Own product identity. Out of scope.
- Caffeine. Own brand. Out of scope.
- Any other ecosystem product with its own established visual system.
- Third-party dapps that happen to run on ICP but are not DFINITY products.
North Star
Every DFINITY product should feel like it came from the same studio: editorial, factual, calm. The reference implementation is the ICP Brand Guidelines v2 site (link in Resources below) and the live internetcomputer.org.
Three non-negotiables:
- Light editorial parchment is the default theme. This matches the live site, which ships light only today. A dark theme is documented and available as opt-in via
data-theme="dark" on <html>, for product surfaces that genuinely benefit from one (NNS late-night use, dashboards, terminal-style developer tools). Marketing and the main site stay on the light default. Never auto-switch on prefers-color-scheme.
- One primary accent on a page: rust
#a8482b. Section stripes (the small set below) are scoped strictly to category coding, never on body text, CTAs, or emphasis.
- Three faces, three roles. Newsreader for what you read. Inter for what you click. JetBrains Mono for what the system reports. No other typefaces.
Instructions
1. Load the tokens
Use assets/tokens.css as the single source of truth for color, type, spacing, radii, and themes. Ship it untouched, or mirror the same values into your framework config.
<link rel="stylesheet" href="/tokens.css">
Never redefine the accent, background, or text colors with literal hex values in product code. Always reference the CSS custom properties (var(--icp-bg), var(--icp-fg), var(--icp-accent), etc.).
The tokens file ships the light theme at :root (so it loads by default with no attribute) and the dark theme under [data-theme="dark"] (opt-in).
2. Color
Primary accent (one and only)
| Token | Light (default) | Dark (opt-in) | Notes |
|---|
--icp-accent | #a8482b | #c25a37 | rust, the single brand color |
--icp-accent-strong | #8e3b22 | #d96a45 | hover, focus ring |
--icp-accent-dim | rgba 0.10 | rgba 0.16 | accent washes only |
The accent paints heading emphasis words, key inline terms, primary CTA fills, and focus rings. Body text, nav, and chrome stay in --icp-fg. Never use the accent on chart fills, banners, large blocks, or anything where it would compete with itself across the page.
The dark accent is warmed to #c25a37 because the same rust at #a8482b does not pass AA on a dark surface for small UI text. Both values resolve to var(--icp-accent) once the theme is set.
Light theme (default, editorial parchment)
Mirrors the live internetcomputer.org exactly.
| Role | Token | Value | Notes |
|---|
| Page bg | --icp-bg | #faf9f5 | parchment, never pure white |
| Sunk bg | --icp-bg-sunk | #f3f1ea | alternating sections, sunk panels |
| Elevated bg | --icp-bg-elev | #ffffff | small lift for cards that read as raised |
| CTA bar bg | --icp-bg-cta-inverse | #1a1a1a | near-black inversion (deliberate) |
| Card bg | --icp-bg-card | #ffffff | |
| Foreground | --icp-fg | #1a1a1a | ink, never pure black |
| Body text | --icp-fg-body | #1a1a1a | same as fg, the live site uses one ink |
| Secondary | --icp-fg-secondary | #4b4943 | meta strips, secondary copy |
| Muted | --icp-fg-muted | #868078 | captions, attributions |
| Hairline | --icp-rule | #e7e3da | warm ivory hairline, not gray |
| Strong rule | --icp-rule-strong | #4b4943 | hover underlines, emphasized borders |
| Grid line | --icp-grid-line | rgba(26,26,26,0.04) | the hero grid paper texture |
Dark theme (opt-in, [data-theme="dark"])
For product surfaces that need a dark reading environment. The live site does not ship dark today, but the tokens are documented so a product can offer it later without diverging from the master system.
| Role | Token | Value | Notes |
|---|
| Page bg | --icp-bg | #14110d | deep bark, never pure black |
| Sunk bg | --icp-bg-sunk | #1b1812 | alternating sections in dark |
| Elevated bg | --icp-bg-elev | #1b1812 | card lift |
| CTA bar bg | --icp-bg-cta-inverse | #ffffff | flips to white on dark |
| Card bg | --icp-bg-card | #1b1812 | |
| Foreground | --icp-fg | #f0ebe0 | bone, never pure white |
| Body text | --icp-fg-body | #f0ebe0 | |
| Secondary | --icp-fg-secondary | #a29a8d | |
| Muted | --icp-fg-muted | #7a7367 | |
| Hairline | --icp-rule | #2d2820 | soil |
| Strong rule | --icp-rule-strong | #5a5446 | |
| Grid line | --icp-grid-line | rgba(240,235,224,0.05) | hero grid paper in dark |
The CTA bar token always inverts the surface around it. In light mode it goes near-black, in dark mode it goes white. This is intentional: it gives the strongest call-to-action on the page a different visual register from everything else.
Section stripes (category coding only)
The live site uses three stripe colors today, scoped strictly to 3px card top stripes and category markers. They never appear on body text, CTAs, or running emphasis. Two additional muted accents are reserved in the tokens file for sections that do not yet exist on the live site, so a product can introduce them without inventing new colors.
| Section role | Token | Light (default) | Dark (opt-in) |
|---|
| Default / hero / page-level | --icp-section-default | rust #a8482b | ember #c25a37 |
| Ecosystem, spotlight, governance | --icp-section-teal | #0b5e5c | #2c8a85 |
| Build, docs, developers | --icp-section-blue | #1c3d5a | #4a7da8 |
Indicator dots (live tickers, status pills) use a brighter teal #14938e (--icp-indicator-teal) and the rust accent --icp-indicator-rust.
Use a section stripe only where it earns the label. If a card or section does not belong to a category, it does not get a section stripe, the page-level rust is used instead.
Surface rhythm: parchment, sunk parchment, grid paper
The brand has two parchment tones plus one near-invisible texture. Together they let a long page breathe without resorting to boxes, shadows, color blocks, or gradients. Mirrors the live site exactly.
Parchment, the page default. --icp-bg (#faf9f5 light, #14110d dark). The default surface for every section. Body text reads on parchment, prose reads on parchment.
Sunk parchment, for alternating sections. --icp-bg-sunk (#f3f1ea light, #1b1812 dark). Use to differentiate adjacent sections on long pages, sunk panels, code-example wrappers, and any container that should read as recessed below the page surface. The contrast against parchment is small on purpose, the goal is rhythm, not visual weight. Always pair with a 1px hairline above and below for the section seam.
Grid paper, the hero texture. Two crossed linear-gradient layers draw a 24x24px hairline grid in --icp-grid-line (4% ink on parchment, 5% bone on dark). Apply at 80% layer opacity, offset -1px -1px. This is the texture under the hero on internetcomputer.org. Use it sparingly: hero, feature surface, the occasional editorial canvas. Never as a background for body prose.
The tokens file ships two utility classes:
.icp-grid-paper { ... }
.icp-grid-paper-overlay { ... }
When using the overlay variant, parent must be position: relative and overflow: hidden. Content sits above with position: relative; z-index: 1;.
Section rhythm pattern. On long pages, alternate parchment with sunk parchment. Six sections becomes parchment / sunk / parchment / sunk / parchment / sunk. The hero gets the grid paper overlay on top of parchment. Hairlines remain at every section seam.
Do not.
- Do not increase the grid line opacity past 6% on either theme. The texture should read as paper grain, not a wireframe grid.
- Do not change the tile from 24px. Smaller tiles read as noise. Larger tiles read as graph paper.
- Do not invent a third parchment tone. Two is the system. If you need more contrast, the design needs an elevated card (
--icp-bg-elev) or a hairline.
- Do not stack grid paper inside sunk parchment, the texture is for the parchment surface only.
- Do not apply grid paper to body prose. The contrast against text is fine for AA but reads visually noisy under long-form reading.
Color rules
- One primary accent on the page. Section stripes do not count as a second primary, they are 3px category labels.
- No gradients on brand surfaces. Flat color.
- No pure
#000 text in light mode and no pure #fff body text in dark mode (use --icp-fg and --icp-fg-body).
- Hairlines are 1px in
--icp-rule. No heavy borders.
- Card stripes are 3px (
--icp-card-stripe-w), not 2px. Live-site value.
- Never invent a new accent. If the design needs another color, the design is wrong.
3. Typography
The system has three faces, each with one job.
| Face | Role | Token | Weight | Where it shows up |
|---|
| Newsreader | Editorial: display, body, long-form reading | --icp-serif | 380 / 400 / 500 | Hero, all headings, body prose, callout text |
| Inter | UI chrome: things you click and navigate | --icp-ui | 400 / 500 / 600 | Top nav, eyebrows, button labels, footer, breadcrumbs |
| JetBrains Mono | Technical readouts: things the system reports | --icp-mono | 400 / 500 | Network stats, section markers (§ 03), card markers (№ 01), code |
Type scale
| Token | Value | Used for |
