Direct answer: 11 of the 25 sites use CSS custom properties, with 548 token names and 856 var() references; none of the sampled CSS contains prefers-color-scheme or color-scheme; 1,159 @media blocks show that responsive layout still relies on breakpoints. E24 uses 40 variables for 511 references, while E25 declares 17 tokens and uses none; E23 has 83 tokens and 79 references. Fourteen sites have no CSS variables at all.
This study reads CSS text only and does not execute scripts; dark mode toggled by a JavaScript class is invisible.
Method: inline styles plus the first three external CSS files
On 2026-11-09 between 12:41 and 12:45 we requested the HTML of the same 25 cached-200 homepages, read inline <style> blocks and the first three external stylesheets, stripped comments and counted custom-property declarations (unique by name), var(--…) references, prefers-color-scheme, color-scheme and @media blocks. CSS only, no rendering.
| Measure | Rule | Boundary |
|---|---|---|
| Token declaration | --name:, counted once per name | Usage not judged |
| var() reference | Occurrences of var(--…) | Fallback values not parsed |
| Dark mode | prefers-color-scheme or color-scheme | JS class toggles not counted |
| @media | All @media blocks | Size, print and preference not separated |
Result: tokens exist, dark mode does not
| Measure | Count | Sites |
|---|---|---|
| Sites using CSS variables | — | 11 |
| Token declarations (unique per site, summed) | 548 | 11 |
| var() references | 856 | 11 |
| Tokens declared but never used | 17 | 1 |
| prefers-color-scheme / color-scheme | 0 | 0 |
| @media | 1,159 | 24 |
| Site | Tokens | var() uses | @media |
|---|---|---|---|
| E24 | 40 | 511 | 73 |
| E23 | 83 | 79 | 87 |
| E03 | 73 | 55 | 96 |
| E06 | 69 | 55 | 53 |
| E09 | 73 | 45 | 71 |
| E14 | 73 | 45 | 116 |
| E22 | 73 | 46 | 99 |
| E17 | 27 | 4 | 207 |
| E12 | 15 | 4 | 14 |
| E08 | 5 | 12 | 0 |
| E25 | 17 | 0 | 5 |
Usage depth varies widely: E24 alone has 511 references, so colour and spacing sit in a token layer; E25 declares 17 tokens and never uses one, which looks like an empty shell left by a template. E17 has 207 media queries but only 27 tokens and four references, so responsiveness comes from per-rule breakpoints rather than tokens.
Dark mode is blank: no prefers-color-scheme or color-scheme on any of the 25 sites. That does not prove no dark skin exists — a JavaScript class toggle or an unsampled stylesheet could provide one — but at the CSS preference layer nothing is declared, so the cheapest “follow the system” path is unused.
What this means for acceptance
- Start with a minimal token layer. Cover brand colour, body text, background, spacing and type scale; 11 of 25 sites have one and 14 have none.
- Write dark mode into CSS. No site uses prefers-color-scheme; follow the system first, then add a manual toggle.
- Remove dead tokens. E25 declares 17 and uses none; dead tokens make a theme layer look complete while doing nothing.
- Test contrast in dark mode. Tokens do not guarantee contrast; switch to dark and check body text, buttons, images and forms page by page.
- Accept breakpoints and colour preference separately. 1,159 media queries show responsive effort, but colour preference is a different checklist. See the website development service.
Limits
- First three external CSS files only: tokens and dark rules may live in unsampled stylesheets, so totals are a lower bound.
- No JavaScript: script-toggled themes and dynamically injected variables are invisible.
- Tokens unique by name: same-name overrides are not resolved.
- Boundaries: E17 resolved one external CSS file, E18/E20 none, and E25 keeps everything inline.
- 25-site pilot: the same equipment-company sample; no industry claim.
Data and reproduction
Anonymised data: equipment-homepage-design-tokens-2026.csv (25 rows × 10 columns: CSS files and size, tokens, var() references, dark queries, @media and time). The repository keeps docs/research/2026-11-homepage-design-tokens.csv.
Parser: scripts/design_token_probe.py; unit tests: scripts/test_content_design_token_probe.py (6, offline). Run:
python -m unittest scripts.test_content_design_token_probe
Related: the homepage motion audit, the homepage template-hygiene audit, and the homepage focus-style recheck.
Sources and definitions
- Sample: the 25 study-4 homepages cached as 200.
- Fetch: 2026-11-09 12:41–12:45 Asia/Shanghai, serial, 0.5 s apart, 15-second timeout.
- Styles: inline
<style>plus the first three external stylesheets; comments stripped before counting. - Rules: tokens unique by name; dark mode via prefers-color-scheme or color-scheme; all @media counted.
Frequently asked questions
Does zero dark-mode support mean none of the sites have it?
Not necessarily. This study checks prefers-color-scheme and color-scheme in the sampled CSS; a class toggled by JavaScript or a stylesheet outside the sample is invisible.
Are more CSS variables better?
No. Usage matters: E25 declares 17 tokens and uses none, while E24 has 40 tokens and 511 references, which is an actual theme layer.
What do CSS variables enable?
They centralise brand colour, spacing and type scale, so a theme switch or dark mode does not need per-rule overrides, and the need for !important drops.
Why so many media queries?
The 25 sites contain 1,159 @media blocks, so responsive layout still relies on breakpoints; colour preference has not caught up, and dark mode is almost absent.
How should dark mode be accepted?
Switch the OS to dark, then check background, text, images, forms and icons for contrast page by page, and confirm the manual toggle works rather than only checking that variables exist.
Can the data be re-checked?
Yes. The public CSV has 25 rows by 10 columns, and scripts/design_token_probe.py has 6 offline unit tests.