Implement production vertical slice foundation

Design-Proposal/ransom_s_wake_v3/DESIGN.md

@@ -0,0 +1,139 @@
+---
+name: Ransom's Wake V3
+colors:
+  surface: '#09141e'
+  surface-dim: '#09141e'
+  surface-bright: '#2f3a46'
+  surface-container-lowest: '#040f19'
+  surface-container-low: '#111d27'
+  surface-container: '#15212b'
+  surface-container-high: '#202b36'
+  surface-container-highest: '#2b3641'
+  on-surface: '#d8e4f2'
+  on-surface-variant: '#bacac6'
+  inverse-surface: '#d8e4f2'
+  inverse-on-surface: '#26313d'
+  outline: '#859491'
+  outline-variant: '#3c4a47'
+  surface-tint: '#3adccc'
+  primary: '#66fdec'
+  on-primary: '#003732'
+  primary-container: '#40e0d0'
+  on-primary-container: '#006058'
+  inverse-primary: '#006a62'
+  secondary: '#ffe2ab'
+  on-secondary: '#402d00'
+  secondary-container: '#ffbf00'
+  on-secondary-container: '#6d5000'
+  tertiary: '#ffdfdc'
+  on-tertiary: '#690007'
+  tertiary-container: '#ffb9b2'
+  on-tertiary-container: '#a7191c'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#61f9e9'
+  primary-fixed-dim: '#3adccc'
+  on-primary-fixed: '#00201d'
+  on-primary-fixed-variant: '#005049'
+  secondary-fixed: '#ffdfa0'
+  secondary-fixed-dim: '#fbbc00'
+  on-secondary-fixed: '#261a00'
+  on-secondary-fixed-variant: '#5c4300'
+  tertiary-fixed: '#ffdad6'
+  tertiary-fixed-dim: '#ffb4ac'
+  on-tertiary-fixed: '#410003'
+  on-tertiary-fixed-variant: '#92030f'
+  background: '#09141e'
+  on-background: '#d8e4f2'
+  surface-variant: '#2b3641'
+typography:
+  headline-lg:
+    fontFamily: Inter
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: '1.2'
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Inter
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.2'
+  body-lg:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-sm:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  label-caps:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '700'
+    lineHeight: '1'
+    letterSpacing: 0.1em
+  data-lg:
+    fontFamily: JetBrains Mono
+    fontSize: 18px
+    fontWeight: '500'
+    lineHeight: '1'
+  data-md:
+    fontFamily: JetBrains Mono
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1'
+spacing:
+  unit: 4px
+  gutter: 24px
+  margin: 32px
+  panel-padding: 16px
+---
+
+## Brand & Style
+The design system for this product is rooted in **Industrial Maritime** aesthetics, specifically the utilitarian and heavy-duty nature of mid-century naval equipment. The UI evokes a sense of "historical inquiry" and "slow tension," prioritizing functional credibility over modern digital sleekness.
+
+The design style is a hybrid of **Tactile/Skeuomorphic** and **Minimalist Brutalism**. Interfaces should feel like physical control consoles—machined, painted, and worn by environment. Every element must appear to have a physical weight and a specific purpose, avoiding any unnecessary "sci-fi" decorative clutter. Surfaces mimic heavy gauge steel, while interactions feel deliberate and mechanical.
+
+## Colors
+The palette is dominated by the **Deep Petrol Blue (#05101a)** base, representing the oppressive depth of the ocean and painted steel hulls.
+
+- **Primary (Desaturated Cyan):** Reserved for active states, selection markers, and focused elements. It should feel like a functional backlight or a steady signal.
+- **Secondary (Amber):** Used for safety notices, warnings, and secondary call-outs. It mimics filament-bulb indicators.
+- **Tertiary (Muted Red):** Strictly for critical failures, danger, and irreversible actions.
+- **Neutrals:** Range from deep navy to weathered greys, used for structural borders and panel segregation.
+
+## Typography
+Typography is split between the institutional **Inter** for narrative and labels, and **JetBrains Mono** for technical readouts and numerical data.
+
+To support full French localization, line heights are generous to accommodate frequent diacritics (é, à, ç). Labels should often use uppercase with increased tracking to mimic stamped metal nameplates. Headlines are heavy and condensed, appearing as if stenciled onto surfaces.
+
+## Layout & Spacing
+The layout follows a **Fixed Grid** philosophy, organizing content into rigid "Technical Panels." This mimics the modular construction of a submarine bulkhead.
+
+- **Grid:** 12-column system for desktop, collapsing to 4-column for mobile.
+- **Margins:** Heavy outer margins (32px+) to create a sense of being "contained" within a vessel.
+- **Panel Logic:** Use thick 2px borders to define separate functional areas. Content should not float; it must be housed within a defined container.
+
+## Elevation & Depth
+Depth is conveyed through **Tonal Layering** and physical metaphors rather than soft shadows.
+- **Base Level:** Deep Petrol (#05101a).
+- **Raised Panels:** Slightly lighter blue-grey with a "beveled" edge look achieved via a 1px top-light highlight and a 1px bottom-dark shadow.
+- **Glass Elements:** Use high-blur backdrop filters (30px+) with a subtle "condensation" noise texture to simulate thick gauge viewports.
+- **Recessed Areas:** Use inner shadows to simulate meters or inputs set deep into the dashboard.
+
+## Shapes
+The shape language is strictly **Sharp (0px)** or exceptionally low-radius (2px) to emphasize the industrial, machined nature of the equipment.
+
+Avoid circles where possible; use octagons or chamfered corners for "round" elements like gauges or circular buttons. This reinforces the "angular shapes" requirement and maintains the mechanical aesthetic.
+
+## Components
+- **Buttons:** Large, blocky, and high-contrast. The "Active" state must be indicated by a 2px solid border in Primary Cyan (#40e0d0), never just a glow. Include a "pressed" state that shifts the element down 2px.
+- **Nameplates:** Use the `label-caps` style on a slightly lighter grey background with visible "screw head" icons in the corners.
+- **Input Fields:** Recessed rectangles with a mono-font cursor. Use a subtle "scanline" overlay to simulate a low-refresh rate CRT monitor.
+- **Selection Markers:** Use a vertical or horizontal "physical" bar next to the selected item in the Primary color.
+- **Status Indicators:** Small square "lamps" that toggle between off (dark) and Secondary Amber or Tertiary Red.
+- **Data Cards:** Heavy borders, clear headers using the stenciled headline style, and mono-space values for legibility.