Pricing
Brutalist Pricing Card
A high-contrast pricing card with thick borders, hard shadows, monospace type, and raw layout energy.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a brutalist pricing card. Use a white or off-white background with a 3-4px solid black border and a hard 8px black shadow offset down-right. Typography should be mostly monospace or a grotesque sans-serif, with a giant price number, a small all-caps plan name, and a bulleted feature list using arrow symbols instead of checkmarks. Add a raw "BEST VALUE" tape-style banner in black with white text, rotated slightly. The CTA button should be black with white uppercase text and no border-radius. On hover, the card shifts 4px up-left and the shadow moves closer. Use Tailwind CSS. No gradients, no soft shadows.
Chinese Prompt
创建一个粗野主义定价卡片。使用白色或米白色背景,3-4px 纯黑实线边框,以及向右下方偏移的 8px 硬黑阴影。排版主要使用等宽字体或怪诞无衬线:巨大的价格数字、小字号全大写套餐名、使用箭头符号而非勾选标记的项目列表。添加一条原始的 "BEST VALUE" 胶带式横幅,黑底白字,稍微旋转。CTA 按钮应为黑底白字大写文本,无圆角。悬停时卡片向左上方移动 4px,阴影靠近。使用 Tailwind CSS。不使用渐变和柔和阴影。

Overview
A raw, opinionated pricing card that rejects soft gradients in favor of high contrast, hard edges, and typographic attitude.
Features
- Thick black border and hard offset shadow
- Monospace / grotesque typography
- Giant price number
- All-caps plan name
- Arrow-symbol feature list
- Rotated tape banner
- Zero border-radius CTA
- Hover shift and shadow transformation
Usage
Use for indie products, creative tools, or brands that want an anti-corporate, confident pricing presentation.
Customization
Modify the prompt to:
- Invert to black background with white border
- Add a second card beside it for comparison
- Use a hand-drawn style border instead of perfect lines
- Include a crossed-out original price