Fintech · ~4K tokens

Infrastructure Fintech (Stripe Docs)

Reads like infrastructure documentation that wants to feel approachable: a cool-blue ink palette anchored at `{colors.brand.ink}` (#414552) on white, two indi…

Fintech & Moneylightmaximalwarm

Infrastructure Fintech (Stripe Docs) — AI-built sample

what your AI builds

Reference · your version

Left: the reference.
Right: what your AI builds.

Same prompt. Same model. With this pack attached, the output stays in the aesthetic instead of drifting toward the default.

Infrastructure Fintech (Stripe Docs) — source

Infrastructure Fintech (Stripe Docs) — output

What’s in this pack

Everything you need to drop in and build.

Each Magpie pack ships as a self-contained folder. Drop it in your project, paste the README into your AI tool, prompt your site as normal.

STYLE.md
The complete design system as AI-readable instructions. Tokens, type, motion, voice. Tool-agnostic.
Reference screenshots
The source pages we studied, captured at 2x. Use them as moodboard or paste into vision-capable tools.
Tool drop-ins
Pre-written instructions for Cursor, Claude Code, Lovable, v0, Bolt, Replit, Windsurf, Continue, Codex.

infrastructure-fintech/STYLE.md

preview

01# Infrastructure Fintech (Stripe Docs)02> Inspired by Stripe Docs (https://docs.stripe.com)0304## Voice05- Tone: light, maximal, warm06- Personality: Reads like infrastructure documentation that wants to feel approachable: a cool-blue ink palette anchored at `{colors.brand.ink}` (#414552) on white, two indi…0708## Tokens09### Colour10- background: #FFFFFF11- surface:    #ECF1F612- ink:        #41455213- accent:     #5E6AD214- muted:      #6973861516### Type17- display: Inter Display18- body:    Inter19- mono:    JetBrains Mono2021### Spacing22- base unit: 4px23- section: 96 / 160 / 22424- container max: 1320px2526## Motion—— Get the pack to see the rest ——