Dashboard/Crawler-Factory/Design-Language/README.md
Crawler-Factory

Design-Language/README.md

Crawler Dashboard Design Language Pack

Portable across projects, threads, agents. Copy this entire directory into any Claude Code repo, any Cursor session, any new Algolia Central module — and the receiving session has everything it needs to produce UIs that match the live Algolia dashboard.

What's in here

File What it is Read order
README.md (this file) The map. Start here. 1
00-findings.md Knowledge harvested from 32 dashboard screenshots — every pattern, every input control, every state. The "why" behind the rules. 2
01-design-language.md The portable design pack. Tokens, components, voice, decision tree, what's banned. The "what to do." 3
02-component-recipes.md 21 copy-paste-ready HTML/JSX skeletons matching every recipe in 01-design-language.md. The "how." 4 (as needed)
tokens.css Drop-in CSS variables + base classes. Import this before any other stylesheet. imported, not read

How to use this pack

As a Claude session prompt

"Before designing or building any UI, read docs/design-language/01-design-language.md. Find the relevant recipe in 02-component-recipes.md. Use the tokens in tokens.css. Match the dashboard, don't invent."

As a starting point in a new project

# Copy the pack into the new project
cp -r docs/design-language /path/to/new-project/docs/

# In the new project's index.html or globals.css:
@import "./docs/design-language/tokens.css";

As a reference during code review

Use 01-design-language.md §7 ("What's banned") as the rejection list. If a PR introduces a gradient, a toast, an entrance animation, or a second accent color, send it back.

How to extend the pack

When the dashboard adds a new pattern, or you observe a gap:

  1. Capture screenshots → dashboard_screenshots/ (numbered).
  2. Add findings → 00-findings.md.
  3. Add recipe → 02-component-recipes.md.
  4. Add tokens (if needed) → tokens.css + cross-reference from 01-design-language.md §1.
  5. Bump the version in 01-design-language.md header.

Versioning

Current version: 1.1 (2026-05-03) — added run-control surface as our value-add over Algolia's fire-and-forget model.

Source dashboard: dashboard.algolia.com (Wellington crawler, app 0EXRPAXB56).