Flip7 Design System
Retro-playful, teal-coral-gold design system crafted for the Flip7 card game scoring mini-program. Inspired by the original packaging, combines vintage warmth with modern mobile UX, creating bold, joyful, tactile elements.
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.
Retro-playful, teal-coral-gold design system crafted for the Flip7 card game scoring mini-program. Inspired by the original packaging, combines vintage warmth with modern mobile UX, creating bold, joyful, tactile elements.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Section Titles
default
Logo (Setup Page Header)
default
7_digit
Elevation & Depth
Do's & Don'ts
Do
Don't
Animations
### Confetti (Victory)
• 10 pieces, varied sizes/shapes/colors, 3.2-4.5s fall with rotation
### Crown Bounce
• 1.5s infinite, 4-step keyframe with rotation wobble
### Glow Pulse (Winner Card)
• 2s infinite, opacity 0.5-1.0, scale 1.0-1.03
### BOOM Pulse
• 2s infinite, border/shadow oscillation
---
Use with MCP
Don't have the MCP? Install it here