菜单
Remix. Stripe's grid + A24's poster boldness. For pitch decks, investor sites, premium fintech that needs to feel less corporate. Use when building UI components, applying design tokens, or implementing visual styles for remix stripe x a24.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Choose a 3D generation or reconstruction pipeline given input type, output format, and use case. Use when you need help with 3d pipeline.
|. Use when you need help with 8 bit orbit video template.
Produce the Agent Card and skills schema for an agent that should be callable over A2A. Use when you need help with a2a agent spec.
Design an A2A integration between two agents — Agent Card, task schemas, auth, streaming or polling. Use when you need help with a2a integrator.
Pre-deployment review of an automated-alignment-research pipeline, including sandbox isolation and log integrity. Use when you need help with aar deployment review.
Design an LLM A/B test — pick platform (Statsig or GrowthBook), primary metric, guardrails, sample size with LLM-noise buffer, CUPED, sequential stopping, and multiple-comparison correction. Use when you need help with ab plan.
| name | acd-remix-stripe-x-a24-design |
| description | Remix. Stripe's grid + A24's poster boldness. For pitch decks, investor sites, premium fintech that needs to feel less corporate. Use when building UI components, applying design tokens, or implementing visual styles for remix stripe x a24. |
| license | CC-BY-NC-SA-4.0 |
| metadata | {"risk":"unknown","source":"community","kind":"mode","category":"design-systems","tags":["design-system","ui","remix","claude-design"]} |
You are an expert in the Stripe × A24 — Fintech Pitch With Personality aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.
Remix. Stripe's grid + A24's poster boldness. For pitch decks, investor sites, premium fintech that needs to feel less corporate.
Stripe geometry holds the page; A24 makes the hero feel like a film poster. Layout is rigorously gridded, but headlines run oversized in A24's editorial display serif and sit on full-bleed image plates. CTAs stay Stripe — the trust signal cannot break.
Mood: confident, cinematic, financial-trust-preserving.
/* base from Stripe */
--bg: #ffffff
--bg-alt: #f6f9fc
--surface: #ebeef3
--text: #0a2540 /* Stripe deep navy */
--text-muted: #425466
--border: #e3e8ee
/* dark from A24 — film-poster black */
--bg-dark: #000000
--bg-dark-alt: #0a0a0a
--text-dark: #ffffff
--text-dark-muted: rgba(255,255,255,0.72)
/* accent from Stripe — preserves trust */
--accent: #635bff
--accent-hover: #5048e5
/* accent from A24 — used on dark-mode hero only */
--accent-warm: #f4ede4 /* warm cream — A24 print-stock palette */
--accent-pop: #d9351c /* deep film red — used once per page max */
Arbitration: A24's iconic black background wins on hero plates. Stripe's white wins on app, pricing, docs. Stripe purple stays as primary CTA across both modes — replacing it kills the fintech trust signal. A24 red is allowed once per page as a callout (asterisk, sale tag, single label).
Söhne Breit weight 600 OR a free A24-adjacent display serif like Fraunces weight 600 — set at 96px+ for poster effect.Söhne (Stripe). Weight 400/500/600.Söhne Mono for numerals.Scale: Stripe's marketing ramp, extended at the top for A24 hero. 12 / 14 / 16 / 18 / 22 / 28 / 36 / 56 / 96 / 144.
Display serif allowed at 56px+ only. Anything smaller stays Söhne for legibility.
Buttons
--accent (Stripe purple) fill, white text, radius 6, padding 10/16, weight 500.--text color, 1px --border, white fill.--text-dark, 1px rgba(255,255,255,0.24), transparent fill.Hero plates
--bg-dark), display serif headline, single image or generative still. Stripe's grid still holds — text starts at column 2, ends at column 11.Cards
--bg fill, 1px --border, radius 12, no shadow.--bg-dark-alt with 1px rgba(255,255,255,0.12).Inputs
--surface fill, 1px --border, radius 6, padding 10/12.--accent ring, 2px offset.Pricing tables
Stripe's grid governs everything.
A24 contribution: full-bleed image / black panels break the column grid horizontally — vertical rhythm still respects 8px multiples.
Flat. Border depth on light, alpha-border on dark. Shadows reserved for popovers (0 4px 12px rgba(10,37,64,0.08) on light, 0 12px 32px rgba(0,0,0,0.7) on dark hero).
A24 contributes no shadows — its design is fundamentally print, not screen-elevated.
Do
Don't
Bias: Stripe grid + Söhne UI everywhere, full-bleed black A24 hero plates, display serif at 56px+, Stripe purple as the only CTA color, A24 red sparingly, tabular pricing.
Reject: display serif in UI controls, A24 red as CTA, multi-color accent palettes, abandoning the column grid in app surfaces, pastel Stripe substitutes.
Tokens traced:
--text, --accent purple, button geometry, card radius 12, marketing 1180 max, app 1440, focus ring, light surface palette, mono pricing)Net DNA: Stripe 50% · A24 50%.