---
name: pixelkit
description: Apply Kit's PixelKit style to reports, interfaces, charts, documents, slides and illustrated explanations. Use for PixelKit, house style, or styled work artifacts without another named style.
---

# PixelKit

Version 2.0. Approved reference: https://pixelkit42.pages.dev.
The source is `/Users/kit/Codius/pixelkit/tokens.json`. The site and both assistant skill copies are generated from the same repository. Lab and archived pages are experiments or history, not current instructions.

## Core

Light paper `#f3f3f2`, ink `#191a1c`, muted `#4c4e53`, faint `#65676d`.
Dark paper `#151517`, ink `#d9d9d5`, muted `#a8a9a5`, faint `#83847f`.
Light series: `#c04f31` `#3a6cbf` `#2f8f63` `#8256b8`. Dark series: `#d0603f` `#4a7dd6` `#379d70` `#9268cc`.
Warning: light `#96690a`, dark `#b8860b`. Use the danger background token for white button text, not the chart-series color.

- Group reading content with whitespace, headings and one left edge. Use borders to identify controls or diagram objects.
- Use JetBrains Mono for headings, controls, numbers, dates and codes; Fixel Text for prose. Right-align tabular numbers.
- Use square corners, no shadows, decorative gradients, all-caps styling or letter-spacing. No kickers above headings.
- Series order: coral, blue, mint, violet. Label every status in words. Split charts with more than four series.
- Keep prose within 640 px. Normal text contrast must reach 4.5:1. Provide visible focus, associated labels and keyboard operation.
- Use 24×24 sprites at integer scales, normally one per row. No sprites in headings or buttons; the navigation brand is the logo exception. No system emoji. Hand notes only on explicit request.
- Use sagging wires with cargo for diagrams. Motion is optional and must explain a process; provide controls and a static reduced-motion and print view.
- In data graphics, dither means incomplete or forecast. Label external systems explicitly. Sprite surface shading is a separate illustration convention.

Default to paper for reports and documents, charcoal for interfaces and projection. Choose one theme per artifact; the reference site previews both. Follow an explicit user preference.

## Read only the needed module

- Reports, charts, Word and slides: [reports](references/reports.md).
- Apps, forms and dashboards: [interfaces](references/interfaces.md).
- Sprites, diagrams, characters or animated explanations: [illustration](references/illustration.md).
- All written output: [writing](references/writing.md).

## Use

Local source: `/Users/kit/Codius/pixelkit`. `tokens.css` is generated from `tokens.json`; `fonts.css` loads self-hosted JetBrains Mono and Fixel Text. The rendered reference lives in `site/`.
For a web artifact start with `site/starter.html`, then add only the needed patterns. Hosted pages can link local assets. For a portable single HTML file, use `site/starter-portable.html`; it embeds fonts and styles. Inline optional JavaScript only when needed.
On cloud or another machine, read https://pixelkit42.pages.dev/start.html and retrieve resources from the same site. Each relative reference above is also at `/skill/references/` on the site.
Keep demo data fictional. Verify the actual layout, mobile reading, keyboard controls and print as relevant to the artifact.

## Maintenance

Edit `tokens.json`, `src/`, or `skill/references/` in the source repository. Run `python3 scripts/build.py --sync-skills` to rebuild and update both local assistants. Run `python3 scripts/check-skill.py` before deployment. Do not hand-edit generated skill copies or site pages.