# Baseline 0.4

> Baseline is an information-design system on the architectural drawing plate: four colours (ground, ink, accent, signal), Public Sans and JetBrains Mono, square edges, one accent. Use it to design or build reports, dashboards, sheets and figures as HTML or production code.

## Install

The whole system is one zip: https://shulik.online/baseline-0.4.zip (about 1.4 MB, 135 files, top folder `baseline-0.4/`).

Claude Code, as a skill (recommended):

```sh
mkdir -p .claude/skills
curl -fsSL https://shulik.online/baseline-0.4.zip -o /tmp/baseline-0.4.zip
unzip -q -o /tmp/baseline-0.4.zip -d /tmp/baseline-0.4-unzip
rm -rf .claude/skills/baseline && mv /tmp/baseline-0.4-unzip/baseline-0.4 .claude/skills/baseline
```

`.claude/skills/baseline/SKILL.md` is then discovered as the skill entry point. To install into the project tree instead, move the folder to `design/baseline/` and add a pointer to `design/baseline/SYSTEM.md` in the project's `CLAUDE.md`.

Without a shell (Claude Design, the Claude app), a person attaches the folder or uploads `SYSTEM.md` and `design-rules.json`. See https://shulik.online/Install.dc.html.

## Read in this order

- `SKILL.md`: entry point and the reading rules.
- `SYSTEM.md`: the complete interface (components, tokens, rules, page boilerplate). Treat it as sufficient.
- `design-rules.json`: the machine-readable rules, including `pitfalls`. Open only when a rule in `SYSTEM.md` is ambiguous.
- A component's `<Name>.prompt.md`: only after choosing that component, at most three per task.
- `examples/`: three checked panels. Copy the closest one before building a panel.

## Never open

`_ds_bundle.js` (compiled, about 157k tokens), `*.jsx`, `support.js`, `*.card.html`, `_adherence.oxlintrc.json`, `vendor/`.

## Rules that cost the most corrections

- Link `styles.css` only, never the token files one by one.
- Load the production React builds, then Lucide, then `_ds_bundle.js`; call `lucide.createIcons()` after mounting.
- Four colours, no fifth. Accent marks one thing and stays under 4% of a surface.
- No radius, no shadow, no gradient. Type never below 11px. Spacing on 8, 16, 24, 32, 48, 64, 96.
- Panels are a fixed 16:10 frame, scaled to fit the screen.
- Every heading states a finding; every figure caption states what, when and n.

## Pages

- [Index](https://shulik.online/Baseline.dc.html)
- [System reference](https://shulik.online/System.dc.html)
- [Install and use](https://shulik.online/Install.dc.html)
- [SYSTEM.md](https://shulik.online/SYSTEM.md)
- [design-rules.json](https://shulik.online/design-rules.json)
