{
  "_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",
    "widget-ocean-light-bg": "#cce4f0",
    "widget-ocean-light-on": "#0f2733",
    "widget-ocean-light-accent": "#20546f",
    "widget-ocean-light-panel": "#f9fafb",
    "widget-ocean-light-onpanel": "#192124",
    "widget-ocean-light-badge": "#a8d1e6",
    "widget-ocean-light-onbadge": "#0f2733",
    "widget-ocean-dark-bg": "#194257",
    "widget-ocean-dark-on": "#dbecf5",
    "widget-ocean-dark-accent": "#b0d5e8",
    "widget-ocean-dark-panel": "#0e1315",
    "widget-ocean-dark-onpanel": "#e7ecef",
    "widget-ocean-dark-badge": "#1f516b",
    "widget-ocean-dark-onbadge": "#dfeef6",
    "widget-forest-light-bg": "#d2e9da",
    "widget-forest-light-on": "#162d1d",
    "widget-forest-light-accent": "#2e603f",
    "widget-forest-light-panel": "#f9fbfa",
    "widget-forest-light-onpanel": "#1b221d",
    "widget-forest-light-badge": "#b3dbc0",
    "widget-forest-light-onbadge": "#162d1d",
    "widget-forest-dark-bg": "#244c32",
    "widget-forest-dark-on": "#e0f0e5",
    "widget-forest-dark-accent": "#badec6",
    "widget-forest-dark-panel": "#101411",
    "widget-forest-dark-onpanel": "#e8edea",
    "widget-forest-dark-badge": "#2d5d3d",
    "widget-forest-dark-onbadge": "#e3f2e8",
    "widget-sun-light-bg": "#f7e4c5",
    "widget-sun-light-on": "#3a2808",
    "widget-sun-light-accent": "#7d5612",
    "widget-sun-light-panel": "#fbfaf9",
    "widget-sun-light-onpanel": "#272117",
    "widget-sun-light-badge": "#f1d29d",
    "widget-sun-light-onbadge": "#3a2808",
    "widget-sun-dark-bg": "#62430e",
    "widget-sun-dark-on": "#f9edd7",
    "widget-sun-dark-accent": "#f2d6a6",
    "widget-sun-dark-panel": "#17130d",
    "widget-sun-dark-onpanel": "#f0ece5",
    "widget-sun-dark-badge": "#785311",
    "widget-sun-dark-onbadge": "#faefdb",
    "widget-lavender-light-bg": "#dbcfed",
    "widget-lavender-light-on": "#1f1230",
    "widget-lavender-light-accent": "#422768",
    "widget-lavender-light-panel": "#faf9fb",
    "widget-lavender-light-onpanel": "#1e1a23",
    "widget-lavender-light-badge": "#c3aee0",
    "widget-lavender-light-onbadge": "#1f1230",
    "widget-lavender-dark-bg": "#341f51",
    "widget-lavender-dark-on": "#e6def2",
    "widget-lavender-dark-accent": "#c8b5e3",
    "widget-lavender-dark-panel": "#110f15",
    "widget-lavender-dark-onpanel": "#eae7ee",
    "widget-lavender-dark-badge": "#402664",
    "widget-lavender-dark-onbadge": "#e9e1f4",
    "widget-graphite-light-bg": "#dbdde1",
    "widget-graphite-light-on": "#1e2124",
    "widget-graphite-light-accent": "#42464d",
    "widget-graphite-light-panel": "#fafafa",
    "widget-graphite-light-onpanel": "#1e1e1f",
    "widget-graphite-light-badge": "#c2c6cb",
    "widget-graphite-light-onbadge": "#1e2124",
    "widget-graphite-dark-bg": "#34373d",
    "widget-graphite-dark-on": "#e6e8ea",
    "widget-graphite-dark-accent": "#c8cbd0",
    "widget-graphite-dark-panel": "#111212",
    "widget-graphite-dark-onpanel": "#eaebeb",
    "widget-graphite-dark-badge": "#3f444a",
    "widget-graphite-dark-onbadge": "#e9eaec"
  },
  "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"
    ],
    [
      "widget-ocean-light-on",
      "widget-ocean-light-bg"
    ],
    [
      "widget-ocean-light-accent",
      "widget-ocean-light-bg"
    ],
    [
      "widget-ocean-light-onpanel",
      "widget-ocean-light-panel"
    ],
    [
      "widget-ocean-light-onbadge",
      "widget-ocean-light-badge"
    ],
    [
      "widget-ocean-dark-on",
      "widget-ocean-dark-bg"
    ],
    [
      "widget-ocean-dark-accent",
      "widget-ocean-dark-bg"
    ],
    [
      "widget-ocean-dark-onpanel",
      "widget-ocean-dark-panel"
    ],
    [
      "widget-ocean-dark-onbadge",
      "widget-ocean-dark-badge"
    ],
    [
      "widget-forest-light-on",
      "widget-forest-light-bg"
    ],
    [
      "widget-forest-light-accent",
      "widget-forest-light-bg"
    ],
    [
      "widget-forest-light-onpanel",
      "widget-forest-light-panel"
    ],
    [
      "widget-forest-light-onbadge",
      "widget-forest-light-badge"
    ],
    [
      "widget-forest-dark-on",
      "widget-forest-dark-bg"
    ],
    [
      "widget-forest-dark-accent",
      "widget-forest-dark-bg"
    ],
    [
      "widget-forest-dark-onpanel",
      "widget-forest-dark-panel"
    ],
    [
      "widget-forest-dark-onbadge",
      "widget-forest-dark-badge"
    ],
    [
      "widget-sun-light-on",
      "widget-sun-light-bg"
    ],
    [
      "widget-sun-light-accent",
      "widget-sun-light-bg"
    ],
    [
      "widget-sun-light-onpanel",
      "widget-sun-light-panel"
    ],
    [
      "widget-sun-light-onbadge",
      "widget-sun-light-badge"
    ],
    [
      "widget-sun-dark-on",
      "widget-sun-dark-bg"
    ],
    [
      "widget-sun-dark-accent",
      "widget-sun-dark-bg"
    ],
    [
      "widget-sun-dark-onpanel",
      "widget-sun-dark-panel"
    ],
    [
      "widget-sun-dark-onbadge",
      "widget-sun-dark-badge"
    ],
    [
      "widget-lavender-light-on",
      "widget-lavender-light-bg"
    ],
    [
      "widget-lavender-light-accent",
      "widget-lavender-light-bg"
    ],
    [
      "widget-lavender-light-onpanel",
      "widget-lavender-light-panel"
    ],
    [
      "widget-lavender-light-onbadge",
      "widget-lavender-light-badge"
    ],
    [
      "widget-lavender-dark-on",
      "widget-lavender-dark-bg"
    ],
    [
      "widget-lavender-dark-accent",
      "widget-lavender-dark-bg"
    ],
    [
      "widget-lavender-dark-onpanel",
      "widget-lavender-dark-panel"
    ],
    [
      "widget-lavender-dark-onbadge",
      "widget-lavender-dark-badge"
    ],
    [
      "widget-graphite-light-on",
      "widget-graphite-light-bg"
    ],
    [
      "widget-graphite-light-accent",
      "widget-graphite-light-bg"
    ],
    [
      "widget-graphite-light-onpanel",
      "widget-graphite-light-panel"
    ],
    [
      "widget-graphite-light-onbadge",
      "widget-graphite-light-badge"
    ],
    [
      "widget-graphite-dark-on",
      "widget-graphite-dark-bg"
    ],
    [
      "widget-graphite-dark-accent",
      "widget-graphite-dark-bg"
    ],
    [
      "widget-graphite-dark-onpanel",
      "widget-graphite-dark-panel"
    ],
    [
      "widget-graphite-dark-onbadge",
      "widget-graphite-dark-badge"
    ]
  ],
  "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"
  }
}