name: tempo-design
version: alpha
description: >
  Tempo is a soft neumorphic health-tracking dashboard built on a single warm
  grey clay surface (`#ECEEF1`). Depth comes entirely from paired light/dark
  shadows — raised pads and recessed wells extruded from the same background —
  with no borders and no flat cards. A muted cobalt (`#4B6FB0`) carries brand,
  primary actions, and "in-range" data; a soft amber (`#D8973F`) flags warnings
  and time-of-day. Poppins sets the headings, Nunito Sans the body, and Roboto
  Mono every number and clinical readout. Everything is pillowy and rounded —
  18–20px tiles, full-circle buttons — and interaction is literal: toggles
  visually press into the clay.
colors:
  # Surface
  surface: '#ECEEF1'           # the single clay background for page, sidebar, and every neumorphic element
  # Brand / Accent
  cobalt: '#4B6FB0'            # brand mark, primary buttons, active nav, in-range data, key numbers
  amber: '#D8973F'            # warnings, watch-state metrics, time-of-day icons, alert dots
  # Text
  ink: '#2C333B'               # primary heading + body text
  muted: '#7B838C'             # labels, captions, secondary text, inactive icons
  # Shadow / Hairline
  shadow-light: 'rgba(255,255,255,0.9)'   # the top-left highlight of every neumorphic shadow
  shadow-dark: 'rgba(163,177,198,0.45)'   # the bottom-right blue-grey shadow of raised elements
  dot-empty: '#c3c8cf'         # unfilled severity dots on symptom tiles
typography:
  display:
    fontFamily: "'Poppins', sans-serif"
    fontSize: 30px            # text-3xl, the H1 greeting
    fontWeight: 700
    letterSpacing: -0.025em   # tracking-tight
  heading:
    fontFamily: "'Poppins', sans-serif"
    fontSize: 20px            # text-xl section headings
    fontWeight: 600
  label:
    fontFamily: "'Nunito Sans', sans-serif"
    fontSize: 12px            # text-xs uppercase metric labels
    fontWeight: 600
    letterSpacing: 0.05em     # tracking-wider
    textTransform: uppercase
  body:
    fontFamily: "'Nunito Sans', sans-serif"
    fontSize: 14px            # text-sm body copy, item names
    fontWeight: 400
  metric:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 30px            # text-3xl KPI numbers
    fontWeight: 600
  mono-caption:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 11px            # dosage, timestamps, counters
    fontWeight: 400
rounded:
  sm: 14px                     # inner med rows, lab sparkline frames, readout chips
  md: 18px                     # logo tile, symptom tiles, metric cards
  lg: 20px                     # major recessed panels and metric wells
  full: 9999px                 # nav buttons, toggles, icon badges, avatar
spacing:                       # base unit 4px; common steps below
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
components:
  sidebar:
    backgroundColor: '{colors.surface}'
    width: '96px'
    elevation: '10px 0 24px rgba(163,177,198,0.25)'
    padding: '32px 0'
  navButtonActive:
    backgroundColor: '{colors.cobalt}'
    textColor: '#FFFFFF'
    rounded: '{rounded.full}'
    elevation: 'inset cobalt-deep: inset -4px -4px 8px rgba(255,255,255,0.18), inset 4px 4px 10px rgba(34,52,90,0.55)'
    size: '48px'
  navButtonIdle:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.muted}'
    rounded: '{rounded.full}'
    elevation: 'raised-sm'
    hoverTextColor: '{colors.cobalt}'
    size: '48px'
  metricWell:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.ink}'
    typography: '{typography.metric}'
    rounded: '{rounded.lg}'
    elevation: 'recessed (inset)'
    padding: '20px 24px'
  raisedCard:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    elevation: 'raised'
    padding: '16px 20px'
  medRow:
    backgroundColor: '{colors.surface}'
    typography: '{typography.body}'
    rounded: '{rounded.sm}'
    elevation: 'raised-sm'
    padding: '12px'
  toggle:
    rounded: '{rounded.full}'
    size: '36px'
    elevationDone: 'pressed (inset)'
    elevationOpen: 'raised-sm'
    checkColor: '{colors.cobalt}'
  primaryButton:
    backgroundColor: '{colors.cobalt}'
    textColor: '#FFFFFF'
    typography: '{typography.heading}'
    rounded: '{rounded.sm}'
    padding: '14px 24px'
    elevation: 'cobalt-deep (inset)'
  searchField:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.muted}'
    typography: '{typography.body}'
    rounded: '{rounded.sm}'
    elevation: 'recessed (inset)'
    padding: '8px 16px'
motion:
  reveal: 'opacity 0→1 + translateY 24→0, 700ms, ease out(3), stagger 90ms (anime.js)'
  labLine: 'SVG stroke draw via strokeDashoffset len→0, 1600ms, ease inOut(3), staggered 220ms'
  labArea: 'fill fade opacity 0→1, 1200ms, delayed 900ms'
  togglePress: 'scale 1→0.82→1, 600ms, ease spring(1,80,9,0)'
  tilePress: 'scale 1→0.97→1, 650ms, ease spring(1,90,10,0)'
  buttonPress: 'scale 1→0.94→1, 600ms, ease spring(1,80,9,0)'
icons:
  library: Lucide
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.muted} idle, {colors.cobalt} active/brand, {colors.amber} time-of-day & warnings'

Tempo

tempo-design · alpha

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

Overview

Tempo is a neumorphic ("soft UI") health-tracking dashboard. The entire screen — page, sidebar, cards, buttons — is the same warm clay grey #ECEEF1; there are no borders and no contrasting fills. Depth is created exclusively by paired shadows: a white top-left highlight (rgba(255,255,255,0.9)) and a blue-grey bottom-right shadow (rgba(163,177,198,0.45)), so elements appear extruded from the surface (.raised, .raised-sm) or pressed into it (.recessed, .pressed). A muted cobalt #4B6FB0 is the single brand voltage — it marks the logo, active nav, primary buttons, in-range labs, and headline numbers — while a soft amber #D8973F signals warnings and times of day. Type is a three-way split: Poppins for headings and the greeting, Nunito Sans for body, and Roboto Mono for every number, dosage, and clinical readout, reinforcing the quantified-self feel. Geometry is uniformly pillowy: 18–20px rounded tiles and full-circle buttons. The signature move is tactile — medication toggles and symptom tiles physically depress into the clay (pressed) when logged, with a springy scale animation.

Colors

Surface. One token does almost everything: surface #ECEEF1, a warm light grey, is the fill for the page background, the sidebar, and every raised/recessed element. The design never deviates from it — color comes from shadow and icon tint, not from card fills.

Brand / Accent. cobalt #4B6FB0 is the primary voltage: the "T" logo, the active nav button (.cobalt-deep, a darker inset blue), the "Add to calendar" button, in-range lab values, and KPI numbers like Med Adherence 92%. amber #D8973F is the secondary accent for caution — watch-state lab values (eGFR 58), the streak flame, evening/night counters that are behind, and time-of-day icons (sunrise/sun/sunset).

Text. ink #2C333B is the default text color set on <body> for headings and primary copy. muted #7B838C handles every secondary string: uppercase metric labels, captions, timestamps, units, and idle nav icons.

Shadow / Hairline. There are no hairlines. The two shadow colors — shadow-light rgba(255,255,255,0.9) and shadow-dark rgba(163,177,198,0.45) — are the entire depth system. The active-nav inset uses a deep navy rgba(34,52,90,0.55). dot-empty #c3c8cf fills the unlit severity dots on symptom tiles.

Typography

Three Google Fonts, imported together: Poppins (500/600/700) for display and headings, Nunito Sans (400/600/700) for body, and Roboto Mono (400/500/600) for numerics. All are open-source, so no substitution is needed.

Token	Size	Weight	Tracking	Usage
display	30px (text-3xl)	700	-0.025em	H1 greeting "Hello, Eleanor."
heading	20px (text-xl)	600	—	Section headings, primary button label
label	12px (text-xs)	600	0.05em, uppercase	Metric labels ("MED ADHERENCE")
body	14px (text-sm)	400	—	Item names, search placeholder, sub-copy
metric	30px (text-3xl)	600	—	KPI numbers (mono)
mono-caption	11px	400	—	Dosages, timestamps, counters (mono)

Layout

Base unit 4px (Tailwind scale); common gaps are 16px, 24px, 32px. The page is a two-part flex: a fixed 96px vertical rail on the left and a fluid main column capped at max-w-[1344px], centered, with px-4 sm:px-10 py-8. The sidebar stacks the logo, a 6-icon nav, and a settings + avatar group pinned to the bottom. Main content flows top-down: a header (greeting + recessed search + bell), a 3-up KPI row, a 4-column "Medication Channels" grid (Morning/Afternoon/ Evening/Night), a 12-column split section (4-col symptom list + 8-col lab trends with sparklines and three secondary metric cards), and a full-width "Next Appointment" banner. Whitespace is generous and even; everything breathes on the same clay plane.

Elevation & Depth

This is the heart of the system — pure neumorphism, zero borders, zero flat surfaces. Four shadow recipes, all on #ECEEF1:

• .raised — -8px -8px 16px rgba(255,255,255,0.9) + 8px 8px 16px rgba(163,177,198,0.45). The standard extruded card.
• .raised-sm — same recipe at -5px/5px 10px offsets. For small buttons, med rows, icon badges.
• .recessed — inset -6px -6px 12px rgba(255,255,255,0.85) + inset 6px 6px 12px rgba(163,177,198,0.5). Carved-in wells for panels, KPI cards, search.
• .pressed — inset -5px -5px 10px highlight + inset 5px 5px 10px rgba(163,177,198,0.55). The "logged/active" depressed state.
• .cobalt-deep — cobalt fill #4B6FB0 with an inset shadow using navy rgba(34,52,90,0.55); the active nav button and primary CTA. The sidebar carries one directional drop shadow (10px 0 24px rgba(163,177,198,0.25)) to lift it off the page.

Shapes

Soft and rounded throughout, never sharp, never fully pill on rectangles. The radius ladder: sm 14px (inner med rows, sparkline frames, small readout chips), md 18px (logo tile, symptom tiles, secondary metric cards), lg 20px (the large recessed panels and KPI wells), and full 9999px for circular things — nav buttons, toggles, icon badges, and the avatar. The consistent large radii are essential to the pillowy neumorphic read.

Components

• Sidebar — 96px rail, surface fill, single directional shadow, 32px vertical padding.
• Logo tile — raised, 56px, rounded-[18px], cobalt "T" in Poppins 700.
• Nav button (active) — cobalt-deep, 48px circle, white Lucide icon.
• Nav button (idle) — raised-sm, 48px circle, muted icon, hovers to cobalt.
• KPI well — recessed, rounded-[20px], px-6 py-5; uppercase label + big mono number + circular raised-sm icon badge.
• Med channel card — recessed, rounded-[20px], p-5; header with time-of-day icon + counter, stacked raised-sm med rows.
• Med row — raised-sm, rounded-[14px], px-3 py-3; a circular toggle + name + mono dose/time.
• Toggle — 36px circle; pressed (inset) with cobalt check when done, raised-sm and empty when open.
• Symptom tile — raised, rounded-[18px], px-5 py-4; icon badge + name + a row of five 10px severity dots (cobalt/amber filled, #c3c8cf empty); becomes pressed when logged.
• Lab row — label block + flexible raised-sm sparkline frame (rounded-[14px], h-16) + recessed value chip; cobalt for in-range, amber for watch.
• Primary button — cobalt-deep, rounded-[16px], px-6 py-3.5, white Poppins 600, label "Add to calendar".
• Search field — recessed, rounded-[16px], px-4 py-2, muted icon + placeholder.

Motion

Powered by anime.js (v4, ESM). On load, all .reveal blocks fade up (opacity 0→1, translateY 24→0) over 700ms with ease out(3) and a 90ms stagger. Lab sparklines draw left-to-right via strokeDashoffset (1600ms, inOut(3), staggered 220ms) and their area fills fade in afterward (1200ms, delayed 900ms). Interaction is the hallmark: med toggles spring-scale 1→0.82→1 (spring(1,80,9,0)) and flip between raised-sm and pressed; symptom tiles scale 1→0.97→1 and depress; the CTA and nav buttons do smaller spring presses. Everything physically reacts to touch.

Iconography

Lucide icons throughout, loaded from unpkg and rendered via lucide.createIcons(). Outline style, 2px stroke. Sizes: 16px (w-4 h-4) in rows and chips, 20px (w-5 h-5) in nav and section headings, 24px (w-6 h-6) in the appointment badge. Color rules: muted #7B838C idle, cobalt #4B6FB0 for active/brand and in-range, amber #D8973F for time-of-day icons (sunrise/sun/sunset/moon) and warnings. Used both as UI affordances (nav, toggles, search) and as decorative category markers (pill, activity, flask, calendar-heart).

Do's and Don'ts

• Do keep every element on the single #ECEEF1 clay surface — color the shadows and icons, never the fills.
• Do use the paired light/dark shadow recipes; raised for actionable/standing elements, recessed/pressed for wells and logged states.
• Do route all numbers, doses, and timestamps through Roboto Mono.
• Do reserve cobalt for brand/primary/in-range and amber strictly for caution and time-of-day.
• Don't add borders, hairlines, or hard drop shadows — they break the neumorphic illusion.
• Don't introduce flat colored cards or high-saturation backgrounds.
• Don't sharpen corners; the soft 14–20px radii (and full circles) are load-bearing.
• Don't mix in a third accent hue — the system is cobalt + amber on grey only.

Known Gaps

• Font sizes are mapped from Tailwind utility classes (text-3xl = 30px, text-xl = 20px, etc.); exact px reflect Tailwind v4 defaults rather than explicit values.
• Letter-spacing for display (tracking-tight) and label (tracking-wider) are Tailwind defaults (-0.025em / 0.05em), not authored pixel values.
• The cobalt-deep and inset shadow recipes are described from the CSS; their exact perceived depth depends on the renderer.