replica: recon, architecture, design tokens, build log, reference and clone screenshots
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,528 @@
|
||||
{
|
||||
"_about": "Wetter-Klon tokens. Roles measured by eye from replica/screens/ref-01..04 (Pixel Weather, 2024-25). Values are own approximations, no brand colour copied. Names stay, values change in /replica-brand. Check: python3 ~/.claude/skills/replica-design/contrast.py replica/design/tokens.json",
|
||||
"color": {
|
||||
"bg": "#f8f9ff",
|
||||
"surface": "#ffffff",
|
||||
"surface-container": "#eceef4",
|
||||
"surface-container-high": "#e1e3ea",
|
||||
"border": "#c3c6cf",
|
||||
"border-input": "#73777f",
|
||||
"text": "#191c20",
|
||||
"text-muted": "#43474e",
|
||||
"accent": "#2a5ea8",
|
||||
"on-accent": "#ffffff",
|
||||
"accent-container": "#d6e3ff",
|
||||
"on-accent-container": "#001b3e",
|
||||
"danger": "#ba1a1a",
|
||||
"warning": "#8a5100",
|
||||
"success": "#2e6b30",
|
||||
"dark-bg": "#111318",
|
||||
"dark-surface": "#1d2024",
|
||||
"dark-surface-container": "#272a2f",
|
||||
"dark-border": "#43474e",
|
||||
"dark-border-input": "#8d9199",
|
||||
"dark-text": "#e2e2e9",
|
||||
"dark-text-muted": "#c3c6cf",
|
||||
"dark-accent": "#a9c7ff",
|
||||
"dark-on-accent": "#003063",
|
||||
"dark-danger": "#ffb4ab",
|
||||
"dark-warning": "#ffb870",
|
||||
"scene-clear-day-top": "#7cc4ef",
|
||||
"scene-clear-day-bottom": "#bfe3f7",
|
||||
"scene-clear-night-top": "#3d4f9a",
|
||||
"scene-clear-night-bottom": "#5b4f8f",
|
||||
"scene-cloudy-day-top": "#c9cdd2",
|
||||
"scene-cloudy-day-bottom": "#dfe2e5",
|
||||
"scene-rain-top": "#2e3d4f",
|
||||
"scene-rain-bottom": "#5a6b7d",
|
||||
"scene-snow-top": "#7c8ea3",
|
||||
"scene-snow-bottom": "#d4dde6",
|
||||
"scene-storm-top": "#1f1a33",
|
||||
"scene-storm-bottom": "#4a3f63",
|
||||
"scene-fog-top": "#8a929b",
|
||||
"scene-fog-bottom": "#c4c9ce",
|
||||
"on-scene": "#ffffff",
|
||||
"on-scene-muted": "#e8edf3",
|
||||
"on-scene-dark": "#14181d",
|
||||
"scene-card": "#2a3644",
|
||||
"scene-card-light": "#f2f5f8",
|
||||
"alert-minor": "#fff2b8",
|
||||
"on-alert-minor": "#3d2f00",
|
||||
"alert-severe": "#ffdbc8",
|
||||
"on-alert-severe": "#4a1a00",
|
||||
"alert-extreme": "#93000a",
|
||||
"on-alert-extreme": "#ffffff",
|
||||
"aqi-good": "#2e7d32",
|
||||
"aqi-moderate": "#a06a00",
|
||||
"aqi-bad": "#c62828",
|
||||
"uv-high": "#b34700",
|
||||
"card": "#fdf8f3",
|
||||
"on-card": "#1f1b17",
|
||||
"on-card-muted": "#5a524b",
|
||||
"dark-card": "#1f1714",
|
||||
"dark-on-card": "#ede0db",
|
||||
"dark-on-card-muted": "#c4b6b0",
|
||||
"fill-primary": "#d3e3fd",
|
||||
"on-fill-primary": "#0b2a55",
|
||||
"fill-secondary": "#e9ddff",
|
||||
"on-fill-secondary": "#2a1a4d",
|
||||
"fill-tertiary": "#c8e6c2",
|
||||
"on-fill-tertiary": "#0f3a12",
|
||||
"dark-fill-primary": "#a8c7fa",
|
||||
"dark-on-fill-primary": "#062e6f",
|
||||
"dark-fill-tertiary": "#2d5a27",
|
||||
"dark-on-fill-tertiary": "#b7f0ac",
|
||||
"dark-fill-olive": "#3e4a1e",
|
||||
"pill": "#f1ebe5",
|
||||
"dark-pill": "#2b221e",
|
||||
"pill-selected": "#a8c7fa",
|
||||
"on-pill-selected": "#0b2a55",
|
||||
"now-chip": "#4e4038",
|
||||
"on-now-chip": "#ffffff",
|
||||
"precip-text": "#2a5ea8",
|
||||
"dark-precip-text": "#a8c7fa",
|
||||
"nowcast-dot": "#2e7d32",
|
||||
"icon-sun": "#ffb02e",
|
||||
"icon-sun-core": "#ff9a1f",
|
||||
"icon-moon": "#a9c4ff",
|
||||
"icon-cloud": "#f4f6f9",
|
||||
"icon-cloud-shade": "#cfd6df",
|
||||
"icon-cloud-dark": "#9aa5b3",
|
||||
"icon-drop": "#3d7bf0",
|
||||
"icon-snow": "#ffffff",
|
||||
"icon-snow-outline": "#9fb3cc",
|
||||
"icon-bolt": "#ffc93c",
|
||||
"icon-fog": "#c3cad3",
|
||||
"scene-glow-sun": "#fff3c4",
|
||||
"scene-cloud": "#ffffff",
|
||||
"scene-hill": "#9fc5e6",
|
||||
"dark-scene-hill": "#2f3f78",
|
||||
"range-cold": "#6fa8ff",
|
||||
"range-warm": "#ffb02e",
|
||||
"aqi-bar-1": "#4fd1c5",
|
||||
"aqi-bar-2": "#9ccc65",
|
||||
"aqi-bar-3": "#ffd54f",
|
||||
"aqi-bar-4": "#ff8a65",
|
||||
"aqi-bar-5": "#e53935",
|
||||
"aqi-bar-6": "#8e24aa",
|
||||
"uv-dot-low": "#5ccf8a",
|
||||
"uv-dot-off": "#6b5a52"
|
||||
},
|
||||
"pairs": [
|
||||
[
|
||||
"text",
|
||||
"bg"
|
||||
],
|
||||
[
|
||||
"text",
|
||||
"surface"
|
||||
],
|
||||
[
|
||||
"text",
|
||||
"surface-container"
|
||||
],
|
||||
[
|
||||
"text",
|
||||
"surface-container-high"
|
||||
],
|
||||
[
|
||||
"text-muted",
|
||||
"bg"
|
||||
],
|
||||
[
|
||||
"text-muted",
|
||||
"surface"
|
||||
],
|
||||
[
|
||||
"text-muted",
|
||||
"surface-container"
|
||||
],
|
||||
[
|
||||
"on-accent",
|
||||
"accent"
|
||||
],
|
||||
[
|
||||
"on-accent-container",
|
||||
"accent-container"
|
||||
],
|
||||
[
|
||||
"accent",
|
||||
"bg"
|
||||
],
|
||||
[
|
||||
"accent",
|
||||
"surface"
|
||||
],
|
||||
[
|
||||
"danger",
|
||||
"surface"
|
||||
],
|
||||
[
|
||||
"warning",
|
||||
"surface"
|
||||
],
|
||||
[
|
||||
"success",
|
||||
"surface"
|
||||
],
|
||||
[
|
||||
"border-input",
|
||||
"surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"accent",
|
||||
"surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"dark-text",
|
||||
"dark-bg"
|
||||
],
|
||||
[
|
||||
"dark-text",
|
||||
"dark-surface"
|
||||
],
|
||||
[
|
||||
"dark-text",
|
||||
"dark-surface-container"
|
||||
],
|
||||
[
|
||||
"dark-text-muted",
|
||||
"dark-bg"
|
||||
],
|
||||
[
|
||||
"dark-text-muted",
|
||||
"dark-surface"
|
||||
],
|
||||
[
|
||||
"dark-text-muted",
|
||||
"dark-surface-container"
|
||||
],
|
||||
[
|
||||
"dark-on-accent",
|
||||
"dark-accent"
|
||||
],
|
||||
[
|
||||
"dark-accent",
|
||||
"dark-surface"
|
||||
],
|
||||
[
|
||||
"dark-danger",
|
||||
"dark-surface"
|
||||
],
|
||||
[
|
||||
"dark-warning",
|
||||
"dark-surface"
|
||||
],
|
||||
[
|
||||
"dark-border-input",
|
||||
"dark-surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-clear-night-top"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-clear-night-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-rain-top"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-rain-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-storm-top"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-storm-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-clear-day-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-cloudy-day-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-snow-top"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-snow-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-fog-top"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-fog-bottom"
|
||||
],
|
||||
[
|
||||
"on-scene",
|
||||
"scene-card"
|
||||
],
|
||||
[
|
||||
"on-scene-muted",
|
||||
"scene-card"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-card-light"
|
||||
],
|
||||
[
|
||||
"on-alert-minor",
|
||||
"alert-minor"
|
||||
],
|
||||
[
|
||||
"on-alert-severe",
|
||||
"alert-severe"
|
||||
],
|
||||
[
|
||||
"on-alert-extreme",
|
||||
"alert-extreme"
|
||||
],
|
||||
[
|
||||
"aqi-good",
|
||||
"surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"aqi-moderate",
|
||||
"surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"aqi-bad",
|
||||
"surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"uv-high",
|
||||
"surface",
|
||||
"ui"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-clear-day-top"
|
||||
],
|
||||
[
|
||||
"on-scene-dark",
|
||||
"scene-cloudy-day-top"
|
||||
],
|
||||
[
|
||||
"on-card",
|
||||
"card"
|
||||
],
|
||||
[
|
||||
"on-card-muted",
|
||||
"card"
|
||||
],
|
||||
[
|
||||
"dark-on-card",
|
||||
"dark-card"
|
||||
],
|
||||
[
|
||||
"dark-on-card-muted",
|
||||
"dark-card"
|
||||
],
|
||||
[
|
||||
"on-fill-primary",
|
||||
"fill-primary"
|
||||
],
|
||||
[
|
||||
"on-fill-secondary",
|
||||
"fill-secondary"
|
||||
],
|
||||
[
|
||||
"on-fill-tertiary",
|
||||
"fill-tertiary"
|
||||
],
|
||||
[
|
||||
"dark-on-fill-primary",
|
||||
"dark-fill-primary"
|
||||
],
|
||||
[
|
||||
"dark-on-fill-tertiary",
|
||||
"dark-fill-tertiary"
|
||||
],
|
||||
[
|
||||
"dark-on-card",
|
||||
"dark-fill-olive"
|
||||
],
|
||||
[
|
||||
"on-card",
|
||||
"pill"
|
||||
],
|
||||
[
|
||||
"dark-on-card",
|
||||
"dark-pill"
|
||||
],
|
||||
[
|
||||
"on-pill-selected",
|
||||
"pill-selected"
|
||||
],
|
||||
[
|
||||
"on-now-chip",
|
||||
"now-chip"
|
||||
],
|
||||
[
|
||||
"precip-text",
|
||||
"card"
|
||||
],
|
||||
[
|
||||
"precip-text",
|
||||
"pill"
|
||||
],
|
||||
[
|
||||
"dark-precip-text",
|
||||
"dark-card"
|
||||
],
|
||||
[
|
||||
"dark-precip-text",
|
||||
"dark-pill"
|
||||
],
|
||||
[
|
||||
"nowcast-dot",
|
||||
"card",
|
||||
"ui"
|
||||
]
|
||||
],
|
||||
"font": {
|
||||
"sans": "Roboto Flex (OFL), system default fallback",
|
||||
"display": "Roboto Flex, weight 700-800, tight tracking (-2%) for the hero temperature",
|
||||
"mono": "Roboto Mono"
|
||||
},
|
||||
"type": {
|
||||
"label-sm": {
|
||||
"size": 11,
|
||||
"line": 16,
|
||||
"weight": 500
|
||||
},
|
||||
"label": {
|
||||
"size": 12,
|
||||
"line": 16,
|
||||
"weight": 500
|
||||
},
|
||||
"body-sm": {
|
||||
"size": 14,
|
||||
"line": 20,
|
||||
"weight": 400
|
||||
},
|
||||
"body": {
|
||||
"size": 16,
|
||||
"line": 24,
|
||||
"weight": 400
|
||||
},
|
||||
"title": {
|
||||
"size": 18,
|
||||
"line": 24,
|
||||
"weight": 500
|
||||
},
|
||||
"headline": {
|
||||
"size": 24,
|
||||
"line": 32,
|
||||
"weight": 500
|
||||
},
|
||||
"metric": {
|
||||
"size": 32,
|
||||
"line": 40,
|
||||
"weight": 500
|
||||
},
|
||||
"display": {
|
||||
"size": 112,
|
||||
"line": 112,
|
||||
"weight": 700
|
||||
},
|
||||
"display-widget": {
|
||||
"size": 44,
|
||||
"line": 48,
|
||||
"weight": 400
|
||||
},
|
||||
"day-range": {
|
||||
"size": 56,
|
||||
"line": 60,
|
||||
"weight": 600
|
||||
},
|
||||
"hero-condition": {
|
||||
"size": 22,
|
||||
"line": 28,
|
||||
"weight": 400
|
||||
},
|
||||
"card-title": {
|
||||
"size": 16,
|
||||
"line": 24,
|
||||
"weight": 500
|
||||
}
|
||||
},
|
||||
"space": [
|
||||
0,
|
||||
2,
|
||||
4,
|
||||
8,
|
||||
12,
|
||||
16,
|
||||
20,
|
||||
24,
|
||||
32,
|
||||
48
|
||||
],
|
||||
"radius": {
|
||||
"xs": 8,
|
||||
"sm": 12,
|
||||
"md": 16,
|
||||
"lg": 24,
|
||||
"xl": 28,
|
||||
"widget": 24,
|
||||
"pill": 999,
|
||||
"card": 28,
|
||||
"day-pill": 24
|
||||
},
|
||||
"shape": {
|
||||
"wind": "circle container, inner rounded-triangle blob rotated to wind direction",
|
||||
"uv": "scalloped 12-wave cookie, dots on a lower arc show the UV band",
|
||||
"visibility": "circle container, inner wavy-edged circle fill",
|
||||
"humidity": "rounded rect, wave-topped fill whose height = humidity",
|
||||
"pressure": "circle container, 270° arc gauge",
|
||||
"sun": "rounded rect, filled sine hill above a horizon line, night part darker",
|
||||
"aqi": "rounded rect, gradient bar with knob",
|
||||
"now-chip": "8-point soft cookie behind current-hour temp",
|
||||
"day": "vertical capsule per day (10-day row scrolls horizontally)"
|
||||
},
|
||||
"elevation": {
|
||||
"card": 0,
|
||||
"card-drag": 6,
|
||||
"sheet": 1,
|
||||
"fab": 3
|
||||
},
|
||||
"motion": {
|
||||
"spring-fast": "dampingRatio 0.9, stiffness 1400",
|
||||
"spring-default": "dampingRatio 0.8, stiffness 380",
|
||||
"spring-bouncy": "dampingRatio 0.6, stiffness 300",
|
||||
"scene-crossfade": "600ms",
|
||||
"fast": "120ms",
|
||||
"base": "250ms"
|
||||
},
|
||||
"layout": {
|
||||
"gutter": 16,
|
||||
"card-gap": 12,
|
||||
"grid-compact": 2,
|
||||
"grid-expanded": 4,
|
||||
"two-pane-from": "600dp",
|
||||
"hero-height": "~45% of viewport",
|
||||
"app-bar": 64,
|
||||
"hero": "centered column: condition, temp + inline icon, feels like, high · low",
|
||||
"card-padding": 20,
|
||||
"detail-grid": "2 columns, circles left / rects right, equal squares"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user