name: mapleridge-design
version: alpha
description: >
  A warm neutromorphic (soft-UI) smart-home dashboard rendered entirely in a
  single oatmeal-beige tone (#ECE7E1). Depth comes not from color but from
  paired light/dark drop shadows — every surface is either raised (extruded
  from the page), recessed (pressed into it), or "dim" (faintly raised, for
  off-state rooms). The two voltages are an amber #E8A552 and a sage #7FB069,
  used for active lights, dials, and status, with a quieter slate-blue #5B7DB1
  accent. Type is a three-face system: Poppins for display, Nunito Sans for
  body, Roboto Mono for numerals. Geometry is uniformly soft — 16-20px squircle
  cards and full-pill bars — and tiles bounce in with anime.js.
colors:
  # Surface (single tone; depth carried by shadows)
  surface: '#ECE7E1'        # page background and all card fills
  shadow-dark: '#D6CFC6'    # dark side of raised/recessed shadow pairs
  shadow-light: '#FBF8F4'   # light side of raised/recessed shadow pairs
  dim-dark: '#DCD5CC'       # dark side of the softer "dim" shadow + dial track
  dim-light: '#F4EFE9'      # light side of the softer "dim" shadow
  # Brand / Voltage
  amber: '#E8A552'          # primary accent: active lights, dimmer fills, Power dial, icons
  sage: '#7FB069'           # secondary accent: climate, security OK, Solar/Battery dials
  slate: '#5B7DB1'          # tertiary accent: cameras, Movie scene, Today dial
  # Glow shadow stops (inner highlights for lit toggles)
  glow-amber-dark: '#cf9145'
  glow-amber-light: '#ffc97e'
  glow-sage-dark: '#5f8a4d'
  glow-sage-light: '#9fd187'
  # Text
  heading: '#4a4239'        # active card headings, primary readouts
  heading-soft: '#6b6258'   # off-card readouts, scene labels, dial labels
  body: '#5A5048'           # default body text color (set on root)
  muted: '#8a7f73'          # off-room titles, inactive mode pills
  muted-2: '#9c9186'        # greeting line
  muted-3: '#a89d91'        # captions, device counts, units
  off-icon: '#b5aa9e'       # off-state lightbulb icons

Maple Ridge House

mapleridge-design · alpha

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

Overview

Maple Ridge House is a smart-home control dashboard built in a strict neumorphic / soft-UI idiom. The entire interface is one warm oatmeal beige (#ECE7E1) — page, cards, buttons, and tracks all share that single fill — and all hierarchy is produced by light. Each shape carries a paired shadow: a dark warm grey (#D6CFC6) on the lower-right and a near-white (#FBF8F4) on the upper-left, so surfaces appear to extrude from (.raised) or sink into (.recessed) the page. Off-state rooms drop to a fainter .dim shadow, and lit light-toggles get an inset colored glow (glow-amber, glow-sage). Color is rationed to two voltages — a maple amber #E8A552 and a sage #7FB069, with a calmer slate #5B7DB1 for cameras and the Today/Movie accents. Typography is a confident three-face stack: Poppins for display headings and button labels, Nunito Sans for body and captions, and Roboto Mono for every numeral — temperatures, percentages, dial readouts, the clock. Geometry is uniformly rounded: 16-20px squircle cards and full-pill progress bars. The page is a max-w-[1380px] two-column layout (floor-plan grid + sidebar) and the room tiles spring in with an anime.js outBack stagger.

Colors

Surface. There is effectively one surface color: surface #ECE7E1 is the page background (bg-[#ECE7E1]) and also every card, button, and slider fill. Depth is entirely shadow-driven. The raised/recessed shadow pair uses shadow-dark #D6CFC6 (lower-right) and shadow-light #FBF8F4 (upper-left); the softer .dim state and the dial backing track use dim-dark #DCD5CC and dim-light #F4EFE9.

Brand / Voltage. amber #E8A552 is the primary accent — active lightbulb icons, the dimmer fill bars, the Power dial, the home-mode pill text, and the header house icon. sage #7FB069 is the secondary — climate "Auto", lock/check security states, the Solar and Battery dials, the ARMED badge. slate #5B7DB1 is the tertiary accent for cameras, the Movie scene, and the Today dial.

Glow stops. Lit toggles use inset two-stop glows: amber from glow-amber-dark #cf9145 to glow-amber-light #ffc97e, sage from glow-sage-dark #5f8a4d to glow-sage-light #9fd187.

Text. Headings on active cards and primary numeric readouts are heading #4a4239; off-card readouts, scene labels, and dial labels use the softer heading-soft #6b6258. The root body text is body #5A5048. Muted tones descend through muted #8a7f73 (off-room titles, inactive pills), muted-2 #9c9186 (greeting), and muted-3 #a89d91 (captions, counts, units). Off-state bulb icons are off-icon #b5aa9e.

Typography

Three Google-Fonts families, imported together: Poppins (500/600/700) as the display face, Nunito Sans (400/600/700) as body, and Roboto Mono (400/500/600) for all numerals. The root sets Nunito Sans as the default body font; .font-display, .font-body, .font-mono switch families. All are open-source Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display-h1	24px (text-2xl)	700	tight	—	"Maple Ridge House" header title
display-card	20px (text-xl)	600	normal	—	Living Room card title
display-section	18px (text-lg)	600	normal	—	section headings (Floor Plan, Energy, Security)
display-card-sm	16px (text-base)	600	normal	—	smaller room/card titles
display-pill	15px	600	normal	—	mode-pill labels (Home / Away / Night)
display-label	14px (text-sm)	600	normal	—	scene labels, dial labels, security item titles
body-base	~16px	400	normal	—	default root body text (#5A5048)
body-sm	14px (text-sm)	400/600	normal	wide (greeting)	greeting, device counts, captions
body-xs	12px (text-xs)	400/600	normal	—	captions, slider labels, status badges
mono-readout-lg	30px (text-3xl)	500	normal	—	Living Room temperature 22.0°C
mono-readout	24px (text-2xl)	500	normal	—	room temperatures
mono-dial	20px (text-xl)	600	normal	—	dial center readouts
mono-caption	12px (text-xs)	400/500	normal	—	clock, percentages, ratios (6/6)

Layout

Base spacing is an 8px-ish Tailwind scale (gaps of 3/5/6/7 → 12/20/24/28px; card padding 5-6 → 20-24px). The page is padded px-6 py-7 (lg px-10 py-9) and centered at max-w-[1380px]. Below the header, the body splits into a two-column grid xl:grid-cols-[1fr_360px] with a 28px gap: the left is the Floor Plan — a grid-cols-2 lg:grid-cols-4 of auto-rows-[176px] room tiles where the Living Room spans 2x2 and several cards span 2 columns — and the right is a 360px sidebar stacking the Energy (4 circular dials) and Security cards. The header is a flex row: brand cluster (house-icon tile + greeting + clock) on the left, three mode pills on the right. Whitespace is generous and even; the composition reads as a calm tray of soft tiles.

Elevation & Depth

This is the heart of the system: no flat shadows, no glass — only neumorphic shadow pairs. Five shadow recipes:

• .raised — 8px 8px 16px #D6CFC6, -8px -8px 16px #FBF8F4 (cards, mode pills).
• .raised-sm — 5px 5px 11px #D6CFC6, -5px -5px 11px #FBF8F4 (scene buttons, off toggles).
• .recessed — inset 6px 6px 12px #D6CFC6, inset -6px -6px 12px #FBF8F4 (active mode pill, dial wells).
• .recessed-sm — inset 4px 4px 8px #D6CFC6, inset -4px -4px 8px #FBF8F4 (slider tracks, status badges, security icon wells).
• .dim — 4px 4px 9px #DCD5CC, -4px -4px 9px #F4EFE9 (off-state room cards; subtler raise).
• .glow-amber / .glow-sage — inset colored two-stop glows for lit toggles.

Toggling a light swaps .raised-sm↔.glow-* on the toggle and .raised↔.dim on its room; activating a scene swaps .raised-sm↔.recessed-sm; the active mode pill is .recessed, inactive ones .raised.

Shapes

Everything is soft. Cards, the header logo tile, and mode pills use rounded-[20px]; smaller toggles, scene buttons, and security icon wells use rounded-[16px]. Progress/slider tracks and their fills, status badges, and the dial wells are rounded-full (pills/circles). There are no sharp corners anywhere — the radius story is uniformly squircle-to-pill, reinforcing the soft, tactile neumorphic feel.

Components

• Mode pill — surface fill; px-5 sm:px-8 py-4, rounded-[20px], Poppins 600 15px. Active: .recessed + amber text (#E8A552) with solid icon; inactive: .raised + muted text (#8a7f73). Labels: Home / Away / Night.
• Room card (on) — .raised, rounded-[20px], p-5/p-6. Heading #4a4239, captions #a89d91, mono temperature readout.
• Room card (off) — .dim, muted heading #8a7f73 and readout #6b6258, outline bulb icon #b5aa9e; caption ends "· off".
• Light toggle — square rounded-[16px]/rounded-[20px] button. On: .glow-amber or .glow-sage with solid colored bulb; off: .raised-sm with regular outline bulb in #b5aa9e.
• Slider — .recessed-sm rounded-full track with inner padding; fill is a rounded-full amber or sage bar at an inline width:%. Labels in body-xs with a mono percentage in the matching accent.
• Scene button — .raised-sm rounded-[16px] py-3, column-stacked icon + body-xs 600 label #6b6258. Active scene flips to .recessed-sm. Labels: Morning (amber mug), Movie (slate film), Sleep (sage bed).
• Energy dial — .recessed rounded-full 120px well holding a 104px SVG: a #DCD5CC 78%-sweep track plus a colored arc (stroke = data color) animated from 0 with anime.js. Center: mono readout + body-[10px] unit; label below in display-label #6b6258.
• Security row — .recessed-sm rounded-[16px] 48px icon well + title (display-sm #4a4239) + caption (#a89d91) + trailing sage check or mono ratio. ARMED badge: .recessed-sm rounded-full pill, sage 600.
• Header logo tile — .raised 64px rounded-[20px] well with an amber fa-house-chimney.

Motion

All motion is anime.js v4 (esm.sh/animejs@4).

• Tile entrance — .room cards animate opacity 0→1, scale 0.93→1, staggered delay = i*70ms, duration 600, ease outBack (a slight overshoot spring).
• Dial fill — each arc's strokeDashoffset animates from empty to its value over 1400ms, ease outCubic, delay 300.
• Press bounce — any .press element on click runs scale 1→0.95→1, duration 340, ease outBack.
• Clock — setInterval updates the header time string every second.
• State changes (mode/scene/toggle) are class swaps; the shadow change is instantaneous (no CSS transition is authored on the shadow itself).

Iconography

Font Awesome 6.5.1 (CDN all.min.css). Solid style (fa-solid) for active and informational icons; regular (fa-regular) outline bulbs for off states. Icons are sized by Tailwind text utilities (text-base ~16px through text-2xl ~24px) and colored by role: amber #E8A552 for active lights, sage #7FB069 for OK/locked, slate #5B7DB1 for cameras, #b5aa9e for off bulbs. Used decoratively in toggles/scenes and as UI status glyphs (check, lock, video, shield, door).

Do's and Don'ts

• Do keep every surface the same #ECE7E1 beige and express depth only through the paired neumorphic shadows.
• Do ration color to amber/sage with slate as the calm third accent; use mono exclusively for numbers.
• Do pair raised↔recessed (or raised↔dim) on state change so pressing always reads as physical.
• Don't introduce flat material shadows, drop-shadow blur on one side only, glassmorphism, or borders — the system has no hairlines.
• Don't add sharp corners; stay in the 16-20px squircle / full-pill range.
• Don't let accent colors fill large areas — they belong to icons, thin bars, dial arcs, and small text.

Known Gaps

• Tailwind sizing tokens (text-2xl, p-6, gaps) are translated to px using the default Tailwind scale; the page relies on the Tailwind v4 browser CDN, so exact computed values were not machine-measured.
• body-base (root font size) is the browser default (~16px); not set explicitly.
• The two "Quick Scenes" cards are duplicated in the markup (likely a sample artifact); documented once as a single component.
• Letter-spacing is default everywhere except the greeting line (tracking-wide); other tracking values are normal.