luma-home/design-system/tokens.json

{
  "$meta": {
    "name": "Luma Home",
    "version": 2,
    "units": "px at a logical 1920×1080 canvas",
    "source": "Luma — 10-foot redesign (Design canvas), 2026-10-27",
    "note": "Values are renderer-agnostic. Colours are sRGB; rgba alpha 0–1."
  },
  "screen": {
    "width": 1920,
    "height": 1080,
    "marginX": 84,
    "topNav": {
      "y": 36,
      "height": 72
    },
    "roomTabs": {
      "y": 124,
      "height": 60
    },
    "hintBar": {
      "x": 84,
      "bottom": 30
    }
  },
  "grid": {
    "x": 84,
    "y": 206,
    "width": 1752,
    "height": 756,
    "rows": 3,
    "gap": 18,
    "fourColumns": {
      "columns": 4,
      "cell": {
        "w": 424,
        "h": 240
      }
    },
    "threeColumns": {
      "columns": 3,
      "cell": {
        "w": 572,
        "h": 240
      }
    },
    "tallCard": {
      "h": 498,
      "note": "1×2 = two rows + one gap"
    }
  },
  "color": {
    "background": {
      "wallpaperFallback": "linear-gradient(160deg, #6D7F99 0%, #45526A 42%, #2B313C 100%)",
      "scrim": "rgba(8, 11, 18, 0.80)",
      "specBoard": "#161A21"
    },
    "card": {
      "fill": "rgba(34, 38, 46, 0.88)",
      "fillFocus": "rgba(54, 60, 72, 0.96)",
      "border": "rgba(255, 255, 255, 0.10)",
      "borderFocus": "rgba(255, 255, 255, 0.24)",
      "iconCircleOff": "rgba(255, 255, 255, 0.10)",
      "iconOff": "rgba(255, 255, 255, 0.80)",
      "iconOn": "#15181E",
      "valueOff": "rgba(255, 255, 255, 0.60)",
      "glowOn": "radial-gradient(circle at 42px 42px, <accent @ 38%>, transparent 72%)",
      "barTrack": "rgba(255, 255, 255, 0.14)",
      "lineOff": "rgba(255, 255, 255, 0.45)"
    },
    "panel": {
      "fill": "rgba(30, 34, 42, 0.98)",
      "control": "rgba(255, 255, 255, 0.10)",
      "controlSelectedFill": "<accent @ 26%>",
      "controlSelectedEdge": "inset 3px <accent>",
      "sectionLabel": "rgba(255, 255, 255, 0.72)",
      "rule": "rgba(255, 255, 255, 0.08)"
    },
    "text": {
      "primary": "#FFFFFF",
      "secondary": "rgba(255, 255, 255, 0.78)",
      "subtitle": "rgba(255, 255, 255, 0.72)",
      "tertiary": "rgba(255, 255, 255, 0.60)",
      "onLight": "#15181E",
      "tabActiveInk": "#1F2630"
    },
    "focus": {
      "ring": "rgba(255, 255, 255, 0.96)",
      "gap": "rgba(8, 11, 18, 0.85)",
      "gapInPanel": "#1E222A"
    },
    "nav": {
      "pill": "rgba(36, 40, 48, 0.90)",
      "activeTab": "rgba(240, 244, 247, 0.95)",
      "activeRoom": "rgba(255, 255, 255, 0.20)",
      "inactive": "rgba(255, 255, 255, 0.72)"
    },
    "accent": {
      "light": "#F5B85A",
      "lightWarmWhite": "#F7C27A",
      "heat": "#F06A4A",
      "cool": "#4C9BF0",
      "switch": "#7EB8DA",
      "lock": "#60C090",
      "curtain": "#DCD2B4",
      "led": "#E07A5F",
      "media": "#9B7DDB",
      "mediaLabel": "#B9A2EC",
      "vacuum": "#60C090",
      "warning": "#F2B84B",
      "effectPlaying": "#FF8A75",
      "aqGood": "#3DDC97",
      "aqFair": "#F2B84B",
      "aqPoor": "#FF6B5A"
    },
    "swatches": {
      "colour": [
        "#FF5A40",
        "#F0A050",
        "#F2D04B",
        "#3DDC97",
        "#4C9BF0",
        "#7B5BE0",
        "#E45AD8",
        "#FFFFFF"
      ],
      "white": {
        "2700 K": "#FFB46B",
        "3000 K": "#FFC98F",
        "4000 K": "#FFE2C0",
        "5000 K": "#FFF4E6",
        "6500 K": "#E3EEFF"
      }
    },
    "roomPhoto": {
      "gradient": "linear-gradient(180deg, rgba(8,11,18,0.78) 0%, rgba(8,11,18,0) 32%, rgba(8,11,18,0) 40%, rgba(8,11,18,0.84) 66%, rgba(8,11,18,0.94) 100%)",
      "darkFilter": "brightness(0.45) saturate(0.2)",
      "textShadow": "0 1px 6px rgba(0,0,0,0.75)"
    }
  },
  "type": {
    "family": "Inter (fallback: system sans)",
    "weights": {
      "regular": 400,
      "medium": 500,
      "semibold": 600,
      "bold": 700
    },
    "size": {
      "clock": 20,
      "topNav": 20,
      "roomTab": 17,
      "cardName": 19,
      "cardValue": 20,
      "cardSubtitle": 14,
      "cardFact": 14,
      "cardFactLabel": 12,
      "panelEyebrow": 16,
      "panelTitle": 34,
      "panelSection": 19,
      "panelValue": 19,
      "hint": 14,
      "hintKey": 11,
      "mediaTitleSmall": 19,
      "mediaTitleLarge": 24,
      "mediaArtistSmall": 15,
      "mediaArtistLarge": 17,
      "mediaStatus": 13,
      "panelState": 18,
      "panelHelp": 15,
      "panelSliderValue": 28,
      "panelButton": 20
    },
    "textScale": {
      "default": 1,
      "min": 1,
      "max": 1.6,
      "note": "User setting; multiply all type sizes."
    }
  },
  "size": {
    "cardPadding": 18,
    "cardRadius": 22,
    "iconCircle": 48,
    "icon": 24,
    "cardInnerGap": 14,
    "middleBandMargin": "12 0 10",
    "levelBar": 12,
    "colourStrip": 34,
    "sparkHeight": 64,
    "panel": {
      "width": 620,
      "height": 1080,
      "radius": 28,
      "padding": "56 56 48",
      "headerIcon": 56,
      "headerIconGlyph": 30,
      "sectionGap": 40,
      "labelToControl": 14,
      "sliderHeight": 72,
      "sliderRadius": 18,
      "buttonHeight": 64,
      "buttonRadius": 16,
      "buttonGap": 12,
      "listRowHeight": 54,
      "focusRingOffset": 5
    },
    "media": {
      "artSmall": 84,
      "artLarge": 220,
      "buttonSmall": 52,
      "buttonPlay": 62,
      "progress": 4
    },
    "focusRing": {
      "width": 4,
      "offset": 4,
      "cardScale": 1.04
    }
  },
  "shadow": {
    "card": "0 2px 8px rgba(0, 0, 0, 0.25)",
    "cardFocus": "0 16px 36px rgba(0, 0, 0, 0.50)",
    "panel": "0 24px 60px rgba(0, 0, 0, 0.50)"
  },
  "motion": {
    "focus": "120ms ease-out",
    "panelOpen": "200ms ease-out, slide from right",
    "bubbleFade": "1000ms after release"
  },
  "timing": {
    "holdThresholdMs": 400,
    "arrowRepeatDelayMs": 400,
    "arrowRepeatMs": 150,
    "stepDoubleAfterMs": 2000,
    "sendDebounceMs": 200,
    "confirmTimeoutMs": 5000,
    "errorHintMs": 4000,
    "volumePillMs": 1500,
    "seekStepMs": 300,
    "seekStepS": 10,
    "seekStepFastS": 30,
    "seekFastAfterMs": 2000,
    "previousRestartAfterS": 3,
    "volumeStepPct": 2
  },
  "airQuality": {
    "metric": "CO2 ppm",
    "goodBelow": 800,
    "poorAbove": 1200
  }
}