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, LIGHT-ONLY Contentful palette):
bg=#ffffff bg-deep=#eff2f6 bg-elevated=#ffffff bg-card=#f4f6f9 bg-hover=#eff2f6
border=#dde5ec border-bright=#c4d1de
text=#2b2d31 text-muted=#54585f text-dim=#767b85 text-strong=#1c1d20
accent=#2b2d31 (dark CTA pills, white text) accent-bright=#0058ff (links)
neon-cyan=#2c407d (navy) neon-green=#395e4a (forest) neon-pink=#6b46e5 (purple)
neon-orange=#54768e (slate)
Fonts: system-ui sans (body), Avenir Next / Mulish (h1-h4 via font-display),
Geist Mono strictly for code. Body 16px, line-height 1.5. White page, no dark
surfaces, no neon glows.
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, Avenir Next / Mulish 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 site is light-only (Contentful identity); these are the shipping values.
Near-black. Primary CTA pills, white text on top
Brand blue. Inline links, hover, focus
Navy. Foundation, methodology, analytics
Forest green. Discovery, shipped, signals
Purple. Execution, brand emphasis
Slate-blue. AI Agents, secondary chips
Page background, crisp white
Light grey section bands
Cards, panels, code blocks
Hover state on cards and rows
Hairline dividers, card outlines
Powder blue. Hover border, focused outline
Headings, primary body. Near-black
Secondary body, descriptions
Captions, timestamps, metadata
Avenir Next (Mulish fallback) for display headings, the system sans stack for body, Geist Mono strictly for code blocks. Eyebrows and numeric chips share the body sans.
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, panel radius 20-22px, pill 9999. Shadows are soft near-black washes on the white page, borders carry most of the elevation work. No neon halos.
1px lift, near-zero spread. Default tile.
Hover, hovered card.
Modals, dialogs, drag-state.
Soft near-black wash on primary CTA pills. The old cyan halo is retired.
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 (Contentful light, light-only, no dark mode) */
--color-bg: #ffffff;
--color-bg-deep: #eff2f6;
--color-bg-elevated: #ffffff;
--color-bg-card: #f4f6f9;
--color-bg-hover: #eff2f6;
--color-border: #dde5ec;
--color-border-bright: #c4d1de;
/* Text */
--color-text: #2b2d31;
--color-text-muted: #54585f;
--color-text-dim: #767b85;
--color-text-strong: #1c1d20;
/* Accent, near-black CTA pills + brand-blue links */
--color-accent: #2b2d31;
--color-accent-bright: #0058ff;
--color-accent-glow: rgba(43, 45, 49, 0.16);
/* Category accents (navy / forest / purple / slate) */
--color-neon-cyan: #2c407d;
--color-neon-green: #395e4a;
--color-neon-pink: #6b46e5;
--color-neon-orange: #54768e;
/* Fonts */
--font-sans: ui-sans-serif, system-ui, "Mulish", Arial, sans-serif;
--font-display: "Avenir Next", "Mulish", ui-sans-serif, system-ui, sans-serif;
/* --font-mono no longer means "monospace" — it's an alias for the body
sans so dates, numeric chips, and eyebrow labels stop reading as
terminal output. Code samples use --font-code (still Geist Mono). */
--font-mono: var(--font-sans);
--font-code: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}Want the actual prototype source? The private lab has the full repos.
Enter the lab