name: sprout-design
version: alpha
description: >
  Sprout is a soft neumorphic plant-care dashboard cast entirely in a warm
  oatmeal clay (`#E9E4DA`). Depth comes not from drop shadows or borders but
  from paired light/dark soft-shadows that extrude tiles upward (`raised`) or
  press them inward (`sunken`/`pressed`) against a single monochrome surface.
  A leafy sage green (`#5E8C57`) is the primary voltage for healthy states,
  progress, and active toggles, with a terracotta clay (`#C77B4E`) as the warm
  secondary for streaks, time-of-day markers, and warning states. Type pairs a
  rounded Poppins for headings with humanist Nunito Sans for body and Roboto
  Mono for every numeric readout. Everything is generously rounded (20px tiles,
  pill controls), and the signature move is the tactile press-and-settle elastic
  bounce on toggles plus a staggered reveal of every tile on load.
colors:
  # Brand / Voltage
  sage: '#5E8C57'          # primary accent: healthy states, progress fills, active toggles, mono stats, brand leaf
  terracotta: '#C77B4E'    # secondary accent: care streak, time-of-day icons, warning/watch states
  # Surface
  clay: '#E9E4DA'          # single page surface; every tile shares this fill
  # Text
  ink: '#3A3A30'           # primary heading + body text
  muted: '#8C857A'         # secondary/muted text, placeholders, idle icons
  # Hairlines / Neutrals
  dot-idle: '#cfc8ba'      # inactive rating dots in plant-health tiles
  # Shadow tints (neumorphism)
  shadow-light: 'rgba(255,255,255,0.85)'  # top-left highlight in soft shadows
  shadow-dark: 'rgba(176,164,142,0.45)'   # bottom-right warm shadow in soft shadows
typography:
  brand:
    fontFamily: "'Poppins', sans-serif"
    fontSize: 24px
    fontWeight: 600
    letterSpacing: -0.5px
  heading:
    fontFamily: "'Poppins', sans-serif"
    fontSize: 20px
    fontWeight: 600
  body:
    fontFamily: "'Nunito Sans', sans-serif"
    fontSize: 15px
    fontWeight: 400
  label:
    fontFamily: "'Nunito Sans', sans-serif"
    fontSize: 13px
    fontWeight: 600
  stat:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 30px
    fontWeight: 500
  mono:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 13px
    fontWeight: 500
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
  full: 9999px
spacing:                    # base unit 4px (Tailwind scale)
  xs: 8px
  sm: 12px
  md: 20px
  lg: 24px
  xl: 28px
components:
  tileRaised:
    backgroundColor: '{colors.clay}'
    rounded: '{rounded.xl}'
    elevation: 'raised soft-shadow (-8px -8px 16px highlight, 8px 8px 16px warm)'
    padding: '28px'
  tileSunken:
    backgroundColor: '{colors.clay}'
    rounded: '{rounded.xl}'
    elevation: 'sunken inset soft-shadow'
    padding: '28px'
  statCard:
    backgroundColor: '{colors.clay}'
    rounded: '{rounded.xl}'
    elevation: 'sunken'
    padding: '20px'
    typography: '{typography.stat}'
  iconBadge:
    backgroundColor: '{colors.clay}'
    rounded: '{rounded.lg}'
    elevation: 'raised-sm'
    textColor: '{colors.sage}'
    size: '48px'
  pillStat:
    backgroundColor: '{colors.clay}'
    textColor: '{colors.sage}'
    typography: '{typography.mono}'
    rounded: '{rounded.lg}'
    elevation: 'sunken'
    padding: '8px 16px'
  searchBar:
    backgroundColor: '{colors.clay}'
    textColor: '{colors.ink}'
    placeholderColor: '{colors.muted}'
    rounded: '{rounded.xl}'
    elevation: 'sunken'
    padding: '14px 20px'
  iconButton:
    backgroundColor: '{colors.clay}'
    textColor: '{colors.muted}'
    rounded: '{rounded.full}'
    elevation: 'raised'
    size: '48px'
    hoverColor: '{colors.sage}'
  careToggle:
    backgroundColor: '{colors.clay}'
    rounded: '{rounded.full}'
    size: '36px'
    elevationDone: 'pressed (inset), check icon in sage'
    elevationIdle: 'raised-sm, transparent check'
  healthTile:
    backgroundColor: '{colors.clay}'
    rounded: '{rounded.lg}'
    padding: '16px'
    elevationLogged: 'pressed (inset)'
    elevationIdle: 'raised-sm'
  ctaButton:
    backgroundColor: '{colors.clay}'
    textColor: '{colors.sage}'
    typography: '{typography.heading}'
    fontWeight: 700
    rounded: '{rounded.xl}'
    elevation: 'raised'
    padding: '16px'
motion:
  reveal: 'opacity 0→1, translateY 18→0, stagger 90ms, 900ms, ease out(3)'
  sensorLine: 'stroke-dashoffset draw-on, 1600ms, delay 600ms, ease inOut(2)'
  sensorArea: 'opacity 0→1, 900ms, delay 1400ms'
  careToggle: 'scale 1→0.86→1, 700ms, ease outElastic(1.1,.4)'
  healthTile: 'scale 1→0.96→1, 700ms, ease outElastic(1,.5)'
  ctaButton: 'scale 1→0.94→1, 700ms, ease outElastic(1,.5)'
icons:
  library: Lucide
  style: outline
  stroke: 2px
  sizes: { xs: 14px, sm: 18px, md: 20px, lg: 24px }
  color: '{colors.muted}'

Sprout

sprout-design · alpha

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

Overview

Sprout is a plant-care dashboard built entirely as a soft-UI (neumorphic) surface. There is exactly one surface color — a warm oatmeal clay #E9E4DA that fills the page body and every tile alike — so the interface reads as a single piece of molded material. Depth is conjured purely with paired soft shadows: a cool white highlight on the top-left (rgba(255,255,255,0.85)) and a warm ochre shadow on the bottom-right (rgba(176,164,142,0.45)), which extrude a tile upward (.raised), or invert into an inset to press it inward (.sunken/.pressed). The system carries two voltages: a leafy sage green #5E8C57 for everything healthy, complete, and progressing, and a terracotta clay #C77B4E for streaks, time-of-day markers, and "needs water" warnings. Typography is a three-face story — rounded Poppins for headings and brand, humanist Nunito Sans for body, and Roboto Mono for every number, from the "94%" hero stat to sensor readouts. Geometry is uniformly soft: 20px tiles, pill buttons and toggles, 16px icon badges. The hallmark interactions are tactile: tiles stagger-reveal on load, sensor sparklines draw themselves in, and toggles press inward with an elastic settle when tapped.

Colors

Brand / Voltage. The primary accent sage #5E8C57 carries all positive state: the brand leaf icon, progress fills (94% bar), the "done" counters, all mono stat values, active care toggles (with pressed inset), logged health tiles, and "Healthy" sensor labels. The secondary terracotta #C77B4E warms the card for the care-streak sprout icon, every time-of-day group icon (sunrise/sun/sunset/moon), and "watch"/"Needs water" sensor states. Both accents also drive the sensor sparkline strokes and gradient fills.

Surface. A single clay #E9E4DA is the universal fill — the body and every raised, sunken, or pressed tile share it. Depth, not color, separates planes.

Text. ink #3A3A30 is the default heading and body color; muted #8C857A handles secondary copy, captions, placeholders, and idle/UI icons.

Hairlines / Neutrals. There are no borders anywhere. The one extra neutral is dot-idle #cfc8ba for unfilled rating dots in the plant-health tiles.

Shadow tints. The neumorphism is built from two rgba tints: shadow-light rgba(255,255,255,0.85) (highlight) and shadow-dark rgba(176,164,142,0.45) (warm shadow); inset variants nudge these opacities to ~0.8 / 0.5.

Typography

Three Google Fonts, imported together. Poppins (500/600) is the rounded display face for the brand wordmark and section headings. Nunito Sans (400/600/700) is the humanist body face and the default font-family. Roboto Mono (500) is reserved for numbers — stats, counters, timestamps, and sensor values — giving every figure a tabular, instrument-panel feel. All are open-source via Google Fonts, so no substitution is needed.

Token	Size	Weight	Tracking	Usage
brand	24px	600	tight	"Sprout" wordmark
heading	20px	600	—	Section titles ("Today's Care")
body	15px	400	—	Default body, search input
label	13px	600	—	Stat captions, dates, meta
stat	30px	500	—	Hero numbers ("94%", "21 days", "18")
mono	13px	500	—	Pills, timestamps, counters, sensor values

Layout

Base unit is 4px (Tailwind scale); the dominant gaps are gap-6/gap-7 (24/28px) and tile padding p-7 (28px) for major panels, p-5/p-4 (20/16px) for cards. The page is centered at max-w-[1440px] with px-8 py-7 padding. Structure: a flex header (brand block, sunken search bar, date + bell + avatar), a 3-up stat row, then a 12-column grid splitting into 8/4 columns at xl — Today's Care (8) beside Plant Health (4), then Sensor Trends (8) beside Next Big Task (4). The signature structural move is nesting: sunken panels contain raised cards which contain sunken sub-elements, building visible depth layers. Whitespace is generous and airy.

Elevation & Depth

Depth is the entire design language — there are no drop shadows, borders, or glass, only neumorphic soft shadows in five tiers:

• .raised — -8px -8px 16px rgba(255,255,255,.85), 8px 8px 16px rgba(176,164,142,.45) (extruded panels)
• .raised-sm — 5px/10px version (badges, idle controls)
• .sunken — inset 6px/12px (recessed panels, search, stat cards)
• .sunken-sm — inset 4px/8px (small recesses, progress track, sensor chart wells)
• .pressed — inset 4px/8-9px, slightly stronger (active/toggled state)

Shapes

Uniformly soft. Tiles and major buttons use rounded-[20px] (xl); icon badges rounded-[16px] (lg); small chips rounded-[12px]/rounded-[14px] (sm/md). Circular toggles, the avatar, icon buttons, progress tracks, and rating dots are rounded-full. Nothing in the system is a sharp corner.

Components

• Raised tile — clay fill, .raised, 20px radius, 28px padding; primary panels (header brand, Today's Care, Plant Health, Next Big Task card).
• Sunken tile — clay fill, .sunken, 20px radius; recessed panels (stat cards, Sensor Trends, care groups).
• Stat card — sunken 20px tile, icon badge + label + mono 30px value; "94%", "21 days", "18".
• Icon badge — 48px .raised-sm, 16px radius, sage icon.
• Pill stat — sunken/raised-sm chip, mono text in sage; "7 / 11 done", "920 lux".
• Search bar — sunken 20px, transparent input, muted placeholder "Search plants, rooms, tasks…".
• Icon button — 48px circular .raised, muted icon, hover→sage; bell + avatar.
• Care toggle — 36px circle; done = .pressed + sage check, idle = .raised-sm + transparent check.
• Health tile — 16px radius; logged = .pressed + check-circle-2, idle = .raised-sm + plus; 5-dot sage/idle rating.
• CTA button — .raised 20px, sage bold Poppins; "Add to calendar".
• Sensor card — raised 20px holding a sunken SVG well with a sage/terracotta sparkline + gradient area fill, value chip, and "Healthy"/"Needs water" status row.

Motion

Driven by anime.js v4. On load, every .reveal tile fades + rises (translateY 18→0) with a 90ms stagger over 900ms (ease out(3)). Sensor sparklines draw themselves via stroke-dashoffset (1600ms, 600ms delay, inOut(2)), then the gradient area fades in (delay 1400ms). Interactions use elastic press-and-settle: care toggles scale 1→0.86→1 with outElastic(1.1,.4), health tiles scale 1→0.96→1, the CTA 1→0.94→1. Toggling swaps the soft-shadow class (raised-sm ⇄ pressed) so the control visibly depresses.

Iconography

Lucide outline icons (2px stroke) throughout, loaded via the unpkg CDN and rendered with lucide.createIcons(). Sizes range 14–24px (most UI icons 18–20px, stat badges 24px). Color rules: muted #8C857A for idle/UI icons, sage #5E8C57 for active/healthy, terracotta #C77B4E for time-of-day and warnings. Icons used include leaf, search, bell, droplets, sprout, notebook-pen, sun, sunrise, sunset, moon, check, droplet, bug, cloud-drizzle, shovel, flower-2, calendar, package, calendar-plus, alert-triangle, check-circle-2.

Do's and Don'ts

• Do keep one surface color and express all hierarchy through the five soft-shadow tiers (raised / raised-sm / sunken / sunken-sm / pressed).
• Do use Roboto Mono for every number and reserve sage for "good/done" and terracotta for "warn/streak/time-of-day".
• Do keep corners soft (20px tiles, pill controls) and let depressing controls swap to an inset shadow.
• Don't introduce borders, hard drop shadows, glassmorphism, or a second surface color — it breaks the molded-clay illusion.
• Don't flatten the elastic press feedback or remove the stagger reveal; the tactility is the brand.
• Don't use sage and terracotta interchangeably or render numbers in a proportional font.

Known Gaps

• Letter-spacing for the brand wordmark is tracking-tight (Tailwind ≈ -0.025em ≈ -0.5px at 24px); recorded as an approximation.
• Spacing scale tokens are inferred from the Tailwind utility classes actually used (gap-6/7, p-4/5/7); they reflect dominant values, not an exhaustive list.
• The exact inset opacities differ slightly between sunken (0.8/0.5) and pressed (0.75/0.55); design tokens record the base highlight/shadow tints.