Copy skill

Design system generation

Use the public xzero-ui MCP server at https://mcp.xzero.co.uk/mcp. The complete Free and Pro library is available through this service. No account, sign-in, token, or upstream fallback is required. If the service is unavailable, retry later; do not use upstream services.

Xzero themes are token overrides in one CSS file. Never edit component CSS. Copy this checklist:

Theme progress:
- [ ] 1. Inputs collected
- [ ] 2. Accent set (light)
- [ ] 3. Accent set (dark)
- [ ] 4. Control fills and chart series checked
- [ ] 5. Shape, density, and type
- [ ] 6. Contrast table passes
- [ ] 7. Verification page reviewed in both themes

1. Inputs

Brand color (hex or oklch), corner style (sharp, balanced, round), density (compact or comfortable), and a display font if any. If the brand has several colors, pick one accent; the others become logo or illustration colors, not UI tokens.

2. Accent, light

Define a new accent name so the eight built-in accents keep working:

:root[data-accent="brand"] {
  --accent: oklch(55% .19 265);
  --accent-strong: oklch(46% .19 265);          /* lightness about -9 */
  --accent-subtle: oklch(55% .19 265 / .12);
  --accent-foreground: oklch(100% 0 0);          /* or a near-black for light accents */
  --control-on: oklch(53% .19 265);              /* a white thumb must read on it */
  --control-thumb-on: oklch(100% 0 0);
  --control-glyph: oklch(100% 0 0);
}

Adjust lightness, not hue, to reach contrast. Yellow and light green accents take a dark --accent-foreground and --control-glyph.

3. Accent, dark

Tune dark separately; never invert the light values. Dark text accents usually sit at lightness 75 to 82, while --control-on stays a mid tone (about 55 to 65) so white thumbs keep contrast.

:root[data-theme="dark"][data-accent="brand"] {
  --accent: oklch(78% .13 265);
  --accent-strong: oklch(88% .09 265);
  --accent-subtle: oklch(55% .19 265 / .22);
  --control-on: oklch(60% .18 265);
  --control-fill: oklch(60% .18 265);
}

4. Control fills and chart series

• Chart series --series-1 to --series-4 derive from the accent automatically in browsers with relative color. Render a four-series line-chart and bar-chart and confirm each pair is distinguishable in both themes. If not, override --series-2 to --series-4 explicitly.
• Keep --success, --warning, and --danger unless the accent collides with one; then shift the status hue by at least 30 degrees, not the accent.
• Keep neutrals achromatic. If the brand insists on a tint, keep chroma under 0.01 so status colors stay distinct.
• Do not add gradients to the theme. The brand gradient stays a marketing backdrop; a metallic mark stays local to one element.

5. Shape, density, and type

• Radius: scale --radius-control, --radius-panel, and --radius-surface together. Balanced is 18 : 26 : 34 (steps of 8, which keeps nested corners concentric at 8px insets). Sharp is about 8 : 12 : 16; round about 22 : 30 : 38.
• Density: compact lowers --control-height-md to 40px on pointer devices only; keep 44px under @media (pointer: coarse).
• Fonts: swap --font-display only when the brand has a display face; body stays on a workhorse sans at 400 and 500. Keep the tracking and leading tokens.
• Leave --focus-ring transparent (pointer focus draws nothing). The keyboard ring follows the accent; set --focus-outline only when the accent is too light to read as a ring on the background.

6. Contrast table (feedback loop)

Compute and list each pair with its ratio. All must pass; if one fails, adjust lightness and recompute.

Pair	Minimum
--accent text on --background and --surface	4.5:1
--accent-foreground on --accent	4.5:1
--accent icon or border on --surface	3:1
--control-thumb-on and --control-glyph on --control-on	3:1
--control-on against --control-track	3:1
Accent text on --accent-subtle over --surface	4.5:1

Repeat the table for dark mode.

7. Verification page

Render one page with button (all variants), input with an error, switch, checkbox, radio-group, segmented-control, tabs, badge (every tone), alert (every tone), progress, line-chart with four series, and dialog, in light and dark with data-accent="brand". Check that most of the page stays neutral and the accent only marks selection and emphasis.

Output

One CSS file with the light and dark accent blocks, shape and density overrides, the contrast tables, and how to enable it (<html data-accent="brand">).