aiblueprint-cli 1.4.74 → 1.4.76

package/agents-config/skills/use-style/styles/split-auth.md

@@ -0,0 +1,281 @@
+# Split Auth Style
+
+Two-column authentication style for sign-in, signup, OAuth, magic-code, password reset, and account recovery screens. It is not a marketing homepage. It is a focused auth surface with a strong brand panel and a clean form panel.
+
+**Reference vibe:** premium SaaS auth page with a dark visual brand panel on the left and a quiet, high-clarity form on the right.
+
+---
+
+## Core vibe
+
+- **Split auth layout.** Desktop is two panels: visual brand story on one side, form task on the other. Mobile hides the visual panel and keeps the form first.
+- **One strong bitmap.** Use a real optimized image or generated bitmap as the visual panel background. Avoid SVG-only decoration.
+- **Quiet form column.** The form panel is white or token-card colored, with no nested card shell unless the app design system requires it.
+- **Brand line, not feature list.** The visual panel gets one concise positioning line and one support sentence.
+- **Monochrome OAuth.** Social buttons are black with white text and white icons. Do not use colored Google marks here.
+- **Compact verification.** OTP/code inputs are centered, stable size, and never stretch across the form width.
+
+---
+
+## Invocation aliases
+
+Use this style when the user says:
+
+- `/usestyle split-auth`
+- `$use-style split-auth`
+- `use split-auth`
+- `/usestyle signin 2pages`
+- `two-column auth`
+- `auth split`
+- `make the sign in page like the example`
+
+Normalize those to `split-auth`.
+
+---
+
+## Layout
+
+### Desktop shell
+
+Use a full viewport grid. Left panel is visual, right panel is task.
+
+```tsx
+<main className="grid min-h-screen bg-background text-foreground lg:grid-cols-[minmax(0,1.08fr)_minmax(420px,0.92fr)]">
+  <section className="relative hidden overflow-hidden bg-black lg:block">
+    <div className="absolute inset-0 bg-cover bg-center" />
+    <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(7,9,15,0.18),rgba(7,9,15,0.78))]" />
+    <div className="relative flex h-full min-h-screen flex-col justify-between p-12 text-white xl:p-16">
+      {brand}
+      {positioning}
+      {footer}
+    </div>
+  </section>
+  <section className="flex min-h-screen flex-col bg-card">
+    <header className="flex items-center justify-between px-5 py-4 sm:px-8 lg:px-10 lg:py-8" />
+    <div className="flex flex-1 items-center justify-center px-5 pb-10 pt-4 sm:px-8 lg:px-10 lg:py-12">
+      <div className="w-full max-w-[420px]">{form}</div>
+    </div>
+  </section>
+</main>
+```
+
+### Mobile shell
+
+- Hide the visual panel with `hidden lg:block`.
+- Keep brand logo in the top form header.
+- Use `px-5`, a max width of the full viewport, and enough top spacing to avoid feeling cramped.
+- Do not show the bitmap as a mobile background unless it improves readability.
+
+---
+
+## Visual panel
+
+### Background image
+
+Use one optimized bitmap:
+
+- Preferred formats: WebP or AVIF.
+- Target size: 1200-2200px wide for desktop visual panels.
+- Target weight: under 150 KB when possible.
+- If source is HEIC, PNG, or large JPG, convert before serving.
+- Use `background-size: cover` and `background-position: center`.
+
+### Overlay
+
+Add a dark overlay so white text stays readable:
+
+```tsx
+<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.18),transparent_28%),linear-gradient(180deg,rgba(7,9,15,0.18),rgba(7,9,15,0.78))]" />
+```
+
+### Brand lockup
+
+Small brand mark at the top, not a giant logo.
+
+```tsx
+<a className="flex w-fit items-center gap-3">
+  <span className="flex size-11 items-center justify-center rounded-xl border border-white/20 bg-white/10 shadow-lg shadow-black/20 backdrop-blur-md">
+    <Logo className="text-white" />
+  </span>
+  <span className="text-xl font-semibold">{Product}</span>
+</a>
+```
+
+### Positioning copy
+
+Use one direct brand line. Keep it literal and adapted to the product.
+
+Pattern examples:
+
+- `{Product} - the workspace your team finally enjoys.`
+- `{Product} - the calmer way to manage your work.`
+- `{Product} - everything important, without the noise.`
+
+Support copy examples:
+
+- `Access your workspace, pick up where you left off, and keep moving.`
+- `Secure sign-in for teams that need speed without clutter.`
+- `One account, one focused place for the work that matters.`
+
+---
+
+## Form panel
+
+### Heading block
+
+```tsx
+<div className="space-y-3">
+  <p className="text-sm font-medium text-primary">Welcome back</p>
+  <div className="space-y-2">
+    <h1 className="text-3xl font-semibold leading-tight text-foreground">
+      Sign in to {Product}
+    </h1>
+    <p className="text-sm leading-6 text-muted-foreground">
+      Use your email code or continue with a connected provider.
+    </p>
+  </div>
+</div>
+```
+
+### Inputs
+
+- Height: 44px.
+- Radius: 8px or existing design-system `rounded-lg`.
+- Background: panel background or app token `bg-background`.
+- Label: small, medium, high contrast.
+- Placeholder: practical, not playful.
+
+```tsx
+<Input
+  placeholder="you@example.com"
+  autoComplete="email"
+  size="lg"
+  className="h-11 rounded-lg bg-background"
+/>
+```
+
+### Primary action
+
+Use the app primary color. Keep it full width and stable height.
+
+```tsx
+<LoadingButton className="h-11 w-full rounded-lg">Send code</LoadingButton>
+```
+
+### Social buttons
+
+All OAuth buttons use the same monochrome treatment:
+
+```tsx
+<button className="h-11 w-full rounded-lg border-black bg-black text-white hover:bg-black/90 hover:text-white">
+  <GithubIcon className="text-white" />
+  <span className="text-white">Sign in with GitHub</span>
+</button>
+```
+
+Rules:
+
+- Icon must be white.
+- Text must be white.
+- Do not use colored Google icon segments.
+- Button fill stays black in light mode and dark mode.
+- Use `currentColor` SVGs when possible.
+
+### Divider
+
+Use thin lines and a centered lowercase `or`.
+
+```tsx
+<div className="flex items-center gap-6 text-sm">
+  <div className="h-px flex-1 bg-border" />
+  <span>or</span>
+  <div className="h-px flex-1 bg-border" />
+</div>
+```
+
+### OTP/code state
+
+Persist code-entry state in the URL when the user can leave and return from an email app.
+
+```tsx
+await navigate({
+  to: '/auth/signin',
+  search: { email, step: 'otp' },
+  replace: true,
+});
+```
+
+Compact code inputs:
+
+```tsx
+<InputOTP maxLength={6} containerClassName="justify-center">
+  <InputOTPGroup>
+    <InputOTPSlot index={0} className="size-10 bg-background" />
+    <InputOTPSlot index={1} className="size-10 bg-background" />
+    <InputOTPSlot index={2} className="size-10 bg-background" />
+    <InputOTPSlot index={3} className="size-10 bg-background" />
+    <InputOTPSlot index={4} className="size-10 bg-background" />
+    <InputOTPSlot index={5} className="size-10 bg-background" />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+Do not stretch OTP slots with `w-full justify-between`; that causes clipping on mobile.
+
+---
+
+## Auth page variants
+
+### Sign in
+
+- Eyebrow: `Welcome back`
+- Title: `Sign in to {Product}`
+- Description: `Use your email code or continue with a connected provider.`
+- Primary action: `Send code`
+- Secondary: OAuth buttons
+- Footer link: `No account yet? Create one`
+
+### Signup
+
+- Eyebrow: `Create your account`
+- Title: `Sign up to {Product}`
+- Description: `We just need a few details to get you started.`
+- Footer link: `You already have an account? Sign in`
+
+### Password reset
+
+- Icon in small muted square.
+- Title: `Reset your password`
+- Description: `Enter your email and we will send you a reset link.`
+- Primary action: `Send reset link`
+
+### Verify email
+
+- Centered icon, title, and one sentence.
+- No card wrapper.
+- Keep it inside the shared form panel.
+
+---
+
+## Anti-patterns
+
+- Do not add cards inside cards.
+- Do not use a marketing navbar on auth pages.
+- Do not use colored social icons in monochrome OAuth buttons.
+- Do not use stock-photo people unless the product specifically needs human trust imagery.
+- Do not put instructional text explaining how the UI works.
+- Do not use visible keyboard shortcut copy on auth pages.
+- Do not let OTP slots resize or shift on input.
+- Do not make the form column wider than 460px.
+
+---
+
+## Review checklist
+
+- The layout has two panels on desktop and one clean form panel on mobile.
+- The image is optimized and loads from a browser-friendly format.
+- Social buttons have white icons and white text.
+- Form controls have stable heights and no layout shift.
+- OTP state survives reload, tab switching, and return from email app when relevant.
+- Text does not overlap the visual background or preceding content.
+- Mobile screenshot has no clipped inputs, buttons, or OTP slots.

package/agents-config/skills/use-style/styles/stripe.md

@@ -0,0 +1,372 @@
+# Stripe Style
+
+Clean fintech product UI. Light, airy, trust-driven. Soft elevation over hard lines, blurple accent, rounded geometry.
+
+**Reference vibe:** Stripe Dashboard, Checkout, and docs. App panels, settings pages, payment forms.
+
+---
+
+## Core vibe
+
+- **Trust-first fintech.** Polished, premium, calm. Feels like money software, not a marketing funnel.
+- **Light canvas.** Off-white / pale blue background, white cards, dark navy ink.
+- **Soft elevation.** Subtle layered shadows define cards, NOT 1px borders. This is the key contrast with `grid` / `vercel-simple`.
+- **Rounded geometry.** `8px` cards, `6px` inputs/buttons, `radius-full` pills and avatars.
+- **Blurple accent.** `#635BFF` for primary actions, active states, links. Green (`#24B47E`) for success/confirm CTAs.
+- **Sans everywhere.** Clean grotesk (Inter / system / sohne). Mono only for card numbers, IDs, code.
+- **Generous whitespace.** Wide gutters, airy row padding, breathing room around values.
+
+---
+
+## Color
+
+Portable palette. Map to project tokens when available.
+
+| Role | Hex | CSS var (suggested) | Usage |
+|------|-----|---------------------|-------|
+| Canvas | `#F6F9FC` | `--sp-bg` | Page background (pale blue-gray) |
+| Surface | `#FFFFFF` | `--sp-surface` | Cards, panels, inputs |
+| Surface sunken | `#F7FAFC` | `--sp-sunken` | Inset blocks, table headers, hover rows |
+| Ink | `#0A2540` | `--sp-fg` | Headlines, primary values |
+| Slate ink | `#425466` | `--sp-slate` | Body copy, descriptions |
+| Muted ink | `#697386` | `--sp-muted-fg` | Metadata, labels, inactive tabs |
+| Subtle ink | `#8792A2` | `--sp-subtle-fg` | Placeholders, helper text |
+| Border | `#E3E8EE` | `--sp-border` | Input outlines, dividers, table lines |
+| Border strong | `#CFD7DF` | `--sp-border-strong` | Hover/focus outlines |
+| Primary | `#635BFF` | `--sp-primary` | Buttons, active tab, links, focus ring |
+| Primary hover | `#5249E0` | `--sp-primary-hover` | Button hover |
+| Primary surface | `#F5F4FF` | `--sp-primary-surface` | Active row / selected card tint |
+| Success | `#24B47E` | `--sp-success` | Confirm CTA, connected status, paid |
+| Warning | `#D97917` | `--sp-warning` | Pending, attention |
+| Error | `#DF1B41` | `--sp-error` | Failed, destructive |
+| Link | `#635BFF` | `--sp-link` | Text links |
+
+### Dark variant (Checkout dark, dashboards)
+
+| Role | Hex |
+|------|-----|
+| Canvas | `#0A2540` |
+| Surface | `#1A2B45` / `#15233B` |
+| Ink | `#FFFFFF` |
+| Muted ink | `#A3ACBA` |
+| Border | `#2A3A55` |
+| Primary CTA | `#24B47E` (green) or `#635BFF` |
+
+### Tailwind mapping (when no project tokens)
+
+```css
+:root {
+  --sp-bg: #f6f9fc;
+  --sp-surface: #fff;
+  --sp-fg: #0a2540;
+  --sp-slate: #425466;
+  --sp-muted-fg: #697386;
+  --sp-border: #e3e8ee;
+  --sp-primary: #635bff;
+  --sp-success: #24b47e;
+}
+```
+
+| Tailwind | Value |
+|----------|-------|
+| `bg-[#f6f9fc]` | Canvas |
+| `bg-white` | Card / surface |
+| `text-[#0a2540]` | Primary ink |
+| `text-[#697386]` | Muted |
+| `border-[#e3e8ee]` | Structure |
+| `bg-[#635bff]` | Primary action |
+| `bg-[#24b47e]` | Success CTA |
+
+**Rule:** Keep the layout neutral (navy/slate/gray) and reserve saturated color for actions, active state, and status. Blurple is the signature; use it deliberately, not everywhere.
+
+---
+
+## Typography
+
+### Font stacks
+
+| Role | Stack |
+|------|-------|
+| Sans (everything) | `Inter, "Sohne", ui-sans-serif, system-ui, -apple-system, sans-serif` |
+| Mono (card #, IDs, code) | `"Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace` |
+
+Load Inter via `@fontsource/inter` or `next/font`. Stripe's own face is "sohne"; Inter is the closest free substitute.
+
+### Scale
+
+| Level | Pattern |
+|-------|---------|
+| Page title | `text-2xl md:text-3xl font-semibold tracking-tight text-[#0a2540]` |
+| Section heading | `text-lg md:text-xl font-semibold text-[#0a2540]` |
+| Section label | `text-xs font-medium uppercase tracking-wide text-[#697386]` |
+| Body | `text-sm md:text-base leading-relaxed text-[#425466]` |
+| Large metric | `text-3xl md:text-4xl font-semibold tabular-nums text-[#0a2540]` |
+| Metadata | `text-xs text-[#697386]` |
+| Card number / ID | `font-mono text-sm tabular-nums text-[#0a2540]` |
+
+### Weight & tracking
+
+- Headlines: `font-semibold` (600), `tracking-tight`.
+- Body: `font-normal` (400), normal tracking, relaxed leading.
+- Labels: `font-medium` (500), light uppercase tracking.
+- Numbers: always `tabular-nums`.
+
+---
+
+## Layout tokens
+
+| Token | Value |
+|-------|-------|
+| `SP_SHELL` | `mx-auto w-full max-w-6xl px-4 sm:px-6 md:px-8` |
+| `SP_SHELL_NARROW` | `max-w-3xl` (settings, forms) |
+| `SP_SECTION` | `py-10 md:py-14 lg:py-16` |
+| `SP_CARD_PAD` | `p-5 sm:p-6 md:p-8` |
+| `SP_GAP_SECTION` | `space-y-8 md:space-y-10` |
+
+### App shell (dashboard)
+
+Top nav + horizontal tab bar + content on pale canvas. Optional right-rail app dock.
+
+```tsx
+<div className="min-h-screen bg-[#f6f9fc] text-[#0a2540]">
+  <header className="border-b border-[#e3e8ee] bg-white">
+    <div className={cn(SP_SHELL, "flex h-16 items-center justify-between")}>...</div>
+    <nav className={cn(SP_SHELL, "flex gap-1")}>{tabs}</nav>
+  </header>
+  <main className={cn(SP_SHELL, "py-8")}>...</main>
+</div>
+```
+
+### Settings / form shell (narrow)
+
+```tsx
+<main className={cn(SP_SHELL_NARROW, "py-12")}>
+  <nav className="mb-6 text-sm text-[#697386]">Settings › Authorized apps › <span className="text-[#635bff]">SuperTodo</span></nav>
+  <h1 className="text-3xl font-semibold tracking-tight">...</h1>
+  <div className="mt-8 space-y-8">{rows}</div>
+</main>
+```
+
+---
+
+## Borders, radius & elevation
+
+This is where Stripe diverges from the line-driven styles. **Cards float on soft shadows; borders are thin and quiet.**
+
+| Context | Radius | Border | Shadow |
+|---------|--------|--------|--------|
+| Card / panel | `rounded-lg` (8px) | none or `border-[#e3e8ee]` | `SP_SHADOW_CARD` |
+| Floating panel (app dock, popover) | `rounded-xl` (12px) | none | `SP_SHADOW_FLOAT` |
+| Input | `rounded-md` (6px) | `border-[#e3e8ee]` | `SP_SHADOW_INPUT` (inset-ish) |
+| Button | `rounded-md` (6px) | none | `SP_SHADOW_BTN` |
+| Tab / segmented item | `rounded-md` (6px) | none | none until active |
+| Pill / badge / avatar | `rounded-full` | optional | none |
+
+### Shadow tokens (Stripe's signature soft elevation)
+
+```css
+--sp-shadow-card:  0 1px 3px rgba(50,50,93,0.10), 0 1px 2px rgba(0,0,0,0.06);
+--sp-shadow-float: 0 7px 14px rgba(50,50,93,0.10), 0 3px 6px rgba(0,0,0,0.08);
+--sp-shadow-input: 0 1px 1px rgba(0,0,0,0.03);
+--sp-shadow-btn:   0 1px 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
+--sp-focus-ring:   0 0 0 3px rgba(99,91,255,0.25);
+```
+
+Tailwind arbitrary equivalents:
+
+```tsx
+// card
+className="shadow-[0_1px_3px_rgba(50,50,93,0.10),0_1px_2px_rgba(0,0,0,0.06)]"
+// floating panel
+className="shadow-[0_7px_14px_rgba(50,50,93,0.10),0_3px_6px_rgba(0,0,0,0.08)]"
+// focus
+className="focus:shadow-[0_0_0_3px_rgba(99,91,255,0.25)]"
+```
+
+Dividers: `border-t border-[#e3e8ee]`.
+
+---
+
+## Component patterns
+
+### Primary button (blurple)
+
+```tsx
+<button className="rounded-md bg-[#635bff] px-4 py-2.5 text-sm font-medium text-white shadow-[0_1px_1px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.08)] transition-colors hover:bg-[#5249e0]">
+  Save changes
+</button>
+```
+
+### Success CTA (green pay button)
+
+```tsx
+<button className="w-full rounded-md bg-[#24b47e] px-4 py-3 text-base font-semibold text-white transition-colors hover:bg-[#1f9e6e]">
+  Pay $24.90
+</button>
+```
+
+### Secondary button
+
+```tsx
+<button className="rounded-md border border-[#e3e8ee] bg-white px-4 py-2 text-sm font-medium text-[#0a2540] shadow-[0_1px_1px_rgba(0,0,0,0.04)] transition-colors hover:bg-[#f7fafc]">
+  Uninstall app
+</button>
+```
+
+### Input
+
+```tsx
+<input
+  className="w-full rounded-md border border-[#e3e8ee] bg-white px-3 py-2.5 text-sm text-[#0a2540] placeholder:text-[#8792a2] shadow-[0_1px_1px_rgba(0,0,0,0.03)] transition-shadow focus:border-[#635bff] focus:shadow-[0_0_0_3px_rgba(99,91,255,0.25)] focus:outline-none"
+  placeholder="orders@supertodo.me"
+/>
+```
+
+### Tab bar (horizontal nav)
+
+Active: blurple pill background + white/dark text. Inactive: muted, transparent.
+
+```tsx
+<button className={cn(
+  "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+  active ? "bg-[#635bff] text-white" : "text-[#425466] hover:bg-[#f7fafc]"
+)}>Home</button>
+```
+
+### Card
+
+```tsx
+<div className="rounded-lg bg-white p-6 shadow-[0_1px_3px_rgba(50,50,93,0.10),0_1px_2px_rgba(0,0,0,0.06)]">
+  ...
+</div>
+```
+
+### Metric block (dashboard "Today")
+
+```tsx
+<div>
+  <p className="text-sm font-medium text-[#697386]">Gross volume</p>
+  <p className="mt-1 text-3xl font-semibold tabular-nums text-[#0a2540]">$12,198.72</p>
+  <p className="mt-1 text-xs text-[#8792a2]">1:00 PM</p>
+</div>
+```
+
+### Status pill
+
+```tsx
+// success
+<span className="inline-flex items-center gap-1.5 rounded-full bg-[#ecfdf5] px-2.5 py-0.5 text-xs font-medium text-[#24b47e]">
+  <span className="h-1.5 w-1.5 rounded-full bg-[#24b47e]" /> Connected
+</span>
+```
+
+### Sidebar info panel (settings right rail)
+
+```tsx
+<aside className="rounded-lg bg-[#f7fafc] p-6 text-sm">
+  <p className="text-xs font-medium uppercase tracking-wide text-[#697386]">Version</p>
+  <p className="mt-1 text-[#0a2540]">v1.4.2</p>
+</aside>
+```
+
+### Radio / toggle row
+
+```tsx
+<label className="flex items-center gap-2 text-sm text-[#0a2540]">
+  <input type="radio" className="accent-[#635bff]" /> Yes
+</label>
+```
+
+### Floating app panel (dock popover)
+
+```tsx
+<div className="rounded-xl bg-white shadow-[0_7px_14px_rgba(50,50,93,0.10),0_3px_6px_rgba(0,0,0,0.08)]">
+  <header className="flex items-center justify-between rounded-t-xl bg-[#ec4899] px-4 py-3 text-white">...</header>
+  <div className="p-6">...</div>
+</div>
+```
+
+---
+
+## Hero / marketing (Stripe.com style)
+
+When building a marketing page rather than a product UI:
+
+- **Diagonal gradient hero.** The famous angled blurple-to-cyan band. Skew a colored block behind the content.
+- Gradient: `linear-gradient(101deg, #635bff 0%, #00d4ff 100%)` or the warmer `#a960ee → #ff333d → #ffcb57`.
+- Light content on top, then white cards float over the seam.
+
+```tsx
+<section className="relative overflow-hidden bg-[#f6f9fc]">
+  <div className="absolute inset-0 origin-top-left -skew-y-6 bg-[linear-gradient(101deg,#635bff,#00d4ff)]" />
+  <div className="relative mx-auto max-w-6xl px-6 py-32 text-white">...</div>
+</section>
+```
+
+Keep this for marketing only. Product/app UIs stay flat pale-blue, no gradient.
+
+---
+
+## Charts (fintech data viz)
+
+Soft, light, blurple-led - the Stripe dashboard look:
+
+- Series as a **blurple ramp**: `#635bff → #9b96ff → #cdcaff → #e9e8ff`. The primary/highlighted series is full blurple `#635bff`; supporting series fade toward light lavender.
+- Use `#24b47e` (green) for explicitly positive/paid series, `#df1b41` for negative, sparingly.
+- **Rounded bars** (`borderRadius: 6-8`), flat fills, no gradients or glow.
+- Background stays white/`#f6f9fc`; gridlines `#e3e8ee`; axis text sans (`Inter`), muted `#697386`, tabular nums.
+- Tooltip: navy `#0a2540` background, white text, `8px` corners.
+- Doughnut: white segment stroke (`#fff`), `60-62%` cutout; legend in sans.
+
+```js
+const PRIMARY="#635bff", S2="#9b96ff", S3="#cdcaff", S4="#e9e8ff", GRID="#e3e8ee";
+Chart.defaults.font.family = "Inter, system-ui, sans-serif";
+Chart.defaults.color = "#697386";
+// bars: backgroundColor:[S2, PRIMARY], borderRadius:6
+// grid: { color: GRID }
+// tooltip: { backgroundColor:"#0a2540", cornerRadius:8 }
+```
+
+---
+
+## Motion & effects
+
+- Soft shadow IS the depth language - keep it; do not strip it like in `grid`/`vercel-simple`.
+- Hover: slight bg shift (`#f7fafc`), darker fill on primary buttons, never scale-jump.
+- Focus: 3px blurple ring (`rgba(99,91,255,0.25)`) on inputs and focusable controls. Always visible.
+- `transition-colors duration-150` on interactive elements; `transition-shadow` on inputs.
+- Subtle card lift on hover is OK for clickable cards: shadow `card → float`.
+- No glow halos, no neon, no glass blur on product surfaces.
+
+---
+
+## Mode selection
+
+| Surface type | Background | Accent | Notes |
+|--------------|------------|--------|-------|
+| Dashboard / app UI | `#f6f9fc` flat | blurple | shadows + rounded, tabular nums |
+| Settings / forms | `#f6f9fc`, white cards | blurple | narrow shell, breadcrumb nav |
+| Checkout / payment | white OR dark navy | green CTA | rounded inputs, payment-method tabs |
+| Marketing / landing | gradient hero + white | blurple | diagonal skew band |
+
+---
+
+## Anti-patterns
+
+| Avoid | Why |
+|-------|-----|
+| `rounded-none` / sharp corners on cards | Stripe is soft and rounded, not blueprint-square |
+| Removing shadows in favor of 1px borders only | Elevation is the core depth language here |
+| Pure black `#000` background | Use navy `#0a2540` for dark, pale `#f6f9fc` for light |
+| Blurple on large fills / backgrounds | Reserve it for actions and active state |
+| Mono for body text | Sans for prose; mono only for card #, IDs, code |
+| Heavy `shadow-2xl` drop shadows | Use the layered soft tokens, not one big blur |
+| Gradient on product/app surfaces | Gradient is marketing-hero only; product stays flat |
+| Skipping the focus ring | Fintech trust UI must keep visible focus states |
+| Saturated multi-color UI | Keep layout neutral; one accent + status colors |
+
+---
+
+## Project overrides
+
+If the repo defines `.agents/styles/stripe.md` or `.agents/styles/stripe-theme.md`, prefer those tokens and components over this portable spec.