SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsui-craft-playful

ui-craft-playful

General & other

View repository

Updated 10-16 05:07

About this skill

UI Craft — Playful

Pre-committed playful style: friendly-pop, Clay / Gumroad / Duolingo / Arc Browser. Warmth via spring motion, generous radii, and saturated-but-tuned multi-accents.

Knobs (locked)

  • CRAFT_LEVEL = 8 — playful without craft reads as childish; Polish Pass mandatory.
  • MOTION_INTENSITY = 7 — spring-heavy, entrance stagger, page transitions allowed. Motion carries the personality.
  • VISUAL_DENSITY = 4 — moderate. Cards breathe, but layout has rhythm and variety.

Do not re-ask these in Discovery. Confirm primary accent + whether dark mode is in scope.

Style anchors

  • Bouncy-but-legible sans (Satoshi, General Sans, Inter 600/700 on headlines). Rounded feel, never system font.
  • Multi-accent allowed (max 3 per viewport) — one primary, pair warm + cool. Saturated OKLCH, tuned not neon.
  • Generous radii — rounded-2xl cards, rounded-full buttons, rounded-3xl hero containers.
  • Spring motion (stiffness 200-300, damping 20-25). Overshoot, never bounce easing.
  • Soft colored shadows instead of flat elevation.
  • Subtle texture or gradient mesh backgrounds — noise filter, not decorative orbs.
  • Custom / abstract illustrations welcome; never stock emoji or generic Figma illustrations.
  • Warmth comes from motion + color pairing, not clutter.

Base rules (inherited)

All rules in ../ui-craft/SKILL.md apply. This file overrides knob defaults and adds style-specific guidance below. The anti-slop and craft tests still apply in full.

Style-specific overrides

Typography

  • Display + UI: Satoshi, General Sans, or Inter. Headlines at 600-700. Never system-ui as primary.
  • Body: same family at 400-500, text-wrap: pretty, leading 1.55-1.65.
  • Headings: tracking-tight on 32px+, text-wrap: balance.
  • Numeric: tabular-nums in metrics, never in prose.
  • No two sans families. No monospace in chrome (labels OK).

Color

  • Saturated OKLCH, chroma 0.15-0.20, lightness 65-75%. Tune for screens, not for print.
  • Pair warm + cool — e.g. oklch(72% 0.18 30) coral + oklch(68% 0.16 240) blue. One primary, one support, one optional accent.
  • Canvas: warm off-white oklch(98% 0.01 85) or soft cool oklch(98% 0.005 250). Never pure #fff.
  • Dark mode: lift surface to oklch(18% 0.01 250), keep accents above 60% lightness.

Borders, radii & elevation

  • Radii scale: inputs rounded-xl (12px), cards rounded-2xl (16px), hero containers rounded-3xl (24px), buttons rounded-full.
  • Vary radii by element size — small chips rounded-lg, oversized heroes rounded-[32px].
  • Shadows: soft + colored, tinted by the element's accent. Example: shadow-[0_8px_32px_-8px_oklch(70%_0.15_250/0.3)].
  • Borders only for inputs and dividers, 1px, low-chroma. Don't double borders + shadows on the same element.

Background & texture

  • Subtle grain noise (3-5% opacity SVG) or a wide, low-contrast gradient mesh on hero sections.
  • Not decorative blobs, floating orbs, or rainbow gradients. Keep the palette.

Motion (the personality)

  • Springs: stiffness 200-300, damping 20-25. Overshoot feels alive; avoid ease-in-out bounce keyframes.
  • whileHover scale 1.02-1.04 on cards is in-style here; press state 0.98 with spring.
  • Entrance stagger 40-60ms per child, fade + translate 8-12px.
  • Page transitions allowed — shared layout or simple fade/slide at 200-260ms.
  • Always honor prefers-reduced-motion — swap springs for 150ms fades.

Composition

  • Hero: single bold headline, generous padding, one illustration or product shot, colored soft shadow underneath. Asymmetric chip or sticker accent is on-brand.
  • Feature sections: varied — avoid 3-up uniform icon grids. Mix sizes, offset cards, use a large card + two small.
  • Buttons: rounded-full, accent fill, white label, subtle colored shadow. Hover lifts 2-3px + saturates.
  • Illustrations: custom abstract shapes, isometric or 2.5D if done well. Never generic Figma kits.

Reference files to read first

Load these from ../ui-craft/references/:

  • color.md — OKLCH tuning, multi-accent discipline, dark mode
  • animation-orchestration.md — spring physics, stagger, entrance choreography
  • typography.md — weight, tracking, text-wrap
  • layout.md — rhythm, asymmetry, hero composition

Skip dashboard.md unless the user explicitly wants a playful admin tool.

Anti-patterns for THIS style

  • Bounce easing (cubic-bezier with overshoot >1.3). Use overshoot springs instead.
  • Emoji spam in UI labels, buttons, or headlines. One in the hero tagline is the hard limit.
  • Comic Sans, Fredoka, or other "childish" fonts. Playful is friendly, not juvenile.
  • Glassmorphism on everything. One panel max; avoid as default chrome.
  • More than 3 accent colors per viewport — reads as rainbow, not playful.
  • Rainbow gradients across the whole page. Pair two tuned accents max.
  • Pure #fff canvas with flat #000 shadows — kills the warmth the palette builds.
  • Uniform rounded-xl everywhere — vary radii by element size.
  • Stock Figma illustration kits or open-peeps style characters.
  • Scroll-jacking, parallax, or cursor-following blobs. Motion serves interaction, not spectacle.