Redesign panels, add 11 card fixes, new icons and app surfaces
Panel fixes: tall card row_span, room tab styling, vacuum card image+value, AC airflow labels, AC fan speed sections (auto 3-btn + manual 5-step slider), light subtitle fallback, curtain pane dividers, dimmable light presets, LED panel brightness + reorder. New assets: 34 ui-icons (climate modes, cover, effects, battery, led-strip, switch states), 3 logos, 90 app surface PNGs, design system specs (components, ux-mechanics, tokens). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan DanchevandClaude Opus 4.6 committed
1 parent
89ff17a3bc
commit
86191ba5f3
221 files changed
+6017
-1123
No files matched your search
@@ -0,0 +1,252 @@
|
||||
{
|
||||
"$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
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user