The Churn Signal Agent
Sense · Daily · 12 min read
Watches Pendo, Mixpanel, and your CRM for usage decay. Files a one-paragraph brief in your inbox at 9am with the three accounts most likely to churn this quarter.
Read the blueprintEvery prototype on the site runs on the tokens below. I packaged the same spec as a single file Claude can read, so any prototype you ask Claude to build comes back in this exact style. Grab it, keep scrolling for the visual reference.
The full spec is packaged as a single Markdown file Claude can read. Paste it into a chat, drop it into a Claude Code skill folder, or point Claude at the URL. Every prototype comes back matching the tokens, components, and voice rules the site runs on.
You are building a prototype on falkster.com. Match this design system exactly.
Stack: Next.js 16 App Router, React 19, TypeScript strict, Tailwind v4 (CSS-first
@theme, no tailwind.config.js), lucide-react icons. No shadcn, no Radix.
Colors (Tailwind tokens → hex):
bg=#0a0e1a bg-elevated=#12182b bg-card=#1c2337 bg-hover=#272f44
border=#2d3548 border-bright=#3a4760
text=#e6ecf4 text-muted=#9eafc7 text-dim=#6b7a94
accent=#38bdf8 accent-bright=#7dd3fc
neon-cyan=#22d3ee neon-green=#34d399 neon-pink=#e879f9 neon-orange=#818cf8
Fonts: Inter (body), DM Sans (h1-h4 via font-display), JetBrains Mono (captions
and code). Body 17px, line-height 1.6.
Patterns:
- Page: <div class="min-h-screen bg-bg"><div class="max-w-5xl mx-auto px-6 py-12 md:py-16">…
- Eyebrow: px-3 py-1 rounded-full border border-accent/30 bg-accent/5 text-[11px] tracking-wider text-accent-bright
- Hero h1: text-5xl md:text-7xl font-bold tracking-tight leading-[1.05]
- Primary btn: px-5 py-2.5 rounded-lg bg-accent hover:bg-accent-bright text-white font-medium text-sm transition-colors
- Secondary btn: px-5 py-2.5 rounded-lg border border-border hover:border-accent text-text hover:text-accent-bright
- Card: rounded-xl border border-border bg-bg-card p-5 hover:border-border-bright
- Pill: inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] tracking-wider rounded-md border border-{color}/30 bg-{color}/5 text-{color}
- Body copy: text-text-muted (not text-text)
Voice: first person, short sentences, no em dashes, no "genuinely /
fundamentally / leverage / unlock", verbs on CTAs ("Ship it", not "Learn
more"), end with an action.
Always export metadata (title, description, canonical) from page.tsx. Put UI
in a client component. Output only full file contents, no commentary.
Full spec with every component, layout, and copy rule:
https://falkster.com/artifacts/falkster-design-system.mdA square (the system), a tilted diamond at -14° (the question), and three dots (thinking). Three SVG variants, currentColor only, never gradient, never cyan-filled.
Full weave with the diamond's back path at 55%. Stroke 2.2-2.5px. Used on body surfaces.
Two squares stack, no back-path subtlety. Stroke 3.5px. Used at 30-44px in nav and hero lockups.
Square + dots only (the diamond drops). Stroke 5px. Used at 16px and below.
Lowercase wordmark, DM Sans 700, tracking -0.03em at hero size. Mark sits left of the wordmark, centerline aligned. Clear space: one dot diameter on every side. The mark uses currentColor only, never gradient, never cyan, both are explicit "Don't" examples in the brand styleguide.
Named tokens map to Tailwind classes. Copy the token name. The theme toggle above flips the swatches between dark and light values.
Primary sky. CTAs, links, active
Hover on accent, link hover
Methodology, analytics, passing
AI agents, shipped, signals
Foundation, alerts, high-intensity
Leadership, execution, warning
Page background
Nav, sticky bars, footer
Cards, panels, code blocks
Hover state on cards and rows
Default dividers, card outlines
Hover border, focused outline
Headings, primary body
Secondary body, descriptions
Captions, timestamps, metadata
DM Sans for display, Inter for body, JetBrains Mono for eyebrows + tokens, Source Serif 4 opt-in for prose pull-quotes.
Lucide React, stroke 1.75-2, currentColor, sized 14-22px inline with text. Plus the three-dot motif: ellipsis, loading state, section divider.
The ellipsis recurs throughout the brand: in the mark, as a thinking/loading indicator, as a section divider. Maps to discover → build → measure. Use sparingly.
Tailwind spacing scale. Use multiples of 4px.
Card radius 12px, ai-border radius 22px, pill 9999. Layered card shadows are subtle, borders carry the elevation work. Accent CTAs get a triple-layer cyan halo.
1px lift, near-zero spread. Default tile.
Hover, hovered card.
Modals, dialogs, drag-state.
Triple-layer sky-cyan halo on primary CTAs and active pills.
Aurora gradient (#38bdf8 → #22d3ee → #a78bfa → #e879f9) is the recurring AI signature. Used as a thin streak around input borders on focus, never as a flat fill. Plus the AI divider, a horizontal slice of the same gradient.
Sky → cyan → violet → fuchsia. Cool the whole way through, no warm stops. Use as a 1-2px streak on focused/hovered inputs and CTAs. Also lives as a 0.4 → 0.5 → 0.4 alpha curve in the .ai-divider hairline below.
A 1px horizontal slice of the aurora gradient, used between major page sections. Animation respects prefers-reduced-motion.
Copy-paste ready. Every prototype on the site uses exactly these.
Neutral background, subtle border, the default container.
Use when the card should pull attention and signal forward motion.
Each handbook wave + each PM-stage agent gets one of these hues. Five accents, no warm reds/oranges, the brand explicitly forbids amber/red/orange.
Watches Pendo, Mixpanel, and your CRM for usage decay. Files a one-paragraph brief in your inbox at 9am with the three accounts most likely to churn this quarter.
Read the blueprintThe discovery work said "no" by week three. We shipped anyway. Here's what I do differently now, and the four signals I should have caught.
Read the postReference a token like text-accent-bright and drop code blocks directly in prose.
// ship it
const eval = loadEval('./evals/onboarding.md');
const score = await run(eval, 'gpt-4o-mini');
if (score < 0.82) throw new Error('blocked');Tailwind v4 @theme block. Paste into globals.css under @import "tailwindcss".
@import "tailwindcss";
@theme {
/* Surfaces */
--color-bg: #0a0e1a;
--color-bg-elevated: #12182b;
--color-bg-card: #1c2337;
--color-bg-hover: #272f44;
--color-border: #2d3548;
--color-border-bright: #3a4760;
/* Text */
--color-text: #e6ecf4;
--color-text-muted: #9eafc7;
--color-text-dim: #6b7a94;
/* Accent, vivid sky */
--color-accent: #38bdf8;
--color-accent-bright: #7dd3fc;
--color-accent-glow: rgba(56, 189, 248, 0.28);
/* Category accents */
--color-neon-cyan: #22d3ee;
--color-neon-green: #34d399;
--color-neon-pink: #e879f9;
--color-neon-orange: #818cf8;
/* Fonts */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-display: "DM Sans", "Inter", system-ui, sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}Want the actual prototype source? The private lab has the full repos.
Enter the lab