One sparkle. One colour. Every AI feature.
The AI styling guide for every FieldInsight & Open Claw app — the sparkle icon, its three placements, the approved button labels, and the rules about when and where it appears. Hosted here so every agent, contractor and collaborator can be pointed at one URL.
Live Mockup
The fully rendered pattern — hero badge, AI pill button, circular badge, feature strip, mid-page suggestion strip, and "AI parsed" labels. Your visual source-of-truth.
Open mockup →Styling Guide
The canonical AI pattern — decisions locked, design tokens, the Two-Star mark (fallback Single Sparkle ≤ 14 px), three approved placements, approved CTA labels, suggest strips, provenance labels, and the do/don't table.
Read the guide →Workflow: Sup Invoice Parse
A full Bill ↔ PO restyle showing how to graft the pattern onto an existing app. Drop-parse flow, three AI decision modals, and before/after design notes.
View workflow →Raw Markdown
The source-of-truth ai-styling-pattern.md file served verbatim — copy-paste into any project's cursor rules or AGENTS.md reference.
Seven rules that never change
- The sparkle is the only AI icon. Never substitute a brain, robot, wand, lightning bolt, or chat bubble.
- AI colour is always
#39006B. Add--brand: #39006Bto:rootin every project, even if the app has a different primary. - Three placements only: inline icon (12–16 px), circular badge (48–80 px, max 1 per page),
.ai-pill-btnCTA. - Approved button labels only:
Ask AI,Re-read,Re-generate,Scan bill,Scan receipt,Post to job →,Post to Xero →. Never a model name. - Always show provenance. Wherever AI populated a value, add the sparkle + an "AI parsed…" label.
- Never animate the sparkle. It's a quiet brand signal, not a loading spinner.
- Never reuse it for non-AI features. Not for "Premium", "New", or decorative moments — the sparkle must always mean AI.