Skip to content

Commit ebacef4

Browse files
marc0olomarc0olo
authored
feat: align site to ICP brand guidelines v2 (#186)
Applies the ICP brand design and voice guidelines to the website. Design tokens: corrects colors to brand values (parchment #faf9f5, rust #a8482b, ink #1a1a1a, hairline #e7e3da), adds JetBrains Mono to the font stack, fixes container/prose max-widths (1280px / 720px), and sets line- height to 1.55. CTAs become pill-shaped with rust fill. Stat numbers use JetBrains Mono. Eyebrow and category labels use --fg-secondary. Dark mode: switched from prefers-color-scheme auto-switch to explicit data-theme="dark" / data-theme="light". Adds a sun/moon toggle to the header with localStorage persistence; defaults to dark on first visit. Adds [data-theme="light"] override block for when a toggle sets it. CLAUDE.md records the docs-site exception to the brand's light-default rule. Copy: removes all em-dashes from rendered output (replaced with commas, colons, or periods). Heading italic moved from adverb to subject noun "agents". Removes body-copy italic stress in how-it-works. Page titles switch separator from em-dash to colon. OG image: removes non-brand circle decorations, updates to "ICP Skills" short form, regenerates og-image.png from SVG (social platforms don't support SVG for og:image), and flips the og:image meta tag to the PNG. Brand skills: adds .brand/icp-brand-voice/SKILL.md and .brand/icp-brand-design/SKILL.md as internal agent guidelines (not published to the site). CLAUDE.md updated to require reading them before any website changes.
1 parent 463c161 commit ebacef4

15 files changed

Lines changed: 1107 additions & 82 deletions

File tree

‎.brand/icp-brand-design/SKILL.md‎

Lines changed: 424 additions & 0 deletions
Large diffs are not rendered by default.

‎.brand/icp-brand-design/assets/tokens.css‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
/* =====================================================================
2+
ICP / DFINITY: Brand Tokens v2
3+
Source of truth. Mirrors the live internetcomputer.org system.
4+
5+
Default theme: light editorial (parchment).
6+
Dark theme: opt-in via [data-theme="dark"] on <html>, documented
7+
for product surfaces that need a dark reading environment (NNS at
8+
night, terminal-style developer tools, etc).
9+
10+
Three-face type system, each with one job:
11+
--icp-serif Newsreader editorial display + body
12+
--icp-ui Inter UI chrome (nav, eyebrows, footer, buttons)
13+
--icp-mono JetBrains Mono numbers, technical readouts, markers, code
14+
15+
One primary accent: rust (#a8482b).
16+
A small set of section-stripe accents for category coding only.
17+
===================================================================== */
18+
19+
:root {
20+
/* ---- Type faces ------------------------------------------------- */
21+
--icp-serif:
22+
"Newsreader", "Newsreader Fallback", Charter, Georgia, Cambria,
23+
"Times New Roman", serif;
24+
--icp-ui:
25+
"Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
26+
sans-serif;
27+
--icp-mono:
28+
"JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular,
29+
Menlo, Consolas, "Liberation Mono", monospace;
30+
31+
/* ---- Type scale ------------------------------------------------- */
32+
--icp-fz-eyebrow: 11px;
33+
--icp-fz-body: 17px;
34+
--icp-fz-body-sm: 15px;
35+
--icp-fz-h3: 24px;
36+
--icp-fz-h2: 36px;
37+
--icp-fz-h1: clamp(40px, 6.4vw, 86px);
38+
--icp-fz-marker: 12px;
39+
40+
--icp-lh-tight: 1.05;
41+
--icp-lh-display: 1.15;
42+
--icp-lh-body: 1.55;
43+
--icp-lh-meta: 1.4;
44+
45+
--icp-tracking-display: -0.015em; /* matches live hero, -1.29px at 86px */
46+
--icp-tracking-h2: -0.012em;
47+
--icp-tracking-eyebrow: 0.18em;
48+
--icp-tracking-mono: 0.04em;
49+
50+
--icp-weight-display: 380; /* live-site Newsreader at hero */
51+
--icp-weight-body: 400;
52+
--icp-weight-ui: 400;
53+
--icp-weight-ui-strong: 500;
54+
55+
/* ---- Spacing ---------------------------------------------------- */
56+
--icp-space-1: 4px;
57+
--icp-space-2: 8px;
58+
--icp-space-3: 12px;
59+
--icp-space-4: 16px;
60+
--icp-space-5: 24px;
61+
--icp-space-6: 32px;
62+
--icp-space-7: 48px;
63+
--icp-space-8: 64px;
64+
--icp-space-9: 96px;
65+
--icp-space-10: 128px;
66+
--icp-space-section: 144px;
67+
68+
/* ---- Layout ----------------------------------------------------- */
69+
--icp-container: 1280px;
70+
--icp-prose: 720px;
71+
--icp-gutter: 32px;
72+
73+
/* ---- Radii ------------------------------------------------------ */
74+
--icp-radius-inline: 3px;
75+
--icp-radius-card: 6px;
76+
--icp-radius-input: 8px;
77+
--icp-radius-pill: 9999px;
78+
79+
/* ---- Border weights -------------------------------------------- */
80+
--icp-rule-w: 1px;
81+
--icp-card-stripe-w: 3px; /* matches live site, 3px not 2px */
82+
83+
/* =================================================================
84+
LIGHT THEME (default, editorial parchment)
85+
Mirrors data-theme="editorial" on the live site.
86+
================================================================= */
87+
88+
/* Backgrounds */
89+
--icp-bg: #faf9f5; /* parchment, the page default. live site --editorial-paper. */
90+
--icp-bg-sunk: #f3f1ea; /* a deeper parchment for alternating sections, panels, sunk cards. live site --editorial-paper-sunk. */
91+
--icp-bg-elev: #ffffff; /* slight lift above the parchment for cards that need to read as raised */
92+
--icp-bg-cta-inverse: #1a1a1a; /* CTA bar always inverts to near-black */
93+
--icp-bg-card: #ffffff;
94+
95+
/* Grid paper texture: ink line color used by the .icp-grid-paper utility. */
96+
--icp-grid-line: rgba(26, 26, 26, 0.04); /* near-invisible ink hairline at 4% on parchment */
97+
--icp-grid-tile: 24px; /* live site uses 24px tile */
98+
99+
/* Text */
100+
--icp-fg: #1a1a1a; /* ink, never pure black */
101+
--icp-fg-body: #1a1a1a;
102+
--icp-fg-secondary: #4b4943; /* meta strips, secondary copy */
103+
--icp-fg-muted: #868078; /* captions, attributions */
104+
--icp-fg-disabled: #b3ada3;
105+
--icp-fg-inverse: #ffffff;
106+
107+
/* Rules and borders */
108+
--icp-rule: #e7e3da; /* hairline, live site value */
109+
--icp-rule-strong: #4b4943;
110+
111+
/* Accent: primary (rust) */
112+
--icp-accent: #a8482b; /* rust, the single brand color */
113+
--icp-accent-strong: #8e3b22; /* hover, focus */
114+
--icp-accent-dim: rgba(168, 72, 43, 0.10);
115+
116+
/* Section stripes (3px card top stripes, category coding) */
117+
/* Live-site palette: rust + deep teal + ink-blue. Three only. */
118+
--icp-section-default: var(--icp-accent); /* rust by default */
119+
--icp-section-teal: #0b5e5c;
120+
--icp-section-blue: #1c3d5a;
121+
122+
/* Indicator (small dots in tickers, system status) */
123+
--icp-indicator-teal: #14938e;
124+
--icp-indicator-rust: var(--icp-accent);
125+
126+
/* Code surfaces */
127+
--icp-code-bg: #efe8da;
128+
--icp-code-fg: #1a1a1a;
129+
130+
/* Focus */
131+
--icp-focus: #8e3b22;
132+
}
133+
134+
/* ===================================================================
135+
DARK THEME (opt-in)
136+
Apply on <html data-theme="dark">.
137+
For product surfaces that need a dark reading environment, e.g.
138+
NNS late-night use, dashboards, developer tools. Marketing and
139+
the main site stay on the light default.
140+
=================================================================== */
141+
142+
[data-theme="dark"] {
143+
/* Backgrounds */
144+
--icp-bg: #14110d; /* deep bark, never pure black */
145+
--icp-bg-elev: #1b1812; /* card lift */
146+
--icp-bg-cta-inverse: #ffffff; /* CTA bar flips to white in dark */
147+
--icp-bg-card: #1b1812;
148+
149+
/* Text */
150+
--icp-fg: #f0ebe0; /* bone, never pure white */
151+
--icp-fg-body: #f0ebe0;
152+
--icp-fg-secondary: #a29a8d;
153+
--icp-fg-muted: #7a7367;
154+
--icp-fg-disabled: #4a453d;
155+
--icp-fg-inverse: #1a1a1a;
156+
157+
/* Rules and borders */
158+
--icp-rule: #2d2820; /* soil */
159+
--icp-rule-strong: #5a5446;
160+
161+
/* Sunk parchment in dark mode is a slightly raised bark, not a deeper hole. */
162+
--icp-bg-sunk: #1b1812;
163+
164+
/* Grid line in dark mode: warm bone at very low opacity */
165+
--icp-grid-line: rgba(240, 235, 224, 0.05);
166+
167+
/* Accent: primary (rust), warmed slightly for dark surfaces */
168+
--icp-accent: #c25a37; /* ember, brighter for AA on bark */
169+
--icp-accent-strong: #d96a45;
170+
--icp-accent-dim: rgba(194, 90, 55, 0.16);
171+
172+
/* Section stripes, deepened for AA on dark */
173+
--icp-section-default: var(--icp-accent);
174+
--icp-section-teal: #2c8a85;
175+
--icp-section-blue: #4a7da8;
176+
177+
/* Indicators */
178+
--icp-indicator-teal: #2c8a85;
179+
--icp-indicator-rust: var(--icp-accent);
180+
181+
/* Code surfaces */
182+
--icp-code-bg: #1b1812;
183+
--icp-code-fg: #f0ebe0;
184+
185+
/* Focus */
186+
--icp-focus: var(--icp-accent);
187+
}
188+
189+
/* ===================================================================
190+
Base element styling: apply once at the root.
191+
=================================================================== */
192+
193+
html {
194+
background: var(--icp-bg);
195+
color: var(--icp-fg);
196+
font-family: var(--icp-ui); /* body/UI default is Inter, like live site */
197+
font-size: 17px;
198+
line-height: var(--icp-lh-body);
199+
-webkit-font-smoothing: antialiased;
200+
text-rendering: optimizeLegibility;
201+
}
202+
203+
body {
204+
margin: 0;
205+
background: var(--icp-bg);
206+
color: var(--icp-fg);
207+
}
208+
209+
::selection {
210+
background: var(--icp-accent);
211+
color: #ffffff;
212+
}
213+
214+
a {
215+
color: inherit;
216+
text-decoration-color: var(--icp-rule-strong);
217+
text-underline-offset: 3px;
218+
}
219+
a:hover { color: var(--icp-accent); }
220+
221+
:focus-visible {
222+
outline: 2px solid var(--icp-focus);
223+
outline-offset: 2px;
224+
}
225+
226+
/* Editorial copy uses the serif. Apply selectively, not at root. */
227+
.icp-prose,
228+
.icp-display,
229+
h1, h2, h3, h4, h5 {
230+
font-family: var(--icp-serif);
231+
}
232+
233+
/* ===================================================================
234+
Surface utilities
235+
=================================================================== */
236+
237+
/* Sunk parchment surface: alternating section background, sunk panels.
238+
Use to differentiate adjacent sections without resorting to boxes,
239+
shadows, or color blocks. Pair with --icp-rule hairlines as needed. */
240+
.icp-bg-sunk {
241+
background: var(--icp-bg-sunk);
242+
}
243+
244+
/* Grid paper texture: the hero pattern from internetcomputer.org.
245+
Two crossed linear-gradients draw a 24x24px hairline grid in
246+
--icp-grid-line. Apply as an overlay layer (absolute, inset 0,
247+
pointer-events: none) over a parchment surface, OR directly on a
248+
container as a background. The opacity 0.8 multiplier matches the
249+
live site's slight wash. */
250+
.icp-grid-paper {
251+
background-image:
252+
linear-gradient(90deg, var(--icp-grid-line) 1px, transparent 1px),
253+
linear-gradient(var(--icp-grid-line) 1px, transparent 1px);
254+
background-size: var(--icp-grid-tile) var(--icp-grid-tile);
255+
background-position: -1px -1px;
256+
background-repeat: repeat;
257+
}
258+
259+
/* Hero overlay variant: drop into a positioned hero container. */
260+
.icp-grid-paper-overlay {
261+
position: absolute;
262+
inset: 0;
263+
pointer-events: none;
264+
opacity: 0.8;
265+
background-image:
266+
linear-gradient(90deg, var(--icp-grid-line) 1px, transparent 1px),
267+
linear-gradient(var(--icp-grid-line) 1px, transparent 1px);
268+
background-size: var(--icp-grid-tile) var(--icp-grid-tile);
269+
background-position: -1px -1px;
270+
background-repeat: repeat;
271+
}

0 commit comments

Comments
 (0)