I · Three questions a working design-systems team asks
From pattern to token to a11y audit.
Demo 1 · Pattern lookup with provenance1.2 ms · local
why is the destructive-action confirm placed on the right, not the left?
01NN/g · button-order guidance for OK/Cancel — platform-conventional, not optimal. NN/g · 2018 · UX article
0.91
02Apple HIG · destructive alerts surface confirm on right; Cancel adjacent. Apple HIG · Alerts · 2025
0.88
03Internal · component spec for ConfirmDialog · current ordering. file://design/ConfirmDialog.mdx · local
0.80
Demo 2 · Live CSS token extractor + a11y gap2.1 ms · live URL
tokens · vendor X home page · plus accessibility gaps for our redesign
01Extracted · 14 colour tokens, 5 font scales, modular 1.25 type ramp. live · vendor-x.com · 2026-05
0.93
02Contrast fail · 2 secondary text styles < 4.5:1 against bg-tint. scan · design.accessibility-gap · WCAG 1.4.3
0.90
Local component specs are indexed in place. Live URL extraction is opt-in per host.
II · What's included
Tailwind, Material, Apple HIG — plus your spec.
Pair with Code for component-level cross-references, Research for HCI literature.
- Two generic source fetchers
design.articles · design.systems
- URL ingest for any pattern page
indago_learn — Tailwind, Material, Apple HIG, shadcn, Radix, Primer, Carbon, Chakra, Ant, NN/g, Smashing, web.dev — ingest per URL on demand
- Live CSS / token extractorany URL · variable map · type ramp · contrast pass
- Accessibility-gap · contrast-violation · token-driftscan · anomaly.design.contrast-violation · anomaly.research.token-drift (runs across design-system docs)
- Native renderer
onboarding-brief tuned for design systems — "what is this system, how do I read it, where do I cite from"29-template surface
Sources of record · 2 generic fetchers + URL ingestdesign.articlesdesign.systemsURL ingest (any system)
This bundle is deliberately small in its dedicated plugin set — design systems change shape too often for first-class plugins per vendor. The right tool is URL ingest on demand, then your own corpus.
II.5 · Sample workflows
Real workflows. Real numbers.
Three workflows shaped for this bundle. Where the box reads Verified, the numbers come from a real run logged in this codebase. Where it reads Pending validation, the workflow shape is implemented and we are still gathering the headline numbers before we publish them.
Workflow 01
Pending validation
Live CSS / token extractor
Design systems
- InputA URL + your in-house design specs.
- MethodLive page fetch + CSS-variable extraction + cross-reference to in-house spec.
- OutputSigned token file (variables + type ramp) and a gap list against the in-house spec.
Token map
Extractor runs against the live site already — pending a verified studio adoption case before publishing.
Workflow 02
Pending validation
WCAG contrast audit
Accessibility leads
- InputSite URL or a Figma export.
- Method
anomaly.design.contrast-violation scan against WCAG 1.4.3 + URL-ingested Apple HIG / Material reference pages.
- OutputPer-style contrast pass/fail with the cited WCAG reference.
A11y gate
Pending a real audit on a customer surface for headline numbers.
Workflow 03
Pending validation
Pattern provenance lookup
Product designers
- InputA natural-language question ("why is this button on the right?").
- MethodStructural rank over NN/g + Apple HIG + Material + Smashing + your spec.
- OutputCited answer with primary-source references.
Citation-grade
Demoable on cached design data — pending a verified design-team study.
Verified workflows are reproducible against the index hash listed in each run. Pending workflows are a written commitment, not a customer quote — we publish numbers only when we have measured them.
Design intelligence · from€499/ seat / month· studio licenses · live extractor included