SwipeCard Design System
SwipeCard is a card-swiping, decision-focused design system crafted for Tinder-style card-based selection apps. It centers the experience on large, visually rich cards with generous rounded corners and dramatic stacked shadows that create physical depth. The pink-green-red palette maps directly to accept, like, and reject actions. Every component is designed for rapid, gestural decision-making with satisfying visual feedback on each swipe.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxSwipeCard is a card-swiping, decision-focused design system crafted for Tinder-style card-based selection apps. It centers the experience on large, visually rich cards with generous rounded corners and dramatic stacked shadows that create physical depth. The pink-green-red palette maps directly to accept, like, and reject actions. Every component is designed for rapid, gestural decision-making with satisfying visual feedback on each swipe.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here