replica(uhr): design tokens and component specs (39 pairs AA)

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-17 14:59:51 +02:00
parent c163a6d578
commit 887299a3a7
4 changed files with 289 additions and 0 deletions
@@ -0,0 +1,78 @@
+{
+  "_about": "Uhr tokens. Roles read by eye from replica/uhr/screens/ref-01..07 (Pixel Clock, dark first). Own values, no brand colour copied; on Android 12+ dynamic colour (wallpaper) replaces the accent roles. Check: python3 ~/.claude/skills/replica-design/contrast.py replica/uhr/design/tokens.json",
+  "color": {
+    "bg": "#f8f9ff", "surface": "#ffffff", "card": "#eef0f6", "card-high": "#e2e5ec",
+    "border": "#c3c6cf", "border-input": "#73777f",
+    "text": "#191c20", "text-muted": "#43474e", "text-off": "#5c6068",
+    "accent": "#2f5ea8", "on-accent": "#ffffff",
+    "accent-container": "#d6e3ff", "on-accent-container": "#001b3e",
+    "fab": "#a8c7fa", "on-fab": "#0b2a55",
+    "chip-on": "#2f5ea8", "on-chip-on": "#ffffff",
+    "secondary-pill": "#dfe2eb", "on-secondary-pill": "#191c20",
+    "stop": "#ffd8e4", "on-stop": "#4a1426",
+    "danger": "#ba1a1a",
+    "nav": "#eceef4", "nav-indicator": "#d6e3ff",
+
+    "dark-bg": "#111318", "dark-surface": "#111318", "dark-card": "#1d2024", "dark-card-high": "#272a2f",
+    "dark-border": "#43474e", "dark-border-input": "#8d9199",
+    "dark-text": "#e2e2e9", "dark-text-muted": "#c3c6cf", "dark-text-off": "#9a9ea6",
+    "dark-accent": "#a8c7fa", "dark-on-accent": "#062e6f",
+    "dark-accent-container": "#244a80", "dark-on-accent-container": "#d6e3ff",
+    "dark-fab": "#a8c7fa", "dark-on-fab": "#062e6f",
+    "dark-chip-on": "#a8c7fa", "dark-on-chip-on": "#062e6f",
+    "dark-secondary-pill": "#3a3d43", "dark-on-secondary-pill": "#e2e2e9",
+    "dark-stop": "#f2b8c9", "dark-on-stop": "#4a1426",
+    "dark-danger": "#ffb4ab",
+    "dark-nav": "#1d2024", "dark-nav-indicator": "#3a3f47",
+
+    "ring-bg": "#1e5a52", "ring-on": "#b4f1e6", "ring-track": "#2b6e65", "ring-thumb": "#3f9a7f", "on-ring-thumb": "#ffffff",
+    "timer-track": "#3a3d43", "timer-progress": "#7ec4a8",
+    "night-text": "#c4433a", "night-bg": "#000000"
+  },
+  "pairs": [
+    ["text","bg"],["text","card"],["text","card-high"],["text-muted","bg"],["text-muted","card"],["text-off","card"],
+    ["on-accent","accent"],["on-accent-container","accent-container"],["on-fab","fab"],["on-chip-on","chip-on"],
+    ["on-secondary-pill","secondary-pill"],["on-stop","stop"],["accent","card"],["danger","card"],["text","nav"],["text","nav-indicator"],
+    ["border-input","surface","ui"],
+    ["dark-text","dark-bg"],["dark-text","dark-card"],["dark-text","dark-card-high"],["dark-text-muted","dark-bg"],["dark-text-muted","dark-card"],["dark-text-off","dark-card"],
+    ["dark-on-accent","dark-accent"],["dark-on-accent-container","dark-accent-container"],["dark-on-fab","dark-fab"],["dark-on-chip-on","dark-chip-on"],
+    ["dark-on-secondary-pill","dark-secondary-pill"],["dark-on-stop","dark-stop"],["dark-accent","dark-card"],["dark-danger","dark-card"],
+    ["dark-text","dark-nav"],["dark-text","dark-nav-indicator"],["dark-border-input","dark-card","ui"],
+    ["ring-on","ring-bg"],["ring-on","ring-track"],["on-ring-thumb","ring-thumb","large"],
+    ["timer-progress","dark-card","ui"],["night-text","night-bg","large"]
+  ],
+  "font": {
+    "sans": "Roboto Flex (OFL), system fallback",
+    "display": "Roboto Flex, weight 500-600, tabular numbers, for alarm times",
+    "clock": "Roboto Flex, weight 300-400 for big clocks and the ringing screen",
+    "mono": "tabular figures (fontFeatureSettings tnum) instead of a mono font for the stopwatch"
+  },
+  "type": {
+    "label-sm": {"size": 12, "line": 16, "weight": 500},
+    "label": {"size": 14, "line": 20, "weight": 500},
+    "body-sm": {"size": 14, "line": 20, "weight": 400},
+    "body": {"size": 16, "line": 24, "weight": 400},
+    "title": {"size": 22, "line": 28, "weight": 400},
+    "headline": {"size": 28, "line": 36, "weight": 400},
+    "alarm-time": {"size": 56, "line": 60, "weight": 600},
+    "alarm-ampm": {"size": 20, "line": 24, "weight": 600},
+    "timer-time": {"size": 44, "line": 48, "weight": 400},
+    "clock-big": {"size": 88, "line": 92, "weight": 400},
+    "stopwatch": {"size": 72, "line": 76, "weight": 500},
+    "ringing": {"size": 104, "line": 108, "weight": 400}
+  },
+  "space": [0, 2, 4, 8, 12, 16, 20, 24, 32, 48],
+  "radius": {"xs": 8, "sm": 12, "md": 16, "lg": 24, "card": 28, "pill": 999, "nav-indicator": 16},
+  "shape": {
+    "fab": "circle 96dp (large, centred above the nav bar)",
+    "stopwatch-primary": "pill 72dp tall, full width",
+    "timer-ring": "circle stroke 6dp",
+    "day-chip": "circle 36dp"
+  },
+  "motion": {
+    "card-expand": "spring dampingRatio 0.85 stiffness 380",
+    "slide-act": "spring back dampingRatio 0.7",
+    "fast": "120ms", "base": "250ms"
+  },
+  "layout": {"gutter": 16, "card-gap": 8, "nav-height": 80, "fab-bottom": 16, "card-padding": 20}
+}