← Ash FoundryStyle Systems

Game Design System

FLIP7

Scoring Mini-Program

A retro-playful, teal-coral-gold design system for Flip7. The visual language is bold, joyful, tactile, and mobile-first — every element should feel like a game piece you want to tap.

Visual Direction

Inspired by the original Flip7 packaging, this system blends vintage warmth with modern mobile UX: fanned cards, cream ribbons, pill buttons, colored glow shadows, and celebratory state changes.

Mood
Retro, playful, tactile
Interaction
Bouncy, fast, tap-first
Surface
WeChat mini-program scoring UI

Typography & Shape

  • Headlines: system stack, 800 weight, generous letter spacing.
  • Display: 72rpx; h1: 48rpx; h2: 36rpx; body: 28rpx.
  • Base spacing: 8rpx; touch targets at least 72rpx.
  • Radius: 16–32rpx for cards; 999rpx for pills and badges.

Color Palette

Primary Teal#2BA8A2
Primary Light#3CC4BD
Primary Dark#1E8C86
Accent Gold#FFD23F
Coral / BOOM#EF6C4A
Cream#FFF8E7
Sky Blue#5DADE2
Success#27AE60

Core Components

Start Round+ AddBOOMFlip7
Standard Scoring ItemWhite card, teal left accent, 24rpx radius, soft teal glow.
Highlighted / First PlayerGold accent, golden gradient treatment, celebratory emphasis.
BOOM ActiveCoral accent, coral glow, pulse animation state.

Logo System

  • Five fanned cards behind the logo: -24°, -12°, 0°, 12°, 24°.
  • FLIP7 text rotated -3° inside a cream parallelogram.
  • “7” is oversized, gold, rotated 4–6°, with layered dark shadow stroke.
  • Ribbon banners use cream bodies, dark borders, folded side tails, and wide letter spacing.

Animation Rules

  • Micro-interactions stay under 500ms.
  • Primary buttons use active scale around 0.95.
  • Winner card glow pulses every 2s, subtle scale 1.0–1.03.
  • Victory confetti: 10 pieces, 3.2–4.5s fall with rotation.

Do / Don’t

  • Do use colored glow shadows for interactive elements.
  • Do use cream input surfaces and dashed section dividers.
  • Do use left-border accents for card state communication.
  • Don’t use plain black shadows on interactive elements.
  • Don’t rely on percentage heights in pseudo-elements inside flex children.