chore(01-design-tokens-rams-foundation-01): commit design baseline — Rams docs, mockups, agent skills

- Root Rams design docs (DESIGN.md, IDEAS.md) and GSD install-fix notes (GSD_FIX.md, gsd-fix.sh) - Four Telemetry Rams mockup screens + telemetry_rams/DESIGN.md (canonical token frontmatter) - .agents/ project skills (design-taste-frontend) + skills-lock.json - .gitignore: node_modules/dist/env secrets/OS junk; .planning stays local-only; Zone.Identifier scrubbed (9 files deleted)
2026-10-22 07:33:04 +08:00
parent d4ee39d08b
commit 506ff68976
54 changed files with 39105 additions and 0 deletions
@@ -0,0 +1,242 @@
+---
+name: Telemetry Rams
+colors:
+  surface: '#fff8f0'
+  surface-dim: '#e0d9cd'
+  surface-bright: '#fff8f0'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#faf3e6'
+  surface-container: '#f5ede0'
+  surface-container-high: '#efe7db'
+  surface-container-highest: '#e9e2d5'
+  on-surface: '#1e1b14'
+  on-surface-variant: '#564335'
+  inverse-surface: '#333028'
+  inverse-on-surface: '#f7f0e3'
+  outline: '#897363'
+  outline-variant: '#dcc1af'
+  surface-tint: '#914c00'
+  primary: '#914c00'
+  on-primary: '#ffffff'
+  primary-container: '#eb8008'
+  on-primary-container: '#522900'
+  inverse-primary: '#ffb77f'
+  secondary: '#5f5e5e'
+  on-secondary: '#ffffff'
+  secondary-container: '#e2dfde'
+  on-secondary-container: '#636262'
+  tertiary: '#676013'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#b7ad59'
+  on-tertiary-container: '#464000'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#ffdcc3'
+  primary-fixed-dim: '#ffb77f'
+  on-primary-fixed: '#2f1500'
+  on-primary-fixed-variant: '#6e3900'
+  secondary-fixed: '#e5e2e1'
+  secondary-fixed-dim: '#c8c6c5'
+  on-secondary-fixed: '#1c1b1b'
+  on-secondary-fixed-variant: '#474746'
+  tertiary-fixed: '#f0e58a'
+  tertiary-fixed-dim: '#d3c972'
+  on-tertiary-fixed: '#1f1c00'
+  on-tertiary-fixed-variant: '#4e4800'
+  background: '#fff8f0'
+  on-background: '#1e1b14'
+  surface-variant: '#e9e2d5'
+  signal-orange: '#EB8008'
+  matte-black: '#1A1A1A'
+  soft-beige: '#D9D2C6'
+  functional-red: '#ED3F1C'
+  olive-green: '#736B1E'
+  chassis-subtle: '#CCC4B5'
+  surface-dark: '#121212'
+  pure-white: '#FFFFFF'
+typography:
+  display-lg:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: 52px
+    letterSpacing: -0.04em
+  display-lg-mobile:
+    fontFamily: Space Grotesk
+    fontSize: 36px
+    fontWeight: '700'
+    lineHeight: 40px
+    letterSpacing: -0.03em
+  headline-lg:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 38px
+    letterSpacing: -0.03em
+  headline-lg-mobile:
+    fontFamily: Space Grotesk
+    fontSize: 24px
+    fontWeight: '700'
+    lineHeight: 30px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Space Grotesk
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 26px
+    letterSpacing: -0.02em
+  headline-sm:
+    fontFamily: Space Grotesk
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: 22px
+    letterSpacing: -0.01em
+  body-lg:
+    fontFamily: Geist
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+    letterSpacing: -0.01em
+  body-md:
+    fontFamily: Geist
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+    letterSpacing: 0em
+  body-sm:
+    fontFamily: Geist
+    fontSize: 12px
+    fontWeight: '400'
+    lineHeight: 16px
+    letterSpacing: 0.01em
+  label-lg:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: '700'
+    lineHeight: 18px
+    letterSpacing: 0.06em
+  label-md:
+    fontFamily: Geist
+    fontSize: 12px
+    fontWeight: '600'
+    lineHeight: 16px
+    letterSpacing: 0.04em
+  label-sm:
+    fontFamily: Geist
+    fontSize: 10px
+    fontWeight: '700'
+    lineHeight: 12px
+    letterSpacing: 0.08em
+  telemetry-num:
+    fontFamily: Space Grotesk
+    fontSize: 28px
+    fontWeight: '700'
+    lineHeight: 32px
+    letterSpacing: -0.03em
+spacing:
+  gutter: 1rem
+  gutter-desktop: 1.5rem
+  margin: 1rem
+  margin-desktop: 2rem
+  space-xs: 0.25rem
+  space-sm: 0.5rem
+  space-md: 1rem
+  space-lg: 1.5rem
+  space-xl: 2rem
+  space-2xl: 3rem
+---
+
+## Brand & Style
+
+This design system synthesizes avant-garde telematics with Dieter Rams' ten principles of good design—centered rigorously around the tenet of "Weniger, aber besser" (Less, but better). It bridges the functional precision of Braun audio and measuring hardware with the high-velocity demands of tactical urban navigation.
+
+The aesthetic strips away gratuitous skeuomorphism, gamified gloss, and distracting animations in favor of an uncompromising, matte-finished Bauhaus instrument panel. Every interface surface behaves like machined anodized housing or etched composite casing: stark, orthogonal, and devoid of rounded ornament. Visual emphasis relies exclusively on geometric hierarchy, stark black-and-white tonal contrast, and intentional, high-visibility signal accents calibrated for instantaneous glanceability at speed.
+
+The target user values austere functional clarity, mechanical reliability, and cognitive calm in chaotic environments. The emotional posture is calculated, objective, unhurried, and authoritative.
+
+## Colors
+
+The chromatic structure embodies physical calibration controls found on precision industrial equipment. 
+
+- **Primary (`#EB8008` / Signal Orange):** The primary kinetic indicator. Reserved for active navigation vectors, primary interactive triggers, current vehicle telemetry, and dynamic route recalculations. It commands immediate optical priority against neutral surfaces.
+- **Secondary (`#1A1A1A` / Matte Black):** The anchoring structure. Used for fundamental borders, primary typographic weights, technical readouts, and inverted industrial heads-up displays (HUDs).
+- **Tertiary (`#736B1E` / Olive Green):** Utilitarian confirmation. Applied to verified route segments, clear operational conditions, speed verification zones, and system telemetry equilibrium.
+- **Neutral (`#D9D2C6` / Soft Beige):** The foundational substrate. Evokes tactile unbleached matte instrument housings. It reduces retinal strain compared to harsh stark whites while preserving maximum contrast against pure black graphic marks.
+
+### Functional Application Rules
+- **Functional Red (`#ED3F1C`):** Strict warning state. Used exclusively for hazards, critical telemetry alerts, road obstructions, and terminal errors.
+- **Grayscale Map Grounding:** Cartographic vectors and tile layers render in calibrated, low-saturation monochrome grays (`#D9D2C6` to `#1A1A1A`) so that route guidance (`#EB8008`) and hazard events (`#ED3F1C`) remain hyper-legible without visual competition.
+
+## Typography
+
+Typography functions as structural architecture rather than superficial styling.
+
+- **Headline Font (`Space Grotesk`):** Chosen for its technical constructivist origins, rigid metric proportion, and deliberate mechanical joints. Headings and telemetry counters use tight tracking to emphasize solid form.
+- **Body & Functional Font (`Geist`):** Engineered for ultra-clean digital rendering, neutral density, and absolute legibility. It handles dense navigational directives, distance metrics, status feeds, and command-line structures with zero friction.
+- **Case System:** Labels, metrics, status states, and command triggers employ uppercase typesetting with expanded letter spacing (`0.04em` to `0.08em`) to mimic stamped DIN hardware labels and industrial control markings.
+
+## Layout & Spacing
+
+The layout is governed by an unyielding 8px geometric grid system derived from Dieter Rams' strict modular audio systems:
+- All dimensions, element paddings, margins, and layout offsets must evaluate to multiples of `4px` or `8px`.
+- Interfaces adopt a modular instrument panel structure. On handheld screens and chat-based panels, viewports partition into clear horizontal register bands:
+  - **Top Register:** Navigation horizon, compass bearing, status telemetry.
+  - **Center Register:** High-contrast graphic map tile or maneuver direction block.
+  - **Lower Register:** Modular interaction dock, metric cards, action controls.
+
+### Grid & Breakpoints
+- **Compact Viewport (< 640px):** Single-column structural grid with `margin: 1rem` (16px) and `gutter: 1rem` (16px). Cards and modules stack vertically with flush-edge precision.
+- **Medium Viewport (640px – 1024px):** 6-column fluid structure. Modular sidecar displays navigation data while maps claim equal structural weight.
+- **Expanded Desktop / In-Dashboard Display (> 1024px):** 12-column rigid grid with `margin-desktop: 2rem` (32px) and `gutter-desktop: 1.5rem` (24px). Control consoles pin to a fixed 380px instrument column, leaving the remaining surface area for continuous telemetry.
+
+## Elevation & Depth
+
+True to the Dieter Rams philosophy, this design system rejects faux 3D dimensionality, dropped blurs, fuzzy shadows, and translucent frosted glass. 
+
+### Depth Mechanics
+- **Physical Planarity:** Hierarchy is expressed strictly through structural boundaries, edge weights, and matte value zoning. Surfaces are completely opaque.
+- **Machined Inset Lines:** Structural separation uses crisp `1px` or `2px` solid rules (`#1A1A1A` over `#D9D2C6` or `#CCC4B5`).
+- **Surface Nesting:** Secondary panels and telemetry modules sit flush inside the primary chassis, differentiated solely through background shifting (e.g., `#D9D2C6` transitioning into `#CCC4B5` or dark panel inversions using `#1A1A1A`).
+- **Tactile Active Depressions:** Interactive items do not rise into floating space. When pressed or activated, elements invert colors (e.g., `#D9D2C6` background with `#1A1A1A` text switches instantly to `#1A1A1A` background with `#EB8008` text) or display a solid offset line (1px hard shadow at 0-degree blur), simulating a mechanical microswitch settling into its housing.
+
+## Shapes
+
+The design system operates with **absolute zero roundedness** (`0px` corner radius). 
+
+Every card, button, modal box, notification banner, status badge, and graphic container terminates in strict, sharp 90-degree right angles. This geometry reinforces the physical metaphor of precision aluminum casings, high-tensile switchgear, and architectural schematics. 
+
+Dividers, lines, and focus brackets are drawn with unyielding straight paths. Glyphs, direction arrows, and iconography are constructed using uniform stroke weights (2px standard) on pure orthogonal and 45-degree angled baselines.
+
+## Components
+
+### Buttons & Trigger Controls
+- **Primary Action (e.g., "COMMENCE ROUTE", "CONFIRM HAZARD"):** Background `#EB8008`, label `#1A1A1A` in `label-lg` uppercase, border `2px solid #1A1A1A`, 0px radius. Hover/focus: background `#1A1A1A`, text `#EB8008`.
+- **Secondary Action (e.g., "ALTERNATIVES", "CALIBRATE"):** Background `#D9D2C6`, label `#1A1A1A`, border `2px solid #1A1A1A`. Hover/focus: background `#CCC4B5`.
+- **Command State / Bot Quick Buttons:** Monospaced-inspired Geist labels encased in a 1px solid `#1A1A1A` frame, padding `0.5rem 1rem`.
+
+### Telemetry Cards & Module Panels
+- **Structure:** Crisp `1px solid #1A1A1A` perimeter border, `#D9D2C6` matte background, sharp corners.
+- **Header Plate:** Separated by a horizontal `1px solid #1A1A1A` divider. Contains category in `label-sm` uppercase and an alphanumeric reference badge (e.g., `SEC-04 // SPEED`).
+- **Content Block:** High-contrast data point in `telemetry-num` typography paired with adjacent directional indicator glyphs.
+
+### Chips & Event Tags
+- **Configuration:** Monolithic rectangular blocks, no rounding.
+- **Traffic State:** Background `#EB8008`, text `#1A1A1A`, `label-sm`.
+- **Hazard / Incident:** Background `#ED3F1C`, text `#FFFFFF`, `label-sm`.
+- **Operational / Safe:** Background `#736B1E`, text `#FFFFFF`, `label-sm`.
+
+### Input Fields & Search Bars
+- **Frame:** `#D9D2C6` background with continuous `2px solid #1A1A1A` perimeter, 0px radius.
+- **Typography:** `body-md` in `Geist`, dark matte text.
+- **Focus Indicator:** 3px thick border in `#EB8008`, zero glow, zero blur. Input caret is a non-blinking solid block rectangle.
+
+### Checkboxes & Toggle Switches
+- **Checkboxes:** Exact 18x18px squares with a `2px solid #1A1A1A` border. Checked state renders a solid centered 8x8px square in `#EB8008` (no checkmark glyph; pure geometric state).
+- **Physical Two-Way Toggles:** Horizontal dual-box module (`[ OFF | ON ]`). Active side fills solidly with `#1A1A1A` and inverted text; inactive side displays muted background `#CCC4B5`.
+
+### Navigation Heads-Up Display (Maneuver Strip)
+- **Chassis:** Inverted `#1A1A1A` container spanning full width across the upper viewport.
+- **Graphic Vector:** 32x32px sharp directional turn arrow in `#EB8008` with `3px` stroke width.
+- **Maneuver Typography:** `headline-md` in `#D9D2C6` describing street designation, accompanied by remaining distance set in `Space Grotesk` bold.