name: pebbly-design
version: alpha
description: >
  Pebbly is a kids' virtual-pet companion app ("Globey") rendered as a cozy,
  claymorphic snow-globe world. The surface is a soft pastel sky-mesh
  (`#DDF1F7`→`#B6DFEA`) bloomed with pink, mint, and butter radial glows. Four
  candy "voltages" — cyan `#B6DFEA`, pink `#F7B9D0`, mint `#B8E2C0`, butter
  `#F6E08A` — sit on a single warm cocoa ink `#5A3A2A` that does all the text,
  outlines, and the wooden globe base. The signature move is layered "clay"
  shadows: every card and button has an inset top highlight, an inset bottom
  lip, and a hard offset drop so it reads as soft puffy plastic. Type pairs an
  ultra-bold display Fraunces serif with a rounded Nunito body. Geometry is
  extremely round — big 28–36px radii and full pills everywhere — and the
  centerpiece is a 520px glass snow globe with falling snow, a floating island,
  and a breathing creature mascot.
colors:
  # Brand / Voltages (the four candy fills)
  cyan: '#B6DFEA'        # primary sky voltage; action "Rest", globe sky, modal gate panel
  pink: '#F7B9D0'        # creature + "Feed"/Hunger voltage; cheeks, meter fills
  mint: '#B8E2C0'        # "Learn"/Mood voltage; happy chip
  butter: '#F6E08A'      # "Play" voltage; Lv badge, quest accents, sparkles
  cyan-deep: '#7CC4D5'   # deeper cyan for globe glow / gradient stops
  pink-deep: '#E89AB8'   # deeper pink for meter-fill gradient end
  # Surface
  cream: '#FFF8F0'       # clay card fill, tab pill, numpad keys, button text on ink
  cream-warm: '#FAF3EA'  # parent-dashboard panel surface
  paper-tan: '#F0E6DC'   # grown-ups teaser card fill
  quest-cream: '#FFF1DD' # today's-quest card fill
  # Text / Ink
  ink: '#5A3A2A'         # all headings, body, outlines, wooden base, toggles
  # Hairlines / Edges
  card-edge: '#FFFFFF'   # 3–4px white borders on bubble-meter & scenery cards
  # Semantic accents (icon tints)
  star-gold: '#E8B84A'   # ti-star-filled, sparkles
  flame-orange: '#E8893A'# ti-flame, ti-sun
  # Gradient stops (globe / island)
  globe-top: '#DCF1F7'   # globe sky gradient top
  globe-bottom: '#9AD1E0'# globe sky gradient bottom
  wood-top: '#6B4530'    # wooden base gradient top
  wood-bottom: '#432A1E' # wooden base gradient bottom
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(20px, 40px, 56px)
    fontWeight: 900
    letterSpacing: -0.01em
  body:
    fontFamily: "'Nunito', sans-serif"
    fontSize: 16px
    fontWeight: 700
  stat:
    fontFamily: "'Nunito', sans-serif"
    fontSize: 18px
    fontWeight: 800
  eyebrow:
    fontFamily: "'Nunito', sans-serif"
    fontSize: 15px
    fontWeight: 800
    letterSpacing: 0.05em
    textTransform: uppercase
rounded:                  # radius scale
  sm: 16px                # rounded-2xl numpad keys, toggle pills
  md: 24px                # rounded-3xl scenery cards, logo tile
  lg: 28px                # clay cards & action buttons
  xl: 32px                # bento cards
  xxl: 36px               # modal shell & wooden base
  full: 9999px            # pills, meters, snow dots
spacing:                  # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  huge: 40px
components:
  clayCard:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    rounded: '{rounded.lg}'
    padding: '20px'
    elevation: 'inset top highlight + inset bottom lip + hard offset drop + soft blur'
  bubbleMeter:
    backgroundColor: 'rgba(255,255,255,0.65)'
    border: '3px solid {colors.card-edge}'
    textColor: '{colors.ink}'
    rounded: '{rounded.lg}'
    padding: '16px'
    elevation: 'inset highlights + soft drop + backdrop-blur(4px)'
  actionButton:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.lg}'
    padding: '20px 0'
    note: 'inner 64px round icon disc tinted with the voltage (pink/butter/cyan/mint)'
  tabPill:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.stat}'
    rounded: '{rounded.full}'
    padding: '12px 24px'
    activeBackgroundColor: '{colors.ink}'
    activeTextColor: '{colors.cream}'
  statPill:
    backgroundColor: 'rgba(255,255,255,0.65)'
    textColor: '{colors.ink}'
    typography: '{typography.stat}'
    rounded: '{rounded.full}'
    padding: '8px 20px'
  fillBar:
    backgroundColor: 'rgba(90,58,42,0.08)'
    rounded: '{rounded.full}'
    height: '14px'
    note: 'fill is a voltage gradient, e.g. linear-gradient(90deg,{colors.pink},{colors.pink-deep})'
  sceneryCard:
    border: '4px solid {colors.card-edge}'
    rounded: '{rounded.md}'
    selectedBorder: '4px solid {colors.ink}'
    elevation: 'hard offset drop; selected swaps drop to ink'
  bentoCard:
    textColor: '{colors.ink}'
    rounded: '{rounded.xl}'
    padding: '24px'
    elevation: 'inset bottom lip + double hard offset drop'
  primaryButton:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.stat}'
    rounded: '{rounded.sm}'
    padding: '16px 20px'
    label: 'Unlock →'
  numpadKey:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.stat}'
    rounded: '{rounded.sm}'
    padding: '16px 0'
    elevation: 'inset bottom lip + hard offset drop'
  toggle:
    onBackgroundColor: '{colors.ink}'
    offBackgroundColor: 'rgba(90,58,42,0.15)'
    knobColor: '{colors.card-edge}'
    rounded: '{rounded.full}'
motion:
  breathe: 'mascot scale 1→1.04 + translateY -4px, 5s ease-in-out infinite (~12bpm)'
  blink: 'eye scaleY 1→0.1 at 95%, 4s infinite'
  jiggle: 'meter scale 1→1.05, 2.4s ease-in-out infinite (staggered .3s)'
  floatCloud: 'translateX 0→20px, 9s / 12s-reverse ease-in-out infinite'
  fall: 'snow translateY -30px→420px + rotate 360, linear infinite (6–12s)'
  twinkle: 'sparkle scale 0.6→1.1 + rotate 180, 2.2s ease-in-out infinite'
  globeTilt: 'anime.js createAnimatable rotateX/rotateY ±14deg on pointermove'
  confetti: 'anime.js — 18 particles burst on action-btn click + outBack squish'
icons:
  library: Tabler icons-webfont (ti) + inline hand-drawn SVG glyphs
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.ink}'

Pebbly

pebbly-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Pebbly is the design system behind "Globey," a cozy virtual-pet app for children built around a glass snow globe. The whole surface is a soft pastel sky: a bg-mesh that stacks pink (#F7B9D0), mint (#B8E2C0), and butter (#F6E08A) radial blooms over a #DDF1F7→#B6DFEA sky gradient, with ambient clouds, twinkle stars, and falling snow drifting across it. Four candy "voltages" — cyan, pink, mint, butter — carry all the play, while a single warm cocoa ink #5A3A2A does every job that needs contrast: headings, body copy, SVG outlines, toggles, primary buttons, and the wooden globe pedestal. The signature move is claymorphism: the .clay recipe layers an inset top highlight (inset 0 4px 0 rgba(255,255,255,0.9)), an inset bottom lip (inset 0 -6px 0 rgba(90,58,42,0.10)), a hard offset drop (0 8px 0 rgba(90,58,42,0.08)), and a soft blur — so every card and button reads as puffy, pressable plastic. Type pairs an ultra-bold optical-size Fraunces serif (font-weight:900, opsz 9) for display with a chunky rounded Nunito (700/800) for body and stats. Geometry is relentlessly round: 28px clay cards, 32px bentos, 36px modal/base, and full pills for meters and tabs. The centerpiece is a 520px globe-shell glass sphere holding a floating grass island and a breathing, blinking pink creature mascot.

Colors

Brand / voltages. Four candy pastels do all the color play, each tied to a care action: cyan --cyan #B6DFEA (Rest, globe sky), pink --pink #F7B9D0 (Feed, the creature itself, Hunger meter), mint --mint #B8E2C0 (Learn, Mood, the Happy chip), and butter --butter #F6E08A (Play, the Lv badge, quest accents, sparkle dots). Deeper companions --cyan-deep #7CC4D5 and --pink-deep #E89AB8 appear only as gradient end-stops (globe glow, meter fills).

Surface. Cards use a warm off-white #FFF8F0 (cream) as the .clay fill, also reused for tab pills, numpad keys, and as text color when sitting on ink. The parent dashboard panel is #FAF3EA (cream-warm); the grown-ups teaser card is #F0E6DC (paper-tan); today's-quest card is #FFF1DD (quest-cream).

Text / ink. Everything readable is one color: --ink #5A3A2A, a warm cocoa brown. It is the heading and body color, every inline-SVG stroke, the active tab fill, primary buttons, toggle "on" tracks, and the gradient base of the wooden pedestal (#6B4530→#5A3A2A→#432A1E).

Hairlines. Depth comes from white edges, not gray borders: bubble-meter has a 3px solid #fff border and scenery-card a 4px solid #fff; a selected scenery card swaps that border to ink.

Semantic accents. Icon tints carry tiny pops of warmth: star gold #E8B84A (stars, sparkles), flame/sun orange #E8893A (streak flame, beach sun).

Gradient stops. The globe sky runs #DCF1F7→#B6DFEA→#9AD1E0; meter fills are voltage gradients (e.g. #F7B9D0→#E89AB8); scenery thumbnails each get their own two-stop pastel gradient.

Typography

Two web fonts loaded via Google Fonts @import: Fraunces (opsz,wght@9..144,900 — used at optical size 9, weight 900, tracking -0.01em) for all display headings, and Nunito (500;700;800) for body (700, .font-body) and stats/eyebrows (800, .font-stat). Fraunces is a soft high-contrast serif; a close open-source substitute is already open-source. Nunito is a rounded humanist sans; substitute with Quicksand or Baloo 2 if unavailable.

Token	Size	Weight	Tracking	Usage
display	20–56px (28/40/56)	900	-0.01em	App name, card titles, big numbers, modal headline
body	15–17px	700	—	Paragraphs, captions, creature speech
stat	18–28px	800	—	Meter %, stat pills, tab labels, numpad keys
eyebrow	15px	800	0.05em+	Uppercase labels ("SAY HI TO", "SCREEN TIME")

Layout

Base unit is 4px on Tailwind's scale; the working rhythm is 16/20/24/32px gaps. The page is a centered max-w-[1280px] shell with px-10 pt-8 pb-14. Top chrome is a logo + tagline on the left and two stat pills plus a settings button on the right. The main stage is a 12-column grid (gap-8): a 3-col left rail of name card, three jiggling bubble meters, and a speech card; a 6-col center holding the 520px snow globe, its wooden base, a 4-up action bar, and four bottom tab pills; and a 3-col right rail of a "Choose a World" 2×2 scenery grid, a quest card, and a grown-ups teaser. A full-screen parent-gate modal (max-w-[1100px]) splits 5/7 into a cyan math-gate numpad and a #FAF3EA bento dashboard (6-col grid of 4/2/3/3 spans). Whitespace is generous and airy; the composition is playful and slightly toy-like, anchored by the oversized central globe.

Elevation & Depth

Depth is the whole personality, and it is claymorphic, not flat or glassy. The core .clay recipe combines four shadows: inset 0 -6px 0 rgba(90,58,42,0.10) (bottom lip), inset 0 4px 0 rgba(255,255,255,0.9) (top highlight), 0 8px 0 rgba(90,58,42,0.08) (hard offset drop), and 0 14px 24px rgba(90,58,42,0.12) (soft blur). .clay-press, .tab-pill, .numpad-key, and .bento-card are variants of the same stacked inset-plus-hard- offset idea. The bubble-meter adds true glass: backdrop-filter: blur(4px) over rgba(255,255,255,0.65) with a 3px white border. The globe is the depth showcase — globe-shell layers radial highlights, an inset rim ring (inset 0 0 0 6px rgba(255,255,255,0.6)), and big colored drop shadows (0 60px 80px -30px rgba(124,196,213,0.5)); a globe-shine ellipse with mix-blend-mode:screen sells the glass.

Shapes

Everything is round and soft. The radius scale climbs 16px (numpad keys, toggle pills, rounded-2xl) → 24px (scenery cards, logo tile, rounded-3xl) → 28px (clay cards and action buttons, rounded-[28px]) → 32px (bento cards) → 36px (modal shell and wooden base). Pills (rounded-full) carry the meters, stat chips, tabs, and fill bars; fully circular icon discs sit inside cards and buttons. There are no sharp 0-radius corners anywhere — the system is deliberately pebble-soft.

Components

• Clay card — #FFF8F0 fill, 28px radius, ~20px padding, full .clay shadow stack. Holds the name card, speech card, scenery panel, quest card.
• Bubble meter — rgba(255,255,255,0.65) + 3px white border + blur(4px), 28px radius, jiggle animation; a circular voltage-tinted icon disc, a stat %, and a pill fill-bar with a voltage gradient.
• Action button — clay card, 28px radius, a 64px round voltage disc icon and a Fraunces label ("Feed", "Play", "Rest", "Learn"); bursts confetti on click.
• Tab pill — #FFF8F0 pill, stat label + ti icon; active state flips to ink fill with cream text ("Globe", "Wardrobe", "Inventory", "Quests").
• Stat pill — translucent white pill with a colored ti icon ("★ 1,240", "🔥 Day 14").
• Scenery card — 24px tile, 4px white border, square gradient thumbnail with a hand-drawn SVG scene + label strip; selected gets an ink border and ink drop shadow ("Beach", "Forest", "City", "Space").
• Bento card — 32px radius, 24px padding, double hard-offset shadow; pastel backgrounds per metric (#DCF1E2, #FFE3EE, #FCE3EC, #FFF1C8).
• Primary button — ink fill, cream text, 16px radius ("Unlock →", "Leave a review →").
• Numpad key — cream 16px-radius key with inset lip + hard drop; ✕ key tinted pink.
• Toggle — pill track, ink when on / rgba(90,58,42,0.15) when off, white knob.

Motion

Motion is gentle and toy-like. CSS keyframes drive the ambience: the mascot breathes (scale 1.04 + lift, 5s, ~12bpm) and blinks (4s); the three meters jiggle on staggered delays (2.4s); clouds float-cloud left-right (9s / 12s reversed); snow falls and rotates (6–12s linear) both inside the globe and in the ambient layer; stars and sparkles twinkle (scale + rotate, 2.2s). JavaScript adds interaction: anime.js createAnimatable tilts the globe ±14° on pointermove (parallax) and resets on leave; clicking an action button fires an 18-particle confetti burst in the button's voltage color plus an outBack squish. GSAP is loaded as a dependency.

Iconography

Two icon systems. Tabler icons-webfont (ti ti-*, outline, ~2px stroke) provides UI glyphs — star, flame, settings, home, hanger, backpack, trophy, sun, rocket, lock, book, sparkles — sized 16/20/24px and colored ink, with occasional gold/orange semantic tints. Alongside, hand-drawn inline SVGs (also 2px ink stroke, stroke-linecap:round) draw the playful custom glyphs: the food/leaf, balloon, moon, book pages, the creature mascot, the island, and scenery scenes. Emoji-style characters (✦ ★ ✕ ⌫) appear as decorative sparkles and controls.

Do's and Don'ts

• Do keep the four voltages pastel and tie each to its action (pink=Feed, butter=Play, cyan=Rest, mint=Learn).
• Do use the full .clay shadow stack on cards/buttons — the inset top highlight + bottom lip + hard offset is the brand.
• Do use ink #5A3A2A for all text and SVG strokes; never pure black.
• Do keep corners large and round; reach for pills on meters, chips, tabs.
• Do pair Fraunces 900 display with Nunito 700/800 body.
• Don't introduce flat/elevation-less cards or thin gray borders — depth is white edges + clay shadows.
• Don't add sharp 0-radius corners or harsh high-contrast colors.
• Don't let voltages go neon or saturated; they must stay soft and candy.
• Don't swap the warm cocoa ink for cool gray or black.

Known Gaps

• Display font size is a range (28/40/56px observed); clamp() in the token is a representative summary, not a literal CSS value from the file.
• Some surface tints (#FAF3EA, #F0E6DC, #FFF1DD, bento pastels) are one-off inline values, captured by role rather than as a strict palette.
• Snow particle counts/positions are randomized at runtime; durations are the authored ranges (6–12s inside, 10–18s ambient).
• anime.js is imported from esm.sh and GSAP from jsDelivr at runtime; tilt and confetti values are read from the inline <script>, not computed output.