feat:移除了弹窗,服务器添加sls
This commit is contained in:
@ -0,0 +1,62 @@
|
||||
# Style Family: playful
|
||||
|
||||
**Signature**: Rounded, saturated, bouncy motion, illustrative, friendly.
|
||||
**Reference products**: Duolingo, MailChimp, Slack early, Notion early, Headspace.
|
||||
**Best for**: education, consumer apps with onboarding, kids products, gamification, habit/lifestyle apps.
|
||||
|
||||
## Token defaults
|
||||
|
||||
### Color
|
||||
- **Primary**: saturated and friendly — coral, teal, sunny yellow, grass green. Avoid muted enterprise blues.
|
||||
- **Palette**: 2–3 accent colors are encouraged (the "single primary" rule from other families is relaxed).
|
||||
- **Background**: warm off-white or soft tinted background; pure white feels sterile here.
|
||||
- **Avoid in this family**: cool grays, navy/charcoal, monochrome palettes.
|
||||
|
||||
### Typography
|
||||
- **Heading**: friendly humanist sans or rounded sans — Nunito, Quicksand, Poppins, Fraunces (soft serif), Inter Display (rounded variant).
|
||||
- **Body**: rounded humanist sans — Nunito, DM Sans, Manrope, Open Sans (yes, even this one).
|
||||
- **Weight**: medium-to-bold for headings (600+). Light weights look fragile.
|
||||
|
||||
### Radius
|
||||
- **Generous**: 12 / 16 / 24 px. Pills and full-rounded buttons are common and *correct* here.
|
||||
|
||||
### Spacing
|
||||
- 4px base, scale 4 / 8 / 16 / 24 / 32 / 48.
|
||||
- Density: balanced. Generous touch targets (mobile-friendly).
|
||||
|
||||
### Shadow
|
||||
- **Soft and tinted**: shadows often inherit a hint of the surface or primary color, not pure black.
|
||||
- Multiple elevation tiers welcome.
|
||||
|
||||
### Motion
|
||||
- **Bounce is encouraged.** Spring physics, elastic easing, micro-celebrations on success.
|
||||
- Lottie illustrations are in family.
|
||||
- Empty states and 404 pages are opportunities for character, not minimalism.
|
||||
|
||||
## Anti-patterns *within this family*
|
||||
|
||||
- Sharp corners (0–4px) on primary surfaces.
|
||||
- Pure black or pure gray text on white. Use a slightly warm dark color.
|
||||
- Geometric sans like Geist or Inter as body — too cold.
|
||||
- Flat illustrations with no character.
|
||||
- Skipping the empty state — playful family thrives on personality in edge cases.
|
||||
- Rigid grid alignment with no asymmetry.
|
||||
|
||||
## Typical surfaces
|
||||
|
||||
This family does well on:
|
||||
- Onboarding flows
|
||||
- Consumer mobile apps
|
||||
- Education products
|
||||
- Streak / progress / gamification surfaces
|
||||
- Marketing for B2C
|
||||
|
||||
This family does poorly on:
|
||||
- B2B dashboards used 8 hours a day (the personality wears)
|
||||
- High-stakes interfaces (medical, financial trades)
|
||||
- Enterprise procurement processes
|
||||
- Long-form reading (rounded body fonts fatigue)
|
||||
|
||||
## Notes
|
||||
|
||||
There's a cliff between "friendly" and "infantilizing". For adult-targeted products in serious domains (finance, healthcare), `playful` is usually the wrong family — but `warm-content` may give the same warmth without the gamification feel.
|
||||
Reference in New Issue
Block a user