Wiki/Brand.md
Brand — Crawler Factory
Design language version: 1.1 (2026-05-03)
Source: Design-Language/01-design-language.md, Design-Language/tokens.css
Origin: Distilled from 32 screenshots of dashboard.algolia.com (Wellington crawler, Session 2)
Crawler Factory matches the Algolia dashboard design language exactly. It is not a separate brand — it extends Algolia's visual vocabulary with factory-specific patterns.
The 7-line summary
- Two chrome modes: outer dashboard for browsing, focused workspace for operating one asset
- Vertical left rail with small-caps section headers; blue left-bar for active item
- Page = H1 + optional description + optional underlined tabs
- Setting cards are the workhorse — icon + title + description + value + Edit; expand inline
- Edit existing → inline expansion. Create new → modal. Never mix.
- Persistent top-right run-control cluster (CTA + per-crawler controls); close X exits workspace
- Restraint everywhere: no gradients, no toasts, no animations, blue is the only accent
Color palette
| Role | Token | Notes |
|---|---|---|
| Canvas (page background) | --surface-canvas |
Lightest background |
| Card | --surface-card |
White containers |
| Elevated | --surface-elevated |
Modals |
| Primary text | --ink-primary |
~80% perceptual lightness on white |
| Secondary text | --ink-secondary |
~60% |
| Muted text | --ink-muted |
~40% |
| Disabled text | --ink-disabled |
~25% |
| Border | --line-default, --line-strong |
Dividers, hairlines |
| Accent (only accent) | --accent |
Blue only. Links, active states, primary buttons, focus rings. Never another hue. |
| Success | --status-success |
Pills only — never as page fills |
| Warning | --status-warning |
Pills only |
| Danger | --status-danger |
Pills only |
Hard rules: - One accent color (blue). Never another hue for emphasis. - No gradients. Anywhere. - Status colors live inside pills only. - Dark mode: code editor surfaces only.
Typography
| Use | Size | Weight | Case | Color |
|---|---|---|---|---|
| Page H1 | 24px | 700 | Sentence | --ink-primary |
| Card title | 15px | 600 | Sentence | --ink-primary |
| Body / table / button label | 14px | 400 (600 for buttons) | Sentence | --ink-primary |
| Description / helper | 13px | 400 | Sentence | --ink-secondary |
| Section header | 11px | 700 | SMALL-CAPS, 0.08em letter-spacing | --ink-muted |
| Code / monospace | 12–13px | 400 | — | — |
Stack: Inter → system-ui. No display fonts. No serifs.
Spacing and radius
- Space scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64px
- Card internal padding: 28px (most-repeated value)
- Card-to-card gap: 16px in vertical stacks
- Border radius: 12px cards/buttons; 8px inputs/chips; 999px pills; 16px modals
Motion
- Color/background transitions: 150ms ease-out
- Inline edit expansion: 200ms ease-out
- Modal: opacity fade 150ms
- No spring physics, no parallax, no entrance animations on lists. The dashboard is calm.
Where Crawler Factory extends Algolia's vocabulary
These patterns are ours, not Algolia's native — but they fit the vocabulary:
| Pattern | What it is | Why ours |
|---|---|---|
| Run-control cluster | Pause / Resume / Re-crawl / Stop in top-right of workspace | Algolia is fire-and-forget; we added control primitives |
| ALPHA badge | Build/version tag in top bar | Honest signaling during development phase |
| Factory entity model | One factory row containing N sub-crawlers | Algolia doesn't have a factory-as-container concept |
| Setup wizard as content page | 4-step wizard rendered inside workspace content area | Algolia opens workspace immediately; we match that pattern |
Screenshot references
Distilled from 32 Algolia dashboard screenshots captured Session 2 (2026-05-03). Mockups and gap analysis at Sessions/Session-2b-MockupGapAnalysis.md.